"use client";

import { useEffect } from "react";
import Script from "next/script";

declare global {
  interface Window {
    /**
     * Google's widget calls back by name on `window`, so each mounted instance
     * needs its own key — hence the namespace suffix rather than one shared
     * callback.
     */
    [key: `googleTranslateElementInit${string}`]: (() => void) | undefined;
    google?: {
      translate?: {
        TranslateElement?: new (
          options: { pageLanguage: string },
          elementId: string,
        ) => unknown;
      };
    };
  }
}

/**
 * The Google Translate dropdown the Yii master lists carried, restyled to match
 * the dashboard's inputs.
 *
 * `namespace` scopes the DOM id, the CSS class and the global init callback, so
 * two of these can coexist on a page. Countries and Zones each used to ship
 * their own copy of this component, including ~65 identical lines of
 * `goog-te-*` overrides — which meant a change to Google's widget markup needed
 * fixing twice.
 */
export function MasterGoogleTranslate({
  enabled,
  namespace,
}: {
  enabled: boolean;
  namespace: string;
}) {
  const callbackName = `googleTranslateElementInit${namespace}` as const;
  const elementId = `${namespace}_google_translate_element`;
  const wrapClass = `${namespace}-google-translate-wrap`;

  useEffect(() => {
    if (!enabled) return;

    window[callbackName] = () => {
      const TranslateElement = window.google?.translate?.TranslateElement;
      if (!TranslateElement) return;
      new TranslateElement({ pageLanguage: "en" }, elementId);
    };

    return () => {
      delete window[callbackName];
    };
  }, [enabled, callbackName, elementId]);

  if (!enabled) return null;

  return (
    <div className="mb-3 flex justify-end">
      <div className={wrapClass}>
        <div id={elementId} />
      </div>
      <style jsx global>{`
        .${wrapClass} {
          width: 170px;
        }

        .${wrapClass} .goog-te-gadget {
          font-size: 11px !important;
          color: hsl(var(--muted-foreground)) !important;
          text-align: right;
          line-height: 1.2;
        }

        .${wrapClass} .goog-te-gadget-simple {
          display: flex !important;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          min-height: 36px;
          border: 1px solid hsl(var(--input)) !important;
          border-radius: 8px;
          background: hsl(var(--background)) !important;
          padding: 0 10px;
          box-shadow: none !important;
        }

        .${wrapClass} .goog-te-gadget-icon {
          display: none !important;
        }

        .${wrapClass} .goog-te-menu-value {
          display: flex !important;
          width: 100%;
          align-items: center;
          justify-content: space-between;
          gap: 8px;
          margin: 0 !important;
          color: hsl(var(--foreground)) !important;
          font-size: 12px !important;
          font-family: inherit !important;
        }

        .${wrapClass} .goog-te-menu-value span {
          border: 0 !important;
          color: inherit !important;
          font-family: inherit !important;
        }

        .${wrapClass} .goog-te-menu-value span:last-child {
          color: hsl(var(--muted-foreground)) !important;
        }

        .${wrapClass} .goog-te-gadget > span {
          display: block;
          margin-top: 4px;
        }
      `}</style>
      <Script
        id={`${namespace}-google-translate`}
        src={`//translate.google.com/translate_a/element.js?cb=${callbackName}`}
        strategy="afterInteractive"
      />
    </div>
  );
}