"use client";

import { useTheme } from "next-themes";
import { useEffect, useRef } from "react";

declare global {
  interface Window {
    __WIDGET_INIT?: () => void;
  }
}

interface CoinMarketCapWidgetProps {
  coins: string;
  currency: string;
  transparent: string;
  showSymbolLogo: string;
}

function CoinMarketCapWidget({
  coins,
  currency,
  transparent,
  showSymbolLogo,
}: CoinMarketCapWidgetProps) {
  const { resolvedTheme } = useTheme();
  const widgetRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const widget = widgetRef.current;
    if (!widget) return;

    widget.id = "coinmarketcap-widget-marquee";
    widget.setAttribute("coins", coins);
    widget.setAttribute("currency", currency);
    widget.setAttribute("theme", resolvedTheme === 'dark' ? 'dark' : 'light');
    widget.setAttribute("transparent", transparent);
    widget.setAttribute("show-symbol-logo", showSymbolLogo);

    const runWidgetInit = () => {
      window.__WIDGET_INIT?.();
    };

    widget.innerHTML = "";

    const scriptId = "coinmarketcap-widget-marquee-script";
    const existingScript = document.getElementById(
      scriptId,
    ) as HTMLScriptElement | null;

    if (window.__WIDGET_INIT) {
      runWidgetInit();
      return;
    }

    if (existingScript) {
      existingScript.addEventListener("load", runWidgetInit, { once: true });
      return () => {
        existingScript.removeEventListener("load", runWidgetInit);
      };
    }

    const script = document.createElement("script");
    script.id = scriptId;
    script.type = "text/javascript";
    script.src = "https://files.coinmarketcap.com/static/widget/coinMarquee.js";
    script.async = true;
    script.addEventListener("load", runWidgetInit, { once: true });
    document.body.appendChild(script);

    return () => {
      script.removeEventListener("load", runWidgetInit);
    };
  }, [coins, currency, transparent, showSymbolLogo, resolvedTheme]);

  return (
    <div>
      <div ref={widgetRef}></div>
    </div>
  );
}

export default CoinMarketCapWidget;