"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-52 rounded-xl p-1.5 z-[100] shadow-2xl max-h-[70vh] overflow-y-auto"
          style={{
            background: theme.isDark ? "rgba(10, 10, 25, 0.95)" : "rgba(255, 255, 255, 0.97)",
            border: "1px solid rgba(255, 255, 255, 0.15)",
            backdropFilter: "blur(30px) saturate(180%)",
            WebkitBackdropFilter: "blur(30px) saturate(180%)",
          }}
        >
          <div className="px-2.5 py-1.5 text-[10px] uppercase tracking-wider" style={{ color: theme.isDark ? "#64748b" : "#94a3b8" }}>
            Themes
          </div>
          {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"
              style={{
                background: theme.name === t.name
                  ? (theme.isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.06)")
                  : "transparent",
                color: theme.name === t.name
                  ? (theme.isDark ? "#f1f5f9" : "#1e293b")
                  : (theme.isDark ? "#94a3b8" : "#64748b"),
              }}
              onMouseEnter={(e) => {
                if (theme.name !== t.name)
                  e.currentTarget.style.background = theme.isDark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.03)";
              }}
              onMouseLeave={(e) => {
                if (theme.name !== t.name)
                  e.currentTarget.style.background = "transparent";
              }}
            >
              <span
                className="w-4 h-4 rounded-full shrink-0"
                style={{
                  background: `linear-gradient(135deg, ${t.swatch[0]}, ${t.swatch[1]})`,
                  boxShadow: `0 0 8px ${t.swatch[0]}40`,
                  border: "1px solid rgba(255,255,255,0.15)",
                }}
              />
              <span className="flex-1 text-left font-medium">{t.label}</span>
              {theme.name === t.name && (
                <span style={{ color: t.swatch[0], fontSize: "14px" }}>●</span>
              )}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}