'use client';

import { useEffect } from 'react';
import { useTheme } from 'next-themes';

export function ThemeColorManager() {
  const { theme, systemTheme } = useTheme();

  useEffect(() => {
    const updateThemeColor = () => {
      const currentTheme = theme === 'system' ? systemTheme : theme;
      const meta = document.querySelector('meta[name="theme-color"]');
      
      if (!meta) {
        const newMeta = document.createElement('meta');
        newMeta.name = 'theme-color';
        document.head.appendChild(newMeta);
      }
      
      const themeColor = currentTheme === 'dark' 
        ? 'hsl(30 15% 8%)' // 深色模式背景色
        : 'hsl(0 0% 98%)'; // 浅色模式背景色
      
      document.querySelector('meta[name="theme-color"]')?.setAttribute('content', themeColor);
    };

    // Update on mount and theme change
    updateThemeColor();

    // Listen for system theme changes
    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
    mediaQuery.addEventListener('change', updateThemeColor);

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

  return null;
}