/* MedBridge — Overview scorecard (role-aware) */

function fieldGapStats(transfers) {
  const stats = window.MB.FIELDS.map((f) => {
    const absent = transfers.filter((t) => !t.fields[f.key]).length;
    return { ...f, absent, pct: Math.round((absent / transfers.length) * 100) };
  });
  return stats.sort((a, b) => b.absent - a.absent);
}

const ROLE_META = {
  quality: { hero: "Halifax Infirmary (QEII)", heroScore: 91, scope: "Your facility", title: "Quality & Safety Overview" },
  cmio: { hero: "Nova Scotia Health", heroScore: 84, scope: "Authority-wide", title: "Clinical Informatics Overview" },
  ministry: { hero: "Atlantic Canada", heroScore: 81, scope: "Provincial aggregate", title: "Ministry Performance Overview" },
};

function Overview({ role, juris, go, openTransfer }) {
  const { transfers, jurisdictions, attribution, roi } = window.MB;
  const meta = ROLE_META[role];
  const gaps = fieldGapStats(transfers);
  const openAlerts = transfers.filter((t) => t.status !== "Completed" && t.missCrit.length);
  const recent = [...transfers].sort((a, b) => b.ts - a.ts).slice(0, 5);

  const kpis = {
    quality: [
      { label: "Facility completeness", icon: "activity", value: 91, unit: "%", delta: "6 pts", deltaDir: "up", sub: "vs last quarter", spark: [85, 87, 88, 90, 91], sparkColor: "var(--mb-good)" },
      { label: "Open critical gaps", icon: "alert", value: openAlerts.length, sub: "awaiting departure", accent: "var(--mb-crit)" },
      { label: "Transfers scored today", icon: "refresh", value: 38, sub: "12 inbound · 26 outbound" },
      { label: "Gaps caught pre-departure", icon: "shield", value: 14, sub: "this week", accent: "var(--mb-good)" },
    ],
    cmio: [
      { label: "Authority avg completeness", icon: "activity", value: 84, unit: "%", delta: "3 pts", deltaDir: "up", sub: "vs provincial 81%", spark: [76, 78, 79, 81, 82, 84], sparkColor: "var(--mb-good)" },
      { label: "Complication correlation", icon: "chart", value: "2.3", unit: "×", sub: "missing critical field", accent: "var(--mb-crit)" },
      { label: "Hospitals connected", icon: "shield", value: 38, unit: "/45", sub: "84% of NSHA sites" },
      { label: "Transfers scored (Q1)", icon: "send", value: "9.8", unit: "k", sub: "Nova Scotia" },
    ],
    ministry: [
      { label: "Atlantic avg completeness", icon: "activity", value: 81, unit: "%", delta: "4 pts", deltaDir: "up", sub: "NS · NB · PEI", spark: [74, 76, 78, 79, 80, 81], sparkColor: "var(--mb-good)" },
      { label: "Est. annual savings", icon: "chart", value: "$21.4", unit: "M", sub: "Nova Scotia", accent: "var(--mb-good)" },
      { label: "Complications avoided", icon: "shield", value: "1,970", sub: "projected / yr" },
      { label: "Return on investment", icon: "arrowUp", value: "4.2", unit: "×", sub: "per $1 invested", accent: "var(--mb-good)" },
    ],
  }[role];

  return (
    <div className="content"><div className="pad" style={{ maxWidth: 1480, margin: "0 auto" }}>
      <div className="page-head">
        <div>
          <h1>{meta.title}</h1>
          <div className="ph-sub">{meta.scope} · {juris.name} · updated {window.MB.util.ago(window.MB.transfers[0].ts)}</div>
        </div>
        <div className="row gap8">
          <button className="btn btn-ghost"><Icon name="print" size={15} />Export report</button>
          <button className="btn btn-primary" onClick={() => go("transfers")}><Icon name="send" size={15} />View transfers</button>
        </div>
      </div>

      {/* hero + kpis */}
      <div style={{ display: "grid", gridTemplateColumns: "320px 1fr", gap: 16, alignItems: "stretch", marginBottom: 16 }}>
        <Card>
          <div className="col" style={{ alignItems: "center", textAlign: "center", gap: 4 }}>
            <Gauge value={meta.heroScore} label="Avg completeness" />
            <div className="fw7" style={{ fontSize: 14, marginTop: 14, whiteSpace: "nowrap" }}>{meta.hero}</div>
            <div className="muted" style={{ fontSize: 12, whiteSpace: "nowrap" }}>across 8 critical handoff fields</div>
            <div className="legend" style={{ justifyContent: "center", marginTop: 10 }}>
              <span><i style={{ background: "var(--mb-good)" }} />≥88 Complete</span>
              <span><i style={{ background: "var(--mb-warn)" }} />62–87 Partial</span>
              <span><i style={{ background: "var(--mb-crit)" }} />&lt;62 Gap</span>
            </div>
          </div>
        </Card>
        <div className="kpi-row" style={{ alignContent: "start" }}>
          {kpis.map((k, i) => <Kpi key={i} {...k} />)}
          <div className="kpi" style={{ gridColumn: "1 / -1", display: "flex", alignItems: "center", gap: 14, background: "var(--primary-light)", borderColor: "var(--primary-mid)" }}>
            <span className="ai-spark" style={{ width: 34, height: 34 }}><Icon name="activity" size={18} /></span>
            <div className="grow">
              <div className="fw7" style={{ fontSize: 13 }}>{attribution.headline}</div>
              <div className="muted" style={{ fontSize: 12 }}>Based on {attribution.sample.toLocaleString()} scored transfers · {attribution.period} · {attribution.confidence}</div>
            </div>
            <button className="btn btn-sm btn-soft" onClick={() => go("attribution")}>Open attribution<Icon name="chevR" size={14} /></button>
          </div>
        </div>
      </div>

      {/* lower grid */}
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, alignItems: "start" }}>
        {/* field gap breakdown */}
        <Card title="Most frequently missing fields" icon="filter"
          action={<span className="muted" style={{ fontSize: 11.5 }}>last {transfers.length} transfers</span>}>
          {gaps.slice(0, 6).map((g) => (
            <BarRow key={g.key} label={g.label} sub={g.critical ? "Critical field · " + g.code : g.code}
              value={g.pct} max={100} suffix="%" color={g.critical ? "var(--mb-crit)" : "var(--mb-warn)"} onClick={() => go("attribution")} />
          ))}
        </Card>

        {/* role-specific right card */}
        {role === "ministry" ? (
          <Card title="Jurisdiction scorecard" icon="grid" bodyClass="flush"
            action={<button className="btn btn-sm btn-soft" onClick={() => go("benchmark")}>Benchmark</button>}>
            <table className="tbl">
              <thead><tr><th>Jurisdiction</th><th>Connected</th><th>Avg score</th><th style={{ textAlign: "right" }}>Complication</th></tr></thead>
              <tbody>
                {jurisdictions.map((j) => (
                  <tr key={j.id}>
                    <td><div className="fw6">{j.name}</div><div className="muted" style={{ fontSize: 11 }}>{j.primaryEmr}</div></td>
                    <td className="mono">{j.connected}/{j.facilities}{!j.live && <span className="badge badge-warn" style={{ marginLeft: 6 }}>onboarding</span>}</td>
                    <td><ScorePill score={j.avgScore} /></td>
                    <td className="mono" style={{ textAlign: "right", color: j.complicationRate > 18 ? "var(--mb-crit)" : "var(--text)" }}>{j.complicationRate}%</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </Card>
        ) : (
          <Card title={role === "quality" ? "Open critical-gap alerts" : "Outbound transfers needing attention"} icon="alert"
            action={<button className="btn btn-sm btn-soft" onClick={() => go("alerts")}>Alert queue</button>}>
            {openAlerts.length === 0 ? <div className="muted" style={{ fontSize: 13 }}>No open critical gaps. </div> : openAlerts.map((t) => (
              <div key={t.id} className="list-row" style={{ paddingLeft: 0, paddingRight: 0 }} onClick={() => openTransfer(t.id)}>
                <AcuityDotMB level={t.acuity} />
                <div className="grow">
                  <div className="row gap8"><span className="fw6" style={{ fontSize: 12.5 }}>{t.from.fac.split(" — ")[0]}</span><Icon name="chevR" size={12} className="muted" /><span className="fw6" style={{ fontSize: 12.5 }}>{t.to.city}</span></div>
                  <div className="muted" style={{ fontSize: 11.5 }}>{t.dxCat} · missing <b style={{ color: "var(--mb-crit)" }}>{t.missCrit.join(", ")}</b></div>
                </div>
                <ScorePill score={t.score} />
              </div>
            ))}
          </Card>
        )}
      </div>

      {/* recent transfers */}
      <Card title="Recent care transitions" icon="send" bodyClass="flush" style={{ marginTop: 16 }}
        action={<button className="btn btn-sm btn-soft" onClick={() => go("transfers")}>View all</button>}>
        <table className="tbl">
          <thead><tr><th>Encounter</th><th>Route</th><th>Diagnosis</th><th>8-field</th><th>Score</th><th>Status</th><th style={{ textAlign: "right" }}>When</th></tr></thead>
          <tbody>
            {recent.map((t) => (
              <tr key={t.id} style={{ cursor: "pointer" }} onClick={() => openTransfer(t.id)}>
                <td className="mono fw6" style={{ fontSize: 12 }}>{t.id}</td>
                <td><RouteBadge route={t.route} /></td>
                <td><div className="fw6" style={{ fontSize: 12.5 }}>{t.dxCat}</div><div className="muted" style={{ fontSize: 11 }}>{t.age} · {t.sex}</div></td>
                <td><FieldStrip fields={t.fields} /></td>
                <td><ScorePill score={t.score} /></td>
                <td>{t.status === "Completed" ? <Badge kind="neutral">Completed</Badge> : <Badge kind="warn" icon="clock">{t.status}</Badge>}</td>
                <td className="muted mono" style={{ textAlign: "right", fontSize: 11.5 }}>{window.MB.util.ago(t.ts)}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </Card>
    </div></div>
  );
}

Object.assign(window, { Overview });