/* ============================================================
   Pantalla — Alertas
   Bandeja operativa minimalista (tarjetas tipo burbuja, 2 columnas).
   Tabs No leídas / Leídas. "Abrir en mapa" carga el vehículo
   y lo pasa a revisión (el análisis arranca en el Mapa).
   Recibe `alerts`: [{ key, status }] (placas con alerta activa).
   ============================================================ */

const AL_STATUS_META = {
  revision:  { label: "En revisión",    color: "var(--g-signal-yellow)", icon: "loader" },
  archivada: { label: "Archivada",       color: "var(--g-text-mute-dark)", icon: "archive" },
  ejecutada: { label: "Plan activo",     color: "var(--g-signal-green)",  icon: "shield-check" },
  finalizada:{ label: "Plan finalizado", color: "var(--accent, var(--g-celadon))", icon: "flag" },
};

const AL_DATE = (key) => {
  const p = window.SONAR_PLATES[key];
  const m = p && p.marcaciones && p.marcaciones[0];
  return m && m.fecha ? m.fecha : "1970-01-01";
};
// Lunes de la semana ISO de una fecha (clave de agrupación semanal).
const AL_WEEK_START = (iso) => {
  const d = new Date(iso + "T00:00:00");
  const dow = (d.getDay() + 6) % 7;  // 0 = lunes
  d.setDate(d.getDate() - dow);
  return d;
};
const AL_FMT_DAY = (iso) =>
  new Date(iso + "T00:00:00").toLocaleDateString("es-CO", { weekday: "long", day: "2-digit", month: "long" });
const AL_FMT_SHORT = (d) =>
  d.toLocaleDateString("es-CO", { day: "2-digit", month: "short" }).replace(".", "");

