"use client";

import { useEffect, useRef, useState } from "react";
import { Languages, Check, ChevronDown } from "lucide-react";
import { useLanguage } from "@/components/language-provider";
import { locales, localeNames, type Locale } from "@/lib/utils";
import { cn } from "@/lib/utils";
import { AnimatePresence, motion } from "framer-motion";

export function LanguageSwitcher({
  variant = "light",
  className,
}: {
  variant?: "light" | "dark";
  className?: string;
}) {
  const { locale, setLocale } = useLanguage();
  const [open, setOpen] = useState(false);
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    function onClickOutside(e: MouseEvent) {
      if (ref.current && !ref.current.contains(e.target as Node)) {
        setOpen(false);
      }
    }
    document.addEventListener("mousedown", onClickOutside);
    return () => document.removeEventListener("mousedown", onClickOutside);
  }, []);

  const onSelect = (next: Locale) => {
    setLocale(next);
    setOpen(false);
  };

  return (
    <div ref={ref} className={cn("relative", className)}>
      <button
        type="button"
        aria-label="Change language"
        aria-haspopup="listbox"
        aria-expanded={open}
        onClick={() => setOpen((s) => !s)}
        className={cn(
          "inline-flex items-center gap-2 rounded-full border px-3.5 py-2 text-xs font-semibold transition-colors focus-ring",
          variant === "dark"
            ? "border-white/20 text-white hover:border-white/40"
            : "border-steel-200 text-steel-800 hover:border-steel-400"
        )}
      >
        <Languages className="h-3.5 w-3.5" />
        <span className="uppercase tracking-wider">{localeNames[locale].label}</span>
        <ChevronDown
          className={cn("h-3.5 w-3.5 transition-transform", open && "rotate-180")}
        />
      </button>

      <AnimatePresence>
        {open && (
          <motion.ul
            role="listbox"
            initial={{ opacity: 0, y: -4, scale: 0.98 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: -4, scale: 0.98 }}
            transition={{ duration: 0.15 }}
            className="absolute right-0 top-full z-50 mt-2 w-44 overflow-hidden rounded-xl border border-steel-100 bg-white p-1.5 shadow-[0_24px_50px_-20px_rgba(15,26,42,0.25)]"
          >
            {locales.map((l) => {
              const active = l === locale;
              return (
                <li key={l}>
                  <button
                    role="option"
                    aria-selected={active}
                    onClick={() => onSelect(l)}
                    className={cn(
                      "flex w-full items-center justify-between gap-2 rounded-lg px-3 py-2 text-left text-sm transition-colors",
                      active
                        ? "bg-steel-50 text-steel-900"
                        : "text-steel-700 hover:bg-steel-50"
                    )}
                  >
                    <span className="flex items-center gap-2.5">
                      <span className="text-base leading-none">{localeNames[l].flag}</span>
                      <span className="font-medium">{localeNames[l].native}</span>
                    </span>
                    {active && <Check className="h-4 w-4 text-steel-900" />}
                  </button>
                </li>
              );
            })}
          </motion.ul>
        )}
      </AnimatePresence>
    </div>
  );
}