rootnode-academy/frontend/src/admin/StudentsView.jsx

import { useState, useEffect, useCallback } from 'react'
import { adminApi } from './api'
import { StatusPill } from './CohortsView'
import styles from './Admin.module.css'

// Phase 5A §4-7: student roster now shows credential status alongside the pilot fields that
// were already here. canManage gates create/convert/reset/revoke/import the same way
// CohortsView gates cohort management — the server (requireAdminOrOwner) is the real boundary,
// this just avoids showing controls a plain instructor would get a 403 from.
export default function StudentsView({ role }) {
  const [students, setStudents] = useState(null)
  const [selected, setSelected] = useState(null)
  const [error, setError] = useState(null)
  const canManage = role !== 'instructor'

  const reload = useCallback(() => {
    adminApi.students().then(setStudents).catch((e) => setError(e.message))
  }, [])
  useEffect(reload, [reload])

  if (selected) return <StudentDetail studentId={selected} canManage={canManage} onBack={() => { setSelected(null); reload() }} />

  return (
    <>
      {error && <div className={styles.errorBox}>{error}</div>}
      {canManage && (
        <div className={styles.card}>
          <h2>Add student</h2>
          <CreateStudentForm onCreated={reload} />
        </div>
      )}
      {canManage && (
        <div className={styles.card}>
          <h2>Bulk import (CSV)</h2>
          <ImportForm onImported={reload} />
        </div>
      )}
      <div className={styles.card}>
        <h2>Students ({students?.length ?? '…'})</h2>
        {students && (
          <table>
            <thead><tr><th>Name</th><th>ID</th><th>Login</th><th>Status</th><th>Last active</th><th /></tr></thead>
            <tbody>
              {students.map((s) => (
                <tr key={s.student_id}>
                  <td>{s.display_name}</td>
                  <td className={styles.muted}>{s.student_id}</td>
                  <td>
                    {s.has_credentials
                      ? <span className={`${styles.pill} ${styles.pillOk}`}>{s.email || s.login_identifier}</span>
                      : <span className={`${styles.pill} ${styles.pillMuted}`}>pilot (no login)</span>}
                  </td>
                  <td><span className={`${styles.pill} ${s.status === 'active' ? styles.pillOk : styles.pillMuted}`}>{s.status}</span></td>
                  <td>{s.last_active_at ? new Date(s.last_active_at).toLocaleString() : 'never'}</td>
                  <td><button className={styles.linkBtn} onClick={() => setSelected(s.student_id)}>Open</button></td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>
    </>
  )
}

function CreateStudentForm({ onCreated }) {
  const [displayName, setDisplayName] = useState('')
  const [email, setEmail] = useState('')
  const [loginIdentifier, setLoginIdentifier] = useState('')
  const [cohortId, setCohortId] = useState('')
  const [cohorts, setCohorts] = useState(null)
  const [busy, setBusy] = useState(false)
  const [error, setError] = useState(null)
  const [created, setCreated] = useState(null) // { student_id, activation_token } — token shown exactly once

  useEffect(() => { adminApi.cohorts().then(setCohorts).catch(() => {}) }, [])

  const submit = async (e) => {
    e.preventDefault()
    setBusy(true); setError(null); setCreated(null)
    try {
      const result = await adminApi.createStudent({
        display_name: displayName.trim(), cohort_id: cohortId || undefined,
        email: email.trim() || undefined, login_identifier: loginIdentifier.trim() || undefined,
      })
      setCreated(result)
      setDisplayName(''); setEmail(''); setLoginIdentifier('')
      onCreated()
    } catch (e) { setError(e.message) } finally { setBusy(false) }
  }

  return (
    <form onSubmit={submit}>
      {error && <div className={styles.errorBox}>{error}</div>}
      {created?.activation_token && (
        <div className={styles.errorBox} style={{ background: 'var(--green-dim)', color: 'var(--green)', borderColor: 'var(--green)' }}>
          Account created ({created.student_id}). Activation link (share it out of band, shown once):<br />
          <code>{`${window.location.origin}/?activate=${created.activation_token}`}</code>
        </div>
      )}
      <div className={styles.formRow}>
        <div><label className={styles.label}>Display name</label>
          <input className={styles.input} value={displayName} onChange={(e) => setDisplayName(e.target.value)} required /></div>
        <div><label className={styles.label}>Email (older/self-paced)</label>
          <input className={styles.input} type="email" value={email} onChange={(e) => setEmail(e.target.value)} /></div>
        <div><label className={styles.label}>Login ID (younger/managed)</label>
          <input className={styles.input} value={loginIdentifier} onChange={(e) => setLoginIdentifier(e.target.value)} /></div>
        <div><label className={styles.label}>Cohort (optional)</label>
          <select className={styles.select} value={cohortId} onChange={(e) => setCohortId(e.target.value)}>
            <option value="">— none —</option>
            {cohorts?.map((c) => <option key={c.cohort_id} value={c.cohort_id}>{c.name}</option>)}
          </select></div>
      </div>
      <p className={styles.muted}>Leave email and login ID both blank to add a pilot (no-login) student.</p>
      <button className={styles.btn} disabled={busy || !displayName.trim()}>{busy ? 'Adding…' : 'Add student'}</button>
    </form>
  )
}

function ImportForm({ onImported }) {
  const [csv, setCsv] = useState('')
  const [busy, setBusy] = useState(false)
  const [error, setError] = useState(null)
  const [rowErrors, setRowErrors] = useState(null)
  const [created, setCreated] = useState(null)

  const submit = async (e) => {
    e.preventDefault()
    setBusy(true); setError(null); setRowErrors(null); setCreated(null)
    try {
      const { created: rows } = await adminApi.importStudents(csv)
      setCreated(rows); setCsv('')
      onImported()
    } catch (e) {
      if (e.row_errors) setRowErrors(e.row_errors) // not thrown this way by the json() helper today; message covers it below
      setError(e.message)
    } finally { setBusy(false) }
  }

  return (
    <form onSubmit={submit}>
      <p className={styles.muted}>Columns: <code>display_name, email, login_identifier, cohort_id</code> (email/login_identifier/cohort_id optional per row). Never include a password column — the whole file is validated before anything is imported.</p>
      {error && <div className={styles.errorBox}>{error}</div>}
      {rowErrors && (
        <div className={styles.errorBox}>{rowErrors.map((re, i) => <div key={i}>{re}</div>)}</div>
      )}
      {created && (
        <div className={styles.errorBox} style={{ background: 'var(--green-dim)', color: 'var(--green)', borderColor: 'var(--green)' }}>
          Imported {created.length} student(s). Activation links (shown once — copy before navigating away):
          {created.filter((c) => c.activation_token).map((c) => (
            <div key={c.student_id}><code>{c.display_name}: {window.location.origin}/?activate={c.activation_token}</code></div>
          ))}
        </div>
      )}
      <textarea className={styles.input} style={{ width: '100%', fontFamily: 'var(--mono)', minHeight: '6rem' }}
        placeholder={'display_name,email,login_identifier,cohort_id\nJane Doe,[email protected],,'}
        value={csv} onChange={(e) => setCsv(e.target.value)} required />
      <button className={styles.btn} style={{ marginTop: '0.5rem' }} disabled={busy || !csv.trim()}>{busy ? 'Importing…' : 'Import'}</button>
    </form>
  )
}

function StudentDetail({ studentId, canManage, onBack }) {
  const [student, setStudent] = useState(null)
  const [progress, setProgress] = useState(null)
  const [attempts, setAttempts] = useState(null)
  const [env, setEnv] = useState(null)
  const [events, setEvents] = useState(null)
  const [sessions, setSessions] = useState(null)
  const [error, setError] = useState(null)
  const [notice, setNotice] = useState(null)
  const [busy, setBusy] = useState(false)

  const reload = useCallback(() => {
    adminApi.students().then((rows) => setStudent(rows.find((s) => s.student_id === studentId) || null)).catch(() => {})
    adminApi.studentProgress(studentId).then(setProgress).catch(() => {})
    // Phase 4.1 §16 — studentAttempts is now paginated; this panel only ever shows the most
    // recent page (labeled "Recent attempts," not a full history browser — see
    // /api/admin/students/:id/attempts's own pagination for the underlying capability).
    adminApi.studentAttempts(studentId).then((r) => setAttempts(r.items)).catch(() => {})
    adminApi.studentEnvironment(studentId).then((rows) => setEnv(rows?.find((e) => e.status !== 'destroyed') || null)).catch(() => {})
    adminApi.studentSessions(studentId).then(setSessions).catch(() => {})
  }, [studentId])
  useEffect(reload, [reload])

  const withBusy = (fn) => async () => {
    setBusy(true); setError(null)
    try { await fn(); reload() } catch (e) { setError(e.message) } finally { setBusy(false) }
  }

  const loadEvents = async () => {
    if (!env) return
    try { setEvents(await adminApi.environmentEvents(env.environment_id)) } catch (e) { setError(e.message) }
  }

  return (
    <>
      <button className={styles.linkBtn} onClick={onBack}>&larr; Back to students</button>
      <h2 style={{ margin: '1rem 0' }}>{studentId}</h2>
      {error && <div className={styles.errorBox}>{error}</div>}
      {notice && <p className={styles.muted}>{notice}</p>}

      {canManage && (
        <div className={styles.card}>
          <h3>Credentials</h3>
          {student?.has_credentials ? (
            <>
              <p className={styles.muted}>Logs in with {student.email || student.login_identifier}. {sessions ? `${sessions.length} active session(s).` : ''}</p>
              <div className={styles.formRow}>
                <button className={styles.btnSecondary} disabled={busy} onClick={withBusy(async () => {
                  const { reset_token } = await adminApi.resetStudentPassword(studentId)
                  setNotice(`Password reset. Link (shown once): ${window.location.origin}/?reset=${reset_token}`)
                })}>Reset password</button>
                <button className={styles.btnDanger} disabled={busy || !sessions?.length} onClick={withBusy(() => adminApi.revokeStudentSessions(studentId))}>Revoke all sessions</button>
              </div>
            </>
          ) : (
            <ConvertForm studentId={studentId} onDone={(msg) => { setNotice(msg); reload() }} />
          )}
        </div>
      )}

      <div className={styles.card}>
        <h3>Environment</h3>
        {!env ? <p className={styles.muted}>No Lab provisioned.</p> : (
          <>
            <p>Status: <StatusPill status={env.status} /> — Lab host: {env.lab_host_id} — created {new Date(env.created_at).toLocaleString()}</p>
            {env.last_active_at && <p className={styles.muted}>Last active: {new Date(env.last_active_at).toLocaleString()}</p>}
          </>
        )}
        <div className={styles.formRow} style={{ marginTop: '0.75rem' }}>
          {!env && <button className={styles.btn} disabled={busy} onClick={withBusy(() => adminApi.provisionStudentLab(studentId))}>Provision Lab</button>}
          {env && <button className={styles.btnSecondary} disabled={busy} onClick={withBusy(() => adminApi.resetEnvironment(env.environment_id))}>Reset/Recreate</button>}
          {env && (
            <button className={styles.btnDanger} disabled={busy} onClick={withBusy(async () => {
              if (window.confirm('Destroy this Lab? Progress is not affected.')) await adminApi.destroyEnvironment(env.environment_id)
            })}>Destroy Lab</button>
          )}
          {env && <button className={styles.linkBtn} onClick={loadEvents}>View event history</button>}
        </div>
        {events && (
          <table style={{ marginTop: '0.75rem' }}>
            <thead><tr><th>Event</th><th>Actor</th><th>When</th></tr></thead>
            <tbody>
              {events.map((e) => <tr key={e.id}><td>{e.event_type}</td><td>{e.actor}</td><td>{new Date(e.created_at).toLocaleString()}</td></tr>)}
            </tbody>
          </table>
        )}
      </div>

      <div className={styles.card}>
        <h3>Curriculum progress</h3>
        {!progress ? <p className={styles.muted}>Loading…</p> : progress.stages.map((s) => (
          <div key={s.id} style={{ marginBottom: '0.5rem' }}>
            <strong>{s.name}</strong>
            <div className={styles.muted}>
              {s.scenarios.filter((sc) => sc.status === 'completed').length}/{s.scenarios.length} complete
            </div>
          </div>
        ))}
      </div>

      <div className={styles.card}>
        <h3>Recent attempts</h3>
        {!attempts ? <p className={styles.muted}>Loading…</p> : attempts.length === 0 ? <p className={styles.muted}>None yet.</p> : (
          <table>
            <thead><tr><th>Scenario</th><th>Result</th><th>Checks</th><th>When</th></tr></thead>
            <tbody>
              {attempts.map((a) => (
                <tr key={a.attempt_id}>
                  <td>{a.scenario_id}</td>
                  <td><span className={`${styles.pill} ${a.result === 'passed' ? styles.pillOk : styles.pillWarn}`}>{a.result}</span></td>
                  <td className={styles.muted}>{a.validation_count ?? '—'}</td>
                  <td>{new Date(a.created_at).toLocaleString()}</td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>
    </>
  )
}

function ConvertForm({ studentId, onDone }) {
  const [email, setEmail] = useState('')
  const [loginIdentifier, setLoginIdentifier] = useState('')
  const [busy, setBusy] = useState(false)
  const [error, setError] = useState(null)

  const submit = async (e) => {
    e.preventDefault()
    setBusy(true); setError(null)
    try {
      const { activation_token } = await adminApi.convertStudent(studentId, {
        email: email.trim() || undefined, login_identifier: loginIdentifier.trim() || undefined,
      })
      onDone(`Converted. Activation link (shown once): ${window.location.origin}/?activate=${activation_token}`)
    } catch (e) { setError(e.message) } finally { setBusy(false) }
  }

  return (
    <form onSubmit={submit}>
      <p className={styles.muted}>Still a pilot account (no login). Give it an email or login ID to convert it to a real, password-protected account.</p>
      {error && <div className={styles.errorBox}>{error}</div>}
      <div className={styles.formRow}>
        <div><label className={styles.label}>Email</label>
          <input className={styles.input} type="email" value={email} onChange={(e) => setEmail(e.target.value)} /></div>
        <div><label className={styles.label}>Login ID</label>
          <input className={styles.input} value={loginIdentifier} onChange={(e) => setLoginIdentifier(e.target.value)} /></div>
        <div><button className={styles.btn} disabled={busy || (!email.trim() && !loginIdentifier.trim())}>{busy ? 'Converting…' : 'Convert'}</button></div>
      </div>
    </form>
  )
}