// admin.jsx — desktop dashboard: live "who's here", members roster, student drill-down.
const { useState: aUseState, useMemo: aUseMemo } = React;

function Admin({ activities, present, students, trend, trendLabels, user, onLogout }) {
  const { Icon, useNow } = window;
  const now = useNow(1000);
  const [tab, setTab] = aUseState('live'); // live | members | activities
  const [selId, setSelId] = aUseState(null);
  const [editStudent, setEditStudent] = aUseState(null);
  const [signInStudent, setSignInStudent] = aUseState(null);
  const [signOutAllConfirm, setSignOutAllConfirm] = aUseState(null);
  const [showAddStudent, setShowAddStudent] = aUseState(false);
  const [showAddActivity, setShowAddActivity] = aUseState(false);

  const allById = aUseMemo(() => Object.fromEntries(activities.map((a) => [a.id, a])), [activities]);
  const presentMap = aUseMemo(() => Object.fromEntries(present.map((p) => [p.studentId, p])), [present]);

  function open(id) { setSelId(id); }
  function closeDetail() { setSelId(null); setEditStudent(null); setSignInStudent(null); }
  function openEdit(student) { setEditStudent(student); }
  function openSignIn(student) { setSignInStudent(student); }

  async function handleSignOut(studentId) {
    try {
      await window.apiAdapter.signOut(studentId);
      // Data will refresh automatically via event listener
    } catch (error) {
      console.error('Sign out failed:', error);
      alert('Failed to sign out student. Please try again.');
    }
  }

  async function handleSignIn(studentId, activityId) {
    try {
      await window.apiAdapter.signIn(studentId, activityId);
      // Data will refresh automatically via event listener
    } catch (error) {
      console.error('Sign in failed:', error);
      alert('Failed to sign in student. Please try again.');
      throw error;
    }
  }

  async function handleSignOutAll() {
    try {
      setSignOutAllConfirm({ loading: true });
      await window.apiAdapter.signOutAll();
      setSignOutAllConfirm(null);
    } catch (error) {
      console.error('Sign out all failed:', error);
      setSignOutAllConfirm({ loading: false, error: error.message });
    }
  }

  return (
    <div className="admin">
      <div className="admin-head">
        <div className="brand">
          <img src="assets/logo-robot.png" className="pixel" alt="" />
          <span className="word">BotBuilders</span>
        </div>
        <div className="admin-tabs">
          <button className={'admin-tab' + (tab === 'live' && !selId ? ' on' : '')} onClick={() => { setTab('live'); closeDetail(); }}>Live</button>
          <button className={'admin-tab' + (tab === 'members' || selId ? ' on' : '')} onClick={() => { setTab('members'); closeDetail(); }}>Members</button>
          <button className={'admin-tab' + (tab === 'activities' ? ' on' : '')} onClick={() => { setTab('activities'); closeDetail(); }}>Activities</button>
        </div>
        <span className="live"><span className="dot"></span> Live · synced just now</span>
        <div className="admin-user">
          <span className="user-name">{user?.full_name || user?.username}</span>
          <button className="logout-btn" onClick={onLogout} title="Logout">
            <Icon name="log-out" size={16} />
          </button>
        </div>
      </div>

      <div className="admin-scroll">
        <div className="admin-wrap">
          {selId
            ? <StudentDetail s={students.find((x) => x.id === selId)} present={presentMap[selId]} allById={allById} now={now} onBack={closeDetail} onEdit={openEdit} onSignOut={handleSignOut} onOpenSignIn={openSignIn} />
            : tab === 'live'
              ? <Dashboard activities={activities} present={present} students={students} allById={allById} trend={trend} trendLabels={trendLabels} now={now} onOpen={open} onOpenSignOutAll={() => setSignOutAllConfirm({ loading: false })} />
              : tab === 'members'
                ? <Members students={students} presentMap={presentMap} onOpen={open} onSignOut={handleSignOut} onOpenAddStudent={() => setShowAddStudent(true)} />
                : <ActivityManager activities={activities} students={students} onOpenAddActivity={() => setShowAddActivity(true)} />}
        </div>
      </div>

      {editStudent && (
        <EditStudentForm
          student={editStudent}
          activities={activities}
          onSubmit={async (studentData) => {
            try {
              await window.apiAdapter.updateStudent(editStudent.id, studentData);
              setEditStudent(null);
            } catch (error) {
              console.error('Failed to update student:', error);
              throw error; // Let the form handle the error display
            }
          }}
          onCancel={() => setEditStudent(null)}
        />
      )}

      {signInStudent && (
        <SignInStudentModal
          student={signInStudent}
          allById={allById}
          onSignIn={async (activityId) => {
            await handleSignIn(signInStudent.id, activityId);
            setSignInStudent(null);
          }}
          onCancel={() => setSignInStudent(null)}
        />
      )}

      {signOutAllConfirm && (
        <SignOutAllModal
          count={present.length}
          state={signOutAllConfirm}
          onConfirm={handleSignOutAll}
          onCancel={() => setSignOutAllConfirm(null)}
        />
      )}

      {showAddStudent && (
        <AddStudentForm
          activities={activities}
          onSubmit={async (studentData) => {
            await window.apiAdapter.createStudent(studentData);
          }}
          onCancel={() => setShowAddStudent(false)}
        />
      )}

      {showAddActivity && (
        <AddActivityForm
          onSubmit={async (activityData) => {
            await window.apiAdapter.createActivity(activityData);
            setShowAddActivity(false);
          }}
          onCancel={() => setShowAddActivity(false)}
        />
      )}
    </div>
  );
}

