/**
 * 主题提供者组件
 * 作者: 阿瑞
 * 功能: 在应用程序顶层管理主题状态，自动应用主题到DOM，并通过Context向子组件提供主题状态
 * 版本: 1.6
 */
"use client";

import { useEffect, useState, createContext, useContext } from "react";
import { useTheme as useCustomTheme, useApplyTheme } from "@/hooks";
import { StorageEnum } from "@/store/settingStore";

/**
 * 主题上下文类型定义
 */
interface ThemeContextType {
  isDarkMode: boolean;
  isMounted: boolean;
  toggleTheme: () => void;
}

/**
 * 创建主题上下文
 */
const ThemeContext = createContext<ThemeContextType>({
  isDarkMode: false,
  isMounted: false,
  toggleTheme: () => {}
});

/**
 * 使用主题钩子，用于在组件中访问主题状态
 */
export const useTheme = () => useContext(ThemeContext);

interface ThemeProviderProps {
  children: React.ReactNode;
}

/**
 * 主题提供者组件
 * 在应用程序根级别应用主题样式，并通过Context向子组件提供主题状态
 */
export function ThemeProvider({ children }: ThemeProviderProps) {
  // 使用自定义钩子获取主题状态和操作
  const { themeMode, isDarkMode, toggleThemeMode } = useCustomTheme();
  
  // 用于跟踪客户端水合状态
  const [mounted, setMounted] = useState(false);
  
  // 客户端水合完成后设置状态
  useEffect(() => {
    setMounted(true);
  }, []);
  
  // 使用自定义钩子应用主题到DOM (只在客户端执行)
  useApplyTheme();
  
  // 监听其他标签页的localStorage变化
  useEffect(() => {
    if (!mounted) return;
    
    // 处理存储事件 - 当其他标签页修改localStorage时触发
    const handleStorageChange = (event: StorageEvent) => {
      if (event.key === StorageEnum.Settings) {
        try {
          // 解析新的设置值
          const newSettings = event.newValue ? JSON.parse(event.newValue) : null;
          if (newSettings && newSettings.themeMode && newSettings.themeMode !== themeMode) {
            console.log('检测到其他标签页主题变化:', newSettings.themeMode);
            window.location.reload(); // 简单处理：当检测到其他标签页更改主题时刷新页面
          }
        } catch (error) {
          console.error('解析存储的主题设置失败:', error);
        }
      }
    };
    
    // 添加存储事件监听器
    window.addEventListener('storage', handleStorageChange);
    
    // 清理事件监听器
    return () => {
      window.removeEventListener('storage', handleStorageChange);
    };
  }, [mounted, themeMode]);
  
  // 如果未水合完成，返回加载状态或初始内容
  if (!mounted) {
    // 水合前的加载状态，渲染一个简单的placeholder
    return (
      <div className="theme-loading">
        {children}
      </div>
    );
  }
  
  // 创建提供给Context的值
  const contextValue: ThemeContextType = {
    isDarkMode,
    isMounted: mounted,
    toggleTheme: toggleThemeMode
  };
  
  // 水合完成后，将主题状态通过Context提供给子组件
  return (
    <ThemeContext.Provider value={contextValue}>
      {children}
    </ThemeContext.Provider>
  );
}

/**
 * 主题切换按钮组件
 * 可在任何页面中使用的便捷组件
 */
export function ThemeToggle() {
  // 使用Context中的主题状态和切换方法
  const { isDarkMode, isMounted, toggleTheme } = useTheme();
  
  // 如果尚未挂载，渲染一个占位符，确保服务器和客户端初始渲染一致
  if (!isMounted) {
    return (
      <button 
        className="theme-toggle-btn flex items-center justify-center w-10 h-10 rounded-full bg-white/10 backdrop-blur-sm hover:bg-white/20 transition-colors"
        aria-label="切换主题"
      >
        <span className="opacity-0">🔄</span>
      </button>
    );
  }
  
  // 客户端水合后的渲染
  return (
    <button 
      onClick={toggleTheme}
      className="theme-toggle-btn flex items-center justify-center w-10 h-10 rounded-full bg-white/10 backdrop-blur-sm hover:bg-white/20 transition-colors"
      aria-label="切换主题"
    >
      {isDarkMode ? (
        <span className="text-yellow-300">🔆</span>
      ) : (
        <span className="text-indigo-600">🌙</span>
      )}
    </button>
  );
}

// 提供一个获取当前主题的工具函数，简化组件使用
export function useIsDarkMode() {
  const { isDarkMode, isMounted } = useTheme();
  return { isDarkMode, isMounted };
}

export default ThemeProvider;