/* Banyan Pharmacy — Alerts (the loop hinge; format-aware urgency) */
const { useState: useStateA } = React;

const URG = {
  critical: { label: "Critical", icon: (p) => <Icons.expedite {...p} /> },
  transfer: { label: "Transfer", icon: (p) => <Icons.swap {...p} /> },
  expiry: { label: "Expiry", icon: (p) => <Icons.clock {...p} /> },
};

function AlertCard({ alert, resolved, onAct, focus }) {
  const app = useApp();
  const store = D.storeById[alert.storeId];
  const status = window.storeStatusAt(store, app.stage);
  const U = URG[alert.urgency];
  const back = alert.urgency === "critical" ? "Courier confirmed — sent back to the Mukundapur chat."
    : alert.urgency === "transfer" ? "Transfer arranged — sent back to the Gariahat chat."
    : "Transfer arranged — Behala → Park Street.";
  return (
    <div className={cx("alert-card", "u-" + alert.urgency, focus && "focus-glow", resolved && "resolved")}>
      <div className="alert-top">
        <div className="a-main">
          <span className={cx("alert-urg", "u-" + alert.urgency)}><span className="dot" /><U.icon size={12} />{U.label}</span>
          <div className="alert-hl">{alert.headline}</div>
          <div className="alert-meta">
            <a onClick={() => app.nav({ name: "store", id: store.id })} style={{ borderBottom: "none", color: "var(--body)", fontWeight: 500, cursor: "pointer" }}>{store.locality}</a>
            <window.FormatBadge format={store.format} />
            <span className="dotsep">·</span>
            <span className="tag">{window.skuName(alert.sku)}</span>
          </div>
        </div>
      </div>

      <div className="alert-what">{alert.what}</div>

      {alert.chat && (
        <div className="chat-snip">
          <div className="cs-from"><span className="wa"><Icons.message size={9} style={{ color: "#fff" }} /></span>{alert.chatFrom}</div>
          <div className="cs-text">“{alert.chat}”</div>
        </div>
      )}

      <div className="suggest">
        <span className="sg-ic"><window.Glyph size={16} /></span>
        <div>
          <div className="sg-lab">Suggested action · from Terrace</div>
          <div className="sg-text">{alert.action}</div>
        </div>
      </div>

      <div className="alert-actions">
        {resolved ? (
          <span className="alert-done"><Icons.check size={15} />{back}</span>
        ) : (
          <React.Fragment>
            <button className="btn sm" onClick={() => onAct(alert.id)}>
              {alert.urgency === "critical" ? <Icons.expedite size={14} /> : <Icons.swap size={14} />}{alert.actionVerb}
            </button>
            <button className="btn sm ghost" onClick={() => app.nav({ name: "store", id: store.id })}>View store</button>
          </React.Fragment>
        )}
      </div>
    </div>
  );
}

function AlertsPage() {
  const app = useApp();
  const [resolved, setResolved] = useStateA({});
  const alerts = window.alertsAt(app.stage);
  const focusId = app.loopFocus && app.loopFocus.kind === "alert" ? app.loopFocus.id : null;
  const act = (id) => { setResolved((r) => ({ ...r, [id]: true })); };
  const openCount = alerts.filter((a) => !resolved[a.id]).length;

  return (
    <main className="page page-narrow">
      <div className="ph">
        <div>
          <h1>Alerts</h1>
          <div className="sub">Store-raised support requests — “we're out of X, centre please help.” {openCount} open · urgency reflects store format.</div>
        </div>
      </div>

      <div className="col g16">
        {alerts.map((a) => (
          <AlertCard key={a.id} alert={a} resolved={!!resolved[a.id]} onAct={act} focus={focusId === a.id} />
        ))}
        {!alerts.length && <div className="card pad"><div className="empty">No open alerts. The chain is steady.</div></div>}
      </div>

      <div className="mt24" style={{ fontSize: 13, color: "var(--mute)", lineHeight: 1.6 }}>
        This is where the centre acts and value returns to the edge. <window.Prov muted>Terrace's judgment adapts to store format — a hospital stockout is critical and expedited; a neighbourhood chronic-med is a routine next-day transfer.</window.Prov>
      </div>
    </main>
  );
}

window.Pages = window.Pages || {};
window.Pages.Alerts = AlertsPage;