"use client";

import { usePathname, useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";
import { Globe } from "lucide-react";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { locales, LOCALE_LABELS } from "@/lib/locales";

export function LanguageSwitcher() {
  const router = useRouter();
  const pathname = usePathname();

  const switchLanguage = (lang: string) => {
    // Срезаем текущий префикс локали из пути и подставляем новый — так
    // переключение языка сохраняет текущую страницу (/ru/blog -> /en/blog).
    // Раньше резался только 2-буквенный код ([a-z]{2}), из-за чего "zh-CN"
    // никогда не совпадал и путь просто задваивался ("/zh-CN/zh-CN/...").
    const currentLocale = locales.find(
      (l) => pathname === `/${l}` || pathname.startsWith(`/${l}/`),
    );
    const currentPath = currentLocale
      ? pathname.slice(currentLocale.length + 1)
      : pathname;
    router.push(`/${lang}${currentPath === "" ? "/" : currentPath}`);
  };

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
          variant="outline"
          size="icon"
          className="rounded-full border-border bg-background/50 backdrop-blur-md"
        >
          <Globe className="h-[1.2rem] w-[1.2rem]" />
          <span className="sr-only">Switch language</span>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        {locales.map((lang) => (
          <DropdownMenuItem key={lang} onClick={() => switchLanguage(lang)}>
            {LOCALE_LABELS[lang]}
          </DropdownMenuItem>
        ))}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}