// Dashboard — exception-first operations overview wired to AppState.

const TIME_RANGE_KPIS = {
  today: KPIS,
  week: [
    { label: "Shifts filled · WTD",  value: "986",  unit: "/ 1,012", delta: "+18 vs plan",  tone: "up",  bar: 0.974, note: "97.4% coverage" },
    { label: "Compliance rate",      value: "97.3", unit: "%",       delta: "−0.2 pts wk",  tone: "down",bar: 0.973, note: "2 blockers · 9 expiring" },
    { label: "Agency spend (WTD)",   value: "$18.4",unit: "k",       delta: "−24% vs plan", tone: "up",  bar: 0.42,  note: "Below target $24k" },
    { label: "Care minutes avg",     value: "212",  unit: "min/res", delta: "Target 200",   tone: "up",  bar: 1.06,  note: "6% above target" },
  ],
  payperiod: [
    { label: "Hours paid · period",  value: "21.4",  unit: "k hrs",   delta: "+320h vs last", tone: "up",  bar: 0.92, note: "143 payees" },
    { label: "Compliance rate",      value: "96.9",  unit: "%",       delta: "−0.7 pts",      tone: "down",bar: 0.969, note: "1 block · 14 expiring" },
    { label: "Agency spend · period",value: "$37.2", unit: "k",       delta: "−19% vs plan",  tone: "up",  bar: 0.48, note: "Below target $46k" },
    { label: "Overtime ratio",       value: "4.1",   unit: "%",       delta: "Target <5%",    tone: "up",  bar: 0.82, note: "Within tolerance" },
  ],
};

function Dashboard() {
  const { state } = useApp();
  if (state.dashboardPersona === "executive") return <DashboardExecutive />;
  return <DashboardCoordinator />;
}

function PersonaToggle() {
  const { state, dispatch } = useApp();
  return (
    <div className="seg" style={{ background: "var(--paper)", border: "1px solid var(--line-2)" }}>
      <button data-active={state.dashboardPersona === "coordinator"} onClick={() => dispatch({ type: "SET_DASHBOARD_PERSONA", persona: "coordinator" })}>Coordinator</button>
      <button data-active={state.dashboardPersona === "executive"}   onClick={() => dispatch({ type: "SET_DASHBOARD_PERSONA", persona: "executive" })}>Executive</button>
    </div>
  );
}

