// People / Employee 360 — searchable, filterable, with credential-renewal flow.

function People() {
  const { state, dispatch } = useApp();
  const search = state.filters.peopleSearch.trim().toLowerCase();
  const role = state.filters.peopleRole;

  const selected = state.staff.find(s => s.id === state.selected.employeeId) || state.staff[0];

  const rows = state.staff.filter(s => {
    if (role !== "all" && s.role !== role) return false;
    if (!search) return true;
    return (
      s.name.toLowerCase().includes(search) ||
      s.id.toLowerCase().includes(search) ||
      (s.ward || "").toLowerCase().includes(search) ||
      (s.role || "").toLowerCase().includes(search)
    );
  });

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="eyebrow">HR</div>
          <h1 className="page-title" style={{ marginTop: 4 }}>People</h1>
          <div className="page-sub">{state.staff.length} active · {state.staff.filter(s => s.agency).length} agency · {state.staff.filter(s => s.status === "block").length} compliance block · {state.expiries.filter(e => e.tone === "warn").length} credentials expiring</div>
        </div>
        <div className="hstack">
          <Dropdown align="right" trigger={<button className="btn"><Icon name="filter" size={13} /> Filters {role !== "all" && <Badge tone="ink">{role}</Badge>}</button>}>
            {(close) => (
              <>
                <div className="dropdown-label">Role</div>
                {["all","RN","EN","PCA"].map(r => (
                  <DropdownItem key={r} icon={role === r ? "check" : "users"} label={r === "all" ? "All roles" : r} onClick={() => { dispatch({ type: "SET_FILTER", key: "peopleRole", value: r }); close(); }} />
                ))}
              </>
            )}
          </Dropdown>
          <button className="btn primary" onClick={() => dispatch({ type: "PUSH_TOAST", toast: { tone: "ok", text: "Onboarding drawer — coming soon." } })}><Icon name="plus" size={13} /> Add person</button>
        </div>
      </div>

      <div className="grid" style={{ gridTemplateColumns: "minmax(0, 1.1fr) minmax(0, 1fr)", gap: 20 }}>
        <div className="card scroll">
          <div className="card-head">
            <div style={{ flex: 1, minWidth: 0 }}>
              <div className="card-title">Active workforce</div>
              <div className="card-sub">{rows.length} of {state.staff.length} · sort: attention first</div>
            </div>
            <div style={{ width: 220 }}>
              <SearchInput placeholder="Search name, ID, ward…" value={state.filters.peopleSearch} onChange={(v) => dispatch({ type: "SET_FILTER", key: "peopleSearch", value: v })} />
            </div>
          </div>
          <div className="hstack" style={{ padding: "0 var(--dense-pad) 10px", gap: 6 }}>
            <div className="kbar">
              {["all","RN","EN","PCA"].map(r => (
                <button key={r} className="chip" data-active={role === r} onClick={() => dispatch({ type: "SET_FILTER", key: "peopleRole", value: r })}>
                  {r === "all" ? "All" : r} <span className="count">{r === "all" ? state.staff.length : state.staff.filter(s => s.role === r).length}</span>
                </button>
              ))}
            </div>
          </div>
          <div className="table-scroll">
            <table className="table">
              <thead>
                <tr><th>Person</th><th>Ward / role</th><th>Status</th><th style={{textAlign:"right"}}>Hrs</th></tr>
              </thead>
              <tbody>
                {rows.map(s => (
                  <tr key={s.id} data-selected={selected.id === s.id} onClick={() => dispatch({ type: "SELECT_EMPLOYEE", employeeId: s.id })} style={{ cursor: "pointer" }}>
                    <td><div className="hstack" style={{ gap: 6 }}><Gate tone={s.status} /><Person name={s.name} meta={s.id + (s.agency ? " · agency" : "")} tone={s.tone} /></div></td>
                    <td><div style={{ fontWeight: 500 }}>{s.ward}</div><div className="sub">{s.grade}</div></td>
                    <td>
                      {s.status === "ok" && <Badge tone="ok" dot>Compliant</Badge>}
                      {s.status === "warn" && <Badge tone="warn" dot>{s.expiring || "Attention"}</Badge>}
                      {s.status === "block" && <Badge tone="block" dot>Blocked</Badge>}
                    </td>
                    <td className="mono" style={{ textAlign: "right" }}>{s.hours}</td>
                  </tr>
                ))}
                {rows.length === 0 && (
                  <tr><td colSpan={4} style={{ textAlign: "center", padding: 24 }}><div className="sub">No matches for "{state.filters.peopleSearch}"</div></td></tr>
                )}
              </tbody>
            </table>
          </div>
        </div>

        {selected && <EmployeeDrawer person={selected} />}
      </div>
    </div>
  );
}

