"use client";

import { usePathname, useRouter } from "next/navigation";
import { LOCALES, type Locale, isLocale } from "@/lib/i18n";

type Props = {
  locale: string;
  variant?: "chip" | "select";
  className?: string;
};

export default function LanguageSwitcher({ locale, variant = "select", className }: Props) {
  const router = useRouter();
  const pathname = usePathname();

  async function setLocale(next: Locale) {
    await fetch("/api/locale", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ locale: next }),
    });

    const parts = (pathname || "").split("/");
    if (parts.length > 1 && isLocale(parts[1])) {
      parts[1] = next;
      router.push(parts.join("/"));
    } else {
      router.push(`/${next}${pathname || ""}`);
    }
    router.refresh();
  }

  const value: Locale = isLocale(locale) ? (locale as Locale) : "en";

  if (variant === "chip") {
    return (
      <span className={`lang-wrap ${className ?? ""}`.trim()}>
        <select
          className="lang-chip"
          value={value}
          onChange={(e) => setLocale(e.target.value as Locale)}
          aria-label="Language"
        >
          {LOCALES.map((l) => (
            <option key={l} value={l}>
              {l.toUpperCase()}
            </option>
          ))}
        </select>
      </span>
    );
  }

  return (
    <select
      className={`lang-select ${className ?? ""}`.trim()}
      value={value}
      onChange={(e) => setLocale(e.target.value as Locale)}
      aria-label="Language"
    >
      {LOCALES.map((l) => (
        <option key={l} value={l}>
          {l.toUpperCase()}
        </option>
      ))}
    </select>
  );
}