"use client";

import { useState, useEffect } from "react";
import { Globe } from "lucide-react";
import { locales, localeLabels, localeFlags, type Locale } from "@i18n/config";
import { useSidebar } from "@/components/ui/sidebar";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

const COOKIE_KEY = "locale";
const SUPPORTED: readonly Locale[] = locales;

function readAdminLocale(): Locale {
  if (typeof document === "undefined") return "en";

  const match =
    document.cookie.match(/(?:^|; )locale=([^;]*)/) ??
    document.cookie.match(/(?:^|; )admin_locale=([^;]*)/);

  const raw = match ? decodeURIComponent(match[1]) : "en";
  return (SUPPORTED as string[]).includes(raw) ? (raw as Locale) : "en";
}

function writeAdminLocale(locale: Locale) {
  document.cookie = `${COOKIE_KEY}=${locale}; path=/; Max-Age=${60 * 60 * 24 * 365}; SameSite=Lax`;
}

export function AdminLocaleSwitcher() {
  const { state } = useSidebar();
  const collapsed = state === "collapsed";
  const [locale, setLocale] = useState<Locale>("en");

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

  const handleSelect = (l: Locale) => {
    writeAdminLocale(l);
    window.location.reload();
  };

  return (
    <DropdownMenu>
      <DropdownMenuTrigger
        title={`Content language: ${localeLabels[locale]}`}
        className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm text-sidebar-foreground/70 hover:text-sidebar-foreground hover:bg-sidebar-accent transition-colors"
      >
        <Globe className="h-4 w-4 shrink-0" />
        {collapsed ? (
          <span className="text-xs">{localeFlags[locale]}</span>
        ) : (
          <>
            <span>{localeFlags[locale]}</span>
            <span className="truncate">{localeLabels[locale]}</span>
          </>
        )}
      </DropdownMenuTrigger>
      <DropdownMenuContent side="right" align="end" className="w-44">
        {SUPPORTED.map((l) => (
          <DropdownMenuItem
            key={l}
            onClick={() => handleSelect(l)}
            className={locale === l ? "bg-accent text-accent-foreground" : ""}
          >
            <span className="mr-2">{localeFlags[l]}</span>
            {localeLabels[l]}
          </DropdownMenuItem>
        ))}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}