/* ============================================================
   Registrar placa — sección con switch arriba:
     · "Registrar"        → form para ingresar una placa a la lista
                            negra (sub-tipo + motivo + autoridad) o blanca.
     · "Listas actuales"  → visor agrupado con filtros (placa, lista,
                            entidad, municipio).
   Todo vive en sonar.watchlist (departamental o por municipio vía 'alcance');
   NO baja a las DBs de los municipios.
   ============================================================ */

const REG_TIPOS_VEHICULO = ["Automóvil", "Camioneta", "Motocicleta", "Bus", "Camión", "Taxi"];
const REG_COLORES = [
  "Blanco", "Negro", "Gris", "Plata", "Rojo", "Azul",
  "Verde", "Amarillo", "Beige", "Vino tinto", "Naranja", "Café",
];
const REG_MARCAS = [
  "Chevrolet", "Renault", "Nissan", "Toyota", "Mazda", "Kia", "Hyundai",
  "Volkswagen", "Ford", "Suzuki", "Honda", "Mitsubishi", "Fiat",
  "Citroën", "Peugeot", "Jeep", "Dodge", "Subaru", "Mercedes-Benz", "BMW",
  "Changan", "JAC", "DFSK", "Foton", "Volvo", "SsangYong",
  "Bajaj", "Yamaha", "AKT", "Hero", "KTM", "TVS",
];
const REG_TIPOS_MARCACION = [
  { value: "REPORTADO", label: "Reportado" },
  { value: "ROBADO", label: "Robado" },
  { value: "SEGUIMIENTO", label: "Seguimiento (vigilancia)" },
];
const REG_MOTIVOS = [
  "Hurto vehículo", "Hurto a residencia", "Hurto a comercio",
  "Porte ilegal", "Orden judicial", "Vehículo de interés",
  "Extorsión", "Otro",
];
const REG_AUTORIDADES = [
  "SIJIN", "GAULA", "CTI", "Fiscalía", "Ejército", "Estación de Policía", "Tránsito",
];

const LISTA_META = {
  negra:  { label: "Lista negra",  color: "var(--g-signal-red-soft)", bg: "rgba(255,90,90,0.12)",  icon: "shield-ban" },
  blanca: { label: "Lista blanca", color: "var(--g-celadon)",         bg: "rgba(120,220,200,0.12)", icon: "shield-check" },
};
const LBL_SM = { fontSize: 11, letterSpacing: 0.3, fontWeight: 600, color: "var(--g-text-mute-dark)" };

const RegField = ({ label, required, children, hint, error }) => (
  <label style={{ display: "flex", flexDirection: "column", gap: 7 }}>
    <span style={{
      fontSize: 11.5, letterSpacing: 0.3, fontWeight: 600,
      color: "var(--g-text-cream)",
    }}>
      {label}{required && <span style={{ color: "var(--accent, var(--g-celadon))", marginLeft: 3 }}>*</span>}
    </span>
    {children}
    {hint && <span style={{ fontSize: 11, color: error ? "var(--g-signal-red-soft)" : "var(--g-text-mute-dark)", display: "flex", alignItems: "center", gap: 5 }}>
      {error && <window.Icon name="alert-circle" size={12}/>}
      {hint}
    </span>}
  </label>
);

const RegSelect = ({ value, onChange, children, placeholder }) => (
  <div style={{ position: "relative" }}>
    <select
      className="input reg-select"
      value={value}
      onChange={e => onChange(e.target.value)}
      style={{ width: "100%", appearance: "none", paddingRight: 38, cursor: "pointer" }}
    >
      {placeholder && <option value="">{placeholder}</option>}
      {children}
    </select>
    <window.Icon name="chevron-down" size={16} style={{
      position: "absolute", right: 12, top: "50%", transform: "translateY(-50%)",
      color: "var(--g-text-mute-dark)", pointerEvents: "none",
    }}/>
  </div>
);

