/**
 * Theme Toggle Component
 *
 * 主题切换按钮组件，支持浅色/深色/跟随系统三种模式
 */

import { Sun, Moon, Monitor } from 'lucide-react';
import { useTheme, type Theme } from '../hooks/useTheme.js';
import { cn } from '../utils/cn.js';

interface ThemeOption {
  value: Theme;
  icon: typeof Sun;
  label: string;
}

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

interface ThemeToggleProps {
  className?: string;
}

/**
 * 主题切换按钮组
 */
export function ThemeToggle({ className }: ThemeToggleProps) {
  const { theme, setTheme } = useTheme();

  return (
    <div
      className={cn(
        'flex items-center gap-1 p-1 bg-surface-subtle rounded-lg',
        className
      )}
    >
      {themeOptions.map(({ value, icon: Icon, label }) => (
        <button
          key={value}
          onClick={() => setTheme(value)}
          title={label}
          className={cn(
            'p-2 rounded-md transition-colors',
            theme === value
              ? 'bg-surface-emphasis text-fg'
              : 'text-fg-muted hover:text-fg hover:bg-surface-muted'
          )}
        >
          <Icon size={16} />
        </button>
      ))}
    </div>
  );
}

/**
 * 简洁版主题切换按钮（单个按钮循环切换）
 */
export function ThemeToggleCompact({ className }: ThemeToggleProps) {
  const { theme, resolvedTheme, setTheme } = useTheme();

  const handleToggle = () => {
    const nextTheme: Theme =
      theme === 'light' ? 'dark' : theme === 'dark' ? 'system' : 'light';
    setTheme(nextTheme);
  };

  const Icon = theme === 'system' ? Monitor : resolvedTheme === 'dark' ? Moon : Sun;
  const label =
    theme === 'system'
      ? '跟随系统'
      : resolvedTheme === 'dark'
        ? '深色模式'
        : '浅色模式';

  return (
    <button
      onClick={handleToggle}
      title={`当前: ${label} (点击切换)`}
      className={cn(
        'p-2 rounded-md transition-colors',
        'text-fg-muted hover:text-fg hover:bg-surface-muted',
        className
      )}
    >
      <Icon size={18} />
    </button>
  );
}
