"use client";
import { useRouter, usePathname } from "next/navigation";
import Image from "next/image";
import { useLocale } from "next-intl";
import { useQueryClient } from "@tanstack/react-query";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import tm from "@/public/tm.png";
import ru from "@/public/ru.png";

interface Language {
  code: string;
  name: string;
  flag: any;
}

const LANGUAGES: Language[] = [
  { code: "ru", name: "Russian", flag: ru },
  { code: "tm", name: "Turkmen", flag: tm },
];

export default function LanguageSelector() {
  const locale = useLocale();
  const router = useRouter();
  const pathname = usePathname();
  const queryClient = useQueryClient();

  const handleLanguageChange = async (newLocale: string) => {
    if (typeof window !== "undefined") {
      (window as any).i18n = { language: newLocale };
    }

    queryClient.invalidateQueries();

    const currentPath = pathname.replace(`/${locale}`, "");
    router.replace(`/${newLocale}${currentPath}`);
  };

  return (
    <Select value={locale} onValueChange={handleLanguageChange}>
      <SelectTrigger className="w-[70px] h-10! flex items-center justify-center  border-gray-200 hover:border-gray-900 hover:bg-gray-50 transition-all duration-200 shadow-sm">
        <SelectValue>
          <FlagIcon locale={locale} />
        </SelectValue>
      </SelectTrigger>
      <SelectContent className=" border-gray-200 shadow-lg">
        {LANGUAGES.map((language) => (
          <SelectItem
            key={language.code}
            value={language.code}
            className="rounded-lg cursor-pointer hover:bg-gray-100 transition-colors"
          >
            <div className="flex items-center gap-3">
              <FlagIcon locale={language.code} />
              <span className="font-medium">{language.name}</span>
            </div>
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  );
}

function FlagIcon({ locale }: { locale: string }) {
  const language = LANGUAGES.find((lang) => lang.code === locale);

  if (!language) return null;

  return (
    <div className="relative h-5 w-7  overflow-hidden shadow-sm">
      <Image
        src={language.flag || "/placeholder.svg"}
        alt={language.name}
        fill
        className="object-cover"
      />
    </div>
  );
}
