/**
 * Theme toggle button with animated icon transitions.
 * Supports dark, light, and system theme modes.
 */

import { Sun, Moon, Monitor } from 'lucide-react';
import { useTheme } from '../contexts/ThemeContext';
import { cn } from '../lib/utils';

export default function ThemeToggle() {
  const { theme, setTheme } = useTheme();

  const themes = [
    { value: 'light' as const, icon: Sun, label: 'Light' },
    { value: 'dark' as const, icon: Moon, label: 'Dark' },
    { value: 'system' as const, icon: Monitor, label: 'System' },
  ];

  return (
    <div className="flex items-center gap-1 p-1 rounded-lg bg-gray-800/50 dark:bg-gray-800/50 light:bg-gray-200/50 border border-gray-700/50 dark:border-gray-700/50 light:border-gray-300/50">
      {themes.map(({ value, icon: Icon, label }) => (
        <button
          key={value}
          onClick={() => setTheme(value)}
          className={cn(
            'relative p-2 rounded-md transition-all duration-200',
            theme === value
              ? 'bg-synor-500/20 text-synor-400'
              : 'text-gray-400 hover:text-gray-200 dark:hover:text-gray-200 light:hover:text-gray-700'
          )}
          title={label}
          aria-label={`Set ${label.toLowerCase()} theme`}
        >
          <Icon
            size={16}
            className={cn(
              'transition-transform duration-200',
              theme === value && 'scale-110'
            )}
          />
          {theme === value && (
            <span className="absolute inset-0 rounded-md ring-1 ring-synor-500/50" />
          )}
        </button>
      ))}
    </div>
  );
}

/**
 * Compact theme toggle - single button that cycles through modes
 */
export function ThemeToggleCompact() {
  const { theme, resolvedTheme, toggleTheme } = useTheme();

  const getIcon = () => {
    if (theme === 'system') return Monitor;
    return resolvedTheme === 'dark' ? Moon : Sun;
  };

  const Icon = getIcon();

  const getLabel = () => {
    if (theme === 'system') return 'System theme';
    return resolvedTheme === 'dark' ? 'Dark theme' : 'Light theme';
  };

  return (
    <button
      onClick={toggleTheme}
      className={cn(
        'relative p-2 rounded-lg transition-all duration-200',
        'bg-gray-800/50 border border-gray-700/50',
        'hover:bg-gray-700/50 hover:border-gray-600/50',
        'text-gray-400 hover:text-gray-200'
      )}
      title={`${getLabel()} (click to change)`}
      aria-label={`Current: ${getLabel()}. Click to change theme.`}
    >
      <Icon size={18} className="transition-transform duration-200" />

      {/* System indicator dot */}
      {theme === 'system' && (
        <span className="absolute -top-0.5 -right-0.5 w-2 h-2 rounded-full bg-synor-500 border border-gray-900" />
      )}
    </button>
  );
}
