"use client";

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "../ui/dropdown-menu";
import { useParams } from "next/navigation";
import { Locale, useLocale } from "next-intl";
import { useState, useTransition } from "react";
import { Check, ChevronDownIcon, Loader2 } from "lucide-react";
import { useRouter, usePathname } from "@/i18n/navigation";
import { cn } from "@/utlis";
import { motion } from "framer-motion";

export const LangDropdown = () => {
  const router = useRouter();
  const [isPending, startTransition] = useTransition();
  const [isOpen, setIsOpen] = useState(false);
  const pathname = usePathname();
  const params = useParams();
  const locale = useLocale();
  const options: Array<{
    value: Locale;
    label: string;
    flag: string;
  }> = [
    {
      value: "ar",
      label: "العربية",
      flag: "🇸🇦",
    },
    {
      value: "en",
      label: "English",
      flag: "🇬🇧",
    },
  ];

  const active = options.find((option) => option.value === locale) || options[1];
  const dropdownVariants = {
    closed: {
      opacity: 0,
      y: -8,
      scale: 0.96,
      transition: { duration: 0.14, ease: [0.4, 0, 1, 1] as const },
    },
    open: {
      opacity: 1,
      y: 0,
      scale: 1,
      transition: {
        duration: 0.2,
        ease: [0.16, 1, 0.3, 1] as const,
        when: "beforeChildren" as const,
        staggerChildren: 0.03,
      },
    },
  };
  const itemVariants = {
    closed: { opacity: 0, x: -6, transition: { duration: 0.12 } },
    open: { opacity: 1, x: 0, transition: { duration: 0.18 } },
  };

  const applyHtmlDirection = (lang: Locale) => {
    if (typeof document === "undefined") return;
    const normalized =
      (lang || "ar").toLowerCase().startsWith("en") ? "en" : "ar";
    const dir = normalized === "ar" ? "rtl" : "ltr";
    const root = document.documentElement;
    root.lang = normalized;
    root.dir = dir;
    root.classList.remove("dir-rtl", "dir-ltr");
    root.classList.add(dir === "rtl" ? "dir-rtl" : "dir-ltr");
  };

  const onSelectChange = (lang: Locale) => {
    if (lang === locale) return;
    // عند تغيير اللغة نحدّث الاتجاه فوراً ثم نعيد تحميل الصفحة
    applyHtmlDirection(lang);
    startTransition(() => {
      router.replace(
        // @ts-expect-error -- TypeScript سيتحقق من المطابقة بين params و pathname
        { pathname, params },
        { locale: lang },
      );
      // إجبار إعادة تحميل كاملة لضمان تطبيق كل شيء من السيرفر
      if (typeof window !== "undefined") {
        window.location.reload();
      }
    });
  };

  return (
    <DropdownMenu onOpenChange={setIsOpen}>
      <DropdownMenuTrigger asChild>
        <button
          type="button"
          disabled={isPending}
          className={cn(
            "inline-flex items-center justify-start gap-2 rounded-xl border border-gray-200 bg-white px-3 py-1.5 text-sm font-semibold text-slate-700 transition-all duration-200",
            "hover:border-gray-300 hover:bg-gray-50 hover:shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#0F5132]/30",
            isOpen && "border-[#0F5132]/40 bg-[#0F5132]/5",
            isPending && "cursor-not-allowed opacity-80",
          )}
          aria-label="Change language"
        >
          <span className="text-base leading-none" aria-hidden>
            {active.flag}
          </span>
          <span>{active.label}</span>
          {isPending ? (
            <Loader2 className="h-4 w-4 animate-spin text-[#0F5132]" />
          ) : (
            <ChevronDownIcon
              className={cn(
                "h-4 w-4 transition-transform duration-200",
                isOpen && "rotate-180",
              )}
            />
          )}
        </button>
      </DropdownMenuTrigger>

      <DropdownMenuContent
        forceMount
        align="end"
        sideOffset={8}
        className="min-w-[190px] rounded-xl border border-slate-200 bg-white p-0 shadow-xl overflow-hidden"
      >
        <motion.div
          initial={false}
          animate={isOpen ? "open" : "closed"}
          variants={dropdownVariants}
          className="p-1.5"
        >
          {options.map((option) => (
            <motion.div key={option.value} variants={itemVariants}>
              <DropdownMenuItem
                className={cn(
                  "flex cursor-pointer items-center justify-between rounded-lg px-2.5 py-2 text-sm transition-colors duration-150",
                  locale === option.value
                    ? "bg-[#0F5132]/10 text-[#0F5132]"
                    : "text-slate-700 hover:bg-gray-50",
                )}
                onClick={() => onSelectChange(option.value)}
              >
                <span className="flex items-center gap-2">
                  <span className="text-base leading-none" aria-hidden>
                    {option.flag}
                  </span>
                  <span className="font-medium">{option.label}</span>
                </span>
                {locale === option.value ? (
                  <Check className="h-4 w-4 text-[#0f5132]" />
                ) : null}
              </DropdownMenuItem>
            </motion.div>
          ))}
        </motion.div>
      </DropdownMenuContent>
    </DropdownMenu>
  );
};