OpenFlare/frontend/lib/theme/context.tsx

'use client';

import React, {
  createContext,
  useCallback,
  useContext,
  useEffect,
  useState,
} from 'react';
import { useTheme as useNextTheme } from 'next-themes';
import type { Theme } from './types';
import { getStoredThemeId, setStoredThemeId } from './storage';
import { getAvailableThemes } from './parser';

/**
 * 主题上下文类型定义
 */
interface ThemeContextValue {
  /** 所有可用主题列表 */
  themes: Theme[];
  /** 当前激活的主题对象 */
  currentTheme: Theme | null;
  /** 当前激活的主题 ID */
  currentThemeId: string | null;
  /** 设置主题的方法 */
  setTheme: (themeId: string) => void;
  /** 是否正在加载主题 */
  isLoading: boolean;
}

const ThemeContext = createContext<ThemeContextValue | null>(null);

/**
 * 自定义主题 Hook
 * 必须在 CustomThemeProvider 内部使用
 */
export function useCustomTheme() {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error('useCustomTheme must be used within CustomThemeProvider');
  }
  return context;
}

/**
 * 自定义主题提供者
 * 管理用户选择的界面外观主题（配色方案），独立于明暗模式
 */
export function CustomThemeProvider({
  children,
}: {
  children: React.ReactNode;
}) {
  const [themes, setThemes] = useState<Theme[]>([]);
  const [currentThemeId, setCurrentThemeId] = useState<string | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [mounted, setMounted] = useState(false);
  const { resolvedTheme } = useNextTheme();

  /* 加载所有可用主题 */
  useEffect(() => {
    async function loadThemes() {
      const availableThemes = await getAvailableThemes();
      const storedId = getStoredThemeId();

      setThemes(availableThemes);
      setCurrentThemeId(storedId);
      setIsLoading(false);
    }

    loadThemes();
  }, []);

  /* 确保组件已挂载，避免水合不一致 */
  useEffect(() => {
    setMounted(true);
  }, []);

  /**
   * 将主题颜色应用到 DOM
   * @param theme - 要应用的主题
   * @param isDark - 是否为暗色模式
   */
  const applyThemeColors = useCallback((theme: Theme, isDark: boolean) => {
    if (typeof window === 'undefined') return;

    const root = document.documentElement;
    const colors = isDark ? theme.colors.dark : theme.colors.light;

    /* 应用所有 CSS 变量到根元素 */
    Object.entries(colors).forEach(([key, value]) => {
      root.style.setProperty(`--${key}`, value);
    });
  }, []);

  /* 当主题 ID 或模式改变时，重新应用颜色 */
  useEffect(() => {
    if (!mounted || !currentThemeId || themes.length === 0) return;

    const theme = themes.find((t) => t.id === currentThemeId);
    if (!theme) return;

    /* 使用 next-themes 的 resolvedTheme，它会自动处理系统偏好 */
    const isDark = resolvedTheme === 'dark';
    applyThemeColors(theme, isDark);
  }, [currentThemeId, resolvedTheme, themes, mounted, applyThemeColors]);

  /**
   * 设置主题
   * @param themeId - 要设置的主题 ID
   */
  const setTheme = useCallback(
    (themeId: string) => {
      const theme = themes.find((t) => t.id === themeId);
      if (!theme) return;

      setCurrentThemeId(themeId);
      setStoredThemeId(themeId);

      /* 根据当前解析的主题模式计算是否为暗色 */
      const isDark = resolvedTheme === 'dark';
      applyThemeColors(theme, isDark);
    },
    [themes, resolvedTheme, applyThemeColors],
  );

  const currentTheme = themes.find((t) => t.id === currentThemeId) || null;

  return (
    <ThemeContext.Provider
      value={{
        themes,
        currentTheme,
        currentThemeId,
        setTheme,
        isLoading,
      }}
    >
      {children}
    </ThemeContext.Provider>
  );
}