"use client";

import { useEffect, useRef, useState } from "react";
import { Check, ChevronDown, Globe } from "lucide-react";
import { useTranslation } from "@/hooks/useTranslation";
import { cn } from "@/lib/utils";

interface LanguageDropdownProps {
  inline?: boolean;
  /** Hide the language name label until 2xl instead of sm — reclaims width in
   *  layouts (e.g. the marketing header) where a translated nav sits right next
   *  to this control and needs the room more than this label does. */
  compact?: boolean;
}

export function LanguageDropdown({ inline = false, compact = false }: LanguageDropdownProps = {}) {
  const { locale, setLocale, t, languages } = useTranslation();
  const [open, setOpen] = useState(false);
  const ref = useRef<HTMLDivElement>(null);

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

  const current = languages.find((l) => l.code === locale) ?? languages[0];

  return (
    <div className={cn("relative", inline && "w-full")} ref={ref}>
      <button
        type="button"
        aria-label={t("language.switch")}
        aria-expanded={open}
        aria-haspopup="menu"
        onClick={() => setOpen((o) => !o)}
        className={cn(
          "inline-flex h-9 items-center gap-1.5 rounded-lg px-2.5 text-slate-600 transition-colors duration-200 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-400 dark:hover:bg-slate-800/60 dark:hover:text-white",
          inline && "w-full justify-between"
        )}
      >
        <div className="flex items-center gap-1.5 min-w-0">
          <Globe className="h-4 w-4 shrink-0" />
          {!inline && current?.flag && (
            <span className="text-sm leading-none md:hidden" aria-hidden>
              {current.flag}
            </span>
          )}
          <span
            className={cn(
              "text-[length:var(--text-sm)] font-medium truncate",
              !inline && (compact ? "hidden 2xl:block" : "hidden sm:block"),
            )}
          >
            {current?.name}
          </span>
        </div>
        <ChevronDown
          className={cn(
            "h-3.5 w-3.5 shrink-0 text-slate-400 transition-transform duration-200",
            open && "rotate-180",
          )}
        />
      </button>
      {open && (
        <div
          role="menu"
          className={cn(
            "overflow-hidden rounded-2xl border border-slate-200/80 bg-white/95 shadow-elevated backdrop-blur-xl animate-scale-in dark:border-slate-700/80 dark:bg-slate-900/95",
            inline
              ? "mt-2 w-full origin-top relative z-10"
              : "absolute end-0 z-50 mt-2 w-52 origin-top-end"
          )}
        >
          <div className="space-y-0.5 p-1.5">
            {languages.map((l) => {
              const active = locale === l.code;
              return (
                <button
                  key={l.code}
                  type="button"
                  role="menuitemradio"
                  aria-checked={active}
                  onClick={() => {
                    setLocale(l.code);
                    setOpen(false);
                  }}
                  className={cn(
                    "flex w-full items-center justify-between rounded-xl px-3 py-2.5 text-sm transition-colors duration-150",
                    active
                      ? "bg-brand-50 text-brand-700 dark:bg-brand-500/15 dark:text-brand-300"
                      : "text-slate-700 hover:bg-slate-50 dark:text-slate-200 dark:hover:bg-slate-800/70",
                  )}
                >
                  <span className="flex items-center gap-2.5">
                    {l.flag && (
                      <span className="text-base leading-none md:hidden" aria-hidden>
                        {l.flag}
                      </span>
                    )}
                    <span className="font-medium">{l.name}</span>
                  </span>
                  {active && (
                    <Check className="h-4 w-4 text-brand-600 dark:text-brand-400" />
                  )}
                </button>
              );
            })}
          </div>
        </div>
      )}
    </div>
  );
}