/* ---------------- LIVE DASHBOARD ---------------- */
function Dashboard({ present, students, allById, trend, trendLabels, now, onOpen, onOpenSignOutAll }) {
  const { Icon, Avatar, ActivityTag } = window;
  const sById = aUseMemo(() => Object.fromEntries(students.map((s) => [s.id, s])), [students]);

  // today stats
  const startOfToday = new Date(now); startOfToday.setHours(0, 0, 0, 0);
  const todayStart = startOfToday.getTime();
  const presentIds = new Set(present.map((p) => p.studentId));
  let hoursToday = 0;
  const distinctToday = new Set(presentIds);
  students.forEach((s) => {
    if (s.sessions && Array.isArray(s.sessions)) {
      s.sessions.forEach((ss) => {
        if (ss.inE >= todayStart) { hoursToday += ss.hrs; distinctToday.add(s.id); }
      });
    }
  });
  present.forEach((p) => { hoursToday += (now - p.inE) / 3600000; });

  // breakdown by activity (present only)
  const brk = {};
  present.forEach((p) => {
    (p.activities || [p.activity]).forEach(activityId => {
      brk[activityId] = (brk[activityId] || 0) + 1;
    });
  });
  const brkRows = Object.entries(brk)
    .map(([id, ct]) => ({ a: allById[id], ct }))
    .filter((r) => r.a)
    .sort((x, y) => y.ct - x.ct);
  const maxBrk = Math.max(1, ...brkRows.map((r) => r.ct));

  // trend
  const maxTrend = Math.max(...trend, 1);

  return (
    <div className="fade">
      <div className="page-title">
        <div>
          <div className="eyebrow">Live</div>
          <h1>Who&rsquo;s in the workshop</h1>
        </div>
        <div className="when">{new Date(now).toLocaleDateString('en-AU', { weekday: 'long', day: 'numeric', month: 'long' })} · {new Date(now).toLocaleTimeString('en-AU', { hour: 'numeric', minute: '2-digit', hour12: true })}</div>
      </div>

      <div className="stat-row">
        <div className="stat-card hero">
          <img src="assets/logo-robot.png" className="pixel rb" alt="" />
          <div>
            <div className="lbl">In the building now</div>
            <div className="big">{present.length}</div>
            <div className="meta">builders signed in across {brkRows.length} {brkRows.length === 1 ? 'activity' : 'activities'}</div>
          </div>
        </div>
        <div className="stat-card">
          <div className="k">Signed in today</div>
          <div className="v">{distinctToday.size}</div>
          <div className="vsub">unique builders</div>
        </div>
        <div className="stat-card">
          <div className="k">Workshop hours today</div>
          <div className="v">{Math.round(hoursToday)}<small> h</small></div>
          <div className="vsub">{present.length} session{present.length === 1 ? '' : 's'} still running</div>
        </div>
      </div>

      <div className="cols">
        <div className="panel">
          <div className="panel-head">
            <h3>Here now</h3>
            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
              <span className="badge-ct">{present.length} signed in</span>
              {present.length > 0 && (
                <button
                  className="btn-danger btn-sm"
                  onClick={onOpenSignOutAll}
                >
                  <Icon name="log-out" size={14} />
                  Sign Out All
                </button>
              )}
            </div>
          </div>
          {present.length === 0
            ? <div className="empty"><img src="assets/logo-robot.png" className="pixel" alt="" /><div>Nobody&rsquo;s tapped in yet.</div></div>
            : (
              <table className="tbl">
                <thead><tr><th>Builder</th><th>Activity</th><th>Signed in</th><th>Duration</th><th>Via</th></tr></thead>
                <tbody>
                  {present.map((p) => {
                    const s = sById[p.studentId];
                    return (
                      <tr key={p.studentId} onClick={() => onOpen(p.studentId)}>
                        <td>
                          <div className="cell-name">
                            <Avatar s={s} />
                            <div><div className="nm">{s.name}</div><div className="mt">Yr {s.grade}</div></div>
                          </div>
                        </td>
                        <td>
                          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                            {(p.activities || [p.activity]).map(activityId => (
                              <ActivityTag key={activityId} a={allById[activityId]} />
                            ))}
                          </div>
                        </td>
                        <td>{window.fmtTime(p.inE)}</td>
                        <td className="dur">{window.fmtDur(now - p.inE)}</td>
                        <td><span className="via"><Icon name={p.via === 'tag' ? 'radio' : 'pencil'} size={13} /> {p.via}</span></td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            )}
        </div>

        <div className="panel">
          <div className="panel-head"><h3>By activity</h3><span className="badge-ct">now</span></div>
          <div className="brk">
            {brkRows.length === 0 && <div className="empty" style={{ padding: 24 }}>No active sessions</div>}
            {brkRows.map((r) => (
              <div key={r.a.id} className="brk-row">
                <span className="ic" style={{ background: r.a.color }}><Icon name={r.a.icon} size={17} style={{ color: '#fff' }} /></span>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div className="nm">{r.a.short_name}</div>
                  <div className="bar" style={{ marginTop: 6 }}><i style={{ width: (r.ct / maxBrk * 100) + '%', background: r.a.color }}></i></div>
                </div>
                <span className="ct">{r.ct}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="panel" style={{ marginTop: 16 }}>
        <div className="panel-head">
          <h3>Attendance trend</h3>
          <span className="badge-ct">unique builders · last 8 weeks</span>
        </div>
        <div className="chart">
          <div className="bars">
            {trend.map((v, i) => (
              <div key={i} className={'bar-col' + (i === trend.length - 1 ? ' today' : '')}>
                <div className="col" style={{ height: (v / maxTrend * 100) + '%' }}><span className="n">{v}</span></div>
                <span className="xl">{trendLabels[i]}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

    </div>
  );
}

function SignOutAllModal({ count, state, onConfirm, onCancel }) {
  const { Icon } = window;

  return (
    <div className="modal-overlay">
      <div className="modal-card">
        <div className="modal-header">
          <h3>Sign Out All Students</h3>
          <button className="modal-close" onClick={onCancel} disabled={state.loading}>
            <Icon name="x" size={20} />
          </button>
        </div>
        <div className="modal-body">
          <div style={{ marginBottom: 16 }}>
            <div className="warning-message">
              <Icon name="alert-triangle" size={16} />
              This will sign out all {count} student{count === 1 ? '' : 's'} currently in the workshop.
            </div>
          </div>

          {state.error && (
            <div className="error-message" style={{ marginBottom: 16 }}>
              <Icon name="alert-circle" size={16} />
              {state.error}
            </div>
          )}

          <p style={{ marginBottom: 16, color: 'var(--fg2)' }}>
            This action is typically used at the end of the day to clear all active sessions.
            Are you sure you want to continue?
          </p>
        </div>
        <div className="modal-footer">
          <button className="btn-secondary" onClick={onCancel} disabled={state.loading}>
            Cancel
          </button>
          <button className="btn-danger" onClick={onConfirm} disabled={state.loading}>
            {state.loading ? 'Signing Out...' : 'Sign Out All'}
          </button>
        </div>
      </div>
    </div>
  );
}

/* ---------------- MEMBERS ROSTER ---------------- */
function Members({ students, presentMap, onOpen, onOpenAddStudent, onSignOut }) {
  const { Avatar, Icon } = window;
  const [q, setQ] = aUseState('');
  const [filter, setFilter] = aUseState('all'); // all | in | <activityId>
  const [deleteConfirm, setDeleteConfirm] = aUseState(null); // { student, loading }

  const handleDeleteStudent = async (student) => {
    try {
      setDeleteConfirm({ student, loading: true });

      await window.apiAdapter.deleteStudent(student.id);

      setDeleteConfirm(null);
      // Data will refresh automatically via event listener
    } catch (error) {
      console.error('Delete failed:', error);
      setDeleteConfirm({ student, loading: false, error: error.message });
    }
  };

  const ql = q.trim().toLowerCase();
  let list = students.filter((s) => !ql || s.name.toLowerCase().includes(ql));
  if (filter === 'in') list = list.filter((s) => presentMap[s.id]);
  else if (filter !== 'all') list = list.filter((s) => s.enrolled.includes(filter));
  list = [...list].sort((a, b) => (b.seasonHours || 0) - (a.seasonHours || 0));

  const chips = [
    { id: 'all', label: 'All builders' },
    { id: 'in', label: 'In now' },
    ...window.ALL_ACTIVITIES.map((a) => ({ id: a.id, label: a.short_name })),
  ];

  return (
    <div className="fade">
      <div className="page-title">
        <div>
          <div className="eyebrow">Roster</div>
          <h1>Members</h1>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          <div className="when">{students.length} builders · season 2026</div>
          <button className="btn-primary" onClick={onOpenAddStudent}>
            <Icon name="plus" size={16} />
            Add Student
          </button>
        </div>
      </div>

      <div className="toolbar">
        <div className="search">
          <Icon name="search" size={18} style={{ color: 'var(--fg3)' }} />
          <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search by name&hellip;" />
        </div>
      </div>
      <div className="toolbar" style={{ flexWrap: 'wrap' }}>
        {chips.map((c) => (
          <button key={c.id} className={'filter-chip' + (filter === c.id ? ' on' : '')} onClick={() => setFilter(c.id)}>{c.label}</button>
        ))}
      </div>

      <div className="roster-grid">
        {list.map((s) => {
          const here = presentMap[s.id];
          return (
            <div key={s.id} className="mcard">
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, flex: 1, cursor: 'pointer' }} onClick={() => onOpen(s.id)}>
                <Avatar s={s} />
                <div style={{ minWidth: 0, flex: 1 }}>
                  <div className="nm" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <span className={'status-dot ' + (here ? 'in' : 'out')}></span>{s.name}
                  </div>
                  <div className="mt">Yr {s.grade}</div>
                </div>
                <div className="hrs"><b>{window.fmtHrs(s.seasonHours || 0).replace('h', '')}</b><span>hrs season</span></div>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
                {here && (
                  <button
                    className="btn-icon-danger"
                    onClick={(e) => {
                      e.stopPropagation();
                      onSignOut && onSignOut(s.id);
                    }}
                    title="Sign out student"
                  >
                    <Icon name="log-out" size={14} />
                  </button>
                )}
                <button
                  className="btn-icon-danger"
                  onClick={(e) => {
                    e.stopPropagation();
                    setDeleteConfirm({ student: s, loading: false });
                  }}
                  title="Delete student"
                >
                  <Icon name="trash" size={14} />
                </button>
              </div>
            </div>
          );
        })}
        {list.length === 0 && <div className="empty" style={{ gridColumn: '1 / -1' }}>No builders match.</div>}
      </div>

      {deleteConfirm && (
        <div className="modal-overlay">
          <div className="modal-card">
            <div className="modal-header">
              <h3>Delete Student</h3>
              <button className="modal-close" onClick={() => !deleteConfirm.loading && setDeleteConfirm(null)}>
                <Icon name="x" size={20} />
              </button>
            </div>
            <div className="modal-body">
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
                <Avatar s={deleteConfirm.student} />
                <div>
                  <div className="nm">{deleteConfirm.student.name}</div>
                  <div className="mt">Yr {deleteConfirm.student.grade}</div>
                </div>
              </div>
              <p>Are you sure you want to delete this student? This action cannot be undone and will remove:</p>
              <ul style={{ margin: '12px 0', paddingLeft: 20 }}>
                <li>Student profile and information</li>
                <li>All session history and attendance records</li>
                <li>Activity enrollments</li>
              </ul>
              {deleteConfirm.error && (
                <div className="error-message" style={{ marginTop: 16 }}>
                  <Icon name="alert-triangle" size={16} />
                  {deleteConfirm.error}
                </div>
              )}
            </div>
            <div className="modal-footer">
              <button
                className="btn-secondary"
                onClick={() => setDeleteConfirm(null)}
                disabled={deleteConfirm.loading}
              >
                Cancel
              </button>
              <button
                className="btn-danger"
                onClick={() => handleDeleteStudent(deleteConfirm.student)}
                disabled={deleteConfirm.loading}
              >
                {deleteConfirm.loading ? (
                  <>
                    <Icon name="loader" size={16} />
                    Deleting...
                  </>
                ) : (
                  <>
                    <Icon name="trash" size={16} />
                    Delete Student
                  </>
                )}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

/* ---------------- STUDENT DETAIL ---------------- */
function StudentDetail({ s, present, allById, now, onBack, onEdit, onSignOut, onOpenSignIn }) {
  const { Avatar, Icon, ActivityTag } = window;
  if (!s) return null;

  const liveMs = present ? now - present.inE : 0;
  const weekH = (s.weekHours || 0) + (present ? liveMs / 3600000 : 0);
  const seasonH = (s.seasonHours || 0) + (present ? liveMs / 3600000 : 0);
  const sessions = s.sessions || [];
  const sessCount = sessions.length + (present ? 1 : 0);
  const avg = sessions.length ? (s.seasonHours || 0) / sessions.length : 0;

  // hours by activity
  const hb = { ...(s.byActivity || {}) };
  if (present) {
    (present.activities || [present.activity]).forEach(activityId => {
      hb[activityId] = (hb[activityId] || 0) + liveMs / 3600000;
    });
  }
  const hbRows = Object.entries(hb).map(([id, h]) => ({ a: allById[id], h })).filter((r) => r.a).sort((x, y) => y.h - x.h);
  const maxHb = Math.max(...hbRows.map((r) => r.h), 0.1);

  const weeklyHours = s.weeklyHours || [];
  const maxWk = Math.max(...weeklyHours, 0.1);

  return (
    <div className="fade">
      <button className="back-link" onClick={onBack}><Icon name="arrow-left" size={16} /> Back to members</button>

      <div className="detail-head">
        <Avatar s={s} />
        <div style={{ flex: 1 }}>
          <h1>{s.name}</h1>
          <div className="meta">
            <span className="it"><Icon name="graduation-cap" size={15} /> Year {s.grade}</span>
            <span className="it"><Icon name="radio" size={15} /> <code>{s.rfid}</code></span>
          </div>
          <div className="meta" style={{ marginTop: 10 }}>
            {s.enrolled.map((id) => allById[id] && <ActivityTag key={id} a={allById[id]} />)}
          </div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
          {present
            ? <span className="status-pill in"><Icon name="circle" size={10} style={{ fill: '#fff' }} /> In · {(present.activities || [present.activity]).map(id => allById[id]?.short_name).filter(Boolean).join(', ')}</span>
            : <span className="status-pill out">Signed out</span>}
          <button
            className="btn-secondary btn-sm"
            onClick={() => onEdit && onEdit(s)}
            title="Edit student"
          >
            <Icon name="edit" size={14} />
            Edit
          </button>
          {present ? (
            <button
              className="btn-danger btn-sm"
              onClick={() => onSignOut && onSignOut(s.id)}
              title="Sign out student"
            >
              <Icon name="log-out" size={14} />
              Sign Out
            </button>
          ) : (
            <button
              className="btn-primary btn-sm"
              onClick={() => onOpenSignIn && onOpenSignIn(s)}
              title="Sign in student"
            >
              <Icon name="log-in" size={14} />
              Sign In
            </button>
          )}
        </div>
      </div>

      <div className="stat4">
        <div className="mini"><div className="k">This week</div><div className="v">{window.fmtHrs(weekH)}</div></div>
        <div className="mini accent"><div className="k">This season</div><div className="v">{window.fmtHrs(seasonH)}</div></div>
        <div className="mini"><div className="k">Sessions</div><div className="v">{sessCount}</div></div>
        <div className="mini"><div className="k">Avg session</div><div className="v">{window.fmtHrs(avg)}</div></div>
      </div>

      <div className="detail-cols">
        <div>
          <div className="panel">
            <div className="panel-head"><h3>Hours by activity</h3></div>
            <div style={{ padding: '4px 0' }}>
              {hbRows.map((r) => (
                <div key={r.a.id} className="hbar-row">
                  <div className="nm"><span className="sw" style={{ background: r.a.color }}></span>{r.a.short_name}</div>
                  <div className="bar"><i style={{ width: (r.h / maxHb * 100) + '%', background: r.a.color }}></i></div>
                  <span className="hh">{window.fmtHrs(r.h)}</span>
                </div>
              ))}
            </div>
          </div>

          <div className="panel" style={{ marginTop: 16 }}>
            <div className="panel-head"><h3>Weekly hours</h3><span className="badge-ct">last 10 weeks</span></div>
            <div className="chart">
              <div className="bars" style={{ height: 110 }}>
                {weeklyHours.map((v, i) => (
                  <div key={i} className={'bar-col' + (i === weeklyHours.length - 1 ? ' today' : '')}>
                    <div className="col" style={{ height: (v / maxWk * 100) + '%' }}></div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>

        <div className="panel">
          <div className="panel-head"><h3>Recent sessions</h3><span className="badge-ct">{sessions.length} logged</span></div>
          <table className="tbl sess-tbl">
            <thead><tr><th>Date</th><th>Activity</th><th>In</th><th>Out</th><th>Hours</th></tr></thead>
            <tbody>
              {present && (
                <tr>
                  <td className="date">Today</td>
                  <td>
                    <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                      {(present.activities || [present.activity]).map(activityId => (
                        <ActivityTag key={activityId} a={allById[activityId]} />
                      ))}
                    </div>
                  </td>
                  <td className="tm">{window.fmtTime(present.inE)}</td>
                  <td><span className="live-tag"><span className="dot"></span>Now</span></td>
                  <td className="dur">{window.fmtDur(liveMs)}</td>
                </tr>
              )}
              {sessions.slice(0, 9).map((ss, i) => (
                <tr key={i}>
                  <td className="date">{window.fmtDayTime(ss.inE)}</td>
                  <td><ActivityTag a={allById[ss.activity]} /></td>
                  <td className="tm">{window.fmtTime(ss.inE)}</td>
                  <td className="tm">{window.fmtTime(ss.outE)}</td>
                  <td className="dur">{window.fmtHrs(ss.hrs)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

    </div>
  );
}

function SignInStudentModal({ student, allById, onSignIn, onCancel }) {
  const { Icon } = window;
  const [selected, setSelected] = aUseState([]);
  const [loading, setLoading] = aUseState(false);
  const [error, setError] = aUseState('');

  const toggleActivity = (activityId) => {
    setSelected(current => current.includes(activityId)
      ? current.filter(id => id !== activityId)
      : [...current, activityId]);
  };

  const submit = async () => {
    if (selected.length === 0) return;
    setLoading(true);
    setError('');
    try {
      await onSignIn(selected);
    } catch (submitError) {
      setError(submitError.message || 'Failed to sign in student.');
      setLoading(false);
    }
  };

  return (
    <div className="modal-overlay">
      <div className="modal-card">
        <div className="modal-header">
          <h2>Sign in {student.name}</h2>
          <button className="modal-close" onClick={onCancel}>
            <Icon name="x" size={20} />
          </button>
        </div>
        <div className="modal-body">
          <p>Select which activity to sign {student.name} in to:</p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: '12px', marginTop: '16px' }}>
            {student.enrolled.map(activityId => {
              const activity = allById[activityId];
              if (!activity) return null;
              const isSelected = selected.includes(activityId);
              return (
                <button
                  key={activityId}
                  className="btn-primary"
                  onClick={() => toggleActivity(activityId)}
                  disabled={loading}
                  style={{
                    display: 'flex',
                    alignItems: 'center',
                    gap: '8px',
                    padding: '12px 16px',
                    backgroundColor: activity.color,
                    borderColor: activity.color,
                    justifyContent: 'flex-start',
                    opacity: isSelected ? 1 : 0.55,
                    boxShadow: isSelected ? '0 0 0 3px var(--bb-ink)' : 'none'
                  }}
                >
                  <Icon name={activity.icon} size={16} />
                  {activity.name}
                  {isSelected && <Icon name="check" size={16} style={{ marginLeft: 'auto' }} />}
                </button>
              );
            })}
            {student.enrolled.length === 0 && (
              <p style={{ color: 'var(--n500)', fontStyle: 'italic' }}>
                This student is not enrolled in any activities. Please edit their profile to add activity enrollments first.
              </p>
            )}
            {error && <div className="error-message">{error}</div>}
          </div>
        </div>
        <div className="modal-footer">
          <button className="btn-secondary" onClick={onCancel} disabled={loading}>
            Cancel
          </button>
          <button className="btn-primary" onClick={submit} disabled={selected.length === 0 || loading}>
            <Icon name={loading ? 'loader' : 'log-in'} size={16} />
            {loading ? 'Signing In...' : `Sign In${selected.length ? ` (${selected.length})` : ''}`}
          </button>
        </div>
      </div>
    </div>
  );
}

/* ---------------- ADD STUDENT FORM ---------------- */
function AddStudentForm({ activities, onSubmit, onCancel }) {
  const { Icon } = window;
  const [loading, setLoading] = aUseState(false);
  const [formData, setFormData] = aUseState({
    id: '',
    name: '',
    initials: '',
    avatar_color: '#18A0F0',
    grade: '',
    rfid_tag: '',
    pin: '',
    enrolled: []
  });
  const [errors, setErrors] = aUseState({});

  // Generate a unique student ID
  React.useEffect(() => {
    if (!formData.id && formData.name) {
      const initials = formData.name
        .split(' ')
        .map(word => word.charAt(0).toUpperCase())
        .join('');
      const timestamp = Date.now().toString().slice(-4);
      setFormData(prev => ({ ...prev, id: `S${timestamp}`, initials }));
    }
  }, [formData.name]);

  const handleChange = (field, value) => {
    setFormData(prev => ({ ...prev, [field]: value }));
    if (errors[field]) {
      setErrors(prev => ({ ...prev, [field]: '' }));
    }
  };

  const handleActivityToggle = (activityId) => {
    setFormData(prev => ({
      ...prev,
      enrolled: prev.enrolled.includes(activityId)
        ? prev.enrolled.filter(id => id !== activityId)
        : [...prev.enrolled, activityId]
    }));
  };

  const validateForm = () => {
    const newErrors = {};

    if (!formData.name.trim()) newErrors.name = 'Name is required';
    if (!formData.grade) newErrors.grade = 'Grade is required';
    if (!formData.pin || formData.pin.length < 4) newErrors.pin = 'PIN must be at least 4 digits';

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    if (!validateForm()) return;

    setLoading(true);
    try {
      // Convert grade to number and ensure required fields
      const studentData = {
        ...formData,
        grade: parseInt(formData.grade),
        pin: formData.pin.toString()
      };

      await onSubmit(studentData);
      onCancel(); // Close form on success
    } catch (error) {
      console.error('Error submitting student:', error);
      setErrors({ submit: 'Failed to create student. Please try again.' });
    } finally {
      setLoading(false);
    }
  };

  const avatarColors = [
    '#18A0F0', '#E03B36', '#2FAE4A', '#F2A41B', '#9C27B0',
    '#FF5722', '#607D8B', '#795548', '#3F51B5', '#009688'
  ];

  return (
    <div className="modal-overlay">
      <div className="modal">
        <div className="modal-header">
          <h2>Add New Student</h2>
          <button className="modal-close" onClick={onCancel}>
            <Icon name="x" size={20} />
          </button>
        </div>

        <form onSubmit={handleSubmit} className="add-student-form">
          {errors.submit && (
            <div className="error-message">
              <Icon name="alert-circle" size={16} />
              {errors.submit}
            </div>
          )}

          <div className="form-row">
            <div className="form-group">
              <label htmlFor="name">Full Name *</label>
              <input
                type="text"
                id="name"
                value={formData.name}
                onChange={(e) => handleChange('name', e.target.value)}
                className={errors.name ? 'error' : ''}
                placeholder="Enter student's full name"
              />
              {errors.name && <span className="error-text">{errors.name}</span>}
            </div>

            <div className="form-group">
              <label htmlFor="initials">Initials</label>
              <input
                type="text"
                id="initials"
                value={formData.initials}
                onChange={(e) => handleChange('initials', e.target.value.toUpperCase())}
                maxLength="3"
                placeholder="Auto-generated"
              />
            </div>
          </div>

          <div className="form-row">
            <div className="form-group">
              <label htmlFor="grade">Grade *</label>
              <select
                id="grade"
                value={formData.grade}
                onChange={(e) => handleChange('grade', e.target.value)}
                className={errors.grade ? 'error' : ''}
              >
                <option value="">Select grade</option>
                {[7, 8, 9, 10, 11, 12].map(grade => (
                  <option key={grade} value={grade}>{grade}</option>
                ))}
              </select>
              {errors.grade && <span className="error-text">{errors.grade}</span>}
            </div>

          </div>

          <div className="form-row">
            <div className="form-group">
              <label htmlFor="pin">PIN *</label>
              <input
                type="text"
                id="pin"
                value={formData.pin}
                onChange={(e) => handleChange('pin', e.target.value.replace(/\D/g, '').slice(0, 6))}
                className={errors.pin ? 'error' : ''}
                placeholder="4-6 digit PIN"
              />
              {errors.pin && <span className="error-text">{errors.pin}</span>}
            </div>

            <div className="form-group">
              <label htmlFor="rfid">RFID Tag (optional)</label>
              <input
                type="text"
                id="rfid"
                value={formData.rfid_tag}
                onChange={(e) => handleChange('rfid_tag', e.target.value)}
                placeholder="Scan or enter RFID"
              />
            </div>
          </div>

          <div className="form-group">
            <label>Avatar Color</label>
            <div className="color-picker">
              {avatarColors.map(color => (
                <button
                  key={color}
                  type="button"
                  className={`color-option ${formData.avatar_color === color ? 'selected' : ''}`}
                  style={{ backgroundColor: color }}
                  onClick={() => handleChange('avatar_color', color)}
                />
              ))}
            </div>
          </div>

          <div className="form-group">
            <label>Activities</label>
            <div className="activity-chips">
              {activities.map(activity => (
                <button
                  key={activity.id}
                  type="button"
                  className={`activity-chip ${formData.enrolled.includes(activity.id) ? 'selected' : ''}`}
                  style={{
                    '--activity-color': activity.color,
                    backgroundColor: formData.enrolled.includes(activity.id) ? activity.color : 'transparent',
                    borderColor: activity.color,
                    color: formData.enrolled.includes(activity.id) ? '#fff' : activity.color
                  }}
                  onClick={() => handleActivityToggle(activity.id)}
                >
                  {activity.short_name}
                </button>
              ))}
            </div>
          </div>

          <div className="form-actions">
            <button type="button" className="btn-secondary" onClick={onCancel}>
              Cancel
            </button>
            <button type="submit" className="btn-primary" disabled={loading}>
              {loading ? (
                <>
                  <Icon name="loader" size={16} />
                  Creating...
                </>
              ) : (
                <>
                  <Icon name="plus" size={16} />
                  Create Student
                </>
              )}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}

/* ---------------- ACTIVITY MANAGER ---------------- */
function ActivityManager({ activities, students, onOpenAddActivity }) {
  const { Icon } = window;
  const [deleteConfirm, setDeleteConfirm] = aUseState(null); // { activity, loading }

  const handleDeleteActivity = async (activity) => {
    try {
      setDeleteConfirm({ activity, loading: true });

      await window.apiAdapter.deleteActivity(activity.id);

      setDeleteConfirm(null);
      // Data will refresh automatically via event listener
    } catch (error) {
      console.error('Delete failed:', error);
      setDeleteConfirm({ activity, loading: false, error: error.message });
    }
  };

  // Count students enrolled in each activity
  const enrollmentCounts = activities.reduce((counts, activity) => {
    counts[activity.id] = students.filter(student =>
      student.enrolled && student.enrolled.includes(activity.id)
    ).length;
    return counts;
  }, {});

  return (
    <div className="fade">
      <div className="page-title">
        <div>
          <div className="eyebrow">Configuration</div>
          <h1>Activities</h1>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          <div className="when">{activities.length} activities · season 2026</div>
          <button className="btn-primary" onClick={onOpenAddActivity}>
            <Icon name="plus" size={16} />
            Add Activity
          </button>
        </div>
      </div>

      <div className="activities-grid">
        {activities.map((activity) => (
          <div key={activity.id} className="activity-card">
            <div className="activity-header">
              <div className="activity-info">
                <div className="activity-name" style={{ color: activity.color }}>
                  <Icon name={activity.icon} size={20} />
                  {activity.name}
                </div>
                <div className="activity-meta">
                  {activity.short_name} • {activity.code}
                </div>
              </div>
              <button
                className="btn-icon-danger"
                onClick={(e) => {
                  e.stopPropagation();
                  setDeleteConfirm({ activity, loading: false });
                }}
                title="Delete activity"
              >
                <Icon name="trash" size={14} />
              </button>
            </div>
            <div className="activity-stats">
              <div className="stat">
                <span className="stat-value">{enrollmentCounts[activity.id] || 0}</span>
                <span className="stat-label">Students Enrolled</span>
              </div>
            </div>
            <div className="activity-color-bar" style={{ backgroundColor: activity.color }}></div>
          </div>
        ))}
        {activities.length === 0 && (
          <div className="empty" style={{ gridColumn: '1 / -1' }}>
            <img src="assets/logo-robot.png" className="pixel" alt="" />
            <div>No activities configured yet.</div>
          </div>
        )}
      </div>

      {deleteConfirm && (
        <div className="modal-overlay">
          <div className="modal-card">
            <div className="modal-header">
              <h3>Delete Activity</h3>
              <button className="modal-close" onClick={() => !deleteConfirm.loading && setDeleteConfirm(null)}>
                <Icon name="x" size={20} />
              </button>
            </div>
            <div className="modal-body">
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
                <div className="activity-icon" style={{ color: deleteConfirm.activity.color }}>
                  <Icon name={deleteConfirm.activity.icon} size={24} />
                </div>
                <div>
                  <div className="nm">{deleteConfirm.activity.name}</div>
                  <div className="mt">{deleteConfirm.activity.short_name} • {deleteConfirm.activity.code}</div>
                </div>
              </div>
              <p>Are you sure you want to delete this activity? This action cannot be undone and will remove:</p>
              <ul style={{ margin: '12px 0', paddingLeft: 20 }}>
                <li>Activity definition and configuration</li>
                <li>All student enrollments for this activity</li>
                <li>All session history for this activity</li>
              </ul>
              {enrollmentCounts[deleteConfirm.activity.id] > 0 && (
                <div className="warning-message" style={{ marginTop: 16 }}>
                  <Icon name="alert-triangle" size={16} />
                  This activity has {enrollmentCounts[deleteConfirm.activity.id]} enrolled students.
                </div>
              )}
              {deleteConfirm.error && (
                <div className="error-message" style={{ marginTop: 16 }}>
                  <Icon name="alert-triangle" size={16} />
                  {deleteConfirm.error}
                </div>
              )}
            </div>
            <div className="modal-footer">
              <button
                className="btn-secondary"
                onClick={() => setDeleteConfirm(null)}
                disabled={deleteConfirm.loading}
              >
                Cancel
              </button>
              <button
                className="btn-danger"
                onClick={() => handleDeleteActivity(deleteConfirm.activity)}
                disabled={deleteConfirm.loading}
              >
                {deleteConfirm.loading ? (
                  <>
                    <Icon name="loader" size={16} />
                    Deleting...
                  </>
                ) : (
                  <>
                    <Icon name="trash" size={16} />
                    Delete Activity
                  </>
                )}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

/* ---------------- ADD ACTIVITY FORM ---------------- */
function AddActivityForm({ onSubmit, onCancel }) {
  const { Icon } = window;
  const [loading, setLoading] = aUseState(false);
  const [formData, setFormData] = aUseState({
    id: '',
    name: '',
    short_name: '',
    code: '',
    color: '#18A0F0',
    icon: 'zap'
  });
  const [errors, setErrors] = aUseState({});

  // Auto-generate ID from name
  React.useEffect(() => {
    if (formData.name && !formData.id) {
      const id = formData.name.toLowerCase().replace(/[^a-z0-9]/g, '-').replace(/-+/g, '-');
      setFormData(prev => ({ ...prev, id }));
    }
  }, [formData.name]);

  // Auto-generate short name and code from name
  React.useEffect(() => {
    if (formData.name && (!formData.short_name || !formData.code)) {
      const words = formData.name.split(' ').filter(word => word.length > 0);
      const short_name = words.length > 1
        ? words.map(w => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase()).join('')
        : formData.name;
      const code = words.map(w => w.charAt(0).toUpperCase()).join('').substring(0, 3);

      setFormData(prev => ({
        ...prev,
        short_name: prev.short_name || short_name,
        code: prev.code || code
      }));
    }
  }, [formData.name]);

  const handleChange = (field, value) => {
    setFormData(prev => ({ ...prev, [field]: value }));
    if (errors[field]) {
      setErrors(prev => ({ ...prev, [field]: null }));
    }
  };

  const validate = () => {
    const newErrors = {};

    if (!formData.name.trim()) newErrors.name = 'Activity name is required';
    if (!formData.short_name.trim()) newErrors.short_name = 'Short name is required';
    if (!formData.code.trim()) newErrors.code = 'Code is required';
    if (!formData.icon.trim()) newErrors.icon = 'Icon is required';

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    if (!validate()) return;

    setLoading(true);
    try {
      await onSubmit(formData);
    } catch (error) {
      console.error('Submit failed:', error);
    } finally {
      setLoading(false);
    }
  };

  const colorOptions = [
    '#18A0F0', '#10B981', '#F59E0B', '#EF4444',
    '#8B5CF6', '#EC4899', '#06B6D4', '#84CC16'
  ];

  const iconOptions = [
    'zap', 'cpu', 'settings', 'tool', 'target', 'award',
    'star', 'heart', 'shield', 'code', 'book', 'users'
  ];

  return (
    <div className="modal-overlay">
      <div className="modal">
        <div className="modal-header">
          <h2>Add New Activity</h2>
          <button className="modal-close" onClick={onCancel} disabled={loading}>
            <Icon name="x" size={20} />
          </button>
        </div>
        <form onSubmit={handleSubmit} className="add-student-form">
            <div className="form-row">
              <div className="form-group">
                <label htmlFor="name">Activity Name *</label>
                <input
                  type="text"
                  id="name"
                  value={formData.name}
                  onChange={(e) => handleChange('name', e.target.value)}
                  className={errors.name ? 'error' : ''}
                  placeholder="First Tech Challenge"
                />
                {errors.name && <span className="error-text">{errors.name}</span>}
              </div>
            </div>

            <div className="form-row">
              <div className="form-group">
                <label htmlFor="short_name">Short Name *</label>
                <input
                  type="text"
                  id="short_name"
                  value={formData.short_name}
                  onChange={(e) => handleChange('short_name', e.target.value)}
                  className={errors.short_name ? 'error' : ''}
                  placeholder="FTC"
                />
                {errors.short_name && <span className="error-text">{errors.short_name}</span>}
              </div>

              <div className="form-group">
                <label htmlFor="code">Code *</label>
                <input
                  type="text"
                  id="code"
                  value={formData.code}
                  onChange={(e) => handleChange('code', e.target.value)}
                  className={errors.code ? 'error' : ''}
                  placeholder="FTC"
                  maxLength="3"
                />
                {errors.code && <span className="error-text">{errors.code}</span>}
              </div>
            </div>

            <div className="form-row">
              <div className="form-group">
                <label>Color *</label>
                <div className="color-picker">
                  {colorOptions.map(color => (
                    <button
                      key={color}
                      type="button"
                      className={`color-option ${formData.color === color ? 'selected' : ''}`}
                      style={{ backgroundColor: color }}
                      onClick={() => handleChange('color', color)}
                    />
                  ))}
                </div>
              </div>
            </div>

            <div className="form-row">
              <div className="form-group">
                <label>Icon *</label>
                <div className="icon-picker">
                  {iconOptions.map(iconName => (
                    <button
                      key={iconName}
                      type="button"
                      className={`icon-option ${formData.icon === iconName ? 'selected' : ''}`}
                      onClick={() => handleChange('icon', iconName)}
                    >
                      <Icon name={iconName} size={20} />
                    </button>
                  ))}
                </div>
                {errors.icon && <span className="error-text">{errors.icon}</span>}
              </div>
            </div>

            <div className="form-row">
              <div className="form-group">
                <label>Preview</label>
                <div className="activity-preview" style={{ color: formData.color }}>
                  <Icon name={formData.icon} size={24} />
                  <span>{formData.name || 'Activity Name'}</span>
                  <small>{formData.short_name || 'SHORT'} • {formData.code || 'COD'}</small>
                </div>
              </div>
            </div>

          <div className="form-actions">
            <button type="button" className="btn-secondary" onClick={onCancel} disabled={loading}>
              Cancel
            </button>
            <button type="submit" className="btn-primary" disabled={loading}>
              {loading ? (
                <>
                  <Icon name="loader" size={16} />
                  Creating...
                </>
              ) : (
                <>
                  <Icon name="plus" size={16} />
                  Create Activity
                </>
              )}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}

/* ---------------- EDIT STUDENT FORM ---------------- */
function EditStudentForm({ student, activities, onSubmit, onCancel }) {
  const { Icon } = window;
  const [loading, setLoading] = aUseState(false);
  const [formData, setFormData] = aUseState({
    id: student.id,
    name: student.name,
    initials: student.initials,
    avatar_color: student.av || student.avatar_color,
    grade: student.grade,
    rfid_tag: student.rfid || student.rfid_tag,
    pin: student.pin,
    enrolled: student.enrolled || []
  });
  const [errors, setErrors] = aUseState({});

  const handleChange = (field, value) => {
    setFormData(prev => ({ ...prev, [field]: value }));
    if (errors[field]) {
      setErrors(prev => ({ ...prev, [field]: '' }));
    }
  };

  const handleActivityToggle = (activityId) => {
    setFormData(prev => ({
      ...prev,
      enrolled: prev.enrolled.includes(activityId)
        ? prev.enrolled.filter(id => id !== activityId)
        : [...prev.enrolled, activityId]
    }));
  };

  const validateForm = () => {
    const newErrors = {};

    if (!formData.name.trim()) newErrors.name = 'Name is required';
    if (!formData.grade) newErrors.grade = 'Grade is required';
    if (!formData.pin || formData.pin.length < 4) newErrors.pin = 'PIN must be at least 4 digits';

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    if (!validateForm()) return;

    setLoading(true);
    try {
      // Convert grade to number and ensure required fields
      const studentData = {
        ...formData,
        grade: parseInt(formData.grade),
        pin: formData.pin.toString()
      };

      await onSubmit(studentData);
      onCancel(); // Close form on success
    } catch (error) {
      console.error('Error updating student:', error);
      setErrors({ submit: 'Failed to update student. Please try again.' });
    } finally {
      setLoading(false);
    }
  };

  const avatarColors = [
    '#18A0F0', '#E03B36', '#2FAE4A', '#F2A41B', '#9C27B0',
    '#FF5722', '#607D8B', '#795548', '#3F51B5', '#009688'
  ];

  return (
    <div className="modal-overlay">
      <div className="modal">
        <div className="modal-header">
          <h2>Edit Student</h2>
          <button className="modal-close" onClick={onCancel}>
            <Icon name="x" size={20} />
          </button>
        </div>

        <form onSubmit={handleSubmit} className="add-student-form">
          {errors.submit && (
            <div className="error-message">
              <Icon name="alert-circle" size={16} />
              {errors.submit}
            </div>
          )}

          <div className="form-row">
            <div className="form-group">
              <label htmlFor="edit-name">Full Name *</label>
              <input
                type="text"
                id="edit-name"
                value={formData.name}
                onChange={(e) => handleChange('name', e.target.value)}
                className={errors.name ? 'error' : ''}
                placeholder="Enter student's full name"
              />
              {errors.name && <span className="error-text">{errors.name}</span>}
            </div>

            <div className="form-group">
              <label htmlFor="edit-initials">Initials</label>
              <input
                type="text"
                id="edit-initials"
                value={formData.initials}
                onChange={(e) => handleChange('initials', e.target.value.toUpperCase())}
                maxLength="3"
                placeholder="e.g. JD"
              />
            </div>
          </div>

          <div className="form-row">
            <div className="form-group">
              <label htmlFor="edit-grade">Grade *</label>
              <select
                id="edit-grade"
                value={formData.grade}
                onChange={(e) => handleChange('grade', e.target.value)}
                className={errors.grade ? 'error' : ''}
              >
                <option value="">Select grade</option>
                {[7, 8, 9, 10, 11, 12].map(grade => (
                  <option key={grade} value={grade}>Year {grade}</option>
                ))}
              </select>
              {errors.grade && <span className="error-text">{errors.grade}</span>}
            </div>

            <div className="form-group">
              <label htmlFor="edit-pin">PIN *</label>
              <input
                type="text"
                id="edit-pin"
                value={formData.pin}
                onChange={(e) => handleChange('pin', e.target.value.replace(/\D/g, '').slice(0, 6))}
                className={errors.pin ? 'error' : ''}
                placeholder="4-6 digits"
                maxLength="6"
              />
              {errors.pin && <span className="error-text">{errors.pin}</span>}
            </div>
          </div>

          <div className="form-group">
            <label htmlFor="edit-rfid">RFID Tag</label>
            <input
              type="text"
              id="edit-rfid"
              value={formData.rfid_tag}
              onChange={(e) => handleChange('rfid_tag', e.target.value)}
              placeholder="e.g. BB-A1B2C3"
            />
          </div>

          <div className="form-group">
            <label>Avatar Color</label>
            <div className="color-picker">
              {avatarColors.map(color => (
                <button
                  key={color}
                  type="button"
                  className={`color-option ${formData.avatar_color === color ? 'selected' : ''}`}
                  style={{ backgroundColor: color }}
                  onClick={() => handleChange('avatar_color', color)}
                  title={color}
                />
              ))}
            </div>
          </div>

          <div className="form-group">
            <label>Activities</label>
            <div className="activity-picker">
              {activities.map(activity => (
                <button
                  key={activity.id}
                  type="button"
                  className={`activity-chip ${formData.enrolled.includes(activity.id) ? 'selected' : ''}`}
                  style={{
                    borderColor: formData.enrolled.includes(activity.id) ? activity.color : '#ddd',
                    backgroundColor: formData.enrolled.includes(activity.id) ? activity.color + '20' : 'transparent'
                  }}
                  onClick={() => handleActivityToggle(activity.id)}
                >
                  {activity.short_name}
                </button>
              ))}
            </div>
          </div>

          <div className="form-actions">
            <button
              type="button"
              className="btn-secondary"
              onClick={onCancel}
              disabled={loading}
            >
              Cancel
            </button>
            <button
              type="submit"
              className="btn-primary"
              disabled={loading}
            >
              {loading ? (
                <>
                  <Icon name="loader" size={16} />
                  Updating...
                </>
              ) : (
                <>
                  <Icon name="save" size={16} />
                  Update Student
                </>
              )}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}

window.Admin = Admin;