// Compliance — live credentials, gating, regulatory readiness · tabs + actions wired.

function Compliance() {
  const { state, dispatch } = useApp();
  const tab = state.filters.complianceTab;
  const category = state.filters.complianceCategory;

  const fullyCompliant = state.staff.filter(s => s.status === "ok").length;
  const actionNeeded = state.expiries.filter(e => e.tone === "warn").length + state.staff.filter(s => s.status === "warn").length;
  const blocked = state.staff.filter(s => s.status === "block").length;
  const totalTracked = state.staff.length;
  const pct = totalTracked ? fullyCompliant / totalTracked : 1;

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="eyebrow">Compliance · live monitoring</div>
          <h1 className="page-title" style={{ marginTop: 4 }}>{(pct*100).toFixed(1)}% compliance across {totalTracked} workers</h1>
          <div className="page-sub"><strong>{blocked} blocker{blocked === 1 ? "" : "s"}</strong>, <strong>{state.expiries.length} items</strong> expiring within 60 days. NuCo has drafted outreach for {state.expiries.filter(e => e.tone === "ok").length}.</div>
        </div>
        <div className="hstack">
          <div className="seg">
            {[
              { k: "workforce", label: "Workforce" },
              { k: "shifts", label: "Shifts" },
              { k: "regulatory", label: "Regulatory" },
            ].map(t => (
              <button key={t.k} data-active={tab === t.k} onClick={() => dispatch({ type: "SET_FILTER", key: "complianceTab", value: t.k })}>{t.label}</button>
            ))}
          </div>
          <button className="btn" onClick={() => dispatch({ type: "PUSH_TOAST", toast: { tone: "ok", text: "Audit pack generated · 38 documents · ready to share" } })}><Icon name="download" size={13} /> Audit pack</button>
        </div>
      </div>

      {tab === "workforce" && <ComplianceWorkforce pct={pct} fullyCompliant={fullyCompliant} actionNeeded={actionNeeded} blocked={blocked} category={category} />}
      {tab === "shifts" && <ComplianceShifts />}
      {tab === "regulatory" && <ComplianceRegulatory />}
    </div>
  );
}

