'use client';

import React, { createContext, useContext, useEffect, useState, useCallback } from 'react';

/**
 * EN: Theme mode type
 * VI: Kiểu chế độ theme
 */
export type ThemeMode = 'light' | 'dark' | 'system';

/**
 * EN: Theme context value interface
 * VI: Interface giá trị context theme
 */
interface ThemeContextValue {
  /** EN: Current theme mode / VI: Chế độ theme hiện tại */
  theme: ThemeMode;
  /** EN: Resolved theme (light or dark) / VI: Theme đã được resolve (light hoặc dark) */
  resolvedTheme: 'light' | 'dark';
  /** EN: Set theme mode / VI: Đặt chế độ theme */
  setTheme: (theme: ThemeMode) => void;
  /** EN: Toggle between light and dark / VI: Chuyển đổi giữa light và dark */
  toggleTheme: () => void;
}

/**
 * EN: Theme context
 * VI: Context theme
 */
const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);

/**
 * EN: Get system preference for dark mode
 * VI: Lấy preference hệ thống cho dark mode
 */
const getSystemTheme = (): 'light' | 'dark' => {
  if (typeof window === 'undefined') return 'dark';
  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
};

/**
 * EN: Apply theme class to document
 * VI: Áp dụng class theme vào document
 */
const applyTheme = (theme: 'light' | 'dark') => {
  if (typeof window === 'undefined') return;

  const root = document.documentElement;
  root.classList.remove('light', 'dark');
  root.classList.add(theme);
  root.setAttribute('data-theme', theme);
};

/**
 * EN: Theme provider component
 * VI: Component provider theme
 *
 * @param children - Child components / Components con
 */
export function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [theme, setThemeState] = useState<ThemeMode>('dark');
  const [resolvedTheme, setResolvedTheme] = useState<'light' | 'dark'>(() => {
    if (typeof window === 'undefined') return 'dark';

    // EN: Load from localStorage or default to dark
    // VI: Load từ localStorage hoặc mặc định là dark
    const stored = localStorage.getItem('theme') as ThemeMode | null;
    if (stored && (stored === 'light' || stored === 'dark' || stored === 'system')) {
      return stored === 'system' ? getSystemTheme() : stored;
    }
    return 'dark';
  });

  // EN: Initialize theme from localStorage
  // VI: Khởi tạo theme từ localStorage
  useEffect(() => {
    if (typeof window === 'undefined') return;

    const stored = localStorage.getItem('theme') as ThemeMode | null;
    if (stored && (stored === 'light' || stored === 'dark' || stored === 'system')) {
      setThemeState(stored);
      const resolved = stored === 'system' ? getSystemTheme() : stored;
      setResolvedTheme(resolved);
      applyTheme(resolved);
    } else {
      // EN: Default to dark theme
      // VI: Mặc định là dark theme
      setResolvedTheme('dark');
      applyTheme('dark');
    }
  }, []);

  // EN: Listen to system theme changes
  // VI: Lắng nghe thay đổi theme hệ thống
  useEffect(() => {
    if (typeof window === 'undefined' || theme !== 'system') return;

    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
    const handleChange = (e: MediaQueryListEvent) => {
      const newTheme = e.matches ? 'dark' : 'light';
      setResolvedTheme(newTheme);
      applyTheme(newTheme);
    };

    mediaQuery.addEventListener('change', handleChange);
    return () => mediaQuery.removeEventListener('change', handleChange);
  }, [theme]);

  // EN: Apply theme when resolved theme changes
  // VI: Áp dụng theme khi resolved theme thay đổi
  useEffect(() => {
    applyTheme(resolvedTheme);
  }, [resolvedTheme]);

  /**
   * EN: Set theme mode and persist to localStorage
   * VI: Đặt chế độ theme và lưu vào localStorage
   */
  const setTheme = useCallback((newTheme: ThemeMode) => {
    setThemeState(newTheme);

    if (typeof window !== 'undefined') {
      localStorage.setItem('theme', newTheme);
    }

    const resolved = newTheme === 'system' ? getSystemTheme() : newTheme;
    setResolvedTheme(resolved);
    applyTheme(resolved);
  }, []);

  /**
   * EN: Toggle between light and dark themes
   * VI: Chuyển đổi giữa theme light và dark
   */
  const toggleTheme = useCallback(() => {
    const currentResolved = resolvedTheme;
    const newTheme = currentResolved === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
  }, [resolvedTheme, setTheme]);

  // EN: Keyboard shortcut: Ctrl+Shift+T to toggle theme
  // VI: Phím tắt: Ctrl+Shift+T để chuyển theme
  useEffect(() => {
    if (typeof window === 'undefined') return;

    const handleKeyPress = (e: KeyboardEvent) => {
      if (e.ctrlKey && e.shiftKey && e.key === 'T') {
        e.preventDefault();
        toggleTheme();
      }
    };

    window.addEventListener('keydown', handleKeyPress);
    return () => window.removeEventListener('keydown', handleKeyPress);
  }, [toggleTheme]);

  const value: ThemeContextValue = {
    theme,
    resolvedTheme,
    setTheme,
    toggleTheme,
  };

  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
}

/**
 * EN: Hook to access theme context
 * VI: Hook để truy cập theme context
 *
 * @throws Error if used outside ThemeProvider
 */
export function useTheme(): ThemeContextValue {
  const context = useContext(ThemeContext);
  if (context === undefined) {
    throw new Error('useTheme must be used within a ThemeProvider / useTheme phải được sử dụng trong ThemeProvider');
  }
  return context;
}