"use client";

import { CheckIcon, GlobeIcon } from "lucide-react";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { toast } from "sonner";

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  ADMIN_API_LOCALES,
  ADMIN_LOCALE_LABELS,
  applyAdminUiLocale,
  getAdminRequestLocale,
  type AdminApiLocale,
} from "@/lib/admin-locale";
import { cn } from "@/lib/utils";

const LOCALE_FLAGS: Record<AdminApiLocale, string> = {
  zh: "🇨🇳",
  en: "🇺🇸",
  ne: "🇳🇵",
};

export function AdminLanguageSwitcher() {
  const { i18n, t } = useTranslation("common");
  const [locale, setLocale] = useState<AdminApiLocale>(() =>
    typeof document !== "undefined" ? getAdminRequestLocale() : "en",
  );

  useEffect(() => {
    queueMicrotask(() => {
      setLocale(getAdminRequestLocale());
    });
  }, []);

  async function onSelectLocale(next: AdminApiLocale) {
    applyAdminUiLocale(next);
    await i18n.changeLanguage(next);
    setLocale(next);
    toast.success(
      t("language.changed", {
        language: ADMIN_LOCALE_LABELS[next],
      }),
    );
  }

  const currentFlag = LOCALE_FLAGS[locale];

  return (
    <DropdownMenu>
      <DropdownMenuTrigger className="inline-flex h-8 items-center gap-1.5 rounded-full border border-slate-200 bg-white px-2 text-left text-slate-700 shadow-[0_1px_2px_rgba(15,23,42,0.04)] outline-none transition hover:border-slate-300 hover:bg-slate-50 focus-visible:ring-2 focus-visible:ring-ring">
        <span className="flex size-5 shrink-0 items-center justify-center rounded-full bg-slate-100 text-xs">
          {currentFlag}
        </span>
        <GlobeIcon
          className="size-4 shrink-0 stroke-[1.75] text-slate-400 sm:hidden"
          aria-hidden
        />
      </DropdownMenuTrigger>
      <DropdownMenuContent
        align="end"
        className="w-[188px] overflow-hidden rounded-xl border border-slate-200 bg-white p-1 shadow-[0_16px_40px_rgba(15,23,42,0.12)]"
      >
        <DropdownMenuGroup className="space-y-0.5">
          <DropdownMenuLabel className="sr-only">
            {t("language.title")}
          </DropdownMenuLabel>
          {ADMIN_API_LOCALES.map((code) => {
            const active = locale === code;

            return (
              <DropdownMenuItem
                key={code}
                className={cn(
                  "flex min-h-[42px] items-center gap-2 rounded-md border border-transparent px-2 py-1.5 text-slate-700 outline-none transition",
                  active
                    ? "border-rose-100 bg-rose-50 text-rose-600"
                    : "hover:bg-slate-50 focus:bg-slate-50",
                )}
                onClick={() => void onSelectLocale(code)}
              >
                <span className="flex size-8 shrink-0 items-center justify-center rounded-md bg-white text-lg shadow-[inset_0_0_0_1px_rgba(148,163,184,0.16)]">
                  {LOCALE_FLAGS[code]}
                </span>
                <span className="min-w-0 flex-1">
                  <span
                    className={cn(
                      "block truncate text-[14px] font-semibold leading-5",
                      active ? "text-rose-600" : "text-slate-800",
                    )}
                >
                  {ADMIN_LOCALE_LABELS[code]}
                </span>
                </span>
                <span className="flex w-3 shrink-0 justify-end">
                  {active ? <CheckIcon className="size-3.5 text-rose-500" /> : null}
                </span>
              </DropdownMenuItem>
            );
          })}
        </DropdownMenuGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}