function ComplianceWorkforce({ pct, fullyCompliant, actionNeeded, blocked, category }) {
  const { state, dispatch } = useApp();
  const visible = state.expiries.filter(x => category === "all" ? true : x.category === category);
  const categoryCounts = {
    all: state.expiries.length,
    clinical: state.expiries.filter(e => e.category === "clinical").length,
    "non-clinical": state.expiries.filter(e => e.category === "non-clinical").length,
  };

  return (
    <>
      <div className="grid" style={{ gridTemplateColumns: "minmax(260px, 320px) 1fr", gap: 20, marginBottom: 20 }}>
        <div className="card">
          <div className="card-head">
            <div>
              <div className="card-title">Overall compliance</div>
              <div className="card-sub">Wattlegrove · live</div>
            </div>
          </div>
          <div className="card-body hstack" style={{ gap: 18, flexWrap: "wrap" }}>
            <Ring pct={pct} size={104} stroke={8} color="var(--sage)" label={`${(pct*100).toFixed(1)}%`} />
            <div className="vstack" style={{ gap: 6, fontSize: 12 }}>
              <div className="hstack" style={{ gap: 8 }}><Badge tone="ok" dot>{fullyCompliant}</Badge><span>Fully compliant</span></div>
              <div className="hstack" style={{ gap: 8 }}><Badge tone="warn" dot>{actionNeeded}</Badge><span>Action needed</span></div>
              <div className="hstack" style={{ gap: 8 }}><Badge tone="block" dot>{blocked}</Badge><span>Blocked</span></div>
              <div className="divider" style={{ margin: "6px 0" }} />
              <div className="sub" style={{ fontSize: 11 }}>Next regulatory audit: 12 Jun 2026 (Aged Care QSC)</div>
            </div>
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <div>
              <div className="card-title">By credential type</div>
              <div className="card-sub">Live status across workforce</div>
            </div>
          </div>
          <div className="card-body vstack" style={{ gap: 10 }}>
            {state.compliance.map(c => (
              <div key={c.label}>
                <div className="hstack" style={{ justifyContent: "space-between", fontSize: 12.5, marginBottom: 4 }}>
                  <span>{c.label}</span>
                  <span className="mono sub">{c.ok}/{c.total}</span>
                </div>
                <div style={{ display: "flex", height: 6, borderRadius: 3, overflow: "hidden", background: "var(--paper-2)" }}>
                  <div style={{ flex: c.ok,    background: "var(--sage)" }} />
                  <div style={{ flex: c.warn,  background: "var(--amber)" }} />
                  <div style={{ flex: c.block, background: "var(--terra)" }} />
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <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">Upcoming expiries · next 60 days</div>
              <div className="card-sub">Each item shows when the credential lapses and what it will affect</div>
            </div>
            <div className="kbar">
              <button className="chip" data-active={category === "all"} onClick={() => dispatch({ type: "SET_FILTER", key: "complianceCategory", value: "all" })}>All <span className="count">{categoryCounts.all}</span></button>
              <button className="chip" data-active={category === "clinical"} onClick={() => dispatch({ type: "SET_FILTER", key: "complianceCategory", value: "clinical" })}>Clinical <span className="count">{categoryCounts.clinical}</span></button>
              <button className="chip" data-active={category === "non-clinical"} onClick={() => dispatch({ type: "SET_FILTER", key: "complianceCategory", value: "non-clinical" })}>Non-clinical <span className="count">{categoryCounts["non-clinical"]}</span></button>
            </div>
          </div>
          <ExpiryTimeline items={visible} />
        </div>

        <div className="vstack" style={{ gap: 20 }}>
          <div className="card">
            <div className="card-head">
              <div>
                <div className="card-title">Regulatory readiness</div>
                <div className="card-sub">Automated reporting bundles</div>
              </div>
            </div>
            <div className="card-body vstack" style={{ gap: 10, fontSize: 12.5 }}>
              {[
                { name: "AHPRA registry sync",         state: "ok",   detail: "41 of 41 registrations verified hourly" },
                { name: "SIRS — Priority 1/2",          state: "ok",   detail: "0 notifiable incidents this quarter · ready to submit" },
                { name: "Aged Care Quality Standards",  state: "warn", detail: "Evidence bundle 91% · 4 documents outstanding" },
                { name: "24/7 RN requirement",          state: "ok",   detail: "720 of 720 hours covered · last 30d" },
                { name: "Care minutes target",          state: "ok",   detail: "215 min/res · target 200 · 30d avg" },
              ].map((r, i) => (
                <div key={i} className="hstack" style={{ justifyContent: "space-between", gap: 10, paddingBottom: 6, borderBottom: i < 4 ? "1px dashed var(--line)" : "none" }}>
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontWeight: 500 }}>{r.name}</div>
                    <div className="sub" style={{ fontSize: 11 }}>{r.detail}</div>
                  </div>
                  <Badge tone={r.state} dot>{r.state === "ok" ? "Ready" : "Attention"}</Badge>
                </div>
              ))}
            </div>
          </div>

          <div className="card">
            <div className="card-head">
              <div>
                <div className="card-title">Compliance gating</div>
                <div className="card-sub">Live checkpoints across workflows</div>
              </div>
            </div>
            <div className="card-body vstack" style={{ gap: 8 }}>
              {[
                { step: "Assign shift",  state: "ok",    count: "142 passes today" },
                { step: "Approve OT",    state: "warn",  count: "1 override — mgr sign-off" },
                { step: "Release pay",   state: blocked > 0 ? "block" : "ok", count: blocked > 0 ? "1 held — E-1205" : "All pay released" },
                { step: "Submit report", state: "ok",    count: "SIRS Q2 ready" },
              ].map((g, i) => (
                <div key={i} className="hstack" style={{ gap: 10, padding: 8, background: "var(--bone)", borderRadius: 6, border: "1px solid var(--line)" }}>
                  <span style={{
                    width: 22, height: 22, borderRadius: 4, display: "grid", placeItems: "center",
                    background: g.state === "ok" ? "var(--sage-wash)" : g.state === "warn" ? "var(--amber-wash)" : "var(--terra-wash)",
                    color: g.state === "ok" ? "var(--sage-ink)" : g.state === "warn" ? "var(--amber-ink)" : "var(--terra-ink)",
                  }}>
                    <Icon name={g.state === "ok" ? "check" : g.state === "warn" ? "alert" : "lock"} size={12} />
                  </span>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontWeight: 500, fontSize: 12.5 }}>{g.step}</div>
                    <div className="sub" style={{ fontSize: 11 }}>{g.count}</div>
                  </div>
                  <Badge tone={g.state} dot>{g.state === "ok" ? "clear" : g.state === "warn" ? "warning" : "blocked"}</Badge>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

function ComplianceShifts() {
  const { state, dispatch } = useApp();
  const data = [
    { name: "Ratio breach (any shift)", count: 0, tone: "ok", detail: "No breaches in last 30d" },
    { name: "RN coverage gap", count: 0, tone: "ok", detail: "24/7 RN satisfied" },
    { name: "Care minutes shortfall", count: 1, tone: "warn", detail: "Wattle · 27 Mar · closed out" },
    { name: "Consecutive double-shifts", count: 0, tone: "ok", detail: "None this period" },
    { name: "Credential at shift start", count: 3, tone: "warn", detail: "3 shifts held pending AHPRA" },
  ];
  return (
    <div className="card">
      <div className="card-head">
        <div>
          <div className="card-title">Shift-level compliance</div>
          <div className="card-sub">Rolling 30-day window · click an item to inspect</div>
        </div>
        <Badge tone="ok" dot>Live</Badge>
      </div>
      <div className="card-body vstack" style={{ gap: 8 }}>
        {data.map((d, i) => (
          <div key={i} className="hstack" style={{ justifyContent: "space-between", gap: 10, padding: 10, background: "var(--bone)", borderRadius: 6, border: "1px solid var(--line)", cursor: "pointer" }} onClick={() => dispatch({ type: "SET_PAGE", page: "roster" })}>
            <div>
              <div style={{ fontWeight: 500, fontSize: 12.5 }}>{d.name}</div>
              <div className="sub" style={{ fontSize: 11 }}>{d.detail}</div>
            </div>
            <Badge tone={d.tone} dot>{d.count === 0 ? "Clear" : `${d.count} today`}</Badge>
          </div>
        ))}
      </div>
    </div>
  );
}

function ComplianceRegulatory() {
  const { state, dispatch } = useApp();
  return (
    <div className="vstack" style={{ gap: 18 }}>
      <div className="card">
        <div className="card-head">
          <div>
            <div className="card-title">Regulatory bundles</div>
            <div className="card-sub">Readiness, evidence, and one-click lodgement — NuCo prepares every bundle in advance</div>
          </div>
          <button className="btn" onClick={() => dispatch({ type: "PUSH_TOAST", toast: { tone: "ok", text: "Calendar added to Google Workspace" } })}><Icon name="calendar" size={12} /> Subscribe</button>
        </div>
        <div className="card-body vstack" style={{ gap: 10 }}>
          {state.regulatoryBundles.map(b => {
            const submitted = state.submittedBundles.includes(b.id);
            const ready = b.readiness >= 1;
            return (
              <div key={b.id} className="hstack" style={{ justifyContent: "space-between", gap: 12, padding: 12, background: "var(--bone)", borderRadius: 8, border: "1px solid var(--line)" }}>
                <div style={{ minWidth: 0, flex: 1 }}>
                  <div className="hstack" style={{ gap: 8, alignItems: "center" }}>
                    <div style={{ fontWeight: 600, fontSize: 13.5 }}>{b.title}</div>
                    {submitted ? <Badge tone="ok" dot>Lodged</Badge> : <Badge tone={ready ? "ok" : "warn"} dot>{ready ? "Ready" : `${Math.round(b.readiness*100)}% ready`}</Badge>}
                  </div>
                  <div className="sub" style={{ marginTop: 4, fontSize: 12 }}>{b.body}</div>
                  <div className="hstack" style={{ gap: 10, marginTop: 8, fontSize: 11 }}>
                    <span className="mono sub">Due {b.due}</span>
                    <span className="mono sub">{b.items.length} items</span>
                    <span className="mono sub">{b.items.filter(i => i.state === "ok").length} clear · {b.items.filter(i => i.state === "warn").length} attention</span>
                  </div>
                </div>
                <div className="hstack" style={{ gap: 6 }}>
                  <button className="btn" onClick={() => dispatch({ type: "OPEN_MODAL", modal: { kind: "submit-bundle", bundleId: b.id } })}>View</button>
                  {!submitted && <button className="btn sage" disabled={!ready} onClick={() => dispatch({ type: "OPEN_MODAL", modal: { kind: "submit-bundle", bundleId: b.id } })}>{ready ? "Submit now" : "Prepare"}</button>}
                </div>
              </div>
            );
          })}
        </div>
      </div>

      <div className="card">
        <div className="card-head">
          <div>
            <div className="card-title">Regulatory calendar</div>
            <div className="card-sub">Upcoming submissions & audits across the next 90 days</div>
          </div>
        </div>
        <div className="card-body vstack" style={{ gap: 10, fontSize: 12.5 }}>
          {[
            { name: "Aged Care Quality Standards audit", next: "12 Jun 2026", status: "warn", detail: "QSC site visit · evidence bundle ready for review" },
            { name: "SIRS Q2 lodgement",                 next: "30 Jun 2026", status: "ok",   detail: "0 notifiable incidents" },
            { name: "AN-ACC shadow assessment",          next: "01 May 2026", status: "ok",   detail: "Auto-generated from care notes" },
            { name: "Police check audit sample",         next: "15 May 2026", status: "ok",   detail: "95 of 95 current" },
          ].map((r, i, arr) => (
            <div key={i} className="hstack" style={{ justifyContent: "space-between", gap: 10, paddingBottom: 6, borderBottom: i < arr.length - 1 ? "1px dashed var(--line)" : "none" }}>
              <div><div style={{ fontWeight: 500 }}>{r.name}</div><div className="sub" style={{ fontSize: 11 }}>{r.detail}</div></div>
              <div className="hstack" style={{ gap: 10 }}>
                <span className="sub mono" style={{ fontSize: 11 }}>{r.next}</span>
                <Badge tone={r.status} dot>{r.status === "ok" ? "Ready" : "Attention"}</Badge>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function ExpiryTimeline({ items }) {
  const { dispatch } = useApp();
  const span = 62;
  const offsetLeft = 5;

  function approve(item) {
    dispatch({ type: "DISMISS_EXPIRY", id: item.id });
    dispatch({ type: "PUSH_TOAST", toast: { tone: "ok", text: `Renewal approved · ${item.name}` } });
  }
  function dismiss(item) {
    dispatch({ type: "DISMISS_EXPIRY", id: item.id });
  }

  return (
    <div style={{ padding: "10px 16px 18px" }}>
      {/* Ruler */}
      <div style={{ position: "relative", height: 28, marginBottom: 8 }}>
        {["Now","+15d","+30d","+45d","+60d"].map((l, i) => (
          <div key={l} style={{ position: "absolute", left: `${((i*15 + offsetLeft)/span)*100}%`, transform: "translateX(-50%)" }}>
            <div style={{ height: 6, width: 1, background: "var(--line-2)", margin: "0 auto 4px" }} />
            <div className="mono sub" style={{ fontSize: 10 }}>{l}</div>
          </div>
        ))}
        <div style={{ position: "absolute", left: `${(offsetLeft/span)*100}%`, top: 0, bottom: -8, width: 2, background: "var(--ink)", transform: "translateX(-1px)" }} />
      </div>

      {/* Rows — content always left-aligned full-width; a thin marker on the rail shows position. */}
      <div className="vstack" style={{ gap: 8 }}>
        {items.length === 0 && <div className="sub" style={{ textAlign: "center", padding: 18 }}>No expiries in this view.</div>}
        {items.map((it) => {
          const leftPct = Math.max(0, Math.min(100, (it.day + offsetLeft)/span * 100));
          const bgWash = it.tone === "block" ? "var(--terra-wash)" : it.tone === "warn" ? "var(--amber-wash)" : "var(--sage-wash)";
          const border = it.tone === "block" ? "var(--terra)"      : it.tone === "warn" ? "var(--amber)"      : "var(--sage)";
          return (
            <div key={it.id} style={{ background: "var(--bone)", border: "1px solid var(--line)", borderRadius: 6, overflow: "hidden" }}>
              {/* Position rail */}
              <div style={{ position: "relative", height: 4, background: "var(--paper-2)" }}>
                <div style={{ position: "absolute", left: 0, width: `${leftPct}%`, top: 0, bottom: 0, background: bgWash }} />
                <div style={{ position: "absolute", left: `${leftPct}%`, top: -3, bottom: -3, width: 2, background: border, transform: "translateX(-1px)" }} />
              </div>
              {/* Content row — always visible in full */}
              <div className="hstack" style={{ padding: "8px 10px", gap: 10, background: bgWash, color: it.tone === "block" ? "var(--terra-ink)" : it.tone === "warn" ? "var(--amber-ink)" : "var(--sage-ink)" }}>
                <AvatarInitials name={it.name} tone={it.tone2} size={22} />
                <div style={{ minWidth: 0, flex: 1 }}>
                  <div style={{ fontWeight: 500, fontSize: 12.5, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{it.name} · {it.cred}</div>
                  <div style={{ fontSize: 11, opacity: 0.8 }}>{it.day < 0 ? `Expired ${Math.abs(it.day)}d ago` : `in ${it.day}d`} · {it.impact}</div>
                </div>
                <div className="hstack" style={{ gap: 4, flex: "none" }}>
                  {it.tone === "block" ? (
                    <button className="btn" style={{ padding: "2px 8px", fontSize: 11 }} onClick={() => { dispatch({ type: "SELECT_EMPLOYEE", employeeId: "E-1205" }); dispatch({ type: "SET_PAGE", page: "people" }); }}>Resolve</button>
                  ) : it.cred && it.cred.toLowerCase().includes("visa") ? (
                    <button className="btn" style={{ padding: "2px 8px", fontSize: 11 }} onClick={() => dispatch({ type: "OPEN_MODAL", modal: { kind: "visa-review", expiryId: it.id, step: 0 } })}>Review visa</button>
                  ) : (
                    <>
                      <button className="btn sage" style={{ padding: "2px 8px", fontSize: 11 }} onClick={() => approve(it)}>Approve</button>
                      <button className="btn" style={{ padding: "2px 8px", fontSize: 11 }} onClick={() => dismiss(it)}>Dismiss</button>
                    </>
                  )}
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

Object.assign(window, { Compliance });