// Combobox: deja escribir libremente y filtra sugerencias mientras se teclea.
const RegCombobox = ({ value, onChange, options, placeholder, error }) => {
  const [open, setOpen] = React.useState(false);
  const wrapRef = React.useRef(null);

  const q = (value || "").toLowerCase().trim();
  const filtered = options.filter(o => o.toLowerCase().includes(q));
  const showList = open && filtered.length > 0;

  React.useEffect(() => {
    const onDoc = (e) => { if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false); };
    document.addEventListener("mousedown", onDoc);
    return () => document.removeEventListener("mousedown", onDoc);
  }, []);

  return (
    <div ref={wrapRef} style={{ position: "relative" }}>
      <input
        className="input"
        value={value}
        onChange={e => { onChange(e.target.value); setOpen(true); }}
        onFocus={() => setOpen(true)}
        placeholder={placeholder}
        autoComplete="off"
        style={{ paddingRight: 38, borderColor: error ? "var(--g-signal-red)" : undefined }}
      />
      <button type="button" onClick={() => setOpen(o => !o)} aria-label="Mostrar opciones" style={{
        position: "absolute", right: 4, top: "50%", transform: "translateY(-50%)",
        width: 30, height: 30, display: "grid", placeItems: "center",
        background: "transparent", border: 0, cursor: "pointer", color: "var(--g-text-mute-dark)",
      }}>
        <window.Icon name="chevron-down" size={16}/>
      </button>
      {showList && (
        <div className="reg-combo-list scroll" style={{
          position: "absolute", top: "calc(100% + 6px)", left: 0, right: 0, zIndex: 30,
          maxHeight: 220, overflowY: "auto",
          background: "var(--s-panel)",
          border: "1px solid var(--g-border-on-dark)",
          borderRadius: "var(--g-radius-cta)",
          boxShadow: "0 14px 36px rgba(0,0,0,0.5)",
          padding: 5,
        }}>
          {filtered.map(o => {
            const sel = o.toLowerCase() === q;
            return (
              <button type="button" key={o}
                onClick={() => { onChange(o); setOpen(false); }}
                style={{
                  display: "block", width: "100%", textAlign: "left",
                  padding: "9px 11px", borderRadius: 8, border: 0,
                  background: sel ? "rgba(79,212,255,0.1)" : "transparent",
                  color: "var(--g-text-cream)", cursor: "pointer",
                  fontFamily: "var(--font-sans)", fontSize: 13.5,
                }}
                onMouseEnter={e => e.currentTarget.style.background = "rgba(79,212,255,0.08)"}
                onMouseLeave={e => e.currentTarget.style.background = sel ? "rgba(79,212,255,0.1)" : "transparent"}
              >{o}</button>
            );
          })}
        </div>
      )}
    </div>
  );
};

