/* Banyan Pharmacy — Dashboard (map-led hub; HUD floats over the map) */
const { useApp: useAppT } = window;

function AlertPreviewRow({ alert }) {
  const app = useApp();
  const store = D.storeById[alert.storeId];
  const urgLabel = { critical: "Critical", transfer: "Transfer", expiry: "Expiry" }[alert.urgency];
  return (
    <div className="row bare click" onClick={() => app.nav({ name: "alerts" })}>
      <div className="main">
        <div className="flex ic g8" style={{ marginBottom: 3 }}>
          <span className={cx("alert-urg", "u-" + alert.urgency)} style={{ fontSize: 9.5 }}><span className="dot" />{urgLabel}</span>
          <span className="store-sub">{store.locality}</span>
          <window.FormatBadge format={store.format} showLabel={false} />
        </div>
        <div className="title" style={{ fontSize: 14 }}>{alert.headline}</div>
      </div>
      <div className="right">
        <span className="tag">{window.skuName(alert.sku)}</span>
        <Icons.chevRight size={15} className="muted" />
      </div>
    </div>
  );
}

function TodayPage() {
  const app = useApp();
  const alerts = window.alertsAt(app.stage);

  return (
    <main className="page">
      <section className="section" style={{ marginTop: 4 }}>
        <window.KolkataMap />
      </section>

      <section className="section">
        <SectionHead title="Alerts" count={alerts.length}
          action={<a className="seemore" onClick={() => app.nav({ name: "alerts" })}>Open Alerts <Icons.chevRight size={13} /></a>} />
        <div className="card"><div className="list">
          {alerts.length
            ? alerts.slice(0, 3).map((a) => <AlertPreviewRow key={a.id} alert={a} />)
            : <div className="empty">No open alerts. The chain is steady.</div>}
        </div></div>
        <div className="mt12" style={{ fontSize: 13, color: "var(--mute)" }}>
          Alerts are store-raised support requests, fused with stock and order data. <span className="prov muted">Shelf-health is an estimate that sharpens as more data is ingested.</span>
        </div>
      </section>
    </main>
  );
}

window.Pages = window.Pages || {};
window.Pages.Today = TodayPage;