"use client";

import { useCallback, useEffect, useRef, useState } from "react";
import { Eye, Loader2, Send, CheckCircle2, XCircle } from "lucide-react";

/**
 * Vista previa en vivo del mismo HTML que envía "correo de prueba", y botón de envío.
 */
export default function LivePreviewSend() {
  const [email, setEmail] = useState("");
  const [html, setHtml] = useState<string | null>(null);
  const [subject, setSubject] = useState("");
  const [loadingPreview, setLoadingPreview] = useState(true);
  const [previewError, setPreviewError] = useState<string | null>(null);
  const [sending, setSending] = useState(false);
  const [sendResult, setSendResult] = useState<{ ok: boolean; msg: string } | null>(null);
  const reqId = useRef(0);

  const loadPreview = useCallback(async (to: string) => {
    const id = ++reqId.current;
    setLoadingPreview(true);
    setPreviewError(null);

    const ctrl = new AbortController();
    const timer = setTimeout(() => ctrl.abort(), 8000);

    try {
      const q = to.includes("@") ? `?to=${encodeURIComponent(to.trim())}` : "";
      const res = await fetch(`/api/admin/email-preview-html${q}`, {
        credentials: "include",
        signal: ctrl.signal,
      });
      if (id !== reqId.current) return;

      const data = await res.json().catch(() => ({}));
      if (!res.ok) {
        setPreviewError(data.error || `No se pudo cargar la vista previa (${res.status})`);
        setHtml(null);
        return;
      }
      setHtml(data.html ?? null);
      setSubject(data.subject || "");
    } catch (e) {
      if (id !== reqId.current) return;
      const aborted = e instanceof DOMException && e.name === "AbortError";
      setPreviewError(aborted ? "La vista previa tardó demasiado. Recarga la página." : "Error de red al cargar la vista previa");
      setHtml(null);
    } finally {
      clearTimeout(timer);
      if (id === reqId.current) setLoadingPreview(false);
    }
  }, []);

  useEffect(() => {
    loadPreview("");
  }, [loadPreview]);

  useEffect(() => {
    const t = setTimeout(() => {
      if (email.trim() === "") {
        loadPreview("");
        return;
      }
      if (email.includes("@")) loadPreview(email);
    }, 500);
    return () => clearTimeout(t);
  }, [email, loadPreview]);

  const handleSend = async () => {
    if (!email || !email.includes("@")) return;
    setSending(true);
    setSendResult(null);
    try {
      const res = await fetch(`/api/admin/send-test-email`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        credentials: "include",
        body: JSON.stringify({ to: email.trim() }),
      });
      const data = await res.json().catch(() => ({}));
      setSendResult({ ok: res.ok, msg: data.message || data.error || "Error desconocido" });
      if (res.ok) window.dispatchEvent(new CustomEvent("email-sent"));
    } catch {
      setSendResult({ ok: false, msg: "Error de red al enviar" });
    } finally {
      setSending(false);
    }
  };

  return (
    <div className="space-y-4">
      <div className="rounded-xl border border-white/10 bg-white/[0.03] overflow-hidden">
        <div className="flex items-center gap-2 px-4 py-3 border-b border-white/10 bg-white/5">
          <Eye className="w-5 h-5 text-green-400 shrink-0" />
          <div>
            <p className="text-sm font-semibold text-white">Vista previa antes de enviar</p>
            <p className="text-xs text-gray-400">
              Es el mismo HTML que recibirá la bandeja. Escribe un correo abajo para ver el saludo con el nombre (parte antes del @).
            </p>
          </div>
        </div>

        <div className="relative min-h-[200px] bg-[#0a0a0a]">
          {loadingPreview && (
            <div className="absolute inset-0 flex items-center justify-center bg-black/40 z-10">
              <Loader2 className="w-8 h-8 text-[#7c3aed] animate-spin" />
            </div>
          )}
          {previewError && (
            <div className="p-4 space-y-2">
              <p className="text-sm text-red-400">{previewError}</p>
              <button
                type="button"
                onClick={() => loadPreview(email)}
                className="text-xs px-3 py-1.5 rounded-lg border border-white/20 text-gray-300 hover:text-white"
              >
                Reintentar
              </button>
            </div>
          )}
          {html && !previewError && (
            <iframe
              srcDoc={html}
              className="w-full bg-white"
              style={{ height: "420px", border: "none" }}
              title="Vista previa del correo de compra"
              sandbox="allow-same-origin"
            />
          )}
        </div>
      </div>

      <div className="bg-white/5 border border-white/10 rounded-xl p-5 flex flex-col gap-4">
        <div>
          <p className="text-sm font-semibold text-white mb-1">Enviar correo de prueba real</p>
          <p className="text-xs text-gray-400">
            Tras revisar la vista previa, introduce el correo destino y envía.
          </p>
          {subject && (
            <p className="text-xs text-gray-500 mt-2 font-mono">
              Asunto: <span className="text-[#7c3aed]">{subject}</span>
            </p>
          )}
        </div>
        <div className="flex flex-col sm:flex-row gap-2">
          <input
            type="email"
            value={email}
            onChange={(e) => {
              setEmail(e.target.value);
              setSendResult(null);
            }}
            placeholder="correo donde recibir la prueba"
            className="flex-1 bg-black/40 border border-white/10 rounded-xl px-3 py-2.5 text-sm text-white focus:outline-none focus:border-[#7c3aed] placeholder:text-gray-600"
          />
          <button
            type="button"
            onClick={handleSend}
            disabled={sending || !email.includes("@")}
            className="flex items-center justify-center gap-2 px-5 py-2.5 bg-gradient-to-r from-[#7c3aed] to-[#0ea5c6] text-white text-sm font-semibold rounded-xl disabled:opacity-50 hover:opacity-90 transition-opacity shrink-0"
          >
            {sending ? <Loader2 className="w-4 h-4 animate-spin" /> : <Send className="w-4 h-4" />}
            Enviar prueba
          </button>
        </div>
        {sendResult && (
          <div
            className={`flex items-center gap-2 text-sm rounded-lg px-3 py-2 ${
              sendResult.ok
                ? "bg-green-500/10 text-green-400 border border-green-500/20"
                : "bg-red-500/10 text-red-400 border border-red-500/20"
            }`}
          >
            {sendResult.ok ? <CheckCircle2 className="w-4 h-4 shrink-0" /> : <XCircle className="w-4 h-4 shrink-0" />}
            {sendResult.msg}
          </div>
        )}
      </div>
    </div>
  );
}