// Segmented control "sólido" (mismo look que el switch de Operatividad).
// Columna de una lista (negra/blanca) con sus placas registradas (paginada).
const LISTA_PER_PAGE = 6;   // máximo de placas por página, por columna
function ListaCol({ meta, items, onRemove, muniName }) {
  const [page, setPage] = React.useState(0);
  React.useEffect(() => { setPage(0); }, [items.length]);   // al filtrar, vuelve a la 1
  const pageCount = Math.max(1, Math.ceil(items.length / LISTA_PER_PAGE));
  const p = Math.min(page, pageCount - 1);
  const rows = items.slice(p * LISTA_PER_PAGE, p * LISTA_PER_PAGE + LISTA_PER_PAGE);
  return (
    <div className="surface" style={{ padding: 14, display: "flex", flexDirection: "column", gap: 10 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
        <window.Icon name={meta.icon} size={16} color={meta.color}/>
        <span style={{ fontWeight: 700, color: meta.color }}>{meta.label}</span>
        <span style={{ marginLeft: "auto", fontSize: 12, color: "var(--g-text-mute-dark)" }}>{items.length}</span>
      </div>
      {items.length === 0
        ? <span style={{ fontSize: 12.5, color: "var(--g-text-mute-dark)" }}>Sin placas.</span>
        : rows.map(it => (
          <div key={it.id} style={{ display: "flex", alignItems: "center", gap: 10, padding: "8px 10px",
            borderRadius: 8, background: "rgba(255,255,255,0.02)", border: "1px solid var(--g-border-on-dark)" }}>
            <span className="plate plate--sm">{it.placa}</span>
            <div style={{ display: "flex", flexDirection: "column", minWidth: 0 }}>
              <span style={{ fontSize: 12.5, color: "var(--g-text-cream)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
                {[it.marcacion_tipo, it.motivo].filter(Boolean).join(" · ") || "—"}
              </span>
              <span style={{ fontSize: 11, color: "var(--g-text-mute-dark)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
                {[[it.marca, it.color].filter(Boolean).join(" "), muniName(it.alcance), it.autoridad].filter(Boolean).join(" · ") || "departamental"}
              </span>
            </div>
            <button className="btn btn--ghost" onClick={() => onRemove(it.id)} title="Quitar de la lista"
              style={{ marginLeft: "auto", padding: "5px 8px" }}>
              <window.Icon name="trash-2" size={14}/>
            </button>
          </div>
        ))}
      {/* Paginación (flechas clásicas) — aparece si la lista supera LISTA_PER_PAGE */}
      {items.length > LISTA_PER_PAGE && (
        <div style={{ display: "flex", alignItems: "center", justifyContent: "flex-end", gap: 10, marginTop: 4 }}>
          <span className="meta" style={{ marginRight: "auto" }}>
            {p * LISTA_PER_PAGE + 1}–{Math.min((p + 1) * LISTA_PER_PAGE, items.length)} de {items.length}
          </span>
          <button className="btn" style={{ padding: "6px 9px" }} disabled={p === 0}
            onClick={() => setPage(Math.max(0, p - 1))}>
            <window.Icon name="chevron-left" size={14}/>
          </button>
          <span className="meta" style={{ fontVariantNumeric: "tabular-nums", minWidth: 44, textAlign: "center" }}>
            {p + 1} / {pageCount}
          </span>
          <button className="btn" style={{ padding: "6px 9px" }} disabled={p >= pageCount - 1}
            onClick={() => setPage(Math.min(pageCount - 1, p + 1))}>
            <window.Icon name="chevron-right" size={14}/>
          </button>
        </div>
      )}
    </div>
  );
}

// Visor de listas actuales con filtros (placa, lista, entidad, municipio).
function ListasView({ items, onRemove, loading, municipios }) {
  const [q, setQ] = React.useState("");
  const [fLista, setFLista] = React.useState("todas");
  const [fEntidad, setFEntidad] = React.useState("todas");
  const [fMuni, setFMuni] = React.useState("todas");

  const muniName = (alc) => (!alc || alc === "departamental")
    ? "Departamental"
    : ((municipios.find(m => m.id === alc) || {}).nombre || alc);
  const entidades = Array.from(new Set(items.map(i => i.autoridad).filter(Boolean))).sort();

  const nq = window.SONAR_normalizePlate(q);
  const filtered = items.filter(i =>
    (fLista === "todas" || i.lista === fLista) &&
    (fEntidad === "todas" || i.autoridad === fEntidad) &&
    (fMuni === "todas" || (i.alcance || "departamental") === fMuni) &&
    (!nq || (i.placa || "").includes(nq))
  );
  const negras = filtered.filter(i => i.lista === "negra");
  const blancas = filtered.filter(i => i.lista === "blanca");

  if (loading) return <div style={{ marginTop: 22, color: "var(--g-text-mute-dark)", fontSize: 13 }}>Cargando listas…</div>;

  return (
    <div style={{ marginTop: 22, display: "flex", flexDirection: "column", gap: 16 }}>
      {/* Barra de filtros */}
      <div className="surface" style={{ padding: 14, display: "flex", gap: 12, flexWrap: "wrap", alignItems: "flex-end" }}>
        <label style={{ display: "flex", flexDirection: "column", gap: 5, flex: "1 1 200px" }}>
          <span style={LBL_SM}>Buscar placa</span>
          <input className="input" value={q} onChange={e => setQ(e.target.value)} placeholder="ABC123"
            autoComplete="off" style={{ textTransform: "uppercase", letterSpacing: 1 }}/>
        </label>
        <label style={{ display: "flex", flexDirection: "column", gap: 5, minWidth: 130 }}>
          <span style={LBL_SM}>Lista</span>
          <select className="input" value={fLista} onChange={e => setFLista(e.target.value)} style={{ cursor: "pointer" }}>
            <option value="todas">Todas</option>
            <option value="negra">Lista negra</option>
            <option value="blanca">Lista blanca</option>
          </select>
        </label>
        <label style={{ display: "flex", flexDirection: "column", gap: 5, minWidth: 150 }}>
          <span style={LBL_SM}>Entidad</span>
          <select className="input" value={fEntidad} onChange={e => setFEntidad(e.target.value)} style={{ cursor: "pointer" }}>
            <option value="todas">Todas</option>
            {entidades.map(a => <option key={a} value={a}>{a}</option>)}
          </select>
        </label>
        <label style={{ display: "flex", flexDirection: "column", gap: 5, minWidth: 170 }}>
          <span style={LBL_SM}>Municipio</span>
          <select className="input" value={fMuni} onChange={e => setFMuni(e.target.value)} style={{ cursor: "pointer" }}>
            <option value="todas">Todos</option>
            <option value="departamental">Departamental</option>
            {municipios.map(m => <option key={m.id} value={m.id}>{m.nombre}</option>)}
          </select>
        </label>
        <span style={{ marginLeft: "auto", fontSize: 12, color: "var(--g-text-mute-dark)", whiteSpace: "nowrap" }}>
          {filtered.length} de {items.length}
        </span>
      </div>

      {/* Agrupado por lista */}
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
        <ListaCol meta={LISTA_META.negra} items={negras} onRemove={onRemove} muniName={muniName}/>
        <ListaCol meta={LISTA_META.blanca} items={blancas} onRemove={onRemove} muniName={muniName}/>
      </div>
    </div>
  );
}

const RegistrarScreen = ({ prefillPlaca = "" }) => {
  const municipios = window.SONAR_MUNICIPIOS || [];
  // Categorías del detalle de marcación, gestionadas desde Operatividad (fallback al quemado).
  const M = window.SONAR_MARCACIONES || {};
  const tiposM = (M.tipo && M.tipo.length) ? M.tipo.map(x => x.nombre) : REG_TIPOS_MARCACION.map(t => t.label);
  const motivosM = (M.motivo && M.motivo.length) ? M.motivo.map(x => x.nombre) : REG_MOTIVOS;
  const autoridadesM = (M.autoridad && M.autoridad.length) ? M.autoridad.map(x => x.nombre) : REG_AUTORIDADES;
  const [vista, setVista] = React.useState("registrar");
  const [form, setForm] = React.useState({
    placa: prefillPlaca || "",
    lista: "negra",
    alcance: "departamental",
    tipoVehiculo: "",
    marca: "",
    modelo: "",
    color: "",
    anio: "",
    tipoMarcacion: tiposM[0] || "Reportado",
    motivo: motivosM[0] || "Hurto vehículo",
    autoridad: autoridadesM[0] || "SIJIN",
    secad: "",
  });
  const [touched, setTouched] = React.useState(false);
  const [busy, setBusy] = React.useState(false);
  const [items, setItems] = React.useState([]);
  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => { if (prefillPlaca) { setForm(f => ({ ...f, placa: prefillPlaca })); setVista("registrar"); } }, [prefillPlaca]);

  const load = React.useCallback(() => {
    window.SonarAPI.getWatchlist()
      .then(w => { setItems(w || []); setLoading(false); })
      .catch(() => setLoading(false));
  }, []);
  React.useEffect(() => { load(); }, [load]);

  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const normalized = window.SONAR_normalizePlate(form.placa);
  const placaValid = /^[A-Z]{3}[0-9]{3}$/.test(normalized);
  const negra = form.lista === "negra";
  const canSubmit = placaValid && !busy;
  const showPlacaError = (touched || normalized.length >= 3) && !placaValid;

  const onSubmit = async (e) => {
    e.preventDefault();
    setTouched(true);
    if (!placaValid) return;
    setBusy(true);
    const marcaModelo = [form.marca.trim(), form.modelo.trim()].filter(Boolean).join(" ");
    const payload = {
      placa: normalized,
      lista: form.lista,
      alcance: form.alcance,
      marcacion_tipo: negra ? form.tipoMarcacion : null,
      motivo: form.motivo || null,
      autoridad: negra ? form.autoridad : null,
      secad: negra ? (form.secad.trim() || null) : null,
      vehiculo: {
        tipo: form.tipoVehiculo || null,
        marca: marcaModelo || null,
        color: form.color.trim() || null,
        anio: form.anio ? parseInt(form.anio, 10) : null,
      },
    };
    try {
      await window.SonarAPI.addToWatchlist(payload);
      setForm(f => ({ ...f, placa: "", marca: "", modelo: "", color: "", anio: "", secad: "" }));
      setTouched(false);
      load();
    } catch (_) { /* el backend valida; no rompemos la UI */ }
    setBusy(false);
  };

  const remove = async (id) => { await window.SonarAPI.removeFromWatchlist(id); load(); };

  return (
    <div className="fade-in sonar-main__inner scroll" style={{ height: "100%", overflow: "auto" }}>
      <div style={{ maxWidth: 900, margin: "0 auto", padding: "28px var(--density-pad) 48px" }}>
        <div className="eyebrow eyebrow--accent">Marcaciones · listas de control</div>
        <h1 style={{ fontSize: 27, fontWeight: 600, letterSpacing: -0.4, color: "var(--g-text-cream)", marginTop: 6 }}>
          Registrar placa
        </h1>

        {/* Switch arriba */}
        <div style={{ marginTop: 16 }}>
          <window.SonarSegmented value={vista} onChange={setVista} options={[
            { id: "registrar", label: "Registrar", icon: "shield-plus" },
            { id: "listas", label: "Listas actuales", icon: "list-checks", badge: items.length },
          ]}/>
        </div>

        {vista === "registrar" && (
          <>
            <p style={{ fontSize: 14, color: "var(--g-text-mute-dark)", marginTop: 16, lineHeight: 1.55 }}>
              Ingresa una placa a la <b style={{ color: LISTA_META.negra.color }}>lista negra</b> (de interés) o la{" "}
              <b style={{ color: LISTA_META.blanca.color }}>lista blanca</b> (autorizada). Se guarda en Sonar; no baja a las bases de los municipios.
            </p>

            <form onSubmit={onSubmit} style={{ marginTop: 22, display: "flex", flexDirection: "column", gap: 22 }}>
              {/* Placa + lista + alcance */}
              <section className="surface" style={{ padding: 22, background: "var(--g-surface-on-dark)" }}>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }}>
                  <RegField label="Placa" required
                    hint={showPlacaError ? "Formato esperado: ABC123" : "3 letras + 3 números"}
                    error={showPlacaError}>
                    <input className="input" value={normalized}
                      onChange={e => set("placa", e.target.value)} placeholder="ABC123" maxLength={6}
                      style={{ textTransform: "uppercase", letterSpacing: 2, fontWeight: 600, fontSize: 15,
                        borderColor: showPlacaError ? "var(--g-signal-red)" : undefined }}/>
                  </RegField>

                  <RegField label="Lista" required>
                    <div style={{ display: "flex", gap: 8 }}>
                      {["negra", "blanca"].map(k => {
                        const m = LISTA_META[k]; const sel = form.lista === k;
                        return (
                          <button type="button" key={k} onClick={() => set("lista", k)}
                            style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", gap: 7,
                              padding: "9px 12px", borderRadius: "var(--g-radius-cta)", cursor: "pointer",
                              border: "1px solid " + (sel ? m.color : "var(--g-border-on-dark)"),
                              background: sel ? m.bg : "transparent", color: sel ? m.color : "var(--g-text-mute-dark)",
                              fontWeight: 600, fontSize: 13 }}>
                            <window.Icon name={m.icon} size={15}/>{m.label}
                          </button>
                        );
                      })}
                    </div>
                  </RegField>

                  <RegField label="Alcance" hint="Departamental o un municipio específico">
                    <RegSelect value={form.alcance} onChange={v => set("alcance", v)}>
                      <option value="departamental">Departamental (todo el Quindío)</option>
                      {municipios.map(m => <option key={m.id} value={m.id}>{m.nombre}</option>)}
                    </RegSelect>
                  </RegField>
                </div>
              </section>

              {/* Detalle (negra) / autorización (blanca) */}
              <section className="surface" style={{ padding: 22, background: "var(--g-surface-on-dark)" }}>
                <div style={{ display: "flex", alignItems: "center", gap: 9, marginBottom: 18 }}>
                  <window.Icon name={negra ? "shield-alert" : "shield-check"} size={17}
                    color={negra ? "var(--g-signal-red-soft)" : "var(--g-celadon)"}/>
                  <span style={{ fontSize: 13, fontWeight: 600, letterSpacing: 0.2, color: "var(--g-text-cream)" }}>
                    {negra ? "Detalle de la marcación" : "Autorización (lista blanca)"}
                  </span>
                </div>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }}>
                  {negra && (
                    <RegField label="Tipo de marcación" required>
                      <RegSelect value={form.tipoMarcacion} onChange={v => set("tipoMarcacion", v)}>
                        {tiposM.map(t => <option key={t} value={t}>{t}</option>)}
                      </RegSelect>
                    </RegField>
                  )}
                  <RegField label="Motivo" required>
                    <RegSelect value={form.motivo} onChange={v => set("motivo", v)}>
                      {motivosM.map(m => <option key={m} value={m}>{m}</option>)}
                    </RegSelect>
                  </RegField>
                  {negra && (
                    <RegField label="Autoridad de origen" required>
                      <RegSelect value={form.autoridad} onChange={v => set("autoridad", v)}>
                        {autoridadesM.map(a => <option key={a} value={a}>{a}</option>)}
                      </RegSelect>
                    </RegField>
                  )}
                  {negra && (
                    <RegField label="N.° de incidente SECAD" hint="Opcional — radicado del despacho 123">
                      <input className="input" value={form.secad}
                        onChange={e => set("secad", e.target.value.replace(/[^0-9-]/g, "").slice(0, 14))}
                        placeholder="Ej. 2026-058421" style={{ fontVariantNumeric: "tabular-nums", letterSpacing: 0.5 }}/>
                    </RegField>
                  )}
                </div>
              </section>

              {/* Vehículo (opcional) */}
              <section className="surface" style={{ padding: 22, background: "var(--g-surface-on-dark)" }}>
                <div style={{ display: "flex", alignItems: "center", gap: 9, marginBottom: 18 }}>
                  <window.Icon name="car" size={17} color="var(--accent, var(--g-celadon))"/>
                  <span style={{ fontSize: 13, fontWeight: 600, letterSpacing: 0.2, color: "var(--g-text-cream)" }}>
                    Vehículo <span style={{ color: "var(--g-text-mute-dark)", fontWeight: 400 }}>· opcional</span>
                  </span>
                </div>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }}>
                  <RegField label="Tipo de vehículo">
                    <RegSelect value={form.tipoVehiculo} onChange={v => set("tipoVehiculo", v)} placeholder="—">
                      {REG_TIPOS_VEHICULO.map(t => <option key={t} value={t}>{t}</option>)}
                    </RegSelect>
                  </RegField>
                  <RegField label="Año" hint="Opcional">
                    <input className="input" value={form.anio}
                      onChange={e => set("anio", e.target.value.replace(/[^0-9]/g, "").slice(0, 4))}
                      placeholder="Ej. 2020" style={{ fontVariantNumeric: "tabular-nums" }}/>
                  </RegField>
                  <RegField label="Marca" hint="Escribe o elige de la lista">
                    <RegCombobox value={form.marca} onChange={v => set("marca", v)} options={REG_MARCAS} placeholder="Ej. Chevrolet"/>
                  </RegField>
                  <RegField label="Modelo / línea" hint="Opcional">
                    <input className="input" value={form.modelo} onChange={e => set("modelo", e.target.value)} placeholder="Ej. Sail, Logan, NP300"/>
                  </RegField>
                  <RegField label="Color" hint="Escribe o elige de la lista">
                    <RegCombobox value={form.color} onChange={v => set("color", v)} options={REG_COLORES} placeholder="Ej. Blanco"/>
                  </RegField>
                </div>
              </section>

              {/* Footer acciones */}
              <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
                <span style={{ fontSize: 12, color: "var(--g-text-mute-dark)", display: "flex", alignItems: "center", gap: 7 }}>
                  <window.Icon name="info" size={14}/>
                  Se guarda en la lista de Sonar.
                </span>
                <button type="submit" className="btn btn--primary" disabled={!canSubmit}
                  style={{ marginLeft: "auto", justifyContent: "center", padding: "12px 22px",
                    opacity: canSubmit ? 1 : 0.5, cursor: canSubmit ? "pointer" : "not-allowed" }}>
                  <window.Icon name="shield-plus" size={16}/>
                  {busy ? "Guardando…" : "Agregar a la lista"}
                </button>
              </div>
            </form>
          </>
        )}

        {vista === "listas" && (
          <ListasView items={items} onRemove={remove} loading={loading} municipios={municipios}/>
        )}
      </div>
    </div>
  );
};

window.RegistrarScreen = RegistrarScreen;