function EmployeeDrawer({ person }) {
  const { dispatch } = useApp();
  const [uploadBusy, setUploadBusy] = React.useState(false);

  const credentials = [
    { name: "AHPRA registration",  status: person.status === "block" ? "block" : "ok", expires: person.status === "block" ? "Expired 12 Apr 2026" : "Renews 30 Sep 2026", ref: person.ahpra },
    { name: "First Aid / CPR",     status: "ok",    expires: "Renews 18 Nov 2026", ref: "FA-2204" },
    { name: "Police check",        status: "ok",    expires: "Renews 04 Mar 2027", ref: "NPC-8812" },
    { name: "NDIS worker screen",  status: "ok",    expires: "Renews 17 Jan 2028", ref: "NDIS-0192" },
    { name: "Mandatory training",  status: "warn",  expires: "Infection control · due 29 Apr", ref: "MT-IC-7" },
  ];

  function uploadRenewal() {
    setUploadBusy(true);
    setTimeout(() => {
      setUploadBusy(false);
      dispatch({ type: "RENEW_CREDENTIAL", employeeId: person.id, matchName: person.name });
      dispatch({ type: "DISMISS_EXPIRY", id: "EXP-01" });
      dispatch({ type: "PUSH_TOAST", toast: { tone: "ok", text: `Renewal accepted · ${person.name} returned to roster` } });
    }, 1100);
  }

  function verifyAhpra() {
    dispatch({ type: "OPEN_MODAL", modal: { kind: "renew-credential", employeeId: person.id } });
  }

  return (
    <div className="card" style={{ position: "sticky", top: 72, alignSelf: "start", maxHeight: "calc(100vh - 92px)", overflow: "auto" }}>
      <div className="card-head" style={{ alignItems: "flex-start" }}>
        <div className="hstack" style={{ alignItems: "flex-start", gap: 12 }}>
          <AvatarInitials name={person.name} tone={person.tone} size={44} />
          <div>
            <div style={{ fontWeight: 600, fontSize: 15 }}>{person.name}</div>
            <div className="sub">{person.grade} · {person.ward} · {person.id}</div>
            <div className="hstack" style={{ gap: 6, marginTop: 6, flexWrap: "wrap" }}>
              {person.status === "ok" && <Badge tone="ok" dot>Compliant</Badge>}
              {person.status === "warn" && <Badge tone="warn" dot>Attention</Badge>}
              {person.status === "block" && <Badge tone="block" dot>Blocked</Badge>}
              {person.agency && <Badge tone="warn" dot>Agency</Badge>}
              <Badge>Since 2023</Badge>
            </div>
          </div>
        </div>
        <Dropdown align="right" trigger={<button className="icon-btn"><Icon name="more" size={14} /></button>}>
          {(close) => (
            <>
              <DropdownItem icon="eye" label="Open profile" onClick={close} />
              <DropdownItem icon="calendar" label="Roster history" onClick={() => { dispatch({ type: "SET_PAGE", page: "roster" }); close(); }} />
              <DropdownItem icon="coin" label="Pay history" onClick={() => { dispatch({ type: "SET_PAGE", page: "payroll" }); close(); }} />
              <div className="dropdown-divider" />
              <DropdownItem icon="x" label="Mark unavailable" tone="terra" onClick={() => { dispatch({ type: "PUSH_TOAST", toast: { tone: "ok", text: `${person.name} marked unavailable` } }); close(); }} />
            </>
          )}
        </Dropdown>
      </div>

      {person.status === "block" && (
        <div style={{ margin: "0 var(--dense-pad) 14px", padding: 12, background: "var(--terra-wash)", borderRadius: 8, color: "var(--terra-ink)", fontSize: 12 }}>
          <div className="hstack" style={{ gap: 8, marginBottom: 6 }}>
            <Icon name="alert" size={14} /><strong>Roster eligibility suspended</strong>
          </div>
          <div style={{ marginBottom: 8 }}>AHPRA registration expired 12 Apr 2026 (5 days ago). 3 upcoming shifts auto-held. Payroll release gated until valid registration on file.</div>
          <Chain steps={["Credential", "Eligibility", "Roster × 3", "Payroll hold", "Mgr notified"]} />
          <div className="hstack" style={{ gap: 6, marginTop: 10 }}>
            <button className="btn primary" onClick={uploadRenewal} disabled={uploadBusy} data-busy={uploadBusy}>
              {uploadBusy ? <>Uploading…</> : <>Upload renewal<Icon name="download" size={12} /></>}
            </button>
            <button className="btn" onClick={verifyAhpra}>Verify via AHPRA</button>
          </div>
        </div>
      )}

      <div className="card-body vstack" style={{ gap: 16 }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 8 }}>Credentials</div>
          <div className="vstack" style={{ gap: 8 }}>
            {credentials.map((c, i) => (
              <div key={i} className="hstack" style={{ justifyContent: "space-between", padding: "6px 0", borderBottom: i < credentials.length-1 ? "1px dashed var(--line)" : "none" }}>
                <div>
                  <div style={{ fontSize: 12.5, fontWeight: 500 }}>{c.name}</div>
                  <div className="sub mono" style={{ fontSize: 10.5 }}>{c.ref} · {c.expires}</div>
                </div>
                <Badge tone={c.status} dot>{c.status === "ok" ? "Valid" : c.status === "warn" ? "Attention" : "Expired"}</Badge>
              </div>
            ))}
          </div>
        </div>

        <div>
          <div className="eyebrow" style={{ marginBottom: 8 }}>Skills & classifications</div>
          <div className="tag-row">
            {["Medication admin","Wound care","Dementia care","Palliative","Clinical handover","Falls prevention"].map(t => (
              <span key={t} className="chip" style={{ cursor: "default" }}>{t}</span>
            ))}
          </div>
        </div>

        <div>
          <div className="eyebrow" style={{ marginBottom: 8 }}>Recent activity (NuCo)</div>
          <div className="vstack" style={{ gap: 6, fontSize: 12 }}>
            <div className="hstack" style={{ gap: 8 }}><span className="activity-dot" data-tone="terra" style={{ marginTop: 0 }} /><span>Flagged AHPRA expiry · 12 Apr 04:02</span></div>
            <div className="hstack" style={{ gap: 8 }}><span className="activity-dot" data-tone="ink" style={{ marginTop: 0 }} /><span>Held 3 upcoming shifts · 12 Apr 04:02</span></div>
            <div className="hstack" style={{ gap: 8 }}><span className="activity-dot" data-tone="ink" style={{ marginTop: 0 }} /><span>Drafted renewal email · awaiting approval</span></div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { People });