"use client";

import { useEffect, useMemo, useRef, useState } from "react";

interface TradingViewEmbedProps {
  scriptSrc: string;
  config: Record<string, unknown>;
  height?: number;
}

export function TradingViewEmbed({ scriptSrc, config, height = 280 }: TradingViewEmbedProps) {
  const containerRef = useRef<HTMLDivElement>(null);
  const [failed, setFailed] = useState(false);

  const fallbackItems = useMemo(() => {
    const groups = (config as { symbolsGroups?: unknown }).symbolsGroups;
    if (!Array.isArray(groups)) return [];
    const out: string[] = [];
    for (const group of groups) {
      const symbols = (group as { symbols?: unknown })?.symbols;
      if (!Array.isArray(symbols)) continue;
      for (const item of symbols) {
        const label =
          (item as { displayName?: unknown }).displayName ??
          (item as { name?: unknown }).name;
        if (typeof label === "string" && label.trim()) out.push(label.trim());
      }
    }
    return out.slice(0, 6);
  }, [config]);

  const getCspNonce = () => {
    if (typeof document === "undefined") return null;
    const nonceScript = document.querySelector("script[nonce]") as
      | HTMLScriptElement
      | null;
    return nonceScript?.nonce ?? null;
  };

  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;
    setFailed(false);

    container.innerHTML = "";

    const widgetDiv = document.createElement("div");
    widgetDiv.className = "tradingview-widget-container__widget";
    widgetDiv.style.height = `${height}px`;
    widgetDiv.style.width = "100%";
    container.appendChild(widgetDiv);

    const script = document.createElement("script");
    script.src = scriptSrc;
    script.async = true;
    script.type = "text/javascript";
    const nonce = getCspNonce();
    if (nonce) script.nonce = nonce;
    const usesAutosize = (config as { autosize?: unknown }).autosize === true;
    const sizingConfig = usesAutosize ? {} : { height: String(height), width: "100%" };
    script.innerHTML = JSON.stringify({ ...config, ...sizingConfig });
    container.appendChild(script);

    const healthCheck = window.setTimeout(() => {
      const hasIframe = container.querySelector("iframe") !== null;
      const hasWidgetMarkup =
        container.querySelector(".tradingview-widget-container__widget iframe") !== null;
      if (!hasIframe && !hasWidgetMarkup) {
        setFailed(true);
      }
    }, 4500);

    return () => {
      window.clearTimeout(healthCheck);
      container.innerHTML = "";
    };
  }, [scriptSrc, height, config]);

  return (
    <div
      className="h-full w-full overflow-hidden rounded-xl border border-slate-100 bg-white"
      style={{ minHeight: height }}
    >
      {failed ? (
        <div className="flex h-full min-h-[180px] flex-col items-center justify-center gap-2 px-4 text-center">
          <p className="text-sm font-semibold text-slate-700">Market data is temporarily unavailable</p>
          {fallbackItems.length > 0 && (
            <p className="text-xs text-slate-500">{fallbackItems.join(" • ")}</p>
          )}
          <p className="text-[11px] text-slate-400">Please refresh and try again.</p>
        </div>
      ) : (
        <div ref={containerRef} className="tradingview-widget-container w-full" />
      )}
    </div>
  );
}