// Payroll — real-time, self-healing · tabs + resolve flow wired through dispatch.

function Payroll() {
  const { state, dispatch } = useApp();
  const tab = state.filters.payrollTab;

  const open = state.payrollOpen.filter(r => r.tone !== "block");
  const held = state.payrollOpen.filter(r => r.tone === "block");
  const auto = state.payrollAuto;
  const rows = tab === "open" ? open : tab === "held" ? held : auto;

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="eyebrow">Payroll</div>
          <h1 className="page-title" style={{ marginTop: 4 }}>Period 2026-04-04 → 2026-04-17</h1>
          <div className="page-sub">
            Closes today at <strong>17:00</strong> · NuCo auto-resolved <strong>{auto.length} exceptions</strong> · {open.length} awaiting you · {held.length} held (compliance)
          </div>
        </div>
        <div className="hstack">
          <button className="btn" onClick={() => dispatch({ type: "PUSH_TOAST", toast: { tone: "ok", text: "STP file exported · ato.gov.au ready" } })}><Icon name="download" size={13} /> Export STP</button>
          <button className="btn primary" onClick={() => dispatch({ type: "OPEN_MODAL", modal: { kind: "payroll-run" } })}>Review & run</button>
        </div>
      </div>

      {/* Top metrics */}
      <div className="grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))", gap: 16, marginBottom: 20 }}>
        <div className="kpi">
          <div className="kpi-label">Gross for period</div>
          <div className="kpi-value">$421,850</div>
          <div className="kpi-delta"><span className="tone-up">▲ +2.4%</span> vs last period · 143 payees</div>
          <div className="kpi-bar"><i style={{ width: "100%" }} /></div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Net</div>
          <div className="kpi-value" style={{ fontSize: 24 }}>$298,410</div>
          <div className="kpi-delta">PAYG $78.9k · Super $48.5k</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Auto-resolved</div>
          <div className="kpi-value" style={{ fontSize: 24 }}>{auto.length}<span className="unit">items</span></div>
          <div className="kpi-delta"><span className="tone-up">▲ +{Math.max(0, auto.length - PAYROLL_AUTO_INITIAL.length)}</span> via NuCo this session</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Needs review</div>
          <div className="kpi-value" style={{ fontSize: 24, color: open.length ? "var(--amber-ink)" : "var(--sage-ink)" }}>{open.length}<span className="unit">items</span></div>
          <div className="kpi-delta">{open.length ? `Est. $${open.reduce((a, r) => a + Math.abs(r.impactCents || 0), 0) / 100} held` : "All caught up"}</div>
        </div>
      </div>

      <div className="grid" style={{ gridTemplateColumns: "minmax(0, 1.6fr) minmax(0, 1fr)", gap: 20 }}>
        <div className="card scroll">
          <div className="card-head">
            <div>
              <div className="card-title">Exceptions</div>
              <div className="card-sub">Items NuCo couldn't resolve automatically</div>
            </div>
            <div className="kbar">
              <button className="chip" data-active={tab === "open"} onClick={() => dispatch({ type: "SET_FILTER", key: "payrollTab", value: "open" })}>Open <span className="count">{open.length}</span></button>
              <button className="chip" data-active={tab === "held"} onClick={() => dispatch({ type: "SET_FILTER", key: "payrollTab", value: "held" })}>Held <span className="count">{held.length}</span></button>
              <button className="chip" data-active={tab === "auto"} onClick={() => dispatch({ type: "SET_FILTER", key: "payrollTab", value: "auto" })}>Auto-resolved <span className="count">{auto.length}</span></button>
            </div>
          </div>
          <div className="table-scroll">
            <table className="table">
              <thead>
                {tab === "auto" ? (
                  <tr><th>Item</th><th style={{ textAlign: "right" }}>Impact</th></tr>
                ) : (
                  <tr><th>Type</th><th>Person</th><th>Detail</th><th>Impact</th><th></th></tr>
                )}
              </thead>
              <tbody>
                {tab === "auto" && rows.map(r => (
                  <tr key={r.id}>
                    <td><span className="hstack" style={{ gap: 8 }}><Icon name="check" size={12} /> {r.text}</span></td>
                    <td className="mono" style={{ textAlign: "right", color: "var(--sage-ink)", fontWeight: 500 }}>{r.note}</td>
                  </tr>
                ))}
                {tab !== "auto" && rows.map(r => {
                  const person = state.staff.find(s => s.id === r.personId);
                  return (
                    <tr key={r.id}>
                      <td><div style={{ fontWeight: 500 }}>{r.type}</div>{r.ai && <div style={{ marginTop: 4 }}><Badge tone="ai" dot>NuCo suggestion</Badge></div>}</td>
                      <td>{person ? <Person name={person.name} meta={person.id} tone={person.tone} /> : <span className="sub">—</span>}</td>
                      <td><div className="sub" style={{ color: "var(--ink-2)" }}>{r.detail}</div></td>
                      <td className="mono" style={{ fontWeight: 500, color: r.tone === "block" ? "var(--terra-ink)" : "var(--ink)" }}>{r.impact}</td>
                      <td>
                        {r.tone === "block" ? (
                          <button className="btn" onClick={() => dispatch({ type: "SET_PAGE", page: "compliance" })}>View block<Icon name="arrowRight" size={12} /></button>
                        ) : (
                          <button className="btn sage" onClick={() => dispatch({ type: "OPEN_MODAL", modal: { kind: "payroll-resolve", row: r } })}>Resolve<Icon name="arrowRight" size={12} /></button>
                        )}
                      </td>
                    </tr>
                  );
                })}
                {rows.length === 0 && (
                  <tr><td colSpan={5} style={{ padding: 28, textAlign: "center" }}><div className="serif" style={{ fontSize: 18, marginBottom: 4 }}>Nothing in this queue.</div><div className="sub">NuCo has it handled.</div></td></tr>
                )}
              </tbody>
            </table>
          </div>
        </div>

        <div className="vstack" style={{ gap: 20 }}>
          <div className="card">
            <div className="card-head">
              <div>
                <div className="card-title">What NuCo resolved for you</div>
                <div className="card-sub">Self-healing payroll · this period</div>
              </div>
            </div>
            <div className="card-body vstack" style={{ gap: 10, fontSize: 12 }}>
              {auto.slice(0, 6).map((a, i) => (
                <div key={a.id} className="hstack" style={{ justifyContent: "space-between", paddingBottom: 6, borderBottom: i < Math.min(5, auto.length - 1) ? "1px dashed var(--line)" : "none" }}>
                  <span><Icon name="check" size={12} /> {a.text}</span>
                  <span className="mono" style={{ color: "var(--sage-ink)", fontWeight: 500 }}>{a.note}</span>
                </div>
              ))}
            </div>
          </div>

          <div className="card">
            <div className="card-head">
              <div>
                <div className="card-title">Breakdown</div>
                <div className="card-sub">By cost centre</div>
              </div>
            </div>
            <div className="card-body vstack" style={{ gap: 10 }}>
              {[
                { ward: "Banksia",     gross: 118200, pct: 0.28 },
                { ward: "Wattle",      gross: 102400, pct: 0.24 },
                { ward: "Grevillea",   gross:  96800, pct: 0.23 },
                { ward: "Bottlebrush", gross:  88700, pct: 0.21 },
                { ward: "Services",    gross:  15750, pct: 0.04 },
              ].map(w => (
                <div key={w.ward}>
                  <div className="hstack" style={{ justifyContent: "space-between", fontSize: 12 }}>
                    <span>{w.ward}</span>
                    <span className="mono">${w.gross.toLocaleString()}</span>
                  </div>
                  <div style={{ height: 4, background: "var(--paper-2)", borderRadius: 2, marginTop: 4 }}>
                    <div style={{ width: `${w.pct*100}%`, height: "100%", background: "var(--ink)" }} />
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className="card">
            <div className="card-head">
              <div>
                <div className="card-title">Pay run readiness</div>
                <div className="card-sub">Can the period be closed?</div>
              </div>
            </div>
            <div className="card-body vstack" style={{ gap: 8, fontSize: 12.5 }}>
              {[
                ["Award interpretation",     "ok",    "Fair Work SCHADS 2010 · current"],
                ["Timesheets reconciled",    open.length > 0 ? "warn" : "ok",  `${143 - open.length} of 143 · ${open.length} pending approval`],
                ["Compliance gate",          held.length > 0 ? "warn" : "ok",  `${held.length} staff held · AHPRA`],
                ["Super & PAYG calc",        "ok",    "Reconciled to period"],
                ["STP lodgement ready",      "ok",    "ATO endpoint verified"],
              ].map(([k, t, v], i) => (
                <div key={i} className="hstack" style={{ justifyContent: "space-between", gap: 10 }}>
                  <span>{k}</span>
                  <div className="hstack" style={{ gap: 8 }}>
                    <span className="sub" style={{ fontSize: 11.5 }}>{v}</span>
                    <Badge tone={t} dot>{t === "ok" ? "Ready" : "Hold"}</Badge>
                  </div>
                </div>
              ))}
              <div className="divider" />
              <button className="btn primary" style={{ justifyContent: "center" }} onClick={() => dispatch({ type: "OPEN_MODAL", modal: { kind: "payroll-run" } })}>Continue to run<Icon name="arrowRight" size={12} /></button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Payroll });