// ── Control-plane: a tenant's students ────────────────────────────────────
function StudentsTab({ tenant }) {
  const notify = useToast();
  const [state, setState] = React.useState({ loading: true });
  const [search, setSearch] = React.useState("");
  const [page, setPage] = React.useState(0);
  const [otp, setOtp] = React.useState(null);
  const LIMIT = 50;

  const load = React.useCallback(() => {
    setState((s) => ({ ...s, loading: true }));
    cpApi.getStudents(tenant.id, { limit: LIMIT, offset: page * LIMIT, q: search || undefined })
      .then((d) => setState({ loading: false, ...d }))
      .catch((e) => setState({ loading: false, error: e.message }));
  }, [tenant.id, page, search]);

  React.useEffect(() => { load(); }, [load]);

  const lock = async (s, locked) => {
    try { await cpApi.setStudentAccess(tenant.id, s.id, locked); notify(locked ? "Access locked" : "Access unlocked"); load(); }
    catch (e) { notify(e.message); }
  };
  const reset = async (s) => {
    try { const r = await cpApi.resetStudentPassword(tenant.id, s.id); setOtp({ ...r, who: s.name }); }
    catch (e) { notify(e.message); }
  };

  if (state.loading && !state.data) return <div style={{ color: "var(--ink-mute)" }}><Spinner /> Loading students…</div>;
  if (state.error) return <div className="panel pad" style={{ color: "var(--danger)" }}>{state.error}</div>;
  if (state.locked) {
    return <EmptyState title="Students unavailable"
      body={state.reason || "Provision this tenant to manage students."} />;
  }

  const rows = state.data || [];
  const total = state.total || 0;

  return (
    <div>
      <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 14, flexWrap: "wrap" }}>
        <div style={{ color: "var(--ink-mute)", flex: 1 }}>{total} student{total === 1 ? "" : "s"}</div>
        <input placeholder="Search name…" value={search}
          onChange={(e) => { setPage(0); setSearch(e.target.value); }}
          style={{ padding: "8px 12px", borderRadius: 7, border: "1px solid var(--line-strong)", background: "var(--panel)", width: 200 }} />
      </div>

      {rows.length === 0 ? (
        <EmptyState title="No students" body={search ? "No students match that search." : "This school has no students yet."} />
      ) : (
        <div className="panel tablewrap">
          <table className="grid">
            <thead><tr><th>Student</th><th>Login</th><th>Batch / Course</th><th>XP</th><th>Status</th><th></th></tr></thead>
            <tbody>
              {rows.map((s) => (
                <tr key={s.id}>
                  <td><div style={{ fontWeight: 600 }}>{s.name}</div>
                    {s.age ? <div style={{ fontSize: 12, color: "var(--ink-mute)" }}>Age {s.age}</div> : null}</td>
                  <td className="mono" style={{ fontSize: 12 }}>{s.login_username || s.login_email || "—"}</td>
                  <td><div>{s.batch}</div><div style={{ fontSize: 12, color: "var(--ink-mute)" }}>{s.course}</div></td>
                  <td className="mono">{s.xp}</td>
                  <td>
                    {s.access_locked
                      ? <Pill tone="danger">locked</Pill>
                      : <Pill tone={s.status === "active" ? "ok" : s.status === "at-risk" ? "warn" : "mute"}>{s.status}</Pill>}
                  </td>
                  <td style={{ textAlign: "right", whiteSpace: "nowrap" }}>
                    <button className="btn sm ghost" onClick={() => lock(s, !s.access_locked)}>
                      {s.access_locked ? "Unlock" : "Lock"}
                    </button>
                    <button className="btn sm ghost" onClick={() => reset(s)}>Reset password</button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {total > LIMIT && (
        <div style={{ display: "flex", gap: 8, marginTop: 14, alignItems: "center" }}>
          <button className="btn sm" disabled={page === 0} onClick={() => setPage((p) => p - 1)}>← Prev</button>
          <span style={{ fontSize: 13, color: "var(--ink-mute)" }}>{page * LIMIT + 1}–{Math.min((page + 1) * LIMIT, total)} of {total}</span>
          <button className="btn sm" disabled={(page + 1) * LIMIT >= total} onClick={() => setPage((p) => p + 1)}>Next →</button>
        </div>
      )}

      {otp && (
        <Modal title={`New password for ${otp.who}`} onClose={() => setOtp(null)}>
          <p style={{ color: "var(--ink-mute)", marginTop: 0 }}>
            Give this to the student. They must set a new password on next sign-in.
          </p>
          <div style={{ fontSize: 13, marginBottom: 10 }}>
            Login: <code>{otp.username || otp.email}</code>
          </div>
          <CopyBox value={otp.oneTimePassword} />
          <div style={{ marginTop: 16, textAlign: "right" }}>
            <button className="btn primary" onClick={() => setOtp(null)}>Done</button>
          </div>
        </Modal>
      )}
    </div>
  );
}