novalon-website/src/components/ui/theme-toggle.tsx

'use client';

import { useTheme } from '@/contexts/theme-context';
import { Sun, Moon, Monitor } from 'lucide-react';
import { useCallback, useState, useRef, useEffect } from 'react';

const THEME_OPTIONS = [
  { value: 'light' as const, label: '浅色', icon: Sun },
  { value: 'dark' as const, label: '深色', icon: Moon },
  { value: 'system' as const, label: '跟随系统', icon: Monitor },
];

export function ThemeToggle() {
  const { theme, setTheme } = useTheme();
  const [open, setOpen] = useState(false);
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    function handleClick(e: MouseEvent) {
      if (ref.current && !ref.current.contains(e.target as Node)) {
        setOpen(false);
      }
    }
    document.addEventListener('mousedown', handleClick);
    return () => document.removeEventListener('mousedown', handleClick);
  }, []);

  const handleSelect = useCallback(
    (value: 'light' | 'dark' | 'system') => {
      setTheme(value);
      setOpen(false);
    },
    [setTheme],
  );

  const CurrentIcon =
    THEME_OPTIONS.find((o) => o.value === theme)?.icon ?? Monitor;

  return (
    <div ref={ref} className="relative">
      <button
        onClick={() => setOpen(!open)}
        className="flex items-center justify-center w-9 h-9 rounded-lg text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-hover)] transition-colors"
        aria-label="切换主题"
        aria-expanded={open}
      >
        <CurrentIcon className="w-[18px] h-[18px]" strokeWidth={1.8} />
      </button>

      {open && (
        <div className="absolute right-0 top-full mt-2 w-36 rounded-lg border border-[var(--color-border-primary)] bg-[var(--color-bg-primary)] shadow-lg py-1 z-50">
          {THEME_OPTIONS.map((opt) => {
            const Icon = opt.icon;
            const isActive = theme === opt.value;
            return (
              <button
                key={opt.value}
                onClick={() => handleSelect(opt.value)}
                className={`flex items-center gap-2.5 w-full px-3 py-2 text-sm transition-colors ${isActive
                    ? 'text-[var(--color-brand-primary)] bg-[var(--color-brand-primary-bg)]'
                    : 'text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-hover)]'
                  }`}
              >
                <Icon className="w-4 h-4" strokeWidth={1.8} />
                <span>{opt.label}</span>
              </button>
            );
          })}
        </div>
      )}
    </div>
  );
}