import { useEffect, useState, useCallback } from 'react';

export type Theme = 'light' | 'dark';

export interface UseThemeReturn {
  theme: Theme;
  isDark: boolean;
  toggleTheme: () => void;
  setTheme: (theme: Theme) => void;
}

/**
 * 获取初始主题
 * 优先从 DOM 上读取父窗口可能已设置的主题，避免闪烁
 */
function getInitialTheme(): Theme {
  if (typeof document === 'undefined') return 'light';

  // 检查 document.documentElement 上是否已有主题类或属性
  const dataTheme = document.documentElement.getAttribute('data-theme');
  if (dataTheme === 'dark' || dataTheme === 'light') {
    return dataTheme;
  }

  // 检查类名
  if (document.documentElement.classList.contains('dark')) {
    return 'dark';
  }
  if (document.documentElement.classList.contains('light')) {
    return 'light';
  }

  // 默认 light
  return 'light';
}

/**
 * 监听父窗口的主题切换消息
 */
export function useTheme(): UseThemeReturn {
  const [theme, setThemeState] = useState<Theme>(getInitialTheme);

  const applyThemeToDOM = useCallback((newTheme: Theme) => {
    if (typeof document === 'undefined') return;

    // 移除旧的主题类
    document.documentElement.classList.remove('light', 'dark');
    // 添加新的主题类
    document.documentElement.classList.add(newTheme);
    // 设置data-theme属性
    document.documentElement.setAttribute('data-theme', newTheme);
    // 保存到 localStorage
    localStorage.setItem('theme', newTheme);
  }, []);

  const setTheme = useCallback((newTheme: Theme) => {
    setThemeState(newTheme);
    applyThemeToDOM(newTheme);
  }, [applyThemeToDOM]);

  const toggleTheme = useCallback(() => {
    const newTheme = theme === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
  }, [theme, setTheme]);

  useEffect(() => {
    // 监听来自父窗口的主题切换消息
    const handleMessage = (event: MessageEvent) => {
      // 安全性检查：可根据需要验证 event.origin
      if (event.data && typeof event.data.theme === 'string') {
        const newTheme = event.data.theme as Theme;
        if (newTheme === 'light' || newTheme === 'dark') {
          setThemeState(newTheme);
          applyThemeToDOM(newTheme);
        }
      }
    };

    window.addEventListener('message', handleMessage);

    // 初始化时应用当前主题到DOM（确保首次渲染正确）
    const initialTheme = getInitialTheme();
    applyThemeToDOM(initialTheme);

    return () => {
      window.removeEventListener('message', handleMessage);
    };
  }, [applyThemeToDOM]);

  return {
    theme,
    isDark: theme === 'dark',
    toggleTheme,
    setTheme
  };
}