function DashboardCoordinator() {
  const { state, dispatch } = useApp();
  const filter = state.filters.dashboardException;
  const range = state.filters.dashboardTimeRange;

  // Demand bars — tweak by range for visual differentiation.
  const demand = range === "today"
    ? [3,3,3,3,3,3,3,3,3,3,3,3, 6,8,10,12,14,16,18,20,22,20,18,16, 14,12,10,8,10,12,14,16,18,20,18,16, 14,12,10,8,6,5,4,4,3,3,3,3]
    : range === "week"
    ? [4,4,4,3,3,3,4,4,5,6,8,10, 12,14,16,18,19,20,21,22,22,21,20,18, 16,14,12,10,11,13,15,17,19,20,19,17, 15,13,11,9,7,5,4,4,4,4,4,4]
    : [5,5,4,4,4,4,5,5,6,7,9,11, 13,15,17,19,20,21,22,23,23,22,21,19, 17,15,13,11,12,14,16,18,20,21,20,18, 16,14,12,10,8,6,5,5,5,5,5,5];
  const kpis = TIME_RANGE_KPIS[range];

  // Filter exceptions.
  const normaliseKind = (k) => (k || "").toLowerCase();
  const visible = state.exceptions.filter(ex => {
    if (filter === "all") return true;
    return normaliseKind(ex.kind) === filter;
  });

  const filterCounts = ["compliance","roster","payroll","hr"].map(k => ({
    key: k,
    count: state.exceptions.filter(e => normaliseKind(e.kind) === k).length,
  }));

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="eyebrow">{range === "today" ? "Today · Fri 17 Apr 2026" : range === "week" ? "Week 16 · 13–19 Apr 2026" : "Pay period · 04–17 Apr 2026"}</div>
          <h1 className="page-title" style={{ marginTop: 4 }}>Good morning, Jess.</h1>
          <div className="page-sub">
            NuCo handled <strong>23 actions overnight</strong>. <strong>{state.exceptions.filter(e => e.tone !== "ok").length} things</strong> need your attention now.
          </div>
        </div>
        <div className="hstack" style={{ flexWrap: "wrap" }}>
          <PersonaToggle />
          <div className="page-meta">
            <span className="live-dot" /> Live · synced 4s ago
          </div>
          <div className="seg">
            {["today","week","payperiod"].map(r => (
              <button key={r} data-active={range === r} onClick={() => dispatch({ type: "SET_FILTER", key: "dashboardTimeRange", value: r })}>
                {r === "today" ? "Today" : r === "week" ? "Week" : "Pay period"}
              </button>
            ))}
          </div>
          <button className="btn ghost" onClick={() => dispatch({ type: "PUSH_TOAST", toast: { tone: "ok", text: "Handover pack emailed to incoming coordinator" } })}><Icon name="download" size={13} /> Shift handover</button>
        </div>
      </div>

      {/* KPI row — auto-fit so it never starves the copilot layout. */}
      <div className="grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))", marginBottom: 20 }}>
        {kpis.map((k, i) => (
          <div className="kpi" key={i}>
            <div className="kpi-label">
              {k.label}
              {i === 2 && <Badge tone="ok" dot>on track</Badge>}
              {i === 1 && <Badge tone="warn" dot>{state.expiries.filter(e => e.tone === "block").length} blockers</Badge>}
            </div>
            <div className="kpi-value">{k.value}<span className="unit">{k.unit}</span></div>
            <div className="kpi-delta">
              <span className={k.tone === "up" ? "tone-up" : "tone-down"}>
                {k.tone === "up" ? "▲" : "▼"} {k.delta}
              </span>
              <span className="dot-sep">·</span>
              <span>{k.note}</span>
            </div>
            <div className="kpi-bar"><i style={{ width: `${Math.min(100, k.bar*100)}%`, background: i===1 ? "var(--amber)" : i===3 ? "var(--sage)" : "var(--ink)" }} /></div>
          </div>
        ))}
      </div>

      {/* Main grid */}
      <div className="grid" style={{ gridTemplateColumns: "minmax(0, 1.6fr) minmax(0, 1fr)", gap: 20 }}>
        {/* LEFT column */}
        <div className="vstack" style={{ gap: 20 }}>
          <div className="card">
            <div className="card-head">
              <div>
                <div className="card-title">Needs attention</div>
                <div className="card-sub">Ranked by operational impact. NuCo has already acted on 23 items overnight.</div>
              </div>
              <div className="hstack">
                <div className="kbar">
                  <button className="chip" data-active={filter === "all"} onClick={() => dispatch({ type: "SET_FILTER", key: "dashboardException", value: "all" })}>All <span className="count">{state.exceptions.length}</span></button>
                  {filterCounts.map(f => (
                    <button key={f.key} className="chip" data-active={filter === f.key} onClick={() => dispatch({ type: "SET_FILTER", key: "dashboardException", value: f.key })}>
                      {f.key[0].toUpperCase() + f.key.slice(1)} <span className="count">{f.count}</span>
                    </button>
                  ))}
                </div>
              </div>
            </div>
            <div className="ex-list">
              {visible.length === 0 ? (
                <div style={{ padding: 28, textAlign: "center" }}>
                  <div className="serif" style={{ fontSize: 18, marginBottom: 4 }}>Nothing to do here.</div>
                  <div className="sub">No open exceptions in this category — NuCo is on top of it.</div>
                </div>
              ) : visible.map(ex => (
                <ExceptionRow key={ex.id} ex={ex} />
              ))}
            </div>
          </div>

          <div className="card">
            <div className="card-head">
              <div>
                <div className="card-title">Demand vs coverage · {range === "today" ? "Today" : range === "week" ? "This week" : "Pay period"}</div>
                <div className="card-sub">All wards · 15-min slots · staffing ratio-aware</div>
              </div>
              <div className="hstack">
                <AIChip tier="L3" confidence={0.92} onClick={() => dispatch({ type: "PUSH_TOAST", toast: { tone: "ai", text: "Added PCA block 15:00–19:00 to Wattle · draft pending approval" } })}>NuCo: +1 PCA 15:00–19:00 would smooth Wattle peak</AIChip>
              </div>
            </div>
            <div className="card-body">
              <DemandChart demand={demand} />
            </div>
          </div>
        </div>

        {/* RIGHT column */}
        <div className="vstack" style={{ gap: 20 }}>
          <div className="card">
            <div className="card-head">
              <div>
                <div className="card-title">Connected state</div>
                <div className="card-sub">A change here ripples across modules.</div>
              </div>
              <Badge tone="ai">Live graph</Badge>
            </div>
            <ConnectedState />
          </div>

          <div className="card">
            <div className="card-head">
              <div>
                <div className="card-title">Ward coverage</div>
                <div className="card-sub">Against mandated ratios</div>
              </div>
              <button className="btn ghost" onClick={() => dispatch({ type: "SET_PAGE", page: "roster" })}><Icon name="arrowRight" size={13} /></button>
            </div>
            <div className="card-body vstack" style={{ gap: 10 }}>
              {[
                { name: "Banksia",     filled: 12, target: 13, ratio: "1:7",  tone: "warn" },
                { name: "Wattle",      filled: 10, target: 10, ratio: "1:8",  tone: "ok" },
                { name: "Grevillea",   filled: 8,  target: 9,  ratio: "1:10", tone: "warn" },
                { name: "Bottlebrush", filled: 11, target: 11, ratio: "1:9",  tone: "ok" },
              ].map(w => (
                <div key={w.name} className="hstack" style={{ justifyContent: "space-between", gap: 12 }}>
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontWeight: 500, fontSize: 12.5 }}>{w.name}</div>
                    <div className="sub mono">ratio {w.ratio} · {w.filled}/{w.target} filled</div>
                  </div>
                  <div style={{ flex: "1 1 80px", maxWidth: 140, height: 8, background: "var(--paper-2)", borderRadius: 4, overflow: "hidden" }}>
                    <div style={{
                      width: `${(w.filled/w.target)*100}%`, height: "100%",
                      background: w.tone === "warn" ? "var(--amber)" : "var(--sage)"
                    }} />
                  </div>
                  <Badge tone={w.tone} dot>{w.tone === "ok" ? "staffed" : "short 1"}</Badge>
                </div>
              ))}
            </div>
          </div>

          <div className="card">
            <div className="card-head">
              <div>
                <div className="card-title">Labour cost · this week</div>
                <div className="card-sub">Budget $268k · projected $249k</div>
              </div>
              <Badge tone="ok" dot>−7.0% vs budget</Badge>
            </div>
            <div className="card-body">
              <div className="hstack" style={{ justifyContent: "space-between", alignItems: "flex-end", gap: 12, flexWrap: "wrap" }}>
                <div>
                  <div className="serif" style={{ fontSize: 26, fontWeight: 500, letterSpacing: "-0.02em" }}>$249,140</div>
                  <div className="sub mono">Internal $230.7k · Agency $18.4k</div>
                </div>
                <div style={{ flex: "1 1 120px", maxWidth: 200 }}>
                  <Sparkline points={[220,225,231,240,245,252,249]} fill="var(--sage)" color="var(--sage-ink)" />
                </div>
              </div>
              <div className="divider" />
              <div className="vstack" style={{ gap: 6 }}>
                <div className="hstack" style={{ justifyContent: "space-between" }}>
                  <span className="sub">Agency dependency</span><span className="mono" style={{ fontSize: 11.5 }}>7.4%</span>
                </div>
                <div style={{ height: 6, background: "var(--paper-2)", borderRadius: 3, overflow: "hidden" }}>
                  <div style={{ width: "7.4%", height: "100%", background: "var(--amber)" }} />
                </div>
                <div className="sub" style={{ fontSize: 11 }}>Down from 11.2% four weeks ago. NuCo offered 14 internal fills this week (11 accepted).</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function ExceptionRow({ ex }) {
  const { dispatch } = useApp();
  const [leaving, setLeaving] = React.useState(false);
  const icon = { block: "alert", warn: "alert", ok: "check", ai: "sparkle" }[ex.tone] || "alert";

  const kindToPage = {
    "Compliance": "compliance",
    "Roster": "roster",
    "Payroll": "payroll",
    "HR": "people",
    "Resolved": null,
  };
  const target = kindToPage[ex.kind];

  function dismiss(e) {
    e.stopPropagation();
    setLeaving(true);
    setTimeout(() => dispatch({ type: "DISMISS_EXCEPTION", id: ex.id }), 260);
  }
  function primary(e) {
    e.stopPropagation();
    if (ex.kind === "Compliance") {
      dispatch({ type: "SET_PAGE", page: "compliance" });
    } else if (ex.kind === "Roster") {
      dispatch({ type: "SET_PAGE", page: "roster" });
    } else if (ex.kind === "Payroll") {
      dispatch({ type: "SET_PAGE", page: "payroll" });
    } else if (ex.kind === "HR") {
      dispatch({ type: "SET_PAGE", page: "people" });
    } else {
      dispatch({ type: "RESOLVE_EXCEPTION", id: ex.id, body: ex.body });
      dispatch({ type: "PUSH_TOAST", toast: { tone: "ok", text: "Marked reviewed" } });
    }
  }

  return (
    <div className="ex-row" data-leaving={leaving} onClick={() => { if (target) dispatch({ type: "SET_PAGE", page: target }); }}>
      <div className="ex-ico" data-tone={ex.tone}><Icon name={icon} size={13} /></div>
      <div>
        <div className="hstack" style={{ gap: 8, flexWrap: "wrap" }}>
          <div className="ex-title">{ex.title}</div>
          <Badge tone={ex.tone === "ok" ? "ok" : ex.tone === "block" ? "block" : "warn"} dot>{ex.kind}</Badge>
          {ex.ai && <Badge tone="ai" dot>NuCo draft</Badge>}
        </div>
        <div className="ex-body">{ex.body}</div>
        <div className="ex-meta">
          <span>{ex.meta}</span>
          <Chain steps={ex.chain} />
        </div>
      </div>
      <div className="ex-actions">
        <button className="btn ghost" onClick={dismiss} aria-label="Dismiss"><Icon name="x" size={12} /></button>
        <button className={"btn " + (ex.tone === "block" ? "primary" : ex.tone === "ok" ? "" : "sage")} onClick={primary}>
          {ex.action}
          <Icon name="arrowRight" size={12} />
        </button>
      </div>
    </div>
  );
}

