/* MedBridge — Real-time critical-gap alert queue */

function buildAlerts() {
  const { transfers, util } = window.MB;
  const out = [];
  transfers.filter((t) => t.status !== "Completed").forEach((t) => {
    t.missCrit.forEach((field) => {
      out.push({ id: t.id + "-" + field, transferId: t.id, field, sev: "critical",
        facility: t.from.fac, to: t.to.fac, route: t.route, dxCat: t.dxCat, ts: t.ts,
        window: t.status === "Pre-departure" ? "Departs in ~25 min" : "In transit · ETA 40 min", status: "open" });
    });
  });
  // a few additional states for a fuller queue
  out.push({ id: "A-9931", transferId: "TXF-2026-0455", field: "Allergy List", sev: "warning", facility: "Dartmouth General Hospital", to: "Shoreham Village (LTC)", route: "Hospital → LTC", dxCat: "Respiratory", ts: util.minsAgo(54), window: "Resolved on follow-up", status: "resolved" });
  out.push({ id: "A-9928", transferId: "TXF-2026-0448", field: "Code / DNR Status", sev: "warning", facility: "The Moncton Hospital", to: "Saint John Regional", route: "Inter-facility", dxCat: "GI bleed", ts: util.minsAgo(70), window: "Acknowledged by receiving MD", status: "ack" });
  out.push({ id: "A-9925", transferId: "TXF-2026-0441", field: "Active Medications", sev: "critical", facility: "Queen Elizabeth Hospital", to: "Halifax Infirmary", route: "Inter-provincial medevac", dxCat: "Trauma", ts: util.minsAgo(88), window: "Reconciled on arrival", status: "resolved" });
  return out;
}

function Alerts({ openTransfer }) {
  const [alerts, setAlerts] = useStateMB(buildAlerts);
  const [filter, setFilter] = useStateMB("open");
  const { ago } = window.MB.util;

  const counts = { open: alerts.filter((a) => a.status === "open").length, ack: alerts.filter((a) => a.status === "ack").length, resolved: alerts.filter((a) => a.status === "resolved").length };
  const shown = alerts.filter((a) => filter === "all" || a.status === filter).sort((a, b) => b.ts - a.ts);
  const setStatus = (id, status) => setAlerts((al) => al.map((a) => a.id === id ? { ...a, status } : a));

  const sevMeta = { critical: { k: "crit", ic: "alert", t: "Critical gap" }, warning: { k: "warn", ic: "info", t: "Warning" } };
  const statusBadge = (s) => s === "open" ? <Badge kind="critical">Open</Badge> : s === "ack" ? <Badge kind="warn">Acknowledged</Badge> : <Badge kind="good" icon="check">Resolved</Badge>;

  const Tab = ({ id, label, n }) => (
    <button onClick={() => setFilter(id)} className="row gap8" style={{ padding: "8px 14px", borderRadius: 9, fontSize: 13, fontWeight: 600, border: "1px solid " + (filter === id ? "var(--primary)" : "var(--border)"), background: filter === id ? "var(--primary-light)" : "var(--surface)", color: filter === id ? "var(--primary-dark)" : "var(--text-2)" }}>
      {label}<span className="mono" style={{ opacity: .7 }}>{n}</span>
    </button>
  );

  return (
    <div className="content"><div className="pad" style={{ maxWidth: 1080, margin: "0 auto" }}>
      <div className="page-head">
        <div><h1>Critical-Gap Alerts</h1><div className="ph-sub">Real-time flags for missing critical fields before the patient departure window closes</div></div>
        <div className="row gap6"><Tab id="open" label="Open" n={counts.open} /><Tab id="ack" label="Acknowledged" n={counts.ack} /><Tab id="resolved" label="Resolved" n={counts.resolved} /><Tab id="all" label="All" n={alerts.length} /></div>
      </div>

      <div className="col gap10">
        {shown.map((a) => {
          const m = sevMeta[a.sev];
          return (
            <div key={a.id} className="card" style={{ borderLeft: `4px solid var(--mb-${m.k})`, opacity: a.status === "resolved" ? .72 : 1 }}>
              <div className="row gap12" style={{ padding: "14px 16px" }}>
                <span style={{ width: 40, height: 40, borderRadius: 10, display: "grid", placeItems: "center", background: `var(--mb-${m.k}-bg)`, color: `var(--mb-${m.k})`, flexShrink: 0 }}><Icon name={m.ic} size={20} /></span>
                <div className="grow" style={{ minWidth: 0 }}>
                  <div className="row gap8" style={{ flexWrap: "wrap" }}>
                    <span className="fw7" style={{ fontSize: 14 }}>{a.field} absent</span>
                    {statusBadge(a.status)}
                    {a.status === "open" && <span className="badge badge-warn" style={{ animation: "pulse-on 2s infinite" }}><Icon name="clock" size={11} />{a.window}</span>}
                  </div>
                  <div className="muted" style={{ fontSize: 12.5, marginTop: 3 }}>
                    <b className="t2">{a.facility.split(" (")[0]}</b> <Icon name="chevR" size={11} style={{ verticalAlign: "-1px" }} /> {a.to.split(" (")[0]} · {a.route} · {a.dxCat}
                  </div>
                  <div className="muted mono" style={{ fontSize: 11, marginTop: 2 }}>{a.transferId} · flagged {ago(a.ts)}</div>
                </div>
                <div className="col gap6" style={{ alignItems: "flex-end", flexShrink: 0 }}>
                  <button className="btn btn-sm btn-ghost" onClick={() => openTransfer(a.transferId)}>Open transfer<Icon name="chevR" size={13} /></button>
                  {a.status === "open" && <div className="row gap6"><button className="btn btn-sm btn-soft" onClick={() => setStatus(a.id, "ack")}>Acknowledge</button><button className="btn btn-sm btn-primary" onClick={() => setStatus(a.id, "resolved")}>Resolve</button></div>}
                  {a.status === "ack" && <button className="btn btn-sm btn-primary" onClick={() => setStatus(a.id, "resolved")}>Resolve</button>}
                </div>
              </div>
            </div>
          );
        })}
        {shown.length === 0 && <div className="empty" style={{ height: 200 }}><div><div className="ic"><Icon name="check" size={26} /></div>No {filter} alerts.</div></div>}
      </div>
    </div></div>
  );
}

Object.assign(window, { Alerts });