"use client";

import { useState, useRef, useEffect } from "react";
import { useTheme } from "@/components/theme-provider";
import { themes } from "@/lib/themes";

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

  // Close dropdown on outside click
  useEffect(() => {
    function handleClick(e: MouseEvent) {
      if (ref.current && !ref.current.contains(e.target as Node)) {
        setOpen(false);
      }
    }
    if (open) {
      document.addEventListener("mousedown", handleClick);
      return () => document.removeEventListener("mousedown", handleClick);
    }
  }, [open]);

  // Close on Escape
  useEffect(() => {
    function handleKey(e: KeyboardEvent) {
      if (e.key === "Escape") setOpen(false);
    }
    if (open) {
      document.addEventListener("keydown", handleKey);
      return () => document.removeEventListener("keydown", handleKey);
    }
  }, [open]);

  return (
    <div ref={ref} className="relative">
      <button
        onClick={() => setOpen(!open)}
        className="flex items-center gap-2 px-2.5 py-1.5 text-xs rounded-lg transition-all duration-200 hover:bg-[var(--nav-hover)]"
        aria-label="Switch theme"
      >
        <span
          className="w-3 h-3 rounded-full shrink-0 border border-white/10"
          style={{
            background: `linear-gradient(135deg, ${theme.swatch[0]}, ${theme.swatch[1]})`,
          }}
        />
        <span className="text-muted-foreground hidden sm:inline">{theme.label}</span>
      </button>

      {open && (
        <div
          className="absolute right-0 top-full mt-2 w-48 rounded-xl border p-1.5 z-[100] backdrop-blur-xl shadow-xl"
          style={{
            background: "var(--card-bg)",
            borderColor: "var(--card-border)",
          }}
        >
          {themes.map((t) => (
            <button
              key={t.name}
              onClick={() => {
                setTheme(t.name);
                setOpen(false);
              }}
              className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg text-xs transition-all duration-150 ${
                theme.name === t.name
                  ? "bg-[var(--nav-active)] text-[var(--foreground)]"
                  : "text-[var(--muted-foreground)] hover:bg-[var(--nav-hover)] hover:text-[var(--foreground)]"
              }`}
              style={
                theme.name === t.name
                  ? { color: "hsl(var(--foreground))" }
                  : { color: "hsl(var(--muted-foreground))" }
              }
            >
              <span
                className="w-4 h-4 rounded-full shrink-0 border border-white/10"
                style={{
                  background: `linear-gradient(135deg, ${t.swatch[0]}, ${t.swatch[1]})`,
                }}
              />
              <span className="flex-1 text-left">{t.label}</span>
              {theme.name === t.name && (
                <span className="text-[10px] opacity-60">current</span>
              )}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}