const AlertasScreen = ({ alerts = [], onOpenAlert, onReactivar }) => {
  const [tab, setTab] = React.useState("pendientes");
  const [week, setWeek] = React.useState(0);

  const noLeidas = alerts.filter(a => a.status === "no_leida");
  const gestionadas = alerts.filter(a => a.status === "revision" || a.status === "ejecutada" || a.status === "finalizada");
  const archivadas = alerts.filter(a => a.status === "archivada");
  const list = tab === "pendientes" ? noLeidas : tab === "archivadas" ? archivadas : gestionadas;

  // Ordenar por fecha (más reciente primero) y agrupar en semanas.
  const weeks = React.useMemo(() => {
    const sorted = [...list].sort((a, b) => AL_DATE(b.key).localeCompare(AL_DATE(a.key)));
    const out = [];
    sorted.forEach(a => {
      const ws = AL_WEEK_START(AL_DATE(a.key));
      const key = ws.toISOString().slice(0, 10);
      let w = out.find(x => x.key === key);
      if (!w) {
        const end = new Date(ws); end.setDate(end.getDate() + 6);
        w = { key, label: `Semana del ${AL_FMT_SHORT(ws)} – ${AL_FMT_SHORT(end)}`, alerts: [] };
        out.push(w);
      }
      w.alerts.push(a);
    });
    return out;
  }, [list]);

  const pageCount = Math.max(1, weeks.length);
  const wkIndex = Math.min(week, pageCount - 1);
  const curWeek = weeks[wkIndex];

  // Dentro de la semana, agrupar por día (más reciente primero).
  const dayGroups = React.useMemo(() => {
    if (!curWeek) return [];
    const out = [];
    curWeek.alerts.forEach(a => {
      const f = AL_DATE(a.key);
      let g = out.find(x => x.fecha === f);
      if (!g) { g = { fecha: f, alerts: [] }; out.push(g); }
      g.alerts.push(a);
    });
    return out;
  }, [curWeek]);

  return (
    <div className="fade-in sonar-main__inner scroll" style={{ height: "100%", overflow: "auto" }}>
      <div style={{ maxWidth: 820, margin: "0 auto", padding: "28px var(--density-pad) 40px" }}>
        {/* Header */}
        <div className="eyebrow eyebrow--accent">Bandeja operativa</div>
        <h1 style={{ fontSize: 27, fontWeight: 600, letterSpacing: -0.4, color: "var(--g-text-cream)", marginTop: 6 }}>
          Alertas
        </h1>
        <p style={{ fontSize: 14, color: "var(--g-text-mute-dark)", marginTop: 6, lineHeight: 1.5, maxWidth: 540 }}>
          Vehículos con marcación activa detectados por la red ANPR. Abre una alerta para analizar su recorrido en el mapa y decidir un plan candado.
        </p>

        {/* Tabs */}
        <div style={{ display: "flex", gap: 10, margin: "22px 0 20px" }}>
          <button onClick={() => { setTab("pendientes"); setWeek(0); }} style={alTabStyle(tab === "pendientes")}>
            <window.Icon name="circle-alert" size={15}/>
            Por gestionar
            <span style={alTabBadge(noLeidas.length > 0 ? "var(--g-signal-red)" : null)}>{noLeidas.length}</span>
          </button>
          <button onClick={() => { setTab("gestionadas"); setWeek(0); }} style={alTabStyle(tab === "gestionadas")}>
            <window.Icon name="circle-check" size={15}/>
            Gestionadas
            <span style={alTabBadge(gestionadas.length > 0 ? "var(--g-signal-green)" : null)}>{gestionadas.length}</span>
          </button>
          <button onClick={() => { setTab("archivadas"); setWeek(0); }} style={alTabStyle(tab === "archivadas")}>
            <window.Icon name="archive" size={15}/>
            Archivadas
            <span style={alTabBadge(null)}>{archivadas.length}</span>
          </button>
        </div>

        {list.length > 0 && curWeek ? (
          <>
            {/* Etiqueta de la semana */}
            <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 16 }}>
              <window.Icon name="calendar-days" size={14} color="var(--accent, var(--g-celadon))"/>
              <span style={{ fontSize: 13, fontWeight: 600, color: "var(--g-text-cream)", letterSpacing: 0.2 }}>
                {curWeek.label}
              </span>
              <span style={{ marginLeft: "auto", fontSize: 11, color: "var(--g-text-mute-dark)" }}>
                {curWeek.alerts.length} {curWeek.alerts.length === 1 ? "alerta" : "alertas"}
              </span>
            </div>

            {/* Grupos por día */}
            {dayGroups.map(g => (
              <div key={g.fecha} style={{ marginBottom: 22 }}>
                <div style={{
                  fontSize: 11.5, fontWeight: 600, letterSpacing: 0.4,
                  color: "var(--g-text-mute-dark)", textTransform: "capitalize",
                  marginBottom: 10, paddingBottom: 6,
                  borderBottom: "1px solid var(--g-border-on-dark)",
                }}>
                  {AL_FMT_DAY(g.fecha)}
                </div>
                <div style={{ display: "grid", gridTemplateColumns: "repeat(2, minmax(0, 1fr))", gap: 16 }}>
                  {g.alerts.map(a => (
                    <AlertCard key={a.key} plateKey={a.key} status={a.status}
                      onOpen={() => onOpenAlert(a.key)}
                      onReactivar={() => onReactivar(a.key)}/>
                  ))}
                </div>
              </div>
            ))}

            {/* Paginación semanal tipo correo */}
            {pageCount > 1 && (
              <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 6, marginTop: 8 }}>
                <button className="btn" style={{ padding: "7px 10px" }} disabled={wkIndex === 0}
                  onClick={() => setWeek(w => Math.max(0, w - 1))}>
                  <window.Icon name="chevron-left" size={14}/>
                </button>
                {Array.from({ length: pageCount }, (_, i) => (
                  <button key={i} onClick={() => setWeek(i)} style={{
                    minWidth: 32, padding: "7px 0",
                    borderRadius: "var(--g-radius-cta)",
                    border: i === wkIndex ? "1px solid var(--accent, var(--g-celadon))" : "1px solid var(--g-border-on-dark)",
                    background: i === wkIndex ? "rgba(79,212,255,0.1)" : "transparent",
                    color: i === wkIndex ? "var(--g-text-cream)" : "var(--g-text-mute-dark)",
                    fontFamily: "var(--font-sans)", fontSize: 12, fontWeight: 500,
                    cursor: "pointer", fontVariantNumeric: "tabular-nums",
                  }}>{i + 1}</button>
                ))}
                <button className="btn" style={{ padding: "7px 10px" }} disabled={wkIndex >= pageCount - 1}
                  onClick={() => setWeek(w => Math.min(pageCount - 1, w + 1))}>
                  <window.Icon name="chevron-right" size={14}/>
                </button>
              </div>
            )}
            <div style={{ textAlign: "center", fontSize: 10.5, color: "var(--g-text-mute-dark)", marginTop: 10 }}>
              Historial de alertas · máximo una semana por página
            </div>
          </>
        ) : (
          <AlEmpty
            icon={tab === "pendientes" ? "inbox" : tab === "archivadas" ? "archive" : "check"}
            title={tab === "pendientes" ? "Todo gestionado" : tab === "archivadas" ? "Sin archivadas" : "Nada gestionado aún"}
            desc={tab === "pendientes"
              ? "No hay alertas pendientes por gestionar. Las nuevas marcaciones aparecerán aquí."
              : tab === "archivadas"
              ? "Las alertas que cierres sin acción (descartadas) aparecerán aquí."
              : "Las alertas con plan candado o resueltas (vehículo localizado, tiempo excedido) aparecerán aquí."}
          />
        )}
      </div>
    </div>
  );
};

