/* global React */
/**
 * PharmacySummary — Live pharmacy ops widget (M2 data wiring)
 * GET /api/v1/public/pharmacy/summary  (unauthenticated, 5-min refresh)
 * DATA_CONTRACTS: pharmacy.json
 */

const { useState, useEffect } = React;
const API = "https://api.conceptualhealth.com/api/v1/public/pharmacy/summary";
const REFRESH_MS = 5 * 60 * 1000;

const DEMO = { skus_on_hand: 2847, refills_pending: 14, adherence_pdc_pct: 83.2, csm_alerts_open: 0, nutrition_rxs_active: 126 };

function Tile({ label, value, sub, accent }) {
  return (
    <div style={{ background: "var(--bg-steel,#111418)", border: "1px solid var(--border-1-dark,#232830)", borderRadius: 10, padding: "14px 18px", flex: "1 1 120px" }}>
      <div style={{ fontSize: 10, fontFamily: "var(--font-mono,monospace)", color: "var(--fg-3,#6b7280)", textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 6 }}>{label}</div>
      <div style={{ fontSize: 26, fontWeight: 700, color: accent || "var(--fg-1,#f2f4f7)", fontFamily: "var(--font-display,sans-serif)", lineHeight: 1 }}>{value}</div>
      {sub && <div style={{ fontSize: 10, color: "var(--fg-3,#6b7280)", marginTop: 5, fontFamily: "var(--font-mono,monospace)" }}>{sub}</div>}
    </div>
  );
}

function PharmacySummary() {
  const [data, setData] = useState(null);
  const [live, setLive] = useState(false);

  const fetch_ = () =>
    fetch(API).then(r => r.ok ? r.json() : null).then(j => { if (j) { setData(j); setLive(true); } else { setData(DEMO); setLive(false); } }).catch(() => { setData(DEMO); setLive(false); });

  useEffect(() => { fetch_(); const id = setInterval(fetch_, REFRESH_MS); return () => clearInterval(id); }, []);
  if (!data) return null;

  const badge = { display: "inline-flex", alignItems: "center", gap: 5, fontSize: 9, fontFamily: "var(--font-mono,monospace)", padding: "3px 9px", borderRadius: 20, background: live ? "rgba(16,185,129,0.12)" : "rgba(156,163,175,0.12)", color: live ? "#10b981" : "#9ca3af", border: live ? "1px solid rgba(16,185,129,0.25)" : "1px solid rgba(156,163,175,0.2)" };

  return (
    <div style={{ padding: "0 0 20px" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 10 }}>
        <div style={{ fontSize: 10, fontFamily: "var(--font-mono,monospace)", color: "var(--fg-3)", textTransform: "uppercase", letterSpacing: "0.09em" }}>Pharmacy live data</div>
        <div style={badge}><span style={{ width: 5, height: 5, borderRadius: "50%", background: live ? "#10b981" : "#9ca3af", display: "inline-block" }} />{live ? "LIVE" : "DEMO"}</div>
      </div>
      <div style={{ display: "flex", flexWrap: "wrap", gap: 10 }}>
        <Tile label="SKUs on hand" value={(data.skus_on_hand || 0).toLocaleString()} sub="active inventory" />
        <Tile label="Refills pending" value={data.refills_pending || 0} accent={data.refills_pending > 0 ? "#fbbf24" : undefined} sub="awaiting fill" />
        <Tile label="Population adherence" value={`${(data.adherence_pdc_pct || 0).toFixed(1)}%`} sub="PDC ≥ 0.8 threshold" />
        <Tile label="CSM alerts" value={data.csm_alerts_open || 0} accent={data.csm_alerts_open > 0 ? "#ef4444" : undefined} sub="controlled substance" />
        <Tile label="Nutrition Rxs" value={(data.nutrition_rxs_active || 0).toLocaleString()} sub="active prescriptions" />
      </div>
    </div>
  );
}
window.PharmacySummary = PharmacySummary;