import { Mail } from "lucide-react";
import { buildTicketEmailHtml } from "@/lib/email-template";
import { getSiteConfig, getTicketEmailExtras } from "@/lib/site-config";
import EmailStatusPanel from "./EmailStatusPanel";
import LivePreviewSend from "./LivePreviewSend";

const BASE_URL = process.env.NEXT_PUBLIC_APP_URL || process.env.NEXTAUTH_URL || "http://localhost:3000";

export default async function EmailPreviewPage() {
  const extras = getTicketEmailExtras(await getSiteConfig());
  // URL pública (NO base64): embeber el PNG en base64 hincha la página a ~1.6MB y congela el navegador.
  const logoSrc = `${BASE_URL}/brand/logo-creciendo-con-amor.png`;

  const tickets3 = ["CCA-A3F9K2B", "CCA-R7XM5QP", "CCA-J1DW8YN"].join("   ·   ");
  const tickets10 = [
    "CCA-A3F9K2B", "CCA-R7XM5QP", "CCA-J1DW8YN", "CCA-T4ZQ6MR", "CCA-B9VH3WL",
    "CCA-K2YX7PC", "CCA-F6NM1DS", "CCA-U8GA5EB", "CCA-C3LT9JV", "CCA-W5PQ4HF",
  ].join("   ·   ");

  const htmlConNombre = buildTicketEmailHtml({
    userName: "María González",
    numbersList: tickets3,
    baseUrl: BASE_URL,
    logoSrc,
    items: [{ name: "3 boletos", quantity: 1, price: 10000, type: "TICKET" }],
    ...extras,
  });
  const htmlSinNombre = buildTicketEmailHtml({
    userName: null,
    numbersList: tickets10,
    baseUrl: BASE_URL,
    logoSrc,
    ...extras,
  });

  return (
    <div className="space-y-8">
      <div className="flex items-center gap-3">
        <Mail className="text-green-400 w-7 h-7" />
        <h1 className="text-3xl font-bold">Vista previa del correo</h1>
      </div>

      <p className="text-gray-400 text-sm max-w-2xl">
        Primero revisa la vista previa (mismo HTML que el correo real tras una compra). Luego puedes enviar una prueba a tu bandeja.
        Asunto en compras reales:{" "}
        <span className="font-mono text-[#7c3aed]">Hola [nombre], tus códigos…</span> o{" "}
        <span className="font-mono text-[#7c3aed]">Tus códigos para el sorteo - Concursando con Amor</span>.
      </p>

      <EmailStatusPanel />
      <LivePreviewSend />

      <div className="space-y-10">
        <div>
          <h2 className="text-lg font-semibold text-gray-300 mb-3">
            Con nombre del comprador — 3 códigos
          </h2>
          <div className="rounded-xl overflow-hidden border border-white/10">
            <div className="bg-white/5 px-4 py-2 text-xs text-gray-500 font-mono border-b border-white/10 flex gap-6 flex-wrap">
              <span><span className="text-gray-400">Para:</span> cliente@ejemplo.com</span>
              <span><span className="text-gray-400">Asunto:</span> Tus códigos para el sorteo - Concursando con Amor</span>
            </div>
            <iframe
              srcDoc={htmlConNombre}
              className="w-full bg-white"
              style={{ height: "460px", border: "none" }}
              title="Preview correo con nombre"
              sandbox="allow-same-origin"
            />
          </div>
        </div>

        <div>
          <h2 className="text-lg font-semibold text-gray-300 mb-3">
            Sin nombre / invitado — 10 códigos
          </h2>
          <div className="rounded-xl overflow-hidden border border-white/10">
            <div className="bg-white/5 px-4 py-2 text-xs text-gray-500 font-mono border-b border-white/10 flex gap-6 flex-wrap">
              <span><span className="text-gray-400">Para:</span> cliente@ejemplo.com</span>
              <span><span className="text-gray-400">Asunto:</span> Tus códigos para el sorteo - Concursando con Amor</span>
            </div>
            <iframe
              srcDoc={htmlSinNombre}
              className="w-full bg-white"
              style={{ height: "480px", border: "none" }}
              title="Preview correo sin nombre"
              sandbox="allow-same-origin"
            />
          </div>
        </div>

        <div className="text-xs text-gray-500">
          Para modificar el diseño edita{" "}
          <span className="font-mono text-[#7c3aed]">src/lib/email-template.ts</span> —{" "}
          función <span className="font-mono text-purple-400">buildTicketEmailHtml</span>.
        </div>
      </div>
    </div>
  );
}