"use client";
import { useState, useEffect } from "react";
import { Palette } from "lucide-react";
import { THEMES, useTheme } from "@/stores/theme-store";

export function ThemeSwitcher() {
  const { theme, setTheme } = useTheme();
  const [open, setOpen] = useState(false);
  const [mounted, setMounted] = useState(false);
  useEffect(() => setMounted(true), []);
  const current = THEMES.find((t) => t.id === theme) ?? THEMES[0];

  if (!mounted) return null;

  return (
    <div className="relative">
      <button
        onClick={() => setOpen((o) => !o)}
        onBlur={() => setTimeout(() => setOpen(false), 150)}
        className="flex items-center gap-1.5 rounded-md border border-line bg-surface-overlay px-2 py-1.5 text-xs text-fg-muted hover:text-fg hover:bg-surface-sunken transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent"
        aria-label="Change color scheme"
      >
        <Palette className="h-3.5 w-3.5" />
        <span className="hidden sm:inline">{current.label}</span>
      </button>

      {open && (
        <div className="absolute right-0 z-50 mt-1 w-44 rounded-md border border-line bg-surface-raised shadow-xl p-1">
          <p className="px-2 py-1 text-2xs uppercase tracking-wide text-fg-muted">Color scheme</p>
          {THEMES.map((t) => (
            <button
              key={t.id}
              onClick={() => {
                setTheme(t.id);
                setOpen(false);
              }}
              className={`flex w-full items-center justify-between gap-2 rounded px-2 py-1.5 text-left text-xs transition-colors ${
                t.id === theme ? "bg-surface-overlay text-fg" : "text-fg-muted hover:bg-surface-overlay hover:text-fg"
              }`}
            >
              <span className="flex items-center gap-2 min-w-0">
                <span className="flex gap-0.5 shrink-0">
                  {t.preview.map((c, i) => (
                    <span key={i} className="h-3 w-3 rounded-sm border border-line" style={{ backgroundColor: c }} />
                  ))}
                </span>
                <span className="truncate">{t.label}</span>
              </span>
              {t.id === theme && <span className="h-1.5 w-1.5 rounded-full bg-accent shrink-0" />}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}