const { useState, useEffect, useCallback } = React;

// ─── CONSTANTS ──────────────────────────────────────────────────────────────
const USER_EMAIL = "juanmejia88@gmail.com";
const STORAGE_KEY = "radar-prefs-juan";

const ORGS = [
    { name: "BCW Global / Burson", cat: "Consultora PA", priority: 5, twitter: "@BCW_Global", web: "bcwglobal.com" },
    { name: "SEGIB", cat: "Org. Internacional", priority: 5, twitter: "@segib", web: "segib.org" },
    { name: "FIIAPP", cat: "Organismo Público", priority: 5, twitter: "@fiiapp", web: "fiap.gob.es" },
    { name: "Real Instituto Elcano", cat: "Think Tank", priority: 5, twitter: "@rielcano", web: "realinstitutoelcano.org" },
    { name: "Club de Madrid", cat: "Org. Internacional", priority: 5, twitter: "@ClubdeMadrid", web: "clubmadrid.org" },
    { name: "Comisión Europea España", cat: "Institución UE", priority: 5, twitter: "@ComisionEuropea", web: "spain.representation.ec.europa.eu" },
    { name: "LLYC", cat: "Consultora PA", priority: 5, twitter: "@llorenteycuenca", web: "llyc.global" },
    { name: "Kreab Madrid", cat: "Consultora PA", priority: 5, twitter: "@KreabES", web: "kreab.com/espana" },
    { name: "Harmon Corporate Affairs", cat: "Consultora PA", priority: 5, twitter: "@harmonCA", web: "harmon.es" },
    { name: "Fundación Carolina", cat: "Think Tank", priority: 5, twitter: "@fcarolina_es", web: "fundacioncarolina.es" },
    { name: "Embajada de EE.UU. (Madrid)", cat: "Embajada", priority: 5, twitter: "@USembassyMadrid", web: "es.usembassy.gov" },
    { name: "APRI", cat: "Asociación Prof.", priority: 5, twitter: "@Lobby_ES", web: "relacionesinstitucionales.es" },
    { name: "AmCham Spain", cat: "Cámara / Red", priority: 5, twitter: "@AmChamSpain", web: "amchamspain.com" },
    { name: "Civio", cat: "ONG / Media", priority: 5, twitter: "@civio", web: "civio.es" },
    { name: "FTI Consulting Madrid", cat: "Consultora PA", priority: 5, twitter: "@FTIConsulting", web: "fticonsulting.com/en/spain" },
    { name: "ECFR Madrid", cat: "Think Tank", priority: 4, twitter: "@ecfr", web: "ecfr.eu/madrid" },
    { name: "Casa de América", cat: "Inst. Público", priority: 4, twitter: "@casamerica", web: "casamerica.es" },
    { name: "ACOP", cat: "Asociación Prof.", priority: 4, twitter: "@compolitica", web: "compolitica.com" },
    { name: "Newtral", cat: "Media", priority: 4, twitter: "@newtral_media", web: "newtral.es" },
    { name: "Agencia EFE", cat: "Media", priority: 4, twitter: "@EFEnoticias", web: "efe.com" },
    { name: "AECID", cat: "Organismo Público", priority: 4, twitter: "@AECID_es", web: "aecid.es" },
    { name: "Atrevia", cat: "Consultora PA", priority: 4, twitter: "@atrevia", web: "atrevia.com" },
    { name: "beBartlet", cat: "Consultora PA", priority: 4, twitter: "@beBartlet", web: "bebartlet.com" },
    { name: "NITID Corporate Affairs", cat: "Consultora PA", priority: 4, twitter: "@NITIDcorp", web: "masconsulting.es" },
    { name: "Gobe Studio", cat: "GovTech", priority: 4, twitter: "@gobestudio", web: "gobe.studio" },
    { name: "Maldita.es", cat: "Media", priority: 4, twitter: "@malditaes", web: "maldita.es" },
    { name: "DIRCOM", cat: "Asociación Prof.", priority: 3, twitter: "@DIRCOM_ES", web: "dircom.org" },
    { name: "IE School of Politics", cat: "Universidad", priority: 3, twitter: "@IE_SPEGA", web: "ie.edu" },
    { name: "Casa Árabe", cat: "Inst. Público", priority: 3, twitter: "@casaarabe", web: "casaarabe.es" },
];

const CATS = ["Todas", ...Array.from(new Set(ORGS.map(o => o.cat))).sort()];

const CAT_COLOR = {
    "Consultora PA": "#B8860B",
    "Org. Internacional": "#0B7A80",
    "Organismo Público": "#1A7A4A",
    "Think Tank": "#7B2D8B",
    "Institución UE": "#1B3A6B",
    "Embajada": "#2E4A8B",
    "Asociación Prof.": "#16A085",
    "Cámara / Red": "#8E44AD",
    "ONG / Media": "#C0392B",
    "Media": "#A93226",
    "Inst. Público": "#2E6DB4",
    "GovTech": "#117A65",
    "Universidad": "#566573",
};