function DemandChart({ demand }) {
  const max = Math.max(...demand) + 2;
  const W = 760, H = 160;
  const step = W / demand.length;
  const staffing = demand.map((d, i) => d + (i === 18 ? -2 : i === 32 ? -1 : i === 40 ? 2 : 0));
  const staffPath = staffing.map((v, i) =>
    `${i===0?'M':'L'}${(i*step + step/2).toFixed(1)},${(H - (v/max)*H*0.9).toFixed(1)}`
  ).join(" ");

  return (
    <div>
      <svg viewBox={`0 0 ${W} ${H + 20}`} width="100%" style={{ display: "block" }} preserveAspectRatio="xMidYMid meet">
        {[0.25, 0.5, 0.75].map(p => (
          <line key={p} x1="0" x2={W} y1={H - H*p*0.9} y2={H - H*p*0.9} stroke="var(--line)" strokeDasharray="2 3" />
        ))}
        {demand.map((d, i) => {
          const barH = (d/max) * H * 0.9;
          const isPeak = i >= 26 && i <= 32;
          return (
            <rect key={i} x={i*step + 1} y={H - barH} width={Math.max(0, step - 2)} height={barH}
              fill={isPeak ? "var(--amber-wash)" : "var(--paper-2)"}
              stroke={isPeak ? "var(--amber)" : "transparent"} />
          );
        })}
        <path d={staffPath} stroke="var(--ink)" strokeWidth="1.75" fill="none" />
        {staffing.map((v, i) => (
          <circle key={i} cx={i*step + step/2} cy={H - (v/max)*H*0.9} r="1.5" fill="var(--ink)" />
        ))}
        <circle cx={(32*step + step/2)} cy={H - (staffing[32]/max)*H*0.9} r="5" fill="none" stroke="var(--amber)" strokeWidth="1.5" />
        <text x={(32*step + step/2) + 8} y={H - (staffing[32]/max)*H*0.9 - 4} fontSize="10" fill="var(--amber-ink)" fontFamily="JetBrains Mono">gap 15:30–16:00</text>
        {["00","06","12","18","24"].map((t, i) => (
          <text key={t} x={(i / 4) * W} y={H + 14} fontSize="10" fill="var(--ink-4)" fontFamily="JetBrains Mono" textAnchor={i === 0 ? "start" : i === 4 ? "end" : "middle"}>{t}:00</text>
        ))}
      </svg>
      <div className="hstack" style={{ gap: 16, marginTop: 6, fontSize: 11, flexWrap: "wrap" }}>
        <span className="hstack" style={{ gap: 6 }}><span style={{ width: 10, height: 10, background: "var(--paper-2)", borderRadius: 2, border: "1px solid var(--line)" }} /> Care demand</span>
        <span className="hstack" style={{ gap: 6 }}><span style={{ width: 16, height: 2, background: "var(--ink)" }} /> Staffing</span>
        <span className="hstack" style={{ gap: 6 }}><span style={{ width: 10, height: 10, background: "var(--amber-wash)", border: "1px solid var(--amber)" }} /> Peak hours</span>
      </div>
    </div>
  );
}

