// Leave — entitlements, requests, approvals, roster impact.
function Leave() {
  const { state, dispatch } = useApp();
  const tab = state.filters.leaveTab;

  const pending  = state.leaveRequests.filter(l => l.status === "pending");
  const approved = state.leaveRequests.filter(l => l.status === "approved");
  const declined = state.leaveRequests.filter(l => l.status === "declined");
  const rows = tab === "pending" ? pending : tab === "approved" ? approved : declined;

  const totalDays = approved.filter(l => l.type === "Annual").reduce((a, r) => a + r.days, 0);
  const sickDays  = approved.filter(l => l.type === "Sick").reduce((a, r) => a + r.days, 0);

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="eyebrow">HR · leave & absence</div>
          <h1 className="page-title" style={{ marginTop: 4 }}>Leave</h1>
          <div className="page-sub">{pending.length} pending · {approved.length} approved · {declined.length} declined · period balance tracking live</div>
        </div>
        <div className="hstack">
          <button className="btn" onClick={() => dispatch({ type: "PUSH_TOAST", toast: { tone: "ok", text: "Leave calendar exported to PDF" } })}><Icon name="download" size={13} /> Export</button>
          <button className="btn primary" onClick={() => dispatch({ type: "PUSH_TOAST", toast: { tone: "ok", text: "Manual leave entry — opening form" } })}><Icon name="plus" size={13} /> New leave</button>
        </div>
      </div>

      {/* Summary row */}
      <div className="grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))", gap: 16, marginBottom: 20 }}>
        <div className="kpi">
          <div className="kpi-label">Awaiting approval</div>
          <div className="kpi-value">{pending.length}<span className="unit">requests</span></div>
          <div className="kpi-delta">{pending.reduce((a, r) => a + r.days, 0)} days total · impact on roster</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Annual leave · approved YTD</div>
          <div className="kpi-value">{totalDays}<span className="unit">days</span></div>
          <div className="kpi-delta"><span className="tone-up">▲ within policy</span></div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Sick leave · approved 30d</div>
          <div className="kpi-value">{sickDays}<span className="unit">days</span></div>
          <div className="kpi-delta">Benchmark 2.1d/FTE · within range</div>
        </div>
        <div className="kpi">
          <div className="kpi-label">Roster impact · next 14d</div>
          <div className="kpi-value">4<span className="unit">shifts</span></div>
          <div className="kpi-delta">3 covered internally · 1 agency swap queued</div>
        </div>
      </div>

      <div className="grid" style={{ gridTemplateColumns: "minmax(0, 1.7fr) minmax(0, 1fr)", gap: 20 }}>
        <div className="card scroll">
          <div className="card-head">
            <div>
              <div className="card-title">Leave requests</div>
              <div className="card-sub">Approve pending, decline with reason, or view history</div>
            </div>
            <div className="kbar">
              <button className="chip" data-active={tab === "pending"}  onClick={() => dispatch({ type: "SET_FILTER", key: "leaveTab", value: "pending"  })}>Pending <span className="count">{pending.length}</span></button>
              <button className="chip" data-active={tab === "approved"} onClick={() => dispatch({ type: "SET_FILTER", key: "leaveTab", value: "approved" })}>Approved <span className="count">{approved.length}</span></button>
              <button className="chip" data-active={tab === "declined"} onClick={() => dispatch({ type: "SET_FILTER", key: "leaveTab", value: "declined" })}>Declined <span className="count">{declined.length}</span></button>
            </div>
          </div>
          <div className="table-scroll">
            <table className="table">
              <thead>
                <tr><th>Person</th><th>Type</th><th>Dates</th><th>Reason</th><th>Roster impact</th><th></th></tr>
              </thead>
              <tbody>
                {rows.map(r => {
                  const person = state.staff.find(s => s.id === r.personId);
                  return (
                    <tr key={r.id}>
                      <td>{person ? <Person name={person.name} meta={`${person.id} · ${person.ward}`} tone={person.tone} /> : <span className="sub">—</span>}</td>
                      <td><Badge tone={r.type === "Sick" ? "warn" : r.type === "Unpaid" ? "block" : "ok"} dot>{r.type}</Badge></td>
                      <td><div className="mono" style={{ fontSize: 11.5 }}>{r.start}</div><div className="sub mono" style={{ fontSize: 10.5 }}>to {r.end} · {r.days}d</div></td>
                      <td><div className="sub" style={{ color: "var(--ink-2)", fontSize: 12 }}>{r.reason}</div></td>
                      <td><div className="sub" style={{ fontSize: 11.5 }}>{r.rosterImpact}</div></td>
                      <td>
                        {r.status === "pending" ? (
                          <div className="hstack" style={{ gap: 4 }}>
                            <button className="btn sage" style={{ padding: "3px 8px", fontSize: 11 }} onClick={() => { dispatch({ type: "APPROVE_LEAVE", id: r.id }); dispatch({ type: "PUSH_TOAST", toast: { tone: "ok", text: `Approved · ${r.type} · ${person ? person.name.split(" ")[0] : ""}` } }); }}>Approve</button>
                            <button className="btn" style={{ padding: "3px 8px", fontSize: 11 }} onClick={() => { dispatch({ type: "DECLINE_LEAVE", id: r.id }); dispatch({ type: "PUSH_TOAST", toast: { tone: "warn", text: `Declined · reason required before send` } }); }}>Decline</button>
                          </div>
                        ) : r.status === "approved" ? (
                          <Badge tone="ok" dot>Approved</Badge>
                        ) : (
                          <Badge tone="block" dot>Declined</Badge>
                        )}
                      </td>
                    </tr>
                  );
                })}
                {rows.length === 0 && <tr><td colSpan={6} style={{ padding: 28, textAlign: "center" }}><div className="sub">Nothing in this queue.</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">Balances · top 6</div>
                <div className="card-sub">Days accrued · live</div>
              </div>
              <button className="btn ghost" onClick={() => dispatch({ type: "SET_PAGE", page: "people" })}><Icon name="arrowRight" size={13} /></button>
            </div>
            <div className="card-body vstack" style={{ gap: 8, fontSize: 12 }}>
              {state.leaveBalances.slice(0, 6).map((b, i) => {
                const p = state.staff.find(s => s.id === b.personId);
                return (
                  <div key={b.personId} className="vstack" style={{ gap: 4, paddingBottom: 6, borderBottom: i < 5 ? "1px dashed var(--line)" : "none" }}>
                    <div className="hstack" style={{ justifyContent: "space-between" }}>
                      <span style={{ fontWeight: 500 }}>{p ? p.name : b.personId}</span>
                      <span className="sub mono" style={{ fontSize: 11 }}>{p ? p.ward : ""}</span>
                    </div>
                    <div className="hstack" style={{ gap: 10, fontSize: 11, color: "var(--ink-3)" }}>
                      <span>Annual <strong style={{ color: "var(--ink)" }}>{b.annual}d</strong></span>
                      <span>Sick <strong style={{ color: "var(--ink)" }}>{b.sick}d</strong></span>
                      <span>Personal <strong style={{ color: "var(--ink)" }}>{b.personal}d</strong></span>
                      <span>LSL <strong style={{ color: "var(--ink)" }}>{b.lsl}d</strong></span>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

          <div className="card">
            <div className="card-head">
              <div>
                <div className="card-title">Roster impact · next 14 days</div>
                <div className="card-sub">Approved leave cascading into the roster</div>
              </div>
            </div>
            <div className="card-body vstack" style={{ gap: 8, fontSize: 12 }}>
              {approved.slice(0, 5).map((r, i) => {
                const p = state.staff.find(s => s.id === r.personId);
                return (
                  <div key={r.id} className="hstack" style={{ gap: 10, padding: 8, background: "var(--bone)", border: "1px solid var(--line)", borderRadius: 6 }}>
                    {p ? <AvatarInitials name={p.name} tone={p.tone} size={22} /> : <div className="avatar" style={{ width: 22, height: 22 }}>?</div>}
                    <div style={{ flex: 1 }}>
                      <div style={{ fontSize: 12, fontWeight: 500 }}>{p ? p.name : r.personId} · {r.type}</div>
                      <div className="sub mono" style={{ fontSize: 10.5 }}>{r.start} → {r.end} · {r.days}d</div>
                    </div>
                    <Badge tone="ok" dot>Covered</Badge>
                  </div>
                );
              })}
              {approved.length === 0 && <div className="sub">Nothing on the calendar.</div>}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Leave });