// Status strip under the header — compact one-row summary.

function StatusStrip({ alerts }) {
  const active = alerts.filter(a => a.status === "active");
  const crit = active.filter(a => a.severity === "critical").length;
  const warn = active.filter(a => a.severity === "warning").length;
  const info = active.filter(a => a.severity === "info").length;
  const closedToday = TASKS.filter(t => t.state === "Done" && t.closedAt && t.closedAt.startsWith("2026-05-17")).length;
  const onlineAgents = TEAM.filter(t => t.watcherOnline).length;
  const totalEvents = EVENTS.length + 142;

  const stateLine =
    NOW.toLocaleDateString("ru-RU", { day: "2-digit", month: "2-digit" }) + " " +
    NOW.toLocaleTimeString("ru-RU", { hour: "2-digit", minute: "2-digit" });

  return (
    <div className="status-strip">
      <div className="strip-inner">
        <div className="ss-block ss-state">
          <span className="dot ok" />
          <span>
            Состояние команды на <span className="mono ink">{stateLine}</span>
            <span className="muted"> · авто 30с · uptime 6ч 52м</span>
          </span>
        </div>

        <div className="ss-sep" />

        <div className="ss-block">
          <span className="ss-lbl">Алерты</span>
          <span className="ss-num">{ALERTS.length}</span>
          {crit > 0 && <span className="ss-chip crit"><span className="dot crit" /> {crit}</span>}
          {warn > 0 && <span className="ss-chip warn"><span className="dot warn" /> {warn}</span>}
          {info > 0 && <span className="ss-chip info"><span className="dot info" /> {info}</span>}
          {crit + warn + info === 0 && <span className="ss-chip ok"><span className="dot ok" /> чисто</span>}
        </div>

        <div className="ss-sep" />

        <div className="ss-block">
          <span className="ss-lbl">За сутки</span>
          <span className="ss-pair"><span className="ss-num">{closedToday}</span><span className="ss-pair-lbl">закрыто</span></span>
          <span className="ss-pair"><span className="ss-num">{totalEvents}</span><span className="ss-pair-lbl">событий</span></span>
          <span className="ss-pair"><span className="ss-num">{onlineAgents}/{TEAM.length}</span><span className="ss-pair-lbl">онлайн</span></span>
        </div>

        <div className="ss-sep" />

        <div className="ss-block">
          <span className="ss-lbl">Источник</span>
          <span className="mono muted">plane.multi-print.local</span>
        </div>
      </div>
    </div>
  );
}

window.StatusStrip = StatusStrip;