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

interface StimulsoftViewerProps {
  requestUrl: string;
  action?: string;
  width?: string;
  height?: string;
  onClose?: () => void;
  orderId?: number;
  model?: string;
}

/**
 * StimulsoftViewer Component
 * Componente para renderizar o Stimulsoft Reports Viewer
 * Baseado no componente stimulsoft-viewer-angular do portal Angular
 *
 * O componente usa a biblioteca Stimulsoft Reports.JS para processar o JSON
 * retornado pelo servidor e renderizar o viewer
 */
const StimulsoftViewer: React.FC<StimulsoftViewerProps> = ({
  requestUrl,
  action,
  width = "100%",
  height = "800px",
  onClose,
  orderId,
  model,
}) => {
  const viewerRef = useRef<HTMLDivElement>(null);
  const iframeRef = useRef<HTMLIFrameElement | null>(null);
  const formRef = useRef<HTMLFormElement | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  // Gerar ID único para o viewer (deve ser declarado antes do useEffect)
  const viewerIdRef = useRef(
    `stimulsoft-viewer-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
  );
  const viewerId = viewerIdRef.current;

  // Construir a URL base (sem query params, pois vamos usar POST)
  const baseUrl = action ? requestUrl.replace("{action}", action) : requestUrl;
  const urlWithoutParams = baseUrl.split("?")[0];

  useEffect(() => {
    let isMounted = true;

    if (!viewerRef.current) return;

    // Limpar conteúdo anterior
    viewerRef.current.innerHTML = "";

    // Extrair parâmetros da URL original se não foram fornecidos via props
    const urlParams = new URLSearchParams(baseUrl.split("?")[1] || "");
    const finalOrderId = orderId
      ? String(orderId)
      : urlParams.get("orderId") || "";
    const finalModel = model || urlParams.get("model") || "A";

    // Criar iframe
    const iframe = document.createElement("iframe");
    iframe.name = `stimulsoft-viewer-iframe-${Date.now()}`;
    iframe.style.width = "100%";
    iframe.style.height = "100%";
    iframe.style.border = "none";
    iframe.style.borderRadius = "0 0 1.5rem 1.5rem";
    iframe.title = "Stimulsoft Viewer";
    iframe.allow = "fullscreen";

    // Criar formulário que faz POST com multipart/form-data
    // O componente Angular stimulsoft-viewer-angular faz POST com esses parâmetros
    // O navegador vai criar o boundary automaticamente quando usamos multipart/form-data
    const form = document.createElement("form");
    form.method = "POST";
    form.action = urlWithoutParams;
    form.target = iframe.name;
    form.setAttribute("enctype", "multipart/form-data");
    form.style.display = "none";

    // Adicionar campos do formulário conforme a requisição funcional do Angular
    const fields = {
      orderId: finalOrderId,
      model: finalModel,
      stiweb_component: "Viewer",
      stiweb_imagesScalingFactor: "1",
      stiweb_action: "AngularViewerData",
    };

    // Log para debug
    console.log("StimulsoftViewer - URL:", urlWithoutParams);
    console.log("StimulsoftViewer - Campos:", fields);

    Object.entries(fields).forEach(([key, value]) => {
      const input = document.createElement("input");
      input.type = "hidden";
      input.name = key;
      input.value = String(value);
      form.appendChild(input);
    });

    // Verificar se orderId está vazio (pode causar erro 500)
    if (!finalOrderId) {
      setError("Erro: orderId não foi fornecido.");
      setLoading(false);
      return;
    }

    let loadTimeout: NodeJS.Timeout;
    let errorDetected = false;

    const handleIframeLoad = () => {
      if (isMounted && !errorDetected) {
        // Verificar se houve erro no iframe (status 500, etc)
        try {
          const iframeDoc =
            iframe.contentDocument || iframe.contentWindow?.document;
          if (iframeDoc) {
            const bodyText =
              iframeDoc.body?.innerText || iframeDoc.body?.textContent || "";
            // Se o conteúdo contém indicadores de erro
            if (
              bodyText.includes("500") ||
              bodyText.includes("Internal Server Error") ||
              bodyText.includes("Error")
            ) {
              errorDetected = true;
              setError(
                "Erro ao carregar o relatório. O servidor retornou um erro."
              );
              setLoading(false);
              return;
            }
          }
        } catch (e) {
          // CORS pode impedir acesso ao conteúdo do iframe, mas isso é normal
          console.log(
            "Não foi possível verificar conteúdo do iframe (pode ser CORS):",
            e
          );
        }

        clearTimeout(loadTimeout);
        setLoading(false);
      }
    };

    const handleIframeError = () => {
      if (isMounted) {
        errorDetected = true;
        setError(
          "Erro ao carregar o relatório. Verifique a URL e a conexão com o servidor."
        );
        setLoading(false);
      }
    };

    // Timeout para detectar se o iframe não carregou
    loadTimeout = setTimeout(() => {
      if (isMounted && loading) {
        // Verificar se o iframe realmente carregou
        try {
          if (iframe.contentWindow && iframe.contentDocument) {
            // Iframe carregou, mas pode ter demorado
            handleIframeLoad();
          } else {
            errorDetected = true;
            setError("Timeout ao carregar o relatório. Verifique a conexão.");
            setLoading(false);
          }
        } catch (e) {
          // CORS pode impedir acesso, mas isso não significa erro
          // Se passou muito tempo, pode ser um problema
          errorDetected = true;
          setError("Timeout ao carregar o relatório.");
          setLoading(false);
        }
      }
    }, 30000); // 30 segundos de timeout

    iframe.addEventListener("load", handleIframeLoad);
    iframe.addEventListener("error", handleIframeError);

    // Adicionar iframe primeiro ao DOM e aguardar estar pronto
    if (viewerRef.current) {
      viewerRef.current.appendChild(iframe);
    }

    formRef.current = form;
    iframeRef.current = iframe;

    // Aguardar o iframe estar completamente carregado antes de submeter o formulário
    const waitForIframeReady = () => {
      if (!isMounted) return;

      // Verificar se o iframe está pronto
      try {
        // Tentar acessar o contentWindow para verificar se está pronto
        if (iframe.contentWindow) {
          // Iframe está pronto, adicionar formulário e submeter
          // Adicionar formulário ao body do documento
          document.body.appendChild(form);

          // Aguardar um pequeno delay antes de submeter
          setTimeout(() => {
            if (isMounted && formRef.current) {
              try {
                console.log("Submetendo formulário para:", urlWithoutParams);
                formRef.current.submit();
              } catch (e) {
                console.error("Erro ao submeter formulário:", e);
                errorDetected = true;
                setError("Erro ao enviar requisição ao servidor.");
                setLoading(false);
              }
            }
          }, 50);
        } else {
          // Iframe ainda não está pronto, tentar novamente
          setTimeout(waitForIframeReady, 10);
        }
      } catch (e) {
        // Erro ao acessar contentWindow (pode ser CORS), mas continuar mesmo assim
        document.body.appendChild(form);
        setTimeout(() => {
          if (isMounted && formRef.current) {
            try {
              console.log("Submetendo formulário para:", urlWithoutParams);
              formRef.current.submit();
            } catch (err) {
              console.error("Erro ao submeter formulário:", err);
              errorDetected = true;
              setError("Erro ao enviar requisição ao servidor.");
              setLoading(false);
            }
          }
        }, 100);
      }
    };

    // Aguardar um pouco antes de verificar se o iframe está pronto
    setTimeout(waitForIframeReady, 50);

    return () => {
      isMounted = false;
      clearTimeout(loadTimeout);
      if (iframeRef.current) {
        iframeRef.current.removeEventListener("load", handleIframeLoad);
        iframeRef.current.removeEventListener("error", handleIframeError);
      }
      // Remover formulário do body se ainda estiver lá
      if (formRef.current && formRef.current.parentNode) {
        formRef.current.parentNode.removeChild(formRef.current);
      }
    };
  }, [baseUrl, urlWithoutParams, orderId, model]);

  return (
    <div className="relative w-full h-full" style={{ width, height }}>
      {/* <iframe
        // src="http://10.1.1.205:8068/Viewer/InitViewerOrder?orderId=519003838&model=A"
        src="http://10.1.1.205:8068/Viewer/ViewerEvent?orderId=519003838&model=A"
        width="100%"
        height="800"
        style={{ border: "none" }}
      /> */}
      {onClose && (
        <button
          onClick={onClose}
          className="absolute top-2 right-2 z-50 p-2 bg-white rounded-lg shadow-md hover:bg-slate-100 transition-colors"
          title="Fechar"
        >
          <svg
            className="w-5 h-5 text-slate-600"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M6 18L18 6M6 6l12 12"
            />
          </svg>
        </button>
      )}

      {loading && (
        <div className="absolute inset-0 flex items-center justify-center bg-white/80 z-40">
          <div className="flex flex-col items-center gap-3">
            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-[#002147]"></div>
            <p className="text-sm text-slate-600 font-medium">
              Carregando relatório...
            </p>
          </div>
        </div>
      )}

      {error && (
        <div className="absolute inset-0 flex items-center justify-center bg-white z-40">
          <div className="text-center p-6">
            <p className="text-red-600 font-medium mb-2">{error}</p>
            <p className="text-sm text-slate-500">URL: {baseUrl}</p>
            <button
              onClick={() => {
                setError(null);
                setLoading(true);
                // Recarregar o viewer
                window.location.reload();
              }}
              className="mt-4 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
            >
              Tentar novamente
            </button>
          </div>
        </div>
      )}

      <div
        id={viewerId}
        ref={viewerRef}
        style={{
          width: "100%",
          height: "100%",
          border: "none",
          borderRadius: "0 0 1.5rem 1.5rem",
        }}
      />
    </div>
  );
};

export default StimulsoftViewer;