"use client";

import { useState, useRef, useEffect } from "react";
import { ChevronDown, Check } from "lucide-react";
import { motion, AnimatePresence } from "framer-motion";
import { useLocale } from "@/context/LocaleContext";
import { locales, localeLabels, localeFlagCodes, type Locale } from "@i18n/config";

const FlagImg = ({ code, label }: { code: string; label: string }) => (
  // eslint-disable-next-line @next/next/no-img-element
  <img
    src={`https://flagcdn.com/w20/${code}.png`}
    srcSet={`https://flagcdn.com/w40/${code}.png 2x`}
    width={20}
    height={15}
    alt={label}
    className="rounded-sm object-cover"
  />
);

interface LanguageSwitcherProps {
  /** When true the trigger text/chevron are light-coloured (for use on dark/transparent nav) */
  light?: boolean;
  /** When true the dropdown opens upward instead of downward (use at bottom of sidebar) */
  dropUp?: boolean;
}

export default function LanguageSwitcher({ light = false, dropUp = false }: LanguageSwitcherProps) {
  const { locale, setLocale } = useLocale();
  const [open, setOpen] = useState(false);
  const ref = useRef<HTMLDivElement>(null);

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

  const textClass = light
    ? "text-primary-foreground/90 hover:text-accent"
    : "text-foreground hover:text-accent";

  return (
    <div ref={ref} className="relative">
      <button
        aria-label="Select language"
        onClick={() => setOpen((v) => !v)}
        onMouseEnter={() => setOpen(true)}
        onMouseLeave={() => setOpen(false)}
        className={`flex items-center gap-1 text-xs lg:text-sm font-medium transition-colors duration-300 ${textClass}`}
      >
        <FlagImg code={localeFlagCodes[locale]} label={localeLabels[locale]} />
        <span className="hidden sm:inline lg:hidden">{locale.toUpperCase()}</span>
        <span className="hidden lg:inline">{localeLabels[locale]}</span>
        <ChevronDown
          className={`w-3.5 h-3.5 transition-transform duration-200 ${open ? "rotate-180" : ""}`}
        />
      </button>

      <AnimatePresence>
        {open && (
          <motion.div
            initial={{ opacity: 0, y: dropUp ? 6 : -6 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: dropUp ? 6 : -6 }}
            transition={{ duration: 0.15 }}
            onMouseEnter={() => setOpen(true)}
            onMouseLeave={() => setOpen(false)}
            className={`absolute ${
              dropUp ? "bottom-full mb-1" : "top-full mt-1"
            } right-0 w-44 bg-card border border-border rounded-xl shadow-lg overflow-hidden z-50`}
          >
            {locales.map((l) => (
              <button
                key={l}
                onClick={() => {
                  setLocale(l as Locale);
                  setOpen(false);
                }}
                className="w-full flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-secondary transition-colors text-left"
              >
                <FlagImg code={localeFlagCodes[l as Locale]} label={localeLabels[l as Locale]} />
                <span className="flex-1 text-foreground">{localeLabels[l as Locale]}</span>
                {locale === l && <Check className="w-3.5 h-3.5 text-accent shrink-0" />}
              </button>
            ))}
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}