import { useState, useRef, useEffect } from 'react';
import { Palette, Check } from 'lucide-react';
import { useTheme, ColorScheme } from '@/hooks/useTheme';

const colorSchemes: { value: ColorScheme; label: string; color: string; darkColor: string }[] = [
  { value: 'blue', label: 'Blue', color: 'bg-blue-500', darkColor: 'bg-blue-400' },
  { value: 'purple', label: 'Purple', color: 'bg-purple-500', darkColor: 'bg-purple-400' },
  { value: 'green', label: 'Green', color: 'bg-green-500', darkColor: 'bg-green-400' },
  { value: 'orange', label: 'Orange', color: 'bg-orange-500', darkColor: 'bg-orange-400' },
];

export function ColorSchemeSelector() {
  const { colorScheme, setColorScheme, resolvedTheme } = useTheme();
  const [isOpen, setIsOpen] = useState(false);
  const dropdownRef = useRef<HTMLDivElement>(null);

  // Close dropdown when clicking outside
  useEffect(() => {
    function handleClickOutside(event: MouseEvent) {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
        setIsOpen(false);
      }
    }
    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

  const currentScheme = colorSchemes.find((s) => s.value === colorScheme) || colorSchemes[0];

  return (
    <div className="relative" ref={dropdownRef}>
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="flex items-center justify-center w-9 h-9 rounded-lg bg-muted hover:bg-accent transition-colors focus-ring"
        aria-label={`Current color scheme: ${currentScheme.label}. Click to change.`}
        aria-expanded={isOpen}
        aria-haspopup="true"
      >
        <Palette className="h-5 w-5 text-foreground" />
      </button>

      {isOpen && (
        <div className="absolute right-0 mt-2 w-40 rounded-lg bg-popover border border-border shadow-elevated z-50 overflow-hidden animate-in fade-in slide-in-from-top-2 duration-150">
          <div className="px-3 py-2 border-b border-border">
            <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
              Color Scheme
            </p>
          </div>
          {colorSchemes.map(({ value, label, color, darkColor }) => (
            <button
              key={value}
              onClick={() => {
                setColorScheme(value);
                setIsOpen(false);
              }}
              className={`flex items-center gap-3 w-full px-3 py-2.5 text-sm transition-colors ${
                colorScheme === value
                  ? 'bg-primary/10 text-primary font-medium'
                  : 'text-popover-foreground hover:bg-accent'
              }`}
            >
              <span
                className={`w-4 h-4 rounded-full ${resolvedTheme === 'dark' ? darkColor : color}`}
              />
              {label}
              {colorScheme === value && <Check className="h-4 w-4 ml-auto" />}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}
