import { useEffect, useRef, useState, useCallback } from "react";
import { Loader2, AlertTriangle, ExternalLink, RefreshCw } from "lucide-react";

interface SupersetDashboardProps {
  dashboardId: string;
  height?: string | number;
  className?: string;
  showOpenLink?: boolean;
}

/**
 * Componente reutilizável para embedar dashboards do Apache Superset (Arcádia Insights)
 * em QUALQUER tela do Arcádia Suite via Guest Token JWT.
 *
 * Uso:
 *   <SupersetDashboard dashboardId="financial-overview" />
 *   <SupersetDashboard dashboardId="dre-mensal" height={400} />
 */
export function SupersetDashboard({
  dashboardId,
  height = "calc(100vh - 320px)",
  className = "",
  showOpenLink = true,
}: SupersetDashboardProps) {
  const containerRef = useRef<HTMLDivElement>(null);
  const sdkRef = useRef<any>(null);
  const [status, setStatus] = useState<"loading" | "ready" | "error" | "unavailable">("loading");
  const [errorMsg, setErrorMsg] = useState<string>("");

  // Busca token e embeddedId (UUID) do backend
  const fetchTokenData = useCallback(async (): Promise<{ token: string; embeddedId: string }> => {
    const resp = await fetch("/api/superset/guest-token", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ dashboardId }),
      credentials: "include",
    });
    if (!resp.ok) {
      const err = await resp.json().catch(() => ({ error: "Erro desconhecido" }));
      throw new Error(err.error || `HTTP ${resp.status}`);
    }
    return resp.json();
  }, [dashboardId]);

  const loadDashboard = useCallback(async () => {
    if (!containerRef.current) return;
    setStatus("loading");
    setErrorMsg("");

    try {
      // Verifica se Superset está disponível
      const health = await fetch("/api/superset/health", { credentials: "include" });
      const healthData = await health.json();
      if (!healthData.online) {
        setStatus("unavailable");
        return;
      }

      // Resolve embeddedId (UUID) e obtém token inicial
      const { embeddedId } = await fetchTokenData();

      // Importa SDK dinamicamente (só quando necessário)
      const { embedDashboard } = await import("@superset-ui/embedded-sdk");

      // Limpa embedding anterior se houver
      if (sdkRef.current) {
        containerRef.current.innerHTML = "";
      }

      sdkRef.current = await embedDashboard({
        id: embeddedId,   // UUID do embedded config (não o slug)
        supersetDomain: "https://bi.onboardbi.com.br",
        mountPoint: containerRef.current,
        fetchGuestToken: async () => {
          const { token } = await fetchTokenData();
          return token;
        },
        dashboardUiConfig: {
          hideTitle: true,
          hideChartControls: false,
          filters: { visible: true, expanded: false },
        },
      });

      setStatus("ready");
    } catch (err: any) {
      console.error("[SupersetDashboard] Erro:", err.message, err);
      setErrorMsg(err.message || "Erro desconhecido");
      setStatus("error");
    }
  }, [dashboardId, fetchTokenData]);

  useEffect(() => {
    loadDashboard();
    return () => {
      if (containerRef.current) containerRef.current.innerHTML = "";
    };
  }, [loadDashboard]);

  const heightStyle = typeof height === "number" ? `${height}px` : height;

  if (status === "unavailable") {
    return (
      <div className={`flex flex-col items-center justify-center gap-4 rounded-xl border border-yellow-100 bg-yellow-50 ${className}`} style={{ height: heightStyle }}>
        <AlertTriangle className="w-8 h-8 text-yellow-500" />
        <div className="text-center">
          <p className="font-medium text-yellow-800 text-sm">Arcádia Insights indisponível</p>
          <p className="text-yellow-600 text-xs mt-1">O serviço de BI está iniciando. Tente novamente em alguns segundos.</p>
        </div>
        <button onClick={loadDashboard} className="flex items-center gap-2 px-4 py-2 bg-yellow-600 text-white rounded-lg text-sm hover:bg-yellow-700 transition-colors">
          <RefreshCw className="w-4 h-4" /> Tentar novamente
        </button>
        <a href="https://bi.onboardbi.com.br" target="_blank" rel="noopener noreferrer" className="text-xs text-yellow-700 underline">Abrir em nova aba</a>
      </div>
    );
  }

  if (status === "error") {
    return (
      <div className={`flex flex-col items-center justify-center gap-4 rounded-xl border border-red-100 bg-red-50 ${className}`} style={{ height: heightStyle }}>
        <AlertTriangle className="w-8 h-8 text-red-400" />
        <div className="text-center">
          <p className="font-medium text-red-700 text-sm">Erro ao carregar dashboard</p>
          <p className="text-red-500 text-xs mt-1">{errorMsg}</p>
        </div>
        <button
          onClick={loadDashboard}
          className="flex items-center gap-2 px-4 py-2 bg-red-600 text-white rounded-lg text-sm hover:bg-red-700 transition-colors"
        >
          <RefreshCw className="w-4 h-4" /> Tentar novamente
        </button>
      </div>
    );
  }

  return (
    <div className={`relative ${className}`} style={{ height: heightStyle }}>
      {status === "loading" && (
        <div className="absolute inset-0 flex items-center justify-center bg-white/90 z-10 rounded-xl">
          <div className="text-center">
            <Loader2 className="w-8 h-8 text-[#c89b3c] animate-spin mx-auto mb-3" />
            <p className="text-sm text-[#1f334d] font-medium">Carregando Arcádia Insights...</p>
          </div>
        </div>
      )}

      {showOpenLink && status === "ready" && (
        <a
          href="https://bi.onboardbi.com.br"
          target="_blank"
          rel="noopener noreferrer"
          className="absolute top-3 right-3 z-10 flex items-center gap-1 px-2 py-1 bg-white/80 backdrop-blur text-[#1f334d] text-xs rounded-lg border border-gray-200 hover:bg-white transition-colors shadow-sm"
        >
          <ExternalLink className="w-3 h-3" /> Abrir completo
        </a>
      )}

      <div
        ref={containerRef}
        className="w-full h-full rounded-xl overflow-hidden border border-[#c89b3c]/20"
      />
    </div>
  );
}