function ConnectedState() {
  const { state, dispatch } = useApp();
  // Render lives only when there is a block to illustrate — otherwise show a clean state.
  const hasBlock = state.staff.some(s => s.status === "block");
  const blocked = state.staff.find(s => s.status === "block");

  if (!hasBlock) {
    return (
      <div className="connection-canvas">
        <div className="sub" style={{ marginBottom: 12 }}>
          <strong style={{ color: "var(--ink)" }}>All clear.</strong> No compliance blocks rippling across modules right now.
        </div>
        <div style={{ padding: 24, textAlign: "center", background: "var(--sage-wash)", borderRadius: 8, color: "var(--sage-ink)", fontSize: 13, fontWeight: 500 }}>
          Nothing to resolve · last block cleared via AHPRA re-verification.
        </div>
      </div>
    );
  }

  const effects = [
    { label: "Roster",  value: "3 shifts held",  page: "roster" },
    { label: "Payroll", value: "Pay gate",        page: "payroll" },
    { label: "Notify",  value: "Mgr + employee",  page: "audit" },
  ];

  return (
    <div className="connection-canvas">
      <div className="sub" style={{ marginBottom: 12 }}>
        <strong style={{ color: "var(--ink)" }}>One credential expired.</strong> See what it touched overnight.
      </div>
      <div className="conn-tree">
        <div className="conn-source">
          <div className="conn-node" data-tone="terra">
            <div className="conn-node-label">Credential</div>
            <div className="conn-node-value">AHPRA · expired</div>
            <div className="mono" style={{ fontSize: 10, opacity: 0.7 }}>{blocked.name} · {blocked.id}</div>
          </div>
        </div>
        <div className="conn-edge"><Icon name="arrowRight" size={14} /></div>
        <div className="conn-targets">
          {effects.map(e => (
            <button key={e.label} className="conn-node" style={{ textAlign: "left", cursor: "pointer" }} onClick={() => dispatch({ type: "SET_PAGE", page: e.page })}>
              <div className="conn-node-label">{e.label}</div>
              <div className="conn-node-value">{e.value}</div>
            </button>
          ))}
        </div>
      </div>
      <div className="hstack" style={{ gap: 6, marginTop: 14 }}>
        <button className="btn primary" onClick={() => dispatch({ type: "SET_PAGE", page: "compliance" })}>Resolve now<Icon name="arrowRight" size={12} /></button>
        <button className="btn" onClick={() => dispatch({ type: "SET_PAGE", page: "audit" })}>View audit trail</button>
      </div>
    </div>
  );
}

