// CRITICAL'use client'; import { useEffect } from 'react';import { Moon, Sun, Monitor } from 'lucide-react';import { motion, AnimatePresence } from 'framer-motion';import { useAppStore } from '@/store'; type Theme = 'light' | 'dark' | 'system'; export function ThemeToggle() {  const theme = useAppStore((state) => state.themeMode) as Theme;  const setThemeMode = useAppStore((state) => state.setThemeMode);  const resolvedTheme = useAppStore((state) => state.resolvedTheme);  const setResolvedTheme = useAppStore((state) => state.setResolvedTheme);  const isOpen = useAppStore((state) => state.themeMenuOpen);  const setThemeMenuOpen = useAppStore((state) => state.setThemeMenuOpen);   useEffect(() => {    // Load saved theme preference    const saved = localStorage.getItem('theme') as Theme | null;    if (saved) {      setThemeMode(saved);    }     // Determine initial resolved theme    const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';    const initialTheme = saved === 'system' ? systemTheme : (saved || systemTheme);    setResolvedTheme(initialTheme);    applyTheme(initialTheme);  }, [setResolvedTheme, setThemeMode]);   useEffect(() => {    // Listen for system theme changes    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');    const handleChange = (e: MediaQueryListEvent) => {      if (theme === 'system') {        const newTheme = e.matches ? 'dark' : 'light';        setResolvedTheme(newTheme);        applyTheme(newTheme);      }    };     mediaQuery.addEventListener('change', handleChange);    return () => mediaQuery.removeEventListener('change', handleChange);  }, [setResolvedTheme, theme]);   const applyTheme = (newTheme: 'light' | 'dark') => {    const root = document.documentElement;     if (newTheme === 'dark') {      root.style.setProperty('--background', '#1a1a1a');      root.style.setProperty('--foreground', '#ededed');      root.style.setProperty('--card', '#242424');      root.style.setProperty('--card-foreground', '#ededed');      root.style.setProperty('--popover', '#242424');      root.style.setProperty('--popover-foreground', '#ededed');      root.style.setProperty('--primary', '#f3f4f6');      root.style.setProperty('--primary-foreground', '#1a1a1a');      root.style.setProperty('--secondary', '#2a2a2a');      root.style.setProperty('--secondary-foreground', '#ededed');      root.style.setProperty('--muted', '#2a2a2a');      root.style.setProperty('--muted-foreground', '#d4d4d4');      root.style.setProperty('--accent', '#2a2a2a');      root.style.setProperty('--accent-foreground', '#f3f4f6');      root.style.setProperty('--destructive', '#7f1d1d');      root.style.setProperty('--destructive-foreground', '#f3f4f6');      root.style.setProperty('--border', '#2a2a2a');      root.style.setProperty('--input', '#2a2a2a');      root.style.setProperty('--ring', '#52525b');      root.style.setProperty('--success', '#22c55e');      root.style.setProperty('--warning', '#eab308');    } else {      root.style.setProperty('--background', '#ffffff');      root.style.setProperty('--foreground', '#171717');      root.style.setProperty('--card', '#f5f5f5');      root.style.setProperty('--card-foreground', '#171717');      root.style.setProperty('--popover', '#ffffff');      root.style.setProperty('--popover-foreground', '#171717');      root.style.setProperty('--primary', '#171717');      root.style.setProperty('--primary-foreground', '#fafafa');      root.style.setProperty('--secondary', '#e5e5e5');      root.style.setProperty('--secondary-foreground', '#171717');      root.style.setProperty('--muted', '#f5f5f5');      root.style.setProperty('--muted-foreground', '#737373');      root.style.setProperty('--accent', '#f5f5f5');      root.style.setProperty('--accent-foreground', '#171717');      root.style.setProperty('--destructive', '#dc2626');      root.style.setProperty('--destructive-foreground', '#fafafa');      root.style.setProperty('--border', '#e5e5e5');      root.style.setProperty('--input', '#e5e5e5');      root.style.setProperty('--ring', '#d4d4d8');      root.style.setProperty('--success', '#16a34a');      root.style.setProperty('--warning', '#ca8a04');    }  };   const changeTheme = (newTheme: Theme) => {    setThemeMode(newTheme);    localStorage.setItem('theme', newTheme);    setThemeMenuOpen(false);     const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';    const newResolvedTheme = newTheme === 'system' ? systemTheme : newTheme;    setResolvedTheme(newResolvedTheme);    applyTheme(newResolvedTheme);  };   const themes: { value: Theme; icon: typeof Sun; label: string }[] = [    { value: 'light', icon: Sun, label: 'Light' },    { value: 'dark', icon: Moon, label: 'Dark' },    { value: 'system', icon: Monitor, label: 'System' },  ];   const CurrentIcon = theme === 'light' ? Sun : theme === 'dark' ? Moon : Monitor;   return (    <div className="relative">      <motion.button        whileHover={{ scale: 1.05 }}        whileTap={{ scale: 0.95 }}        onClick={() => setThemeMenuOpen(!isOpen)}        className="p-2 rounded-lg hover:bg-[var(--accent)] transition-colors text-[#b0a8a0] hover:text-[var(--foreground)]"        title="Toggle theme"      >        <motion.div          key={resolvedTheme}          initial={{ rotate: -180, opacity: 0 }}          animate={{ rotate: 0, opacity: 1 }}          exit={{ rotate: 180, opacity: 0 }}          transition={{ duration: 0.3, type: 'spring', stiffness: 200, damping: 20 }}        >          <CurrentIcon className="h-5 w-5" />        </motion.div>      </motion.button>       <AnimatePresence>        {isOpen && (          <>            {/* Backdrop */}            <div              className="fixed inset-0 z-40"              onClick={() => setThemeMenuOpen(false)}            />             {/* Menu */}            <motion.div              initial={{ opacity: 0, scale: 0.95, y: -10 }}              animate={{ opacity: 1, scale: 1, y: 0 }}              exit={{ opacity: 0, scale: 0.95, y: -10 }}              transition={{ duration: 0.15 }}              className="absolute right-0 top-full mt-2 w-40 bg-[var(--card)] border border-[var(--border)] rounded-xl shadow-xl z-50 overflow-hidden"            >              <div className="p-1.5">                {themes.map(({ value, icon: Icon, label }) => (                  <motion.button                    key={value}                    whileHover={{ backgroundColor: 'var(--accent)' }}                    whileTap={{ scale: 0.98 }}                    onClick={() => changeTheme(value)}                    className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors ${                      theme === value                        ? 'bg-[var(--accent)] text-[var(--primary)]'                        : 'text-[#b0a8a0] hover:text-[var(--foreground)]'                    }`}                  >                    <Icon className="h-4 w-4" />                    <span>{label}</span>                    {theme === value && (                      <motion.div                        layoutId="activeTheme"                        className="ml-auto w-1.5 h-1.5 rounded-full bg-[var(--primary)]"                        transition={{ type: 'spring', stiffness: 500, damping: 30 }}                      />                    )}                  </motion.button>                ))}              </div>            </motion.div>          </>        )}      </AnimatePresence>    </div>  );}