"use client";

import Script from "next/script";
import React from "react";
import { usePathname } from "next/navigation";

type GoogleTranslateElementCtor = {
  new (
    options: {
      pageLanguage: string;
      includedLanguages: string;
      autoDisplay: boolean;
    },
    elementId: string
  ): unknown;
};

type GoogleWindow = Window & {
  google?: {
    translate?: {
      TranslateElement?: GoogleTranslateElementCtor;
    };
  };
  googleTranslateElementInit?: () => void;
};

const languages = [
  { label: "English", value: "en" },
  { label: "Spanish", value: "es" },
];

const includedLanguages = languages.map((lang) => lang.value).join(",");

function getLangFromCookieValue(value: string): string {
  const decoded = decodeURIComponent(value || "");
  const parts = decoded.split("/");
  const lang = parts[2] || decoded;
  return lang === "es" ? "es" : "en";
}

export default function GoogleTranslate({ prefLangCookie }: { prefLangCookie: string }) {
  const [selectedLang, setSelectedLang] = React.useState<string>(getLangFromCookieValue(prefLangCookie));
  const pathname = usePathname();

  const applyLanguage = React.useCallback((lang: string) => {
    let attempts = 0;
    const timer = window.setInterval(() => {
      attempts += 1;
      const combo = document.querySelector(".goog-te-combo") as HTMLSelectElement | null;
      if (combo) {
        combo.value = lang;
        combo.dispatchEvent(new Event("change", { bubbles: true }));
        window.clearInterval(timer);
      } else if (attempts > 30) {
        window.clearInterval(timer);
      }
    }, 100);
  }, []);

  React.useEffect(() => {
    const w = window as GoogleWindow;
    w.googleTranslateElementInit = () => {
      const container = document.getElementById("google_translate_element");
      if (!container) return;
      if (!container.querySelector(".goog-te-gadget")) {
        const TranslateElement = w.google?.translate?.TranslateElement;
        if (!TranslateElement) return;
        new TranslateElement(
          {
            pageLanguage: "en",
            includedLanguages,
            autoDisplay: false,
          },
          "google_translate_element"
        );
      }

      applyLanguage(selectedLang);
    };

    // In dev/HMR, script can already be loaded before this effect runs.
    if (w.google?.translate?.TranslateElement) {
      w.googleTranslateElementInit();
    }
  }, [applyLanguage, selectedLang]);

  React.useEffect(() => {
    if (selectedLang === "en") return;
    const timer = window.setTimeout(() => applyLanguage(selectedLang), 120);
    return () => window.clearTimeout(timer);
  }, [applyLanguage, pathname, selectedLang]);

  const onChange = (value: string) => {
    const lang = value === "es" ? "es" : "en";
    setSelectedLang(lang);

    const googTrans = `/en/${lang}`;
    document.cookie = `googtrans=${googTrans};path=/`;
    document.cookie = `googtrans=${googTrans};path=/;domain=${window.location.hostname}`;

    applyLanguage(lang);
  };

  return (
    <div className="flex items-center">
      <div id="google_translate_element" style={{ visibility: "hidden", width: "1px", height: "1px", overflow: "hidden" }} />
      <select
        aria-label="Select language"
        value={selectedLang}
        onChange={(e) => onChange(e.target.value)}
        className="h-[42px] rounded border border-[#cfcfcf] bg-white px-3 text-[18px] text-[#053f31]"
      >
        {languages.map((lang) => (
          <option key={lang.value} value={lang.value}>
            {lang.label}
          </option>
        ))}
      </select>
      <Script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" strategy="afterInteractive" />
    </div>
  );
}