const AlertCard = ({ plateKey, status, onOpen, onReactivar }) => {
  const plate = window.SONAR_PLATES[plateKey];
  if (!plate) return null;
  // Defensivo: con datos reales una placa de alerta puede no traer capturas/marcaciones.
  const m = (plate.marcaciones && plate.marcaciones[0]) || {};
  const caps = plate.capturas || [];
  const lastCap = caps.length ? caps[caps.length - 1] : null;
  const lastNode = lastCap ? window.SONAR_findNode(lastCap.nodo) : null;
  const muni = lastNode ? (window.SONAR_MUNICIPIOS || []).find(x => x.id === lastNode.municipio) : null;
  const noLeida = status === "no_leida";
  const sm = AL_STATUS_META[status];

  return (
    <div style={{
      background: noLeida ? "rgba(229,51,63,0.05)" : "var(--g-surface-on-dark)",
      border: noLeida ? "1px solid rgba(229,51,63,0.38)" : "1px solid var(--g-border-on-dark)",
      borderRadius: 16,
      boxShadow: "var(--s-card-shadow)",
      padding: 16,
      display: "flex", flexDirection: "column", gap: 14,
    }}>
      {/* Header: texto a la izquierda + placa a la derecha */}
      <div style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
        <div style={{ minWidth: 0, flex: 1 }}>
          <div style={{ fontSize: 16, fontWeight: 600, color: "var(--g-text-cream)", letterSpacing: -0.2,
            whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
            {m.motivo || "Marcación activa"}
          </div>
          <div style={{ fontSize: 12, color: noLeida ? "rgba(255,77,90,0.8)" : "var(--g-text-mute-dark)", marginTop: 3,
            whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
            {m.autoridad || "Autoridad sin definir"}{m.fecha ? ` · ${window.SONAR_fmtDate(m.fecha)}` : ""}
          </div>
          {m.secad && (
            <div style={{ fontSize: 11.5, color: "var(--g-text-mute-dark)", marginTop: 2,
              whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", fontVariantNumeric: "tabular-nums" }}>
              SECAD {m.secad}
            </div>
          )}
        </div>
        <div style={{ flexShrink: 0, display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 7 }}>
          <span className="plate plate--lg">{plate.placa}</span>
          {noLeida ? (
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 11, color: "var(--g-signal-red-soft)", fontWeight: 500 }}>
              <span style={{ width: 7, height: 7, borderRadius: "50%", background: "var(--g-signal-red)",
                boxShadow: "0 0 6px var(--g-signal-red)", animation: "alertPulse 1.4s ease-in-out infinite" }}/>
              Por gestionar
            </span>
          ) : (
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6,
              fontSize: 10, letterSpacing: 1.1, textTransform: "uppercase", fontWeight: 600, color: sm.color }}>
              <window.Icon name={sm.icon} size={12}/>{sm.label}
            </span>
          )}
        </div>
      </div>

      {/* Datos en dos columnas — burbujas internas */}
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
        <AlMini label="Vehículo" value={plate.marca || "—"} sub={[plate.color, plate.tipo].filter(Boolean).join(" · ") || "—"}/>
        <AlMini label="Última captura" value={muni ? muni.nombre : "—"} sub={lastNode ? `${window.SONAR_nodeCode(lastNode)} · ${lastNode.alias || ""}` : "sin captura reciente"}/>
      </div>

      {/* Acción — anclada al borde inferior */}
      <div style={{ marginTop: "auto" }}>
      {noLeida ? (
        <button onClick={onOpen} className="btn btn--primary" style={{
          width: "100%", justifyContent: "center", padding: "11px",
          background: "var(--g-signal-red)", color: "#fff",
        }}>
          <window.Icon name="map" size={15}/> Abrir en mapa
          <window.Icon name="arrow-right" size={15} style={{ marginLeft: "auto" }}/>
        </button>
      ) : (
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          <div style={{ fontSize: 12, color: "var(--g-text-mute-dark)", lineHeight: 1.5 }}>
            {status === "revision" && "Flujo iniciado · pendiente de decisión (archivar o ejecutar plan candado)."}
            {status === "archivada" && "Resuelta sin plan candado · vehículo en seguimiento."}
            {status === "ejecutada" && "Plan candado activo · unidades notificadas."}
            {status === "finalizada" && "Plan candado finalizado · operativo cerrado."}
          </div>
          <div style={{ display: "flex", gap: 8 }}>
            <button onClick={onOpen} className="btn" style={{ flex: 1, justifyContent: "center", padding: "9px", fontSize: 12.5 }}>
              <window.Icon name="map" size={14}/> Abrir
            </button>
            <button onClick={onReactivar} className="btn" style={{ flex: 1, justifyContent: "center", padding: "9px", fontSize: 12.5,
              color: "var(--g-signal-yellow)", borderColor: "rgba(242,198,29,0.4)" }}>
              <window.Icon name="rotate-ccw" size={14}/> Reactivar
            </button>
          </div>
        </div>
      )}
      </div>
    </div>
  );
};

const AlMini = ({ label, value, sub }) => (
  <div className="surface" style={{ padding: "10px 12px", background: "var(--g-surface-on-dark)", minWidth: 0 }}>
    <div style={{ fontSize: 9.5, letterSpacing: 1.3, textTransform: "uppercase", color: "var(--g-text-mute-dark)" }}>{label}</div>
    <div style={{ fontSize: 14, fontWeight: 500, color: "var(--g-text-cream)", marginTop: 3, letterSpacing: -0.2,
      whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{value}</div>
    {sub && <div style={{ fontSize: 11, color: "var(--g-text-mute-dark)", marginTop: 2,
      whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{sub}</div>}
  </div>
);

const AlEmpty = ({ icon, title, desc }) => (
  <div className="surface" style={{ padding: "48px 20px", textAlign: "center", background: "var(--g-surface-on-dark)" }}>
    <window.Icon name={icon} size={30} style={{ color: "var(--g-text-mute-dark)" }}/>
    <div style={{ fontSize: 17, fontWeight: 500, color: "var(--g-text-cream)", marginTop: 14 }}>{title}</div>
    <div style={{ fontSize: 13, color: "var(--g-text-mute-dark)", marginTop: 6, maxWidth: 360, marginLeft: "auto", marginRight: "auto", lineHeight: 1.5 }}>{desc}</div>
  </div>
);

const alTabStyle = (active) => ({
  display: "inline-flex", alignItems: "center", gap: 9,
  padding: "11px 18px",
  borderRadius: "var(--g-radius-cta)",
  border: active ? "1px solid var(--accent, var(--g-celadon))" : "1px solid var(--g-border-on-dark)",
  background: active ? "rgba(79, 212, 255, 0.08)" : "transparent",
  color: active ? "var(--g-text-cream)" : "var(--g-text-mute-dark)",
  fontFamily: "var(--font-sans)",
  fontSize: 13.5, fontWeight: 500, letterSpacing: 0.3,
  cursor: "pointer",
  transition: "all 150ms",
});
const alTabBadge = (color) => ({
  minWidth: 20, padding: "1px 7px",
  borderRadius: "var(--g-radius-pill)",
  background: color || "rgba(127,127,127,0.18)",
  color: color ? "#fff" : "var(--g-text-mute-dark)",
  fontSize: 11, fontWeight: 600,
  fontVariantNumeric: "tabular-nums",
});

window.AlertasScreen = AlertasScreen;