// ─── EMAIL HTML BUILDER ─────────────────────────────────────────────────────
function buildEmailHtml(results, orgs, searchType, dateStr) {
    const typeLabels = {
        eventos: "Eventos & Actos Próximos",
        vacantes: "Vacantes Activas",
        noticias: "Noticias Recientes",
    };
    const typeIcons = { eventos: "📅", vacantes: "💼", noticias: "📰" };

    return `<!DOCTYPE html>
<html lang="es">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Radar Organizaciones · ${typeLabels[searchType]}</title></head>
<body style="margin:0;padding:0;background:#f4f7fb;font-family:'Georgia',serif;">
<table width="100%" cellpadding="0" cellspacing="0" style="background:#f4f7fb;padding:32px 0;">
<tr><td align="center">
<table width="640" cellpadding="0" cellspacing="0" style="background:#ffffff;border-radius:12px;overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,0.10);">
  <!-- HEADER -->
  <tr><td style="background:linear-gradient(135deg,#1B3A6B 0%,#0B7A80 100%);padding:32px 40px;">
    <p style="margin:0 0 4px;font-size:11px;letter-spacing:3px;color:#7ECFD4;text-transform:uppercase;">Juan Mejía Saravia · Madrid</p>
    <h1 style="margin:0;font-size:24px;color:#ffffff;font-weight:700;">Radar de Organizaciones</h1>
    <p style="margin:8px 0 0;font-size:14px;color:#A8D8DC;">${typeIcons[searchType]}  ${typeLabels[searchType]} · ${dateStr}</p>
  </td></tr>
  <!-- ORGS SCANNED -->
  <tr><td style="padding:20px 40px;background:#EBF3FB;border-bottom:1px solid #D0E4F5;">
    <p style="margin:0 0 8px;font-size:11px;letter-spacing:2px;color:#1B3A6B;text-transform:uppercase;font-weight:700;">Organizaciones escaneadas</p>
    <p style="margin:0;font-size:12px;color:#4A6A8B;line-height:1.8;">${orgs.join("  ·  ")}</p>
  </td></tr>
  <!-- RESULTS -->
  <tr><td style="padding:32px 40px;">
    ${results}
  </td></tr>
  <!-- FOOTER -->
  <tr><td style="padding:24px 40px;background:#1B3A6B;border-top:3px solid #0B7A80;">
    <p style="margin:0 0 4px;font-size:11px;color:#7ECFD4;letter-spacing:2px;text-transform:uppercase;">Radar · Plan Estratégico 2026</p>
    <p style="margin:0;font-size:11px;color:#567F9F;">Generado automáticamente · juanmejiasaravia.com</p>
  </td></tr>
</table>
</td></tr></table>
</body></html>`;
}

