import { useState, useEffect, useRef } from "react";
import { api } from "../lib/api";
import Plantillas from "../pages/Plantillas";

// Desplegable con búsqueda (estilo Claude).
function ProgramaSelect({ valor, opciones = [], onSelect }) {
  const [abierto, setAbierto] = useState(false);
  const [q, setQ] = useState("");
  const ref = useRef(null);

  useEffect(() => {
    function fuera(e) { if (ref.current && !ref.current.contains(e.target)) setAbierto(false); }
    document.addEventListener("mousedown", fuera);
    return () => document.removeEventListener("mousedown", fuera);
  }, []);

  const filtradas = opciones.filter((o) => o.label.toLowerCase().includes(q.toLowerCase()));

  return (
    <div ref={ref} style={{ position: "relative", width: "100%" }}>
      <button onClick={() => setAbierto((v) => !v)}
        style={{ width: "100%", textAlign: "left", padding: "7px 10px", border: "1px solid #cbd5e1",
                 borderRadius: 8, fontSize: 13, background: "#fff", cursor: "pointer",
                 color: valor ? "#334155" : "#94a3b8", fontFamily: "inherit",
                 display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
          {valor || "Seleccionar programa..."}
        </span>
        <span style={{ color: "#94a3b8", marginLeft: 6 }}>⌄</span>
      </button>
      {abierto && (
        <div style={{ position: "absolute", top: "calc(100% + 6px)", left: 0, right: 0, background: "#fff",
                      border: "1px solid #e2e8f0", borderRadius: 12, boxShadow: "0 12px 34px rgba(0,0,0,0.18)",
                      zIndex: 100, overflow: "hidden" }}>
          <div style={{ padding: 10, borderBottom: "1px solid #f1f5f9" }}>
            <input autoFocus value={q} onChange={(e) => setQ(e.target.value)} placeholder="Buscar..."
              style={{ width: "100%", padding: "8px 11px", border: "1px solid #cbd5e1", borderRadius: 8,
                       fontSize: 13, fontFamily: "inherit", outline: "none" }} />
          </div>
          <div style={{ maxHeight: 220, overflow: "auto" }}>
            {filtradas.length === 0 ? (
              <div style={{ padding: "12px 14px", fontSize: 13, color: "#94a3b8" }}>Sin opciones</div>
            ) : filtradas.map((o) => (
              <div key={o.num_indice} style={{ padding: "9px 14px", fontSize: 13, color: "#334155", cursor: "pointer" }}
                onMouseEnter={(e) => e.currentTarget.style.background = "#f1f5f9"}
                onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}
                onMouseDown={(e) => e.preventDefault()}
                onClick={() => { onSelect && onSelect(o); setAbierto(false); setQ(""); }}>
                {o.label}
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

// Apartado "Sedes de Anuncios": conjuntos del CSV sin sede -> asignar sede manual.
// FASE 1: solo vista (dropdown de sede por fila). El guardar se agrega despues.
function SedesAnuncios() {
  const [filas, setFilas] = useState([]);
  const [cargando, setCargando] = useState(true);
  const [sel, setSel] = useState({});       // conjunto -> sede elegida (decorativo por ahora)
  const [selProg, setSelProg] = useState({}); // conjunto -> programa elegido (decorativo)
  const [busca, setBusca] = useState("");
  // Opciones fijas (no se pueden borrar) y opciones ampliables con "Agregar".
  const SEDES_FIJAS = ["LIMA", "PIURA", "AREQUIPA", "TRUJILLO"];
  const PROGS_FIJOS = ["TEAC", "TERC", "SEMINARIOS", "OTROS"];
  const [sedes, setSedes] = useState(SEDES_FIJAS);
  const [programas, setProgramas] = useState(PROGS_FIJOS);
  const SEDES = sedes;
  const PROGRAMAS = programas;

  // Quita una opción creada (no fija): la saca del dropdown y de cualquier
  // conjunto que la tenga asignada (se aplica al Guardar).
  function quitarOpcion(tipo, val) {
    if (tipo === "TIPO") {
      if (SEDES_FIJAS.includes(val)) return;
      setSedes((s) => s.filter((x) => x !== val));
      setSel((cur) => {
        const n = { ...cur };
        Object.keys(n).forEach((k) => { if (n[k] === val) n[k] = ""; });
        return n;
      });
    } else {
      if (PROGS_FIJOS.includes(val)) return;
      setProgramas((p) => p.filter((x) => x !== val));
      setSelProg((cur) => {
        const n = { ...cur };
        Object.keys(n).forEach((k) => { if (n[k] === val) n[k] = ""; });
        return n;
      });
    }
  }
  // Pop-up "Agregar"
  const [popup, setPopup] = useState(false);
  const [nvTipo, setNvTipo] = useState("TIPO");   // "TIPO" o "PROGRAMA"
  const [nvValor, setNvValor] = useState("");

  function agregar() {
    const val = nvValor.trim().toUpperCase();
    if (!val) return;
    if (nvTipo === "TIPO") {
      if (!sedes.includes(val)) setSedes((s) => [...s, val]);
    } else {
      if (!programas.includes(val)) setProgramas((p) => [...p, val]);
    }
    setNvValor(""); setPopup(false);
  }

  const [guardando, setGuardando] = useState(false);
  const [msg, setMsg] = useState("");

  useEffect(() => {
    api.conjuntosSinSede()
      .then((r) => {
        const rows = r || [];
        setFilas(rows);
        // precargar sede/programa ya asignados + ampliar opciones si hay valores nuevos
        const s0 = {}, p0 = {}; const sExtra = new Set(), pExtra = new Set();
        rows.forEach((f) => {
          if (f.sede) { s0[f.conjunto] = f.sede; sExtra.add(f.sede); }
          if (f.programa) { p0[f.conjunto] = f.programa; pExtra.add(f.programa); }
        });
        setSel(s0); setSelProg(p0);
        setSedes((cur) => [...cur, ...[...sExtra].filter((x) => !cur.includes(x))]);
        // Carga los programas ya asignados (incluye los nuevos que crees, ej.
        // BRANDING). El dashboard ahora SÍ reconoce cualquier programa asignado.
        setProgramas((cur) => [...cur, ...[...pExtra].filter((x) => !cur.includes(x))]);
        setCargando(false);
      })
      .catch(() => setCargando(false));
  }, []);

  async function guardar() {
    setGuardando(true); setMsg("");
    try {
      const cambios = filas
        .filter((f) => sel[f.conjunto] || selProg[f.conjunto])
        .map((f) => ({ conjunto: f.conjunto, sede: sel[f.conjunto] || "", programa: selProg[f.conjunto] || "" }));
      await api.guardarConjuntoSede(cambios);
      setMsg("✓ Guardado. Se reflejará en ROAS.");
      window.dispatchEvent(new Event("roas-actualizar"));   // avisa al ROAS que recargue
      window.dispatchEvent(new Event("datos-actualizar"));  // avisa a TODOS los apartados
    } catch (e) {
      setMsg("Error al guardar");
    }
    setGuardando(false);
  }

  async function borrar(conjunto) {
    // limpia la seleccion en pantalla y borra la asignacion en Supabase
    setSel((s) => { const n = { ...s }; delete n[conjunto]; return n; });
    setSelProg((s) => { const n = { ...s }; delete n[conjunto]; return n; });
    try {
      await api.borrarConjuntoSede(conjunto);
      setMsg("✓ Asignación borrada.");
      window.dispatchEvent(new Event("roas-actualizar"));   // avisa al ROAS que recargue
      window.dispatchEvent(new Event("datos-actualizar"));  // avisa a TODOS los apartados
    } catch (e) {
      setMsg("Error al borrar");
    }
  }

  const vis = filas.filter((f) => f.conjunto.toLowerCase().includes(busca.toLowerCase()));

  return (
    <>
      <div style={{ padding: "14px 22px 8px" }}>
        <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
          <input value={busca} onChange={(e) => setBusca(e.target.value)}
            placeholder="Buscar conjunto de anuncio..."
            style={{ flex: 1, padding: "9px 12px", border: "1px solid #cbd5e1",
                     borderRadius: 9, fontSize: 13 }} />
          <button onClick={() => setPopup(true)}
            style={{ padding: "9px 16px", border: "none", background: "#1e3a5f", color: "#fff",
                     borderRadius: 9, fontSize: 13, fontWeight: 700, cursor: "pointer", whiteSpace: "nowrap" }}>
            + Agregar
          </button>
        </div>
        <div style={{ fontSize: 12, color: "#64748b", marginTop: 8 }}>
          Conjuntos de anuncios sin sede asignada. Elige la sede y el programa de cada uno.
        </div>
      </div>

      {/* Pop-up Agregar nueva opción (Tipo o Programa) */}
      {popup && (
        <div onClick={() => setPopup(false)}
          style={{ position: "fixed", inset: 0, background: "rgba(15,23,42,0.4)", zIndex: 60,
                   display: "flex", alignItems: "center", justifyContent: "center" }}>
          <div onClick={(e) => e.stopPropagation()}
            style={{ background: "#fff", borderRadius: 14, width: 360, padding: 22,
                     boxShadow: "0 20px 50px rgba(0,0,0,0.3)" }}>
            <div style={{ fontSize: 16, fontWeight: 700, color: "#0f172a", marginBottom: 16 }}>
              Agregar nueva opción
            </div>
            <label style={{ fontSize: 12, fontWeight: 600, color: "#64748b" }}>Clasificación</label>
            <select value={nvTipo} onChange={(e) => setNvTipo(e.target.value)}
              style={{ width: "100%", padding: "9px 10px", border: "1px solid #cbd5e1",
                       borderRadius: 8, fontSize: 14, marginTop: 5, marginBottom: 14 }}>
              <option value="TIPO">Tipo (Sede)</option>
              <option value="PROGRAMA">Programa</option>
            </select>
            <label style={{ fontSize: 12, fontWeight: 600, color: "#64748b" }}>Nombre</label>
            <input value={nvValor} onChange={(e) => setNvValor(e.target.value)}
              onKeyDown={(e) => e.key === "Enter" && agregar()}
              placeholder="Ej: CHICLAYO"
              style={{ width: "100%", padding: "9px 10px", border: "1px solid #cbd5e1",
                       borderRadius: 8, fontSize: 14, marginTop: 5, marginBottom: 14 }} />

            {/* Lista de opciones CREADAS (no fijas) para poder borrarlas */}
            {(() => {
              const esSede = nvTipo === "TIPO";
              const lista = (esSede ? sedes : programas)
                .filter((x) => !(esSede ? SEDES_FIJAS : PROGS_FIJOS).includes(x));
              if (lista.length === 0) return null;
              return (
                <div style={{ marginBottom: 16 }}>
                  <div style={{ fontSize: 12, fontWeight: 600, color: "#64748b", marginBottom: 6 }}>
                    {esSede ? "Sedes creadas" : "Programas creados"} (clic en × para borrar)
                  </div>
                  <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
                    {lista.map((x) => (
                      <span key={x} style={{ display: "inline-flex", alignItems: "center", gap: 6,
                                             background: "#f1f5f9", border: "1px solid #e2e8f0",
                                             borderRadius: 999, padding: "4px 6px 4px 11px", fontSize: 12.5,
                                             fontWeight: 600, color: "#334155" }}>
                        {x}
                        <button onClick={() => quitarOpcion(nvTipo, x)} title="Borrar"
                          style={{ width: 18, height: 18, borderRadius: "50%", border: "none",
                                   background: "#fee2e2", color: "#ef4444", cursor: "pointer",
                                   fontSize: 13, lineHeight: 1, display: "inline-flex",
                                   alignItems: "center", justifyContent: "center" }}>×</button>
                      </span>
                    ))}
                  </div>
                </div>
              );
            })()}

            <div style={{ display: "flex", justifyContent: "flex-end", gap: 8 }}>
              <button onClick={() => setPopup(false)}
                style={{ padding: "8px 16px", border: "1px solid #cbd5e1", background: "#fff",
                         color: "#64748b", borderRadius: 8, fontSize: 13, fontWeight: 600, cursor: "pointer" }}>
                Cancelar
              </button>
              <button onClick={agregar}
                style={{ padding: "8px 18px", border: "none", background: "#1e3a5f", color: "#fff",
                         borderRadius: 8, fontSize: 13, fontWeight: 700, cursor: "pointer" }}>
                Guardar
              </button>
            </div>
          </div>
        </div>
      )}
      <div style={{ flex: 1, overflow: "hidden", padding: "0 22px 4px" }}>
        {cargando ? (
          <div style={{ padding: 40, textAlign: "center", color: "#94a3b8" }}>Cargando...</div>
        ) : (
          <div style={{ height: "100%", border: "1px solid #e2e8f0", borderRadius: 12, overflow: "auto" }}>
            <table style={{ width: "100%", borderCollapse: "separate", borderSpacing: 0, tableLayout: "fixed" }}>
              <thead>
                <tr>
                  <th style={{ textAlign: "center", padding: "11px 14px", position: "sticky", top: 0,
                               background: "#1e3a5f", color: "#fff", fontSize: 12.5, fontWeight: 700,
                               borderRight: "1px solid rgba(255,255,255,0.12)" }}>Conjunto de Anuncio</th>
                  <th style={{ textAlign: "center", padding: "11px 14px", position: "sticky", top: 0,
                               background: "#1e3a5f", color: "#fff", fontSize: 12.5, fontWeight: 700, width: 150,
                               borderRight: "1px solid rgba(255,255,255,0.12)" }}>Tipo</th>
                  <th style={{ textAlign: "center", padding: "11px 14px", position: "sticky", top: 0,
                               background: "#1e3a5f", color: "#fff", fontSize: 12.5, fontWeight: 700, width: 150,
                               borderRight: "1px solid rgba(255,255,255,0.12)" }}>Programa</th>
                  <th style={{ padding: "11px 8px", position: "sticky", top: 0,
                               background: "#1e3a5f", color: "#fff", fontSize: 12.5, fontWeight: 700, width: 48 }}></th>
                </tr>
              </thead>
              <tbody>
                {vis.map((f, i) => (
                  <tr key={f.conjunto} style={{ background: i % 2 ? "#f8fafc" : "#fff" }}>
                    <td style={{ padding: "10px 14px", fontSize: 13, color: "#1e293b",
                                 whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis",
                                 borderRight: "1px solid #eef2f7" }}>{f.conjunto}</td>
                    <td style={{ padding: "10px 14px", borderRight: "1px solid #eef2f7" }}>
                      <select value={sel[f.conjunto] || ""}
                        onChange={(e) => setSel((s) => ({ ...s, [f.conjunto]: e.target.value }))}
                        style={{ width: "100%", padding: "6px 8px", border: "1px solid #cbd5e1",
                                 borderRadius: 7, fontSize: 13 }}>
                        <option value="">— Sin asignar —</option>
                        {SEDES.map((s) => <option key={s} value={s}>{s}</option>)}
                      </select>
                    </td>
                    <td style={{ padding: "10px 14px", borderRight: "1px solid #eef2f7" }}>
                      <select value={selProg[f.conjunto] || ""}
                        onChange={(e) => setSelProg((s) => ({ ...s, [f.conjunto]: e.target.value }))}
                        style={{ width: "100%", padding: "6px 8px", border: "1px solid #cbd5e1",
                                 borderRadius: 7, fontSize: 13 }}>
                        <option value="">— Sin asignar —</option>
                        {PROGRAMAS.map((p) => <option key={p} value={p}>{p}</option>)}
                      </select>
                    </td>
                    <td style={{ padding: "10px 8px", textAlign: "center" }}>
                      {(sel[f.conjunto] || selProg[f.conjunto]) && (
                        <button onClick={() => borrar(f.conjunto)} title="Borrar asignación"
                          style={{ border: "none", background: "transparent", color: "#dc2626",
                                   cursor: "pointer", fontSize: 16, fontWeight: 700, lineHeight: 1 }}>
                          ×
                        </button>
                      )}
                    </td>
                  </tr>
                ))}
                {vis.length === 0 && (
                  <tr><td colSpan={4} style={{ padding: 30, textAlign: "center", color: "#94a3b8", fontSize: 13 }}>
                    No hay conjuntos sin sede.</td></tr>
                )}
              </tbody>
            </table>
          </div>
        )}
      </div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center",
                    padding: "14px 22px", borderTop: "1px solid #e2e8f0" }}>
        <span style={{ fontSize: 13, color: msg.startsWith("✓") ? "#047857" : (msg ? "#b91c1c" : "#94a3b8") }}>
          {msg || `${vis.length} conjuntos sin sede`}
        </span>
        <button onClick={guardar} disabled={guardando}
          style={{ padding: "9px 22px", border: "none", background: "#1e3a5f", color: "#fff",
                   borderRadius: 9, fontSize: 14, fontWeight: 700, cursor: guardando ? "wait" : "pointer" }}>
          {guardando ? "Guardando..." : "Guardar"}
        </button>
      </div>
    </>
  );
}

// Apartado "Programas": lista de programas con contar=NO (ocultos), con switch para reactivar.
function ProgramasOcultos() {
  const [filas, setFilas] = useState([]);
  const [cargando, setCargando] = useState(true);
  const [enc, setEnc] = useState({});   // num_indice -> true si se va a encender
  const [guardando, setGuardando] = useState(false);
  const [msg, setMsg] = useState("");

  useEffect(() => {
    api.programasOcultos()
      .then((r) => { setFilas(r.filas || []); setCargando(false); })
      .catch(() => setCargando(false));
  }, []);

  async function guardar() {
    const nis = Object.entries(enc).filter(([, v]) => v).map(([ni]) => ni);
    if (nis.length === 0) { setMsg("No hay programas para activar."); return; }
    setGuardando(true); setMsg("");
    try {
      await api.encenderProgramas(nis);
      setMsg("✓ Activados. Ya aparecen en la matriz.");
      const r = await api.programasOcultos();
      setFilas(r.filas || []); setEnc({});
      window.dispatchEvent(new Event("datos-actualizar"));  // avisa a TODOS los apartados
    } catch (e) { setMsg("Error: " + e.message); }
    finally { setGuardando(false); }
  }

  return (
    <>
      <div style={{ padding: "16px 22px 6px" }}>
        <div style={{ fontSize: 13, color: "#64748b", lineHeight: 1.5 }}>
          Aquí están los programas ocultos del <b>Detalle por Curso</b>. Enciende el interruptor
          y guarda para que vuelvan a aparecer en la tabla del dashboard.
        </div>
      </div>
      <div style={{ flex: 1, overflow: "auto", padding: "8px 22px" }}>
        {cargando ? (
          <div style={{ padding: 40, textAlign: "center", color: "#94a3b8" }}>Cargando...</div>
        ) : filas.length === 0 ? (
          <div style={{ padding: 30, textAlign: "center", color: "#94a3b8", fontSize: 13 }}>
            No hay programas ocultos.
          </div>
        ) : (
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            {filas.map((f) => {
              const on = !!enc[f.num_indice];
              return (
                <div key={f.num_indice} style={{ display: "flex", alignItems: "center", justifyContent: "space-between",
                       padding: "12px 14px", border: "1px solid #e2e8f0", borderRadius: 10, background: "#fff" }}>
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontSize: 13.5, fontWeight: 600, color: "#0f172a" }}>{f.dsc_det_programa}</div>
                    <div style={{ fontSize: 12, color: "#94a3b8" }}>
                      Índice {f.num_indice}{f.fch_inicio ? ` · ${f.fch_inicio}` : ""}{f.pauta ? ` · Pauta ${f.pauta}` : ""}
                    </div>
                  </div>
                  <div onClick={() => setEnc((p) => ({ ...p, [f.num_indice]: !p[f.num_indice] }))}
                    style={{ width: 46, height: 26, borderRadius: 999, cursor: "pointer", flexShrink: 0,
                             background: on ? "#2563eb" : "#cbd5e1", position: "relative", transition: "background .15s" }}>
                    <div style={{ width: 20, height: 20, borderRadius: "50%", background: "#fff",
                                  position: "absolute", top: 3, left: on ? 23 : 3, transition: "left .15s",
                                  boxShadow: "0 1px 3px rgba(0,0,0,0.3)" }} />
                  </div>
                </div>
              );
            })}
          </div>
        )}
      </div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center",
                    padding: "14px 22px", borderTop: "1px solid #e2e8f0" }}>
        <span style={{ fontSize: 13, color: msg.startsWith("✓") ? "#047857" : "#b91c1c" }}>{msg}</span>
        <button onClick={guardar} disabled={guardando}
          style={{ padding: "9px 22px", border: "none", background: "#1e3a5f", color: "#fff",
                   borderRadius: 9, fontSize: 14, fontWeight: 700, cursor: guardando ? "wait" : "pointer" }}>
          {guardando ? "Guardando..." : "Guardar"}
        </button>
      </div>
    </>
  );
}

// ── Mini-apartado LEYENDA: tabla de campanias + Agregar (popup) + eliminar (visual) ──
function LeyendaCampanias() {
  const CARGOS = ["TEAC", "TERC", "VRF", "CO2", "Seminarios", "Diseño de Chillers", "Diplomado REF", "CAD", "Amoniaco", "Cámaras", "Diseño de Sistemas", "Metrado y Costeo"];
  const SEDES = ["Lima", "Piura", "Arequipa", "Trujillo"];
  const ORIGENES = ["Pauta_wsp", "Web_Whatsapp"];
  const DIAS = ["Domingo", "Sábado", "Semipresencial", "-"];

  const [filas, setFilas] = useState([]);
  const [cargando, setCargando] = useState(true);
  const [busca, setBusca] = useState("");
  const [popup, setPopup] = useState(false);
  const [editandoId, setEditandoId] = useState(null); // id de la fila en edicion, o null = agregar
  const [confirmar, setConfirmar] = useState(null);   // fila a eliminar, o null
  const [choques, setChoques] = useState(null);       // [filas que chocan] o null (popup de aviso)
  const [guardando, setGuardando] = useState(false);
  const [msg, setMsg] = useState("");
  const nuevaVacia = { frase_busqueda: "", cargo: "TEAC", codigo: "", sede: "Lima", dia: "-", origen: "Pauta_wsp", fecha_inicio: "", fecha_fin: "" };
  const [nueva, setNueva] = useState(nuevaVacia);

  function recargar() {
    setCargando(true);
    api.campanias().then((r) => { setFilas(r.filas || []); setCargando(false); })
      .catch(() => setCargando(false));
  }
  useEffect(() => { recargar(); }, []);

  const vis = filas.filter((f) =>
    !busca || ((f.frase_busqueda || "") + (f.cargo || "") + (f.codigo || "") + (f.sede || "")).toLowerCase().includes(busca.toLowerCase()));

  // Extrae los emojis de un texto (pictográficos). Devuelve un Set de emojis.
  function emojisDe(txt) {
    const s = new Set();
    for (const ch of String(txt || "")) {
      const cp = ch.codePointAt(0);
      // rangos de emojis/pictogramas comunes
      if ((cp >= 0x1F000 && cp <= 0x1FAFF) || (cp >= 0x2600 && cp <= 0x27BF) ||
          (cp >= 0x2B00 && cp <= 0x2BFF) || cp === 0x2764 || (cp >= 0x2190 && cp <= 0x21FF)) {
        s.add(ch);
      }
    }
    return s;
  }
  // ¿los rangos [i1,f1] y [i2,f2] se solapan? (fechas en texto YYYY-MM-DD)
  function fechasSolapan(i1, f1, i2, f2) {
    if (!i1 || !f1 || !i2 || !f2) return false;
    return i1 <= f2 && i2 <= f1;
  }
  // Devuelve las campañas existentes que chocan con "nueva":
  // mismo emoji compartido Y fechas solapadas.
  function detectarChoques() {
    const emN = emojisDe(nueva.frase_busqueda);
    if (emN.size === 0) return [];
    const iN = (nueva.fecha_inicio || "").slice(0, 10);
    const fN = (nueva.fecha_fin || "").slice(0, 10);
    return filas.filter((f) => {
      if (editandoId != null && f.id === editandoId) return false;  // no chocar contra si misma
      const emE = emojisDe(f.frase_busqueda);
      const comparte = [...emN].some((e) => emE.has(e));   // ¿comparten algún emoji?
      if (!comparte) return false;
      return fechasSolapan(iN, fN, (f.fecha_inicio || "").slice(0, 10), (f.fecha_fin || "").slice(0, 10));
    });
  }

  function abrirAgregar() {
    setEditandoId(null); setNueva(nuevaVacia); setMsg(""); setPopup(true);
  }
  function abrirEditar(f) {
    setEditandoId(f.id);
    setNueva({
      frase_busqueda: f.frase_busqueda || "", cargo: f.cargo || "TEAC",
      codigo: f.codigo || "", sede: f.sede || "Lima", dia: f.dia || "-",
      origen: f.origen || "Pauta_wsp",
      fecha_inicio: (f.fecha_inicio || "").slice(0, 10),
      fecha_fin: (f.fecha_fin || "").slice(0, 10),
    });
    setMsg(""); setPopup(true);
  }

  async function agregar() {
    if (!nueva.frase_busqueda.trim()) { setMsg("Escribe la frase de búsqueda."); return; }
    // Aviso de choque: mismo emoji + fechas solapadas. Si las fechas NO chocan, no avisa.
    const ch = detectarChoques();
    if (ch.length > 0) { setChoques(ch); return; }
    await guardarCampania();
  }

  async function guardarCampania() {
    setChoques(null);
    setGuardando(true); setMsg("");
    try {
      if (editandoId != null) await api.editarCampania(editandoId, nueva);
      else await api.agregarCampania(nueva);
      setPopup(false); setNueva(nuevaVacia); setEditandoId(null);
      recargar();
      window.dispatchEvent(new Event("datos-actualizar"));
    } catch (e) { setMsg("Error al guardar: " + e.message); }
    finally { setGuardando(false); }
  }
  async function borrarConfirmado() {
    const f = confirmar;
    setConfirmar(null);
    try {
      await api.borrarCampania(f.id);
      recargar();
      window.dispatchEvent(new Event("datos-actualizar"));
    } catch (e) { setMsg("Error al borrar: " + e.message); }
  }

  const inp = { width: "100%", height: 38, border: "1px solid #e2e8f0", borderRadius: 8,
                padding: "0 11px", fontSize: 13, boxSizing: "border-box" };
  const lab = { fontSize: 12.5, fontWeight: 600, color: "#475569", display: "block", marginBottom: 5 };

  return (
    <>
      <div style={{ padding: "14px 22px 8px", display: "flex", gap: 10 }}>
        <input value={busca} onChange={(e) => setBusca(e.target.value)}
          placeholder="Buscar frase, cargo, código o sede..."
          style={{ flex: 1, padding: "9px 12px", border: "1px solid #cbd5e1", borderRadius: 9, fontSize: 13 }} />
        <button onClick={abrirAgregar}
          style={{ padding: "0 16px", background: "#1e3a8a", color: "#fff", border: "none",
                   borderRadius: 9, fontSize: 13, fontWeight: 700, cursor: "pointer", whiteSpace: "nowrap" }}>
          + Agregar leyenda
        </button>
      </div>

      <div style={{ flex: 1, overflow: "hidden", padding: "0 22px 12px" }}>
        <div style={{ height: "100%", border: "1px solid #e2e8f0", borderRadius: 12, overflow: "auto" }}>
          <table style={{ minWidth: 920, width: "100%", borderCollapse: "separate", borderSpacing: 0, fontSize: 12.5 }}>
            <thead>
              <tr>
                {["Frase de búsqueda", "Cargo", "Código", "Sede", "Día", "Origen", "Inicio", "Fin", ""].map((h, i, arr) => (
                  <th key={i} style={{ position: "sticky", top: 0, zIndex: 20, background: "#1e3a5f", color: "#fff",
                                       padding: "10px 12px", fontWeight: 600, textAlign: "center", whiteSpace: "nowrap",
                                       borderRight: i < arr.length - 1 ? "1px solid rgba(255,255,255,0.12)" : "none" }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {cargando && (
                <tr><td colSpan={9} style={{ padding: 40, textAlign: "center", color: "#94a3b8" }}>Cargando...</td></tr>
              )}
              {!cargando && vis.length === 0 && (
                <tr><td colSpan={9} style={{ padding: 40, textAlign: "center", color: "#94a3b8" }}>Sin leyendas.</td></tr>
              )}
              {!cargando && vis.map((f) => (
                <tr key={f.id}>
                  <td style={{ padding: "9px 12px", minWidth: 220, textAlign: "left", borderRight: "1px solid #eef2f7" }}>{f.frase_busqueda}</td>
                  <td style={{ padding: "9px 12px", whiteSpace: "nowrap", textAlign: "center", borderRight: "1px solid #eef2f7" }}>{f.cargo}</td>
                  <td style={{ padding: "9px 12px", fontWeight: 600, whiteSpace: "nowrap", textAlign: "center", borderRight: "1px solid #eef2f7" }}>{f.codigo}</td>
                  <td style={{ padding: "9px 12px", whiteSpace: "nowrap", textAlign: "center", borderRight: "1px solid #eef2f7" }}>{f.sede}</td>
                  <td style={{ padding: "9px 12px", whiteSpace: "nowrap", textAlign: "center", borderRight: "1px solid #eef2f7" }}>{f.dia}</td>
                  <td style={{ padding: "9px 12px", whiteSpace: "nowrap", textAlign: "center", borderRight: "1px solid #eef2f7" }}>{f.origen}</td>
                  <td style={{ padding: "9px 12px", whiteSpace: "nowrap", textAlign: "center", borderRight: "1px solid #eef2f7" }}>{f.fecha_inicio}</td>
                  <td style={{ padding: "9px 12px", whiteSpace: "nowrap", textAlign: "center", borderRight: "1px solid #eef2f7" }}>{f.fecha_fin}</td>
                  <td style={{ padding: "9px 12px", textAlign: "center", whiteSpace: "nowrap" }}>
                    <div style={{ display: "inline-flex", gap: 6, alignItems: "center" }}>
                      <button onClick={() => abrirEditar(f)} title="Editar leyenda"
                        onMouseEnter={(e) => { e.currentTarget.style.background = "#2563eb"; e.currentTarget.style.color = "#fff"; e.currentTarget.style.borderColor = "#2563eb"; }}
                        onMouseLeave={(e) => { e.currentTarget.style.background = "#eff6ff"; e.currentTarget.style.color = "#2563eb"; e.currentTarget.style.borderColor = "#bfdbfe"; }}
                        style={{ width: 28, height: 28, borderRadius: 8, background: "#eff6ff",
                                 border: "1px solid #bfdbfe", color: "#2563eb", cursor: "pointer",
                                 fontSize: 14, lineHeight: 1, display: "inline-flex",
                                 alignItems: "center", justifyContent: "center",
                                 transition: "all 0.15s ease" }}>✎</button>
                      <button onClick={() => setConfirmar(f)} title="Eliminar leyenda"
                        onMouseEnter={(e) => { e.currentTarget.style.background = "#ef4444"; e.currentTarget.style.color = "#fff"; e.currentTarget.style.borderColor = "#ef4444"; }}
                        onMouseLeave={(e) => { e.currentTarget.style.background = "#fef2f2"; e.currentTarget.style.color = "#ef4444"; e.currentTarget.style.borderColor = "#fecaca"; }}
                        style={{ width: 28, height: 28, borderRadius: 8, background: "#fef2f2",
                                 border: "1px solid #fecaca", color: "#ef4444", cursor: "pointer",
                                 fontSize: 16, fontWeight: 700, lineHeight: 1, display: "inline-flex",
                                 alignItems: "center", justifyContent: "center",
                                 transition: "all 0.15s ease" }}>×</button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {/* Popup Agregar leyenda */}
      {popup && (
        <div onClick={() => setPopup(false)}
          style={{ position: "fixed", inset: 0, background: "rgba(15,23,42,0.45)",
                   display: "flex", alignItems: "center", justifyContent: "center", zIndex: 1300 }}>
          <div onClick={(e) => e.stopPropagation()}
            style={{ background: "#fff", borderRadius: 14, width: 520, maxWidth: "94vw",
                     boxShadow: "0 20px 50px rgba(0,0,0,.25)", overflow: "hidden" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center",
                          padding: "16px 20px", borderBottom: "1px solid #eef2f7" }}>
              <div style={{ fontSize: 16, fontWeight: 700, color: "#0f172a" }}>{editandoId != null ? "Editar leyenda" : "Agregar leyenda"}</div>
              <button onClick={() => setPopup(false)}
                style={{ background: "transparent", border: "none", fontSize: 20, color: "#94a3b8", cursor: "pointer" }}>×</button>
            </div>
            <div style={{ padding: "18px 20px", display: "flex", flexDirection: "column", gap: 14 }}>
              <div>
                <label style={lab}>Frase de búsqueda</label>
                <input style={inp} value={nueva.frase_busqueda} placeholder="Ej. 🖥️ Estoy interesado en sus Seminarios"
                  onChange={(e) => setNueva({ ...nueva, frase_busqueda: e.target.value })} />
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                <div>
                  <label style={lab}>Cargo / programa</label>
                  <select style={{ ...inp, padding: "0 8px", background: "#fff" }} value={nueva.cargo}
                    onChange={(e) => setNueva({ ...nueva, cargo: e.target.value })}>
                    {CARGOS.map((c) => <option key={c}>{c}</option>)}
                  </select>
                </div>
                <div>
                  <label style={lab}>Código</label>
                  <input style={inp} value={nueva.codigo} placeholder="Ej. 74a"
                    onChange={(e) => setNueva({ ...nueva, codigo: e.target.value })} />
                </div>
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                <div>
                  <label style={lab}>Sede</label>
                  <select style={{ ...inp, padding: "0 8px", background: "#fff" }} value={nueva.sede}
                    onChange={(e) => setNueva({ ...nueva, sede: e.target.value })}>
                    {SEDES.map((s) => <option key={s}>{s}</option>)}
                  </select>
                </div>
                <div>
                  <label style={lab}>Origen</label>
                  <select style={{ ...inp, padding: "0 8px", background: "#fff" }} value={nueva.origen}
                    onChange={(e) => setNueva({ ...nueva, origen: e.target.value })}>
                    {ORIGENES.map((o) => <option key={o}>{o}</option>)}
                  </select>
                </div>
              </div>
              <div>
                <label style={lab}>Día / frecuencia</label>
                <select style={{ ...inp, padding: "0 8px", background: "#fff" }} value={nueva.dia}
                  onChange={(e) => setNueva({ ...nueva, dia: e.target.value })}>
                  {DIAS.map((d) => <option key={d}>{d}</option>)}
                </select>
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                <div>
                  <label style={lab}>Fecha inicio</label>
                  <input type="date" style={inp} value={nueva.fecha_inicio}
                    onChange={(e) => setNueva({ ...nueva, fecha_inicio: e.target.value })} />
                </div>
                <div>
                  <label style={lab}>Fecha fin</label>
                  <input type="date" style={inp} value={nueva.fecha_fin}
                    onChange={(e) => setNueva({ ...nueva, fecha_fin: e.target.value })} />
                </div>
              </div>
            </div>
            <div style={{ display: "flex", justifyContent: "flex-end", gap: 10, padding: "14px 20px",
                          borderTop: "1px solid #eef2f7", background: "#f8fafc" }}>
              <button onClick={() => setPopup(false)}
                style={{ height: 38, padding: "0 16px", border: "1px solid #cbd5e1", background: "#fff",
                         borderRadius: 8, fontSize: 13, fontWeight: 600, color: "#475569", cursor: "pointer" }}>Cancelar</button>
              <button onClick={agregar} disabled={guardando}
                style={{ height: 38, padding: "0 18px", border: "none", background: "#1e3a8a",
                         borderRadius: 8, fontSize: 13, fontWeight: 700, color: "#fff",
                         cursor: guardando ? "default" : "pointer", opacity: guardando ? 0.6 : 1 }}>
                {guardando ? "Guardando..." : (editandoId != null ? "Guardar cambios" : "Guardar leyenda")}
              </button>
            </div>
            {msg && <div style={{ padding: "0 20px 14px", fontSize: 12.5,
                                  color: msg.startsWith("Error") ? "#ef4444" : "#0f766e" }}>{msg}</div>}
          </div>
        </div>
      )}

      {/* Popup de confirmación de eliminación */}
      {confirmar !== null && (
        <div onClick={() => setConfirmar(null)}
          style={{ position: "fixed", inset: 0, background: "rgba(15,23,42,0.45)",
                   display: "flex", alignItems: "center", justifyContent: "center", zIndex: 1400 }}>
          <div onClick={(e) => e.stopPropagation()}
            style={{ background: "#fff", borderRadius: 14, width: 400, maxWidth: "92vw",
                     boxShadow: "0 20px 50px rgba(0,0,0,.25)", overflow: "hidden", textAlign: "center" }}>
            <div style={{ padding: "26px 24px 8px" }}>
              <div style={{ width: 52, height: 52, borderRadius: "50%", background: "#fef2f2",
                            display: "flex", alignItems: "center", justifyContent: "center",
                            margin: "0 auto 14px", fontSize: 26, color: "#ef4444" }}>🗑️</div>
              <div style={{ fontSize: 16, fontWeight: 700, color: "#0f172a", marginBottom: 6 }}>
                ¿Eliminar esta leyenda?
              </div>
              <div style={{ fontSize: 13, color: "#64748b", lineHeight: 1.5 }}>
                {confirmar && (
                  <>Se eliminará la pauta <b style={{ color: "#0f172a" }}>{confirmar.codigo}</b>
                    {" "}({confirmar.cargo} — {confirmar.sede}). Esta acción no se puede deshacer.</>
                )}
              </div>
            </div>
            <div style={{ display: "flex", gap: 10, padding: "18px 24px 22px" }}>
              <button onClick={() => setConfirmar(null)}
                style={{ flex: 1, height: 40, border: "1px solid #cbd5e1", background: "#fff",
                         borderRadius: 9, fontSize: 13.5, fontWeight: 600, color: "#475569", cursor: "pointer" }}>Cancelar</button>
              <button onClick={borrarConfirmado}
                style={{ flex: 1, height: 40, border: "none", background: "#ef4444",
                         borderRadius: 9, fontSize: 13.5, fontWeight: 700, color: "#fff", cursor: "pointer" }}>Sí, eliminar</button>
            </div>
          </div>
        </div>
      )}

      {/* Popup de ADVERTENCIA de choque: mismo emoji + fechas solapadas */}
      {choques !== null && (
        <div onClick={() => setChoques(null)}
          style={{ position: "fixed", inset: 0, background: "rgba(15,23,42,0.45)",
                   display: "flex", alignItems: "center", justifyContent: "center", zIndex: 1500 }}>
          <div onClick={(e) => e.stopPropagation()}
            style={{ background: "#fff", borderRadius: 14, width: 460, maxWidth: "94vw",
                     boxShadow: "0 20px 50px rgba(0,0,0,.25)", overflow: "hidden" }}>
            <div style={{ padding: "24px 24px 6px", textAlign: "center" }}>
              <div style={{ width: 52, height: 52, borderRadius: "50%", background: "#fff7ed",
                            display: "flex", alignItems: "center", justifyContent: "center",
                            margin: "0 auto 14px", fontSize: 26 }}>⚠️</div>
              <div style={{ fontSize: 16, fontWeight: 700, color: "#0f172a", marginBottom: 6 }}>
                Esta leyenda podría duplicar leads
              </div>
              <div style={{ fontSize: 13, color: "#64748b", lineHeight: 1.5 }}>
                La frase que vas a crear comparte emoji y fechas con {choques.length === 1 ? "esta pauta existente" : `estas ${choques.length} pautas existentes`}.
                Un mismo mensaje podría contarse dos veces.
              </div>
            </div>
            <div style={{ padding: "12px 20px", display: "flex", flexDirection: "column", gap: 8, maxHeight: 240, overflowY: "auto" }}>
              {choques.map((c) => (
                <div key={c.id} style={{ border: "1px solid #fed7aa", background: "#fffbeb",
                                         borderRadius: 10, padding: "10px 12px" }}>
                  <div style={{ fontSize: 13, fontWeight: 700, color: "#0f172a", marginBottom: 3 }}>
                    Pauta {c.codigo} <span style={{ fontWeight: 500, color: "#92400e" }}>({c.cargo} — {c.sede})</span>
                  </div>
                  <div style={{ fontSize: 12.5, color: "#475569", marginBottom: 4 }}>“{c.frase_busqueda}”</div>
                  <div style={{ fontSize: 12, color: "#b45309", fontWeight: 600 }}>
                    Vigente: {c.fecha_inicio} → {c.fecha_fin}
                  </div>
                </div>
              ))}
            </div>
            <div style={{ display: "flex", gap: 10, padding: "12px 24px 20px" }}>
              <button onClick={() => setChoques(null)}
                style={{ flex: 1, height: 40, border: "1px solid #cbd5e1", background: "#fff",
                         borderRadius: 9, fontSize: 13.5, fontWeight: 600, color: "#475569", cursor: "pointer" }}>Cancelar</button>
              <button onClick={guardarCampania} disabled={guardando}
                style={{ flex: 1, height: 40, border: "none", background: "#ea580c",
                         borderRadius: 9, fontSize: 13.5, fontWeight: 700, color: "#fff",
                         cursor: guardando ? "default" : "pointer", opacity: guardando ? 0.6 : 1 }}>
                {guardando ? "Guardando..." : "Crear de todos modos"}
              </button>
            </div>
          </div>
        </div>
      )}
    </>
  );
}

export default function ConfigModal({ onClose }) {
  const [seccion, setSeccion] = useState("leyenda");
  const [filas, setFilas] = useState([]);
  const [cargando, setCargando] = useState(true);
  const [guardando, setGuardando] = useState(false);
  const [msg, setMsg] = useState("");
  const [busca, setBusca] = useState("");
  const [edit, setEdit] = useState({});      // conjunto -> pauta editada
  const [editProg, setEditProg] = useState({}); // conjunto -> {num_indice, label} programa elegido
  const [progOpc, setProgOpc] = useState([]);  // opciones del desplegable de Programa

  useEffect(() => {
    api.leyendaAnuncios()
      .then((r) => { setFilas(r.filas || []); setCargando(false); })
      .catch(() => setCargando(false));
    api.programasDisponibles()
      .then((r) => setProgOpc(r.programas || []))
      .catch(() => setProgOpc([]));
  }, []);

  const setPauta = (conjunto, val) => setEdit((p) => ({ ...p, [conjunto]: val }));
  const valorPauta = (f) => (edit[f.conjunto] !== undefined ? edit[f.conjunto] : (f.pauta || ""));
  // Programa mostrado: el elegido si hay, si no el que ya trae la fila
  const valorPrograma = (f) => (editProg[f.conjunto] !== undefined ? editProg[f.conjunto].label : (f.programa || ""));

  async function guardar() {
    // Un cambio por conjunto que tenga pauta editada o programa elegido
    const conjuntos = new Set([...Object.keys(edit), ...Object.keys(editProg)]);
    const cambios = [];
    for (const conjunto of conjuntos) {
      const f = filas.find((x) => x.conjunto === conjunto) || {};
      const pauta = (edit[conjunto] !== undefined ? edit[conjunto] : (f.pauta || "")).trim();
      const prog = editProg[conjunto];   // {num_indice, label} o undefined
      cambios.push({ conjunto, pauta, num_indice: prog ? prog.num_indice : null });
    }
    if (cambios.length === 0) { setMsg("No hay cambios."); return; }
    setGuardando(true); setMsg("");
    try {
      await api.guardarLeyenda(cambios);
      setMsg("✓ Guardado correctamente.");
      const r = await api.leyendaAnuncios();
      setFilas(r.filas || []); setEdit({}); setEditProg({});
      window.dispatchEvent(new Event("datos-actualizar"));  // avisa a TODOS los apartados
    } catch (e) { setMsg("Error: " + e.message); }
    finally { setGuardando(false); }
  }

  // Orden: 1) pauta Y programa, 2) pauta sin programa, 3) programa sin pauta, 4) nada
  const _rango = (f) => {
    const p = valorPauta(f).trim() !== "";
    const g = (f.programa || "").trim() !== "";
    if (p && g) return 0;
    if (p && !g) return 1;
    if (!p && g) return 2;
    return 3;
  };
  const filtradas = filas
    .filter((f) =>
      !busca || f.conjunto.toLowerCase().includes(busca.toLowerCase())
      || String(f.pauta).includes(busca)
      || (f.programa || "").toLowerCase().includes(busca.toLowerCase()))
    .sort((a, b) => (_rango(a) - _rango(b)) || a.conjunto.localeCompare(b.conjunto));

  return (
    <div onClick={onClose}
      style={{ position: "fixed", inset: 0, background: "rgba(15,23,42,0.55)",
               display: "flex", alignItems: "center", justifyContent: "center", zIndex: 1200 }}>
      <div onClick={(e) => e.stopPropagation()}
        style={{ background: "#fff", borderRadius: 16, width: 1320, maxWidth: "96vw",
                 height: 680, maxHeight: "92vh", display: "flex", overflow: "hidden",
                 boxShadow: "0 24px 70px rgba(0,0,0,0.4)",
                 fontFamily: "system-ui, -apple-system, 'Segoe UI', sans-serif" }}>
        {/* Sidebar del modal */}
        <div style={{ width: 240, flexShrink: 0, background: "#f8fafc", borderRight: "1px solid #e2e8f0", padding: "18px 12px" }}>
          <div style={{ fontSize: 12, fontWeight: 700, color: "#94a3b8", textTransform: "uppercase",
                        padding: "0 10px 10px" }}>Configuración</div>
          <button onClick={() => setSeccion("leyenda")}
            style={{ width: "100%", textAlign: "left", padding: "10px 12px", borderRadius: 8,
                     border: "none", cursor: "pointer", fontSize: 14, fontWeight: 600, marginBottom: 4,
                     whiteSpace: "nowrap",
                     background: seccion === "leyenda" ? "#e2e8f0" : "transparent", color: "#1e293b" }}>
            Leyenda de Anuncios
          </button>
          <button onClick={() => setSeccion("programas")}
            style={{ width: "100%", textAlign: "left", padding: "10px 12px", borderRadius: 8,
                     border: "none", cursor: "pointer", fontSize: 14, fontWeight: 600, marginBottom: 4,
                     whiteSpace: "nowrap",
                     background: seccion === "programas" ? "#e2e8f0" : "transparent", color: "#1e293b" }}>
            Programas
          </button>
          <button onClick={() => setSeccion("sedes")}
            style={{ width: "100%", textAlign: "left", padding: "10px 12px", borderRadius: 8,
                     border: "none", cursor: "pointer", fontSize: 14, fontWeight: 600, marginBottom: 4,
                     whiteSpace: "nowrap",
                     background: seccion === "sedes" ? "#e2e8f0" : "transparent", color: "#1e293b" }}>
            Sedes de Anuncios
          </button>
          <button onClick={() => setSeccion("leyendas")}
            style={{ width: "100%", textAlign: "left", padding: "10px 12px", borderRadius: 8,
                     border: "none", cursor: "pointer", fontSize: 14, fontWeight: 600, whiteSpace: "nowrap",
                     marginBottom: 4,
                     background: seccion === "leyendas" ? "#e2e8f0" : "transparent", color: "#1e293b" }}>
            Leyenda
          </button>
          <button onClick={() => setSeccion("plantillas")}
            style={{ width: "100%", textAlign: "left", padding: "10px 12px", borderRadius: 8,
                     border: "none", cursor: "pointer", fontSize: 14, fontWeight: 600, whiteSpace: "nowrap",
                     background: seccion === "plantillas" ? "#e2e8f0" : "transparent", color: "#1e293b" }}>
            Plantillas
          </button>
        </div>
        {/* Contenido */}
        <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center",
                        padding: "16px 22px", borderBottom: "1px solid #e2e8f0" }}>
            <div style={{ fontSize: 17, fontWeight: 700, color: "#0f172a" }}>
              {seccion === "leyenda" ? "Leyenda de Anuncios"
               : seccion === "programas" ? "Programas"
               : seccion === "leyendas" ? "Leyenda"
               : seccion === "plantillas" ? "Plantillas"
               : "Sedes de Anuncios"}
            </div>
            <button onClick={onClose}
              style={{ background: "transparent", border: "none", fontSize: 24, cursor: "pointer", color: "#64748b" }}>×</button>
          </div>

          {seccion === "plantillas" ? (
            <div style={{ flex: 1, overflow: "auto", padding: "16px 22px 24px" }}>
              <Plantillas ocultarTitulo />
            </div>
          ) : seccion === "leyendas" ? (
            <LeyendaCampanias />
          ) : seccion === "sedes" ? (
            <SedesAnuncios />
          ) : seccion === "programas" ? (
            <ProgramasOcultos />
          ) : (
          <>
          <div style={{ padding: "14px 22px 8px" }}>
            <input value={busca} onChange={(e) => setBusca(e.target.value)}
              placeholder="Buscar conjunto, pauta o programa..."
              style={{ width: "100%", padding: "9px 12px", border: "1px solid #cbd5e1",
                       borderRadius: 9, fontSize: 13 }} />
          </div>

          <div style={{ flex: 1, overflow: "hidden", padding: "0 22px 4px" }}>
            {cargando ? (
              <div style={{ padding: 40, textAlign: "center", color: "#94a3b8" }}>Cargando...</div>
            ) : (
              <div style={{ height: "100%", border: "1px solid #e2e8f0", borderRadius: 12,
                            overflow: "auto" }}>
                <table style={{ width: "100%", borderCollapse: "separate", borderSpacing: 0,
                                tableLayout: "fixed" }}>
                  <colgroup>
                    <col style={{ width: "38%" }} />
                    <col style={{ width: 100 }} />
                    <col style={{ width: "auto" }} />
                  </colgroup>
                  <thead>
                    <tr>
                      <th style={{ position: "sticky", top: 0, zIndex: 20, background: "#1e3a5f", color: "#fff",
                                   padding: "11px 14px", fontSize: 13, fontWeight: 600, textAlign: "left",
                                   borderTopLeftRadius: 12 }}>Conjunto de Anuncios</th>
                      <th style={{ position: "sticky", top: 0, zIndex: 20, background: "#1e3a5f", color: "#fff",
                                   padding: "11px 14px", fontSize: 13, fontWeight: 600, width: 110, textAlign: "left" }}>Pauta</th>
                      <th style={{ position: "sticky", top: 0, zIndex: 20, background: "#1e3a5f", color: "#fff",
                                   padding: "11px 14px", fontSize: 13, fontWeight: 600, textAlign: "left", width: 340,
                                   borderTopRightRadius: 12 }}>Programa</th>
                    </tr>
                  </thead>
                  <tbody>
                    {filtradas.map((f) => (
                      <tr key={f.conjunto}>
                        <td style={{ padding: "8px 14px", fontSize: 13, color: "#334155", textAlign: "left",
                                     borderRight: "1px solid #eef2f7", wordBreak: "break-word" }}>{f.conjunto}</td>
                        <td style={{ padding: "8px 14px", borderRight: "1px solid #eef2f7", textAlign: "center" }}>
                          <input value={valorPauta(f)} onChange={(e) => setPauta(f.conjunto, e.target.value)}
                            style={{ width: 90, padding: "6px 8px", border: "1px solid #cbd5e1",
                                     borderRadius: 6, fontSize: 13, textAlign: "left", fontFamily: "inherit",
                                     background: edit[f.conjunto] !== undefined ? "#fffbeb" : "#fff" }} />
                        </td>
                        <td style={{ padding: "8px 14px", maxWidth: 0, position: "relative" }}>
                          <ProgramaSelect valor={valorPrograma(f)} opciones={progOpc}
                            onSelect={(o) => setEditProg((p) => ({ ...p, [f.conjunto]: o }))} />
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}
          </div>

          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center",
                        padding: "14px 22px", borderTop: "1px solid #e2e8f0" }}>
            <span style={{ fontSize: 13, color: msg.startsWith("✓") ? "#047857" : "#b91c1c" }}>{msg}</span>
            <button onClick={guardar} disabled={guardando}
              style={{ padding: "9px 22px", border: "none", background: "#1e3a5f", color: "#fff",
                       borderRadius: 9, fontSize: 14, fontWeight: 700, cursor: guardando ? "wait" : "pointer" }}>
              {guardando ? "Guardando..." : "Guardar"}
            </button>
          </div>
          </>
          )}
        </div>
      </div>
    </div>
  );
}