function DashboardExecutive() {
  const { state, dispatch } = useApp();
  const aggregate = React.useMemo(() => {
    const f = state.facilities;
    const staff = f.reduce((a, x) => a + x.staff, 0);
    const beds  = f.reduce((a, x) => a + x.beds, 0);
    const cost  = f.reduce((a, x) => a + x.cost, 0);
    const budget= f.reduce((a, x) => a + x.budget, 0);
    const compliance = f.reduce((a, x) => a + x.compliance * x.staff, 0) / staff;
    const agency = f.reduce((a, x) => a + x.agencyPct * x.staff, 0) / staff;
    const careMin = f.reduce((a, x) => a + x.careMin * x.beds, 0) / beds;
    const sitesAtRisk = f.filter(x => x.risk === "warn").length;
    return { staff, beds, cost, budget, compliance, agency, careMin, sitesAtRisk };
  }, [state.facilities]);

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="eyebrow">Executive · workforce roll-up · Fri 17 Apr 2026</div>
          <h1 className="page-title" style={{ marginTop: 4 }}>{state.facilities.length} facilities · {aggregate.staff} staff · {aggregate.beds} beds</h1>
          <div className="page-sub">{aggregate.sitesAtRisk} site{aggregate.sitesAtRisk === 1 ? "" : "s"} need attention · labour ${(aggregate.cost/1000).toFixed(1)}k of ${(aggregate.budget/1000).toFixed(1)}k budget · agency dependency {Math.round(aggregate.agency*100)}%</div>
        </div>
        <div className="hstack" style={{ flexWrap: "wrap" }}>
          <PersonaToggle />
          <div className="page-meta">
            <span className="live-dot" /> Live
          </div>
          <button className="btn" onClick={() => dispatch({ type: "PUSH_TOAST", toast: { tone: "ok", text: "Executive pack prepared · PDF queued" } })}><Icon name="download" size={13} /> Board pack</button>
        </div>
      </div>

      {/* Top exec KPIs */}
      <div className="grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", marginBottom: 20 }}>
        <div className="kpi">
          <div className="kpi-label">Workforce risk · live</div>
          <div className="kpi-value">{aggregate.sitesAtRisk}<span className="unit">/ {state.facilities.length} sites</span></div>
          <div className="kpi-delta"><span className={aggregate.sitesAtRisk > 0 ? "tone-down" : "tone-up"}>{aggregate.sitesAtRisk > 0 ? "▼" : "▲"} {aggregate.sitesAtRisk > 0 ? "attention needed" : "all clear"}</span></div>
          <div className="kpi-bar"><i style={{ width: `${(aggregate.sitesAtRisk / state.facilities.length)*100}%`, background: aggregate.sitesAtRisk > 0 ? "var(--amber)" : "var(--sage)" }} /></div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Compliance · weighted avg</div>
          <div className="kpi-value">{(aggregate.compliance*100).toFixed(1)}<span className="unit">%</span></div>
          <div className="kpi-delta"><span className="tone-up">▲ target 95%</span></div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Labour vs budget</div>
          <div className="kpi-value">${((aggregate.budget - aggregate.cost)/1000).toFixed(1)}<span className="unit">k saved</span></div>
          <div className="kpi-delta"><span className="tone-up">▲ {Math.round((1 - aggregate.cost/aggregate.budget) * 100)}% under</span></div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Agency dependency</div>
          <div className="kpi-value">{(aggregate.agency*100).toFixed(1)}<span className="unit">%</span></div>
          <div className="kpi-delta"><span className="tone-up">▼ target &lt;8%</span></div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Care minutes · avg</div>
          <div className="kpi-value">{Math.round(aggregate.careMin)}<span className="unit">min/res</span></div>
          <div className="kpi-delta">Target 200 · above target</div>
        </div>
      </div>

      {/* Facility roll-up */}
      <div className="card" style={{ marginBottom: 20 }}>
        <div className="card-head">
          <div>
            <div className="card-title">Facilities · live status</div>
            <div className="card-sub">Click a site to drill into its operations</div>
          </div>
          <Badge tone="ai" dot>cross-site connected</Badge>
        </div>
        <div className="card-body grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: 14 }}>
          {state.facilities.map(f => (
            <button key={f.id} className="card" style={{ textAlign: "left", padding: 14, background: "var(--bone)", borderColor: f.risk === "warn" ? "var(--amber)" : "var(--line)", cursor: "pointer" }}
              onClick={() => { dispatch({ type: "SET_FACILITY", facilityId: f.id }); dispatch({ type: "SET_DASHBOARD_PERSONA", persona: "coordinator" }); }}>
              <div className="hstack" style={{ justifyContent: "space-between", marginBottom: 8 }}>
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontWeight: 600, fontSize: 13.5 }}>{f.name}</div>
                  <div className="sub" style={{ fontSize: 11 }}>{f.suburb} · {f.beds} beds · {f.staff} staff</div>
                </div>
                <Badge tone={f.risk === "warn" ? "warn" : "ok"} dot>{f.risk === "warn" ? "watch" : "clear"}</Badge>
              </div>
              <div className="vstack" style={{ gap: 6, fontSize: 11.5 }}>
                <div className="hstack" style={{ justifyContent: "space-between" }}>
                  <span className="sub">Compliance</span>
                  <span className="mono" style={{ fontWeight: 500 }}>{(f.compliance*100).toFixed(1)}%</span>
                </div>
                <div style={{ height: 4, background: "var(--paper-2)", borderRadius: 2 }}>
                  <div style={{ width: `${f.compliance*100}%`, height: "100%", background: "var(--sage)", borderRadius: 2 }} />
                </div>
                <div className="hstack" style={{ justifyContent: "space-between" }}>
                  <span className="sub">Agency</span>
                  <span className="mono" style={{ fontWeight: 500 }}>{(f.agencyPct*100).toFixed(1)}%</span>
                </div>
                <div style={{ height: 4, background: "var(--paper-2)", borderRadius: 2 }}>
                  <div style={{ width: `${Math.min(100, f.agencyPct*100*5)}%`, height: "100%", background: f.agencyPct > 0.08 ? "var(--amber)" : "var(--sage)", borderRadius: 2 }} />
                </div>
                <div className="hstack" style={{ justifyContent: "space-between", marginTop: 4 }}>
                  <span className="sub">Labour vs budget</span>
                  <span className="mono" style={{ color: f.cost > f.budget ? "var(--terra-ink)" : "var(--sage-ink)", fontWeight: 500 }}>${((f.budget - f.cost)/1000).toFixed(1)}k under</span>
                </div>
                <div className="hstack" style={{ justifyContent: "space-between" }}>
                  <span className="sub">Care minutes</span>
                  <span className="mono">{f.careMin} min/res</span>
                </div>
              </div>
              <div className="sub" style={{ fontSize: 11, marginTop: 8, paddingTop: 8, borderTop: "1px dashed var(--line)", color: f.risk === "warn" ? "var(--amber-ink)" : "var(--ink-3)" }}>{f.riskReason}</div>
            </button>
          ))}
        </div>
      </div>

      {/* Service delivery + AI insight row */}
      <div className="grid" style={{ gridTemplateColumns: "minmax(0, 1.4fr) minmax(0, 1fr)", gap: 20 }}>
        <div className="card">
          <div className="card-head">
            <div>
              <div className="card-title">Cost efficiency · 30-day trend</div>
              <div className="card-sub">Agency vs internal spend per site</div>
            </div>
          </div>
          <div className="card-body vstack" style={{ gap: 12 }}>
            {state.facilities.map(f => (
              <div key={f.id}>
                <div className="hstack" style={{ justifyContent: "space-between", marginBottom: 4, fontSize: 12 }}>
                  <span>{f.name}</span>
                  <span className="mono sub">${((1 - f.agencyPct) * f.cost / 1000).toFixed(1)}k internal · ${(f.agencyPct * f.cost / 1000).toFixed(1)}k agency</span>
                </div>
                <div style={{ display: "flex", height: 10, borderRadius: 3, overflow: "hidden", background: "var(--paper-2)" }}>
                  <div style={{ flex: 1 - f.agencyPct, background: "var(--ink)" }} />
                  <div style={{ flex: f.agencyPct, background: "var(--amber)" }} />
                </div>
              </div>
            ))}
            <div className="hstack" style={{ gap: 14, marginTop: 6, fontSize: 11 }}>
              <span className="hstack" style={{ gap: 6 }}><span style={{ width: 10, height: 10, background: "var(--ink)" }} /> Internal</span>
              <span className="hstack" style={{ gap: 6 }}><span style={{ width: 10, height: 10, background: "var(--amber)" }} /> Agency</span>
            </div>
          </div>
        </div>

        <div className="card" style={{ background: "var(--sage-wash)", borderColor: "var(--sage)" }}>
          <div className="card-head" style={{ alignItems: "flex-start" }}>
            <div>
              <div className="card-title" style={{ color: "var(--sage-ink)" }}>NuCo exec insight</div>
              <div className="sub" style={{ color: "var(--sage-ink)" }}>Cross-site intelligence</div>
            </div>
            <Badge tone="ai">live</Badge>
          </div>
          <div className="card-body" style={{ color: "var(--sage-ink)" }}>
            <div style={{ fontSize: 13, marginBottom: 10 }}>
              <strong>Kookaburra Place</strong> shows a 9% agency dependency against a network average of 5%. Internal RN coverage is available via <strong>Wattlegrove</strong> for 2 nights/week with a minor travel cost.
            </div>
            <div className="kbar" style={{ marginBottom: 10 }}>
              <span className="chip" style={{ background: "var(--paper)" }}>Projected saving $4,800/wk</span>
              <span className="chip" style={{ background: "var(--paper)" }}>0 compliance risk</span>
              <span className="chip" style={{ background: "var(--paper)" }}>Network-level swap</span>
            </div>
            <div className="hstack" style={{ gap: 6 }}>
              <button className="btn sage" onClick={() => dispatch({ type: "PUSH_TOAST", toast: { tone: "ai", text: "Plan queued · cross-site coverage proposal" } })}>Draft plan</button>
              <button className="btn" onClick={() => dispatch({ type: "SET_PAGE", page: "roster" })}>Open roster</button>
            </div>
          </div>
        </div>
      </div>

      {/* Regulatory posture */}
      <div className="card" style={{ marginTop: 20 }}>
        <div className="card-head">
          <div>
            <div className="card-title">Regulatory posture · live</div>
            <div className="card-sub">SIRS · AHPRA · Aged Care Quality Standards · AN-ACC</div>
          </div>
          <button className="btn" onClick={() => dispatch({ type: "SET_PAGE", page: "compliance" })}>Open compliance<Icon name="arrowRight" size={12} /></button>
        </div>
        <div className="card-body vstack" style={{ gap: 8, fontSize: 12 }}>
          {state.regulatoryBundles.map((b, i) => {
            const submitted = state.submittedBundles.includes(b.id);
            return (
              <div key={b.id} className="hstack" style={{ gap: 10, padding: 10, background: "var(--bone)", borderRadius: 6, border: "1px solid var(--line)" }}>
                <span style={{ width: 22, height: 22, borderRadius: 4, background: submitted ? "var(--sage-wash)" : b.readiness < 1 ? "var(--amber-wash)" : "var(--sage-wash)", color: submitted ? "var(--sage-ink)" : b.readiness < 1 ? "var(--amber-ink)" : "var(--sage-ink)", display: "grid", placeItems: "center" }}>
                  <Icon name={submitted ? "check" : b.readiness < 1 ? "alert" : "shield"} size={12} />
                </span>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontWeight: 500 }}>{b.title}</div>
                  <div className="sub" style={{ fontSize: 11 }}>Due {b.due} · readiness {Math.round(b.readiness*100)}%</div>
                </div>
                {submitted ? <Badge tone="ok" dot>Lodged</Badge> : <button className="btn sage" style={{ padding: "3px 8px", fontSize: 11 }} onClick={() => dispatch({ type: "OPEN_MODAL", modal: { kind: "submit-bundle", bundleId: b.id } })}>Submit now</button>}
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Dashboard });