function textToEmailHtml(text) {
    if (!text) return "<p style='color:#888;font-style:italic;'>No se encontraron resultados para esta búsqueda.</p>";
    const lines = text.split("\n").filter(l => l.trim());
    let html = "";
    for (const line of lines) {
        const t = line.trim();
        if (t.startsWith("##") || t.startsWith("###")) {
            const content = t.replace(/^#+\s*/, "").replace(/\*\*/g, "");
            html += `<h3 style="margin:24px 0 8px;font-size:16px;color:#1B3A6B;border-bottom:2px solid #EBF3FB;padding-bottom:6px;">${content}</h3>`;
        } else if (t.startsWith("**") && t.endsWith("**")) {
            html += `<p style="margin:16px 0 6px;font-size:14px;font-weight:700;color:#0B7A80;">${t.replace(/\*\*/g, "")}</p>`;
        } else if (t.startsWith("- ") || t.startsWith("• ")) {
            html += `<p style="margin:4px 0 4px 16px;font-size:13px;color:#2C4A6A;line-height:1.7;padding-left:12px;border-left:2px solid #D0E4F5;">
        ${t.replace(/^[-•]\s*/, "").replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>")}
      </p>`;
        } else if (t) {
            html += `<p style="margin:6px 0;font-size:13px;color:#2C4A6A;line-height:1.8;">
        ${t.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>")}
      </p>`;
        }
    }
    return html;
}

// ─── MAIN COMPONENT ─────────────────────────────────────────────────────────
function RadarAlertas() {
    const [tab, setTab] = useState("radar");
    const [selected, setSelected] = useState([]);
    const [catFilter, setCatFilter] = useState("Todas");
    const [searchType, setSearchType] = useState("eventos");
    const [status, setStatus] = useState("idle"); // idle | searching | sending | done | error
    const [rawText, setRawText] = useState("");
    const [searchQueries, setSearchQueries] = useState([]);
    const [lastSent, setLastSent] = useState(null);
    const [history, setHistory] = useState([]);
    const [toast, setToast] = useState(null);
    const [previewMode, setPreviewMode] = useState(false);

    // ── Persistent storage ──────────────────────────────────────────────────
    useEffect(() => {
        try {
            const res = localStorage.getItem(STORAGE_KEY);
            if (res) {
                const saved = JSON.parse(res);
                if (saved.selected?.length) setSelected(saved.selected);
                if (saved.searchType) setSearchType(saved.searchType);
                if (saved.history) setHistory(saved.history);
                if (saved.lastSent) setLastSent(saved.lastSent);
            }
        } catch (_) {
            console.log("No saved prefs yet or localstorage blocked");
        }
    }, []);

    const savePrefs = useCallback((sel, type, hist, sent) => {
        try {
            localStorage.setItem(STORAGE_KEY, JSON.stringify({
                selected: sel, searchType: type, history: hist, lastSent: sent,
            }));
        } catch (_) { }
    }, []);

    const showToast = (msg, type = "ok") => {
        setToast({ msg, type });
        setTimeout(() => setToast(null), 4000);
    };

    const toggleOrg = (name) => {
        const next = selected.includes(name) ? selected.filter(n => n !== name) : [...selected, name];
        setSelected(next);
        savePrefs(next, searchType, history, lastSent);
    };

    const filtered = catFilter === "Todas" ? ORGS : ORGS.filter(o => o.cat === catFilter);
    const selectedOrgs = ORGS.filter(o => selected.includes(o.name));

    // ── SEARCH ──────────────────────────────────────────────────────────────
    const PROMPTS = {
        eventos: (orgs) => `Busca eventos, conferencias, seminarios, foros, webinars y actos públicos próximos (marzo-mayo 2026) organizados por o relacionados con estas organizaciones en España/Madrid: ${orgs.join(", ")}.
Para cada evento encontrado indica: nombre del evento, organizador, fecha aproximada, formato (presencial/online/híbrido), ubicación si aplica, y URL o fuente donde inscribirse.
Si no hay eventos confirmados aún, menciona los eventos recurrentes que estas organizaciones suelen organizar y cómo recibir avisos (newsletter, LinkedIn).
Responde en español, estructura por organización con secciones claras.`,

        vacantes: (orgs) => `Busca vacantes de empleo activas (enero-marzo 2026) en estas organizaciones de Madrid/España: ${orgs.join(", ")}.
Enfócate en puestos de: comunicación estratégica, asuntos públicos, relaciones institucionales, proyectos UE, cooperación internacional.
Para cada vacante indica: título, organización, requisitos clave, y URL de la oferta.
Responde en español, estructura por organización.`,

        noticias: (orgs) => `Busca las noticias y publicaciones más relevantes de enero-febrero 2026 de estas organizaciones: ${orgs.join(", ")}.
Para cada una resume el anuncio más importante y su relevancia para un profesional de comunicación estratégica y asuntos públicos en Madrid.
Responde en español.`,
    };

    const runSearch = async () => {
        if (!selected.length) return;
        setStatus("searching");
        setRawText("");
        setSearchQueries([]);
        setPreviewMode(false);

        const orgNames = selected.map(n => ORGS.find(o => o.name === n)?.name).filter(Boolean);

        try {
            // Connect to our secure PHP backend instead of direct API call
            const resp = await fetch("radar_api.php?action=search", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({
                    prompt: PROMPTS[searchType](orgNames)
                }),
            });

            const data = await resp.json();

            if (!data.success) throw new Error(data.message || "Error en la búsqueda");

            let text = data.text || "";
            let queries = data.queries || [];

            setRawText(text.trim());
            setSearchQueries(queries);
            setStatus("idle");
            setPreviewMode(true);
            showToast("Búsqueda completada", "ok");
        } catch (e) {
            console.error(e);
            setStatus("error");
            showToast("Error en búsqueda: " + e.message, "error");
            setStatus("idle");
        }
    };

    // ── SEND EMAIL ────────────────────────────────
    const sendDigest = async () => {
        if (!rawText) return;
        setStatus("sending");

        const dateStr = new Date().toLocaleDateString("es-ES", { day: "numeric", month: "long", year: "numeric" });
        const typeLabel = { eventos: "📅 Eventos Próximos", vacantes: "💼 Vacantes Activas", noticias: "📰 Noticias Recientes" };
        const subjectLine = `Radar Organizaciones · ${typeLabel[searchType]} · ${dateStr}`;

        const emailHtml = buildEmailHtml(textToEmailHtml(rawText), selected, searchType, dateStr);
        const plainText = `Radar de Organizaciones · ${typeLabel[searchType]} · ${dateStr}\n\nOrganizaciones escaneadas: ${selected.join(", ")}\n\n${rawText}`;

        try {
            // Connect to our secure PHP backend for email
            const resp = await fetch("radar_api.php?action=email", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({
                    to: USER_EMAIL,
                    subject: subjectLine,
                    html: emailHtml,
                    text: plainText
                }),
            });

            const data = await resp.json();

            if (data.success) {
                const newEntry = {
                    id: Date.now(),
                    date: dateStr,
                    type: searchType,
                    orgs: [...selected],
                    preview: rawText.slice(0, 200) + "…",
                };
                const newHistory = [newEntry, ...history].slice(0, 10);
                setHistory(newHistory);
                setLastSent(dateStr);
                savePrefs(selected, searchType, newHistory, dateStr);
                setStatus("idle");
                showToast(`✉️ Digest enviado a ${USER_EMAIL}`, "ok");
            } else {
                throw new Error(data.message || "Error al enviar");
            }
        } catch (e) {
            console.error(e);
            setStatus("idle");
            showToast("Error al enviar: " + e.message, "error");
        }
    };

    // ─── UI ──────────────────────────────────────────────────────────────────
    const isBusy = status === "searching" || status === "sending";

    return (
        <div style={S.root}>
            {/* Animated background */}
            <div style={S.bgGrid} />

            {/* TOAST */}
            {toast && (
                <div style={{ ...S.toast, background: toast.type === "ok" ? "#1A7A4A" : "#B22222" }}>
                    {toast.msg}
                </div>
            )}

            {/* HEADER */}
            <header style={S.header}>
                <div>
                    <div style={S.headerEyebrow}>SISTEMA DE ALERTAS · JUAN MEJÍA SARAVIA</div>
                    <h1 style={S.headerTitle}>Radar de Organizaciones</h1>
                </div>
                <div style={S.headerMeta}>
                    <span style={S.emailBadge}>📧 {USER_EMAIL}</span>
                    {lastSent && <span style={S.lastSentBadge}>Último envío: {lastSent}</span>}
                </div>
            </header>

            {/* TABS */}
            <nav style={S.tabBar}>
                {[
                    { id: "radar", label: "🔍 Buscar & Enviar" },
                    { id: "config", label: "⚙️ Mis Organizaciones" },
                    { id: "history", label: `📋 Historial (${history.length})` },
                    { id: "auto", label: "⚡ Automatización" },
                ].map(t => (
                    <button key={t.id} onClick={() => setTab(t.id)} style={{ ...S.tab, ...(tab === t.id ? S.tabActive : {}) }}>
                        {t.label}
                    </button>
                ))}
            </nav>

            <main style={S.main}>

                {/* ══ TAB: RADAR ══════════════════════════════════════════════════════ */}
                {tab === "radar" && (
                    <div style={S.twoCol}>
                        {/* LEFT: controls */}
                        <div style={S.leftPanel}>
                            {/* Search type */}
                            <div style={S.card}>
                                <div style={S.cardTitle}>Tipo de búsqueda</div>
                                {[
                                    { k: "eventos", icon: "📅", label: "Eventos próximos", desc: "Conferencias, foros, seminarios" },
                                    { k: "vacantes", icon: "💼", label: "Vacantes activas", desc: "Comunicación, PA, proyectos UE" },
                                    { k: "noticias", icon: "📰", label: "Noticias recientes", desc: "Anuncios y publicaciones clave" },
                                ].map(({ k, icon, label, desc }) => (
                                    <button
                                        key={k}
                                        onClick={() => { setSearchType(k); savePrefs(selected, k, history, lastSent); }}
                                        style={{ ...S.typeBtn, ...(searchType === k ? S.typeBtnActive : {}) }}
                                    >
                                        <span style={{ fontSize: 20 }}>{icon}</span>
                                        <div>
                                            <div style={{ fontWeight: 700, fontSize: 13, color: searchType === k ? "#E8EDF2" : "#8CA0B5" }}>{label}</div>
                                            <div style={{ fontSize: 11, color: "#567" }}>{desc}</div>
                                        </div>
                                    </button>
                                ))}
                            </div>

                            {/* Orgs summary */}
                            <div style={S.card}>
                                <div style={S.cardTitle}>
                                    Organizaciones seleccionadas
                                    <span style={{ marginLeft: 8, fontSize: 12, color: selected.length > 0 ? "#7ECFD4" : "#567" }}>
                                        {selected.length} de {ORGS.length}
                                    </span>
                                </div>
                                {selected.length === 0 ? (
                                    <p style={{ fontSize: 12, color: "#567", fontStyle: "italic", margin: "8px 0 0" }}>
                                        Ve a "Mis Organizaciones" para configurar tu watchlist.
                                    </p>
                                ) : (
                                    <div style={{ display: "flex", flexWrap: "wrap", gap: 4, marginTop: 8 }}>
                                        {selectedOrgs.slice(0, 10).map(o => (
                                            <span key={o.name} style={{ ...S.orgChip, borderColor: CAT_COLOR[o.cat] || "#555" }}>
                                                {o.name}
                                            </span>
                                        ))}
                                        {selected.length > 10 && (
                                            <span style={{ ...S.orgChip, borderColor: "#555", color: "#7ECFD4" }}>
                                                +{selected.length - 10} más
                                            </span>
                                        )}
                                    </div>
                                )}
                            </div>

                            {/* Action buttons */}
                            <button
                                onClick={runSearch}
                                disabled={isBusy || selected.length === 0}
                                style={{ ...S.btnPrimary, opacity: (isBusy || selected.length === 0) ? 0.5 : 1 }}
                            >
                                {status === "searching" ? "🔍 Buscando en la web…" : "🔍 Buscar ahora"}
                            </button>

                            {rawText && !isBusy && (
                                <button onClick={sendDigest} disabled={isBusy} style={S.btnSend}>
                                    {status === "sending" ? "📧 Enviando a Gmail…" : `📧 Enviar digest a ${USER_EMAIL}`}
                                </button>
                            )}

                            {searchQueries && searchQueries.length > 0 && (
                                <div style={{ marginTop: 12 }}>
                                    <div style={{ fontSize: 10, letterSpacing: 2, color: "#456", textTransform: "uppercase", marginBottom: 6 }}>Búsquedas web realizadas</div>
                                    {searchQueries.map((q, i) => (
                                        <div key={i} style={{ fontSize: 11, color: "#7ECFD4", padding: "2px 0" }}>🔍 {q}</div>
                                    ))}
                                </div>
                            )}
                        </div>

                        {/* RIGHT: results */}
                        <div style={S.rightPanel}>
                            {status === "searching" && (
                                <div style={S.loadingState}>
                                    <div style={{ fontSize: 48, marginBottom: 16 }}>🛰️</div>
                                    <div style={{ fontSize: 16, color: "#7ECFD4", marginBottom: 8 }}>Escaneando {selected.length} organizaciones…</div>
                                    <div style={{ fontSize: 12, color: "#567" }}>Buscando con Anthropic en forma segura</div>
                                    <div style={S.progressBar}><div style={S.progressFill} /></div>
                                </div>
                            )}

                            {status === "sending" && (
                                <div style={S.loadingState}>
                                    <div style={{ fontSize: 48, marginBottom: 16 }}>📧</div>
                                    <div style={{ fontSize: 16, color: "#7ECFD4" }}>Enviando digest a tu Gmail…</div>
                                </div>
                            )}

                            {!isBusy && rawText && (
                                <div>
                                    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 16 }}>
                                        <div style={{ fontSize: 11, letterSpacing: 2, color: "#567", textTransform: "uppercase" }}>
                                            Resultados de búsqueda
                                        </div>
                                        <button
                                            onClick={() => setPreviewMode(!previewMode)}
                                            style={S.btnSmall}
                                        >
                                            {previewMode ? "Ver texto en la página" : "Vista previa email"}
                                        </button>
                                    </div>
                                    {previewMode ? (
                                        <div style={{ background: "#fff", borderRadius: 8, overflow: "hidden" }}>
                                            <div
                                                style={{ padding: 0 }}
                                                dangerouslySetInnerHTML={{
                                                    __html: buildEmailHtml(textToEmailHtml(rawText), selected, searchType,
                                                        new Date().toLocaleDateString("es-ES", { day: "numeric", month: "long", year: "numeric" }))
                                                }}
                                            />
                                        </div>
                                    ) : (
                                        <div style={S.resultsText}>
                                            {rawText.split("\n").map((line, i) => {
                                                const t = line.trim();
                                                if (!t) return <div key={i} style={{ height: 8 }} />;
                                                if (t.startsWith("##")) return <h3 key={i} style={S.resH3}>{t.replace(/^#+\s*/, "")}</h3>;
                                                if (t.startsWith("**") && t.endsWith("**")) return <p key={i} style={S.resStrong}>{t.replace(/\*\*/g, "")}</p>;
                                                if (t.startsWith("- ") || t.startsWith("• ")) return (
                                                    <p key={i} style={S.resBullet}>
                                                        <span style={{ color: "#0B7A80", marginRight: 6 }}>▸</span>
                                                        {t.replace(/^[-•]\s*/, "").replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>")}
                                                    </p>
                                                );
                                                // replace bold inside paragraph
                                                const pContent = t.replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>");
                                                return <p key={i} style={S.resPara} dangerouslySetInnerHTML={{ __html: pContent }}></p>;
                                            })}
                                        </div>
                                    )}
                                </div>
                            )}

                            {!isBusy && !rawText && (
                                <div style={S.emptyState}>
                                    <div style={{ fontSize: 64, marginBottom: 20, opacity: 0.3 }}>📡</div>
                                    <div style={{ fontSize: 17, color: "#8CA0B5", marginBottom: 12, fontWeight: 600 }}>
                                        Lanza una búsqueda para ver resultados
                                    </div>
                                    <div style={{ fontSize: 13, color: "#456", lineHeight: 1.8, maxWidth: 340 }}>
                                        1. Selecciona el tipo de alerta<br />
                                        2. Pulsa "Buscar ahora"<br />
                                        3. Revisa los resultados<br />
                                        4. Envía el digest a tu correo seguro
                                    </div>
                                </div>
                            )}
                        </div>
                    </div>
                )}

                {/* ══ TAB: CONFIG ═════════════════════════════════════════════════════ */}
                {tab === "config" && (
                    <div>
                        <div style={{ display: "flex", gap: 12, marginBottom: 20, alignItems: "center", flexWrap: "wrap", justifyContent: "space-between" }}>
                            <div style={{ display: "flex", gap: 12 }}>
                                <select
                                    value={catFilter}
                                    onChange={e => setCatFilter(e.target.value)}
                                    style={S.select}
                                >
                                    {CATS.map(c => <option key={c} value={c}>{c}</option>)}
                                </select>
                                <button onClick={() => { const next = filtered.map(o => o.name); const merged = Array.from(new Set([...selected, ...next])); setSelected(merged); savePrefs(merged, searchType, history, lastSent); }} style={S.btnSmall}>
                                    Seleccionar visibles
                                </button>
                                <button onClick={() => { setSelected([]); savePrefs([], searchType, history, lastSent); }} style={{ ...S.btnSmall, borderColor: "#B22222", color: "#F1948A" }}>
                                    Limpiar todo
                                </button>
                            </div>
                            <span style={{ fontSize: 12, color: "#567", marginLeft: "auto" }}>
                                {selected.length} seleccionadas · Guardado en tu equipo
                            </span>
                        </div>

                        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))", gap: 8 }}>
                            {filtered.map(org => {
                                const isSel = selected.includes(org.name);
                                const cc = CAT_COLOR[org.cat] || "#555";
                                return (
                                    <div
                                        key={org.name}
                                        onClick={() => toggleOrg(org.name)}
                                        style={{
                                            ...S.orgCard,
                                            background: isSel ? `rgba(${hexRgb(cc)},0.12)` : "rgba(255,255,255,0.03)",
                                            borderColor: isSel ? cc : "rgba(255,255,255,0.08)",
                                        }}
                                    >
                                        <div style={{ display: "flex", alignItems: "flex-start", gap: 10 }}>
                                            <div style={{
                                                width: 18, height: 18, borderRadius: 4, flexShrink: 0, marginTop: 1,
                                                border: `2px solid ${isSel ? cc : "rgba(255,255,255,0.2)"}`,
                                                background: isSel ? cc : "transparent",
                                                display: "flex", alignItems: "center", justifyContent: "center",
                                            }}>
                                                {isSel && <span style={{ fontSize: 11, color: "#fff", fontWeight: 700 }}>✓</span>}
                                            </div>
                                            <div style={{ flex: 1 }}>
                                                <div style={{ fontSize: 13, fontWeight: isSel ? 700 : 500, color: isSel ? "#E8EDF2" : "#A0B4C5" }}>
                                                    {org.name}
                                                </div>
                                                <div style={{ fontSize: 11, color: cc, marginTop: 2 }}>
                                                    {"⭐".repeat(org.priority)} · {org.cat}
                                                </div>
                                                <div style={{ fontSize: 10, color: "#456", marginTop: 4 }}>
                                                    {org.twitter} · {org.web}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                );
                            })}
                        </div>
                    </div>
                )}

                {/* ══ TAB: HISTORY ════════════════════════════════════════════════════ */}
                {tab === "history" && (
                    <div>
                        {history.length === 0 ? (
                            <div style={S.emptyState}>
                                <div style={{ fontSize: 48, opacity: 0.3, marginBottom: 16 }}>📋</div>
                                <div style={{ color: "#8CA0B5", fontSize: 15 }}>Aún no has enviado ningún digest</div>
                                <div style={{ color: "#567", fontSize: 13, marginTop: 8 }}>Los digests enviados aparecerán aquí</div>
                            </div>
                        ) : (
                            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
                                {history.map(entry => (
                                    <div key={entry.id} style={S.historyCard}>
                                        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
                                            <div>
                                                <div style={{ fontSize: 14, fontWeight: 700, color: "#E8EDF2" }}>
                                                    {{ eventos: "📅", vacantes: "💼", noticias: "📰" }[entry.type]} {" "}
                                                    {{ eventos: "Eventos próximos", vacantes: "Vacantes activas", noticias: "Noticias recientes" }[entry.type]}
                                                </div>
                                                <div style={{ fontSize: 12, color: "#7ECFD4", marginTop: 4 }}>{entry.date}</div>
                                                <div style={{ fontSize: 11, color: "#567", marginTop: 6 }}>
                                                    {entry.orgs.length} organizaciones: {entry.orgs.slice(0, 4).join(", ")}{entry.orgs.length > 4 ? `…` : ""}
                                                </div>
                                            </div>
                                            <div style={{ fontSize: 11, color: "#456", background: "rgba(255,255,255,0.05)", padding: "4px 10px", borderRadius: 20 }}>
                                                Enviado ✓
                                            </div>
                                        </div>
                                        <div style={{ marginTop: 10, fontSize: 12, color: "#8CA0B5", lineHeight: 1.6, borderTop: "1px solid rgba(255,255,255,0.06)", paddingTop: 10 }}>
                                            {entry.preview}
                                        </div>
                                    </div>
                                ))}
                            </div>
                        )}
                    </div>
                )}

                {/* ══ TAB: AUTOMATIZACIÓN ═════════════════════════════════════════════ */}
                {tab === "auto" && (
                    <div style={{ maxWidth: 720 }}>
                        <div style={S.card}>
                            <div style={{ display: "flex", gap: 12, alignItems: "flex-start", marginBottom: 16 }}>
                                <span style={{ fontSize: 32 }}>⚡</span>
                                <div>
                                    <div style={{ fontSize: 16, fontWeight: 700, color: "#E8EDF2" }}>Automatización real: Google Apps Script</div>
                                    <div style={{ fontSize: 13, color: "#8CA0B5", marginTop: 4 }}>
                                        Para recibir el digest automáticamente cada semana sin abrir nada, usa este script gratuito de Google.
                                    </div>
                                </div>
                            </div>

                            {[
                                { step: "1", title: "Ir a Google Apps Script", desc: "Abre script.google.com con tu cuenta de Google (juanmejia88@gmail.com)." },
                                { step: "2", title: "Crear nuevo proyecto", desc: 'Haz clic en "Nuevo proyecto" y dale un nombre: "Radar Organizaciones Madrid".' },
                                { step: "3", title: "Pegar el código", desc: 'Copia el código de abajo en el editor y reemplaza TU_API_KEY_ANTHROPIC con tu clave de la API de Anthropic (console.anthropic.com).' },
                                { step: "4", title: "Configurar el trigger semanal", desc: 'Ve a Triggers (reloj) → "+ Añadir trigger" → función "enviarRadar" → Accionado por tiempo → Semana → Lunes 08:00.' },
                                { step: "5", title: "Autorizar y activar", desc: "Ejecuta la función una vez manualmente para autorizar los permisos de Gmail. Desde ese momento llegará automáticamente cada semana." },
                            ].map(({ step, title, desc }) => (
                                <div key={step} style={{ display: "flex", gap: 14, marginBottom: 16, alignItems: "flex-start" }}>
                                    <div style={{
                                        width: 28, height: 28, borderRadius: "50%", background: "#0B7A80",
                                        display: "flex", alignItems: "center", justifyContent: "center",
                                        fontSize: 13, fontWeight: 700, color: "#fff", flexShrink: 0,
                                    }}>{step}</div>
                                    <div>
                                        <div style={{ fontSize: 13, fontWeight: 700, color: "#E8EDF2" }}>{title}</div>
                                        <div style={{ fontSize: 12, color: "#8CA0B5", marginTop: 2, lineHeight: 1.6 }}>{desc}</div>
                                    </div>
                                </div>
                            ))}
                        </div>

                        <div style={{ ...S.card, borderColor: "rgba(184,134,11,0.3)", background: "rgba(184,134,11,0.08)", marginTop: '20px' }}>
                            <div style={{ fontSize: 13, fontWeight: 700, color: "#F0C040", marginBottom: 8 }}>
                                💡 Alternativas sin código
                            </div>
                            {[
                                { app: "Google Alerts", desc: "Crea alertas gratuitas en alerts.google.com con el nombre de cada organización. Llegan a tu Gmail automáticamente.", url: "alerts.google.com" },
                                { app: "Make.com (ex-Integromat)", desc: "Conecta una búsqueda periódica con Gmail usando su interfaz visual. Sin código.", url: "make.com" },
                                { app: "Zapier", desc: "Monitoriza páginas web y envía alertas a Gmail cuando detecta cambios (plan gratuito disponible).", url: "zapier.com" },
                                { app: "LinkedIn Alertas", desc: "Sigue las páginas de las organizaciones en LinkedIn y activa notificaciones de publicaciones nuevas.", url: "linkedin.com" },
                            ].map(({ app, desc, url }) => (
                                <div key={app} style={{ display: "flex", gap: 10, marginBottom: 12, alignItems: "flex-start" }}>
                                    <span style={{ color: "#F0C040", fontSize: 14, flexShrink: 0 }}>→</span>
                                    <div>
                                        <div style={{ fontSize: 13, fontWeight: 700, color: "#E8EDF2" }}>{app} <span style={{ fontSize: 11, color: "#7ECFD4" }}>({url})</span></div>
                                        <div style={{ fontSize: 12, color: "#8CA0B5", marginTop: 2 }}>{desc}</div>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                )}

            </main>

            {/* Global CSS for the internal component */}
            <style dangerouslySetInnerHTML={{
                __html: `
        @keyframes scanLine { 0%,100%{transform:translateX(-100%)} 50%{transform:translateX(400%)} }
        @keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
      `}} />
        </div>
    );
}

// ─── STYLES ─────────────────────────────────────────────────────────────────
const S = {
    root: {
        fontFamily: "'Crimson Pro', 'Georgia', serif",
        background: "#0A1628",
        color: "#E8EDF2",
        position: "relative",
        overflow: "hidden",
        borderRadius: "12px",
        display: "flex",
        flexDirection: "column",
        height: "100%", /* Para que quepa bien dentro del #radar-root */
        minHeight: "750px",
    },
    bgGrid: {
        position: "absolute", inset: 0, zIndex: 0, pointerEvents: "none",
        backgroundImage: "linear-gradient(rgba(11,122,128,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(11,122,128,0.04) 1px,transparent 1px)",
        backgroundSize: "40px 40px",
    },
    toast: {
        position: "absolute", bottom: 24, right: 24, zIndex: 999,
        padding: "12px 20px", borderRadius: 8, fontSize: 14, fontWeight: 600,
        color: "#fff", boxShadow: "0 4px 20px rgba(0,0,0,0.4)",
        animation: "fadeIn 0.3s ease",
    },
    header: {
        position: "relative", zIndex: 10,
        background: "linear-gradient(135deg,#0A1628 0%,#1B3A6B 60%,#0B7A80 100%)",
        padding: "24px 32px 20px",
        borderBottom: "1px solid rgba(11,122,128,0.3)",
        display: "flex", alignItems: "flex-end", justifyContent: "space-between", flexWrap: "wrap", gap: 12,
    },
    headerEyebrow: { fontSize: 10, letterSpacing: 3, color: "#0B7A80", textTransform: "uppercase", marginBottom: 4 },
    headerTitle: { margin: 0, fontSize: 26, fontWeight: 700, color: "#F0F4F8", letterSpacing: -0.5 },
    headerMeta: { display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 4 },
    emailBadge: { fontSize: 12, color: "#7ECFD4", background: "rgba(11,122,128,0.15)", padding: "4px 12px", borderRadius: 20, border: "1px solid rgba(11,122,128,0.3)" },
    lastSentBadge: { fontSize: 11, color: "#567", fontStyle: "italic" },
    tabBar: {
        position: "relative", zIndex: 10,
        display: "flex", borderBottom: "1px solid rgba(255,255,255,0.08)",
        background: "rgba(10,22,40,0.9)",
        padding: "0 32px",
        flexWrap: "wrap",
    },
    tab: {
        padding: "14px 20px", fontSize: 13, cursor: "pointer",
        background: "transparent", border: "none", color: "#567",
        fontFamily: "inherit", borderBottom: "2px solid transparent",
        transition: "all 0.2s",
    },
    tabActive: { color: "#7ECFD4", borderBottomColor: "#0B7A80", fontWeight: 700 },
    main: { position: "relative", zIndex: 10, padding: "24px 32px", overflowY: "auto", flex: 1 },
    twoCol: { display: "grid", gridTemplateColumns: "1fr", gap: 20, height: "100%", "@media(min-width: 768px)": { gridTemplateColumns: "300px 1fr" } }, /* Necesita CSS Modules/styled-components real para media queries, implementaremos una aproximación o fallback */
    leftPanel: { display: "flex", flexDirection: "column", gap: 12, minWidth: "300px" },
    rightPanel: {
        background: "rgba(255,255,255,0.02)", border: "1px solid rgba(255,255,255,0.07)",
        borderRadius: 10, overflow: "auto", padding: 24, minHeight: 400, flex: 1,
    },
    card: {
        background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.09)",
        borderRadius: 10, padding: "16px",
    },
    cardTitle: { fontSize: 10, letterSpacing: 2, color: "#567", textTransform: "uppercase", marginBottom: 12, display: "flex", alignItems: "center" },
    typeBtn: {
        width: "100%", display: "flex", gap: 12, alignItems: "center",
        padding: "10px 12px", borderRadius: 8, border: "1px solid rgba(255,255,255,0.08)",
        background: "transparent", cursor: "pointer", marginBottom: 6,
        fontFamily: "inherit", textAlign: "left", transition: "all 0.15s",
    },
    typeBtnActive: { background: "rgba(11,122,128,0.2)", borderColor: "#0B7A80" },
    orgChip: {
        fontSize: 11, padding: "2px 8px", borderRadius: 20,
        border: "1px solid", color: "#C5D5E5",
        background: "rgba(255,255,255,0.04)",
    },
    btnPrimary: {
        padding: "13px 24px", borderRadius: 8, border: "none", cursor: "pointer",
        background: "linear-gradient(135deg,#0B7A80,#1B3A6B)",
        color: "#fff", fontSize: 14, fontFamily: "inherit", fontWeight: 700,
        boxShadow: "0 4px 20px rgba(11,122,128,0.35)", transition: "all 0.2s",
        letterSpacing: 0.3,
    },
    btnSend: {
        padding: "12px 24px", borderRadius: 8, cursor: "pointer",
        background: "rgba(26,122,74,0.25)", border: "1px solid #1A7A4A",
        color: "#7ECFD4", fontSize: 13, fontFamily: "inherit", fontWeight: 600,
        transition: "all 0.2s",
        width: "100%",
    },
    btnSmall: {
        padding: "6px 14px", borderRadius: 6, cursor: "pointer",
        background: "transparent", border: "1px solid rgba(255,255,255,0.15)",
        color: "#A0B4C5", fontSize: 12, fontFamily: "inherit", transition: "all 0.15s",
    },
    select: {
        background: "rgba(255,255,255,0.06)", color: "#C5D5E5",
        border: "1px solid rgba(255,255,255,0.15)", borderRadius: 6,
        padding: "7px 12px", fontSize: 12, fontFamily: "inherit", cursor: "pointer",
    },
    orgCard: {
        padding: 12, borderRadius: 8, border: "1px solid",
        cursor: "pointer", transition: "all 0.15s",
    },
    loadingState: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", minHeight: 300, textAlign: "center" },
    progressBar: { marginTop: 24, height: 3, background: "rgba(255,255,255,0.05)", borderRadius: 3, overflow: "hidden", width: 200 },
    progressFill: { height: "100%", width: "40%", background: "linear-gradient(90deg,#0B7A80,#7ECFD4)", borderRadius: 3, animation: "scanLine 1.8s ease-in-out infinite" },
    emptyState: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", minHeight: 300, textAlign: "center" },
    resultsText: { animation: "fadeIn 0.4s ease" },
    resH3: { margin: "20px 0 8px", fontSize: 15, color: "#7ECFD4", borderBottom: "1px solid rgba(11,122,128,0.3)", paddingBottom: 6 },
    resStrong: { margin: "14px 0 4px", fontSize: 14, fontWeight: 700, color: "#E8EDF2" },
    resBullet: { margin: "4px 0", fontSize: 13, color: "#B0C4D4", lineHeight: 1.7, display: "flex", gap: 6 },
    resPara: { margin: "5px 0", fontSize: 13, color: "#A0B8CC", lineHeight: 1.8 },
    historyCard: {
        background: "rgba(255,255,255,0.03)", border: "1px solid rgba(255,255,255,0.08)",
        borderRadius: 10, padding: 20, animation: "fadeIn 0.3s ease",
    },
};

function hexRgb(hex) {
    const r = parseInt(hex.slice(1, 3), 16);
    const g = parseInt(hex.slice(3, 5), 16);
    const b = parseInt(hex.slice(5, 7), 16);
    return `${r},${g},${b}`;
}

// ─── INIT ─────────────────────────────────────────────────────────
const rootElement = document.getElementById("radar-root");
if (rootElement) {
    const root = ReactDOM.createRoot(rootElement);
    root.render(<RadarAlertas />);
}