// screens-roster.jsx — Class roster + per-student profile + behavior log
// 1. TeacherClassRosterScreen — list of all 32 with quick stats
// 2. TeacherStudentProfileScreen — drill-in: attendance, scores, comms, fees, behavior
// 3. TeacherStudentNoteScreen — log a behavior incident or commendation

const { useState: useStateRos, useMemo: useMemoRos } = React;

// Build a per-student record (deterministic).
function buildRoster() {
  const list = window.CLASS_8B_STUDENTS || [];
  return list.map((name, i) => {
    const r = (s) => ((Math.sin(i * 13 + s) * 10000) % 1 + 1) % 1;
    return {
      id: 's' + (i + 1).toString().padStart(2, '0'),
      name,
      roll: i + 1,
      initial: name[0],
      clr: ['', 'coral', 'green', 'sky', 'violet'][i % 5],
      attendance: 78 + Math.round(r(1) * 22),
      avgPct: 52 + Math.round(r(2) * 44),
      hwSubmitted: 70 + Math.round(r(3) * 28),
      lastAssessment: ['Linear eq · 18/24', 'Linear eq · 22/24', 'Linear eq · 14/24', 'Linear eq · 8/24', 'Linear eq · 24/24'][i % 5],
      flags: r(4) < 0.18 ? ['attendance'] : r(5) < 0.10 ? ['behavior'] : r(6) < 0.08 ? ['fees'] : [],
      parentName: ['Mr. Reddy','Mrs. Nair','Mrs. Menon','Mr. Iyer','Mrs. Shah','Mr. Kapoor'][i % 6],
      parentPhone: '+91 98 ' + (1000 + i * 7).toString() + ' ' + (3000 + i * 13).toString().slice(-4),
      feeStatus: r(7) < 0.15 ? 'overdue' : r(8) < 0.55 ? 'paid' : 'partial',
    };
  });
}
const ROSTER = buildRoster();
const findRosterStudent = (id) => ROSTER.find(s => s.id === id);

// ─────────────────────────────────────────────────────────────
// 1. Class roster
// ─────────────────────────────────────────────────────────────
function TeacherClassRosterScreen({ nav, params }) {
  const cls = (params && params.cls) || '8-B';
  const [search, setSearch] = useStateRos('');
  const [sortBy, setSortBy] = useStateRos('roll'); // 'roll' | 'name' | 'attendance' | 'score' | 'flag'
  const [filter, setFilter] = useStateRos('all');  // 'all' | 'flagged' | 'top' | 'bottom'

  const list = useMemoRos(() => {
    let r = [...ROSTER];
    if (search) r = r.filter(s => s.name.toLowerCase().includes(search.toLowerCase()) || String(s.roll).includes(search));
    if (filter === 'flagged') r = r.filter(s => s.flags.length > 0);
    if (filter === 'top') r = r.sort((a, b) => b.avgPct - a.avgPct).slice(0, 10);
    if (filter === 'bottom') r = r.sort((a, b) => a.avgPct - b.avgPct).slice(0, 10);
    if (filter === 'all' || filter === 'flagged') {
      if (sortBy === 'roll') r.sort((a, b) => a.roll - b.roll);
      if (sortBy === 'name') r.sort((a, b) => a.name.localeCompare(b.name));
      if (sortBy === 'attendance') r.sort((a, b) => a.attendance - b.attendance);
      if (sortBy === 'score') r.sort((a, b) => b.avgPct - a.avgPct);
    }
    return r;
  }, [search, sortBy, filter]);

  return (
    <div className="app screen-in" style={{ background: 'var(--n50)' }}>
      <StatusBar/>
      <NavHeader title={`Class ${cls} · ${ROSTER.length}`} onBack={() => nav.pop()}
        right={<button onClick={() => nav.push('teachAnnouncementCompose', { cls })} style={{ width: 36, height: 36, borderRadius: 10, background: 'var(--n50)', display: 'grid', placeItems: 'center' }} title="Broadcast"><Icon name="megaphone" size={16}/></button>}/>

      <div className="app-body" style={{ paddingTop: 4 }}>
        {/* Search */}
        <div style={{ position: 'relative', marginBottom: 10 }}>
          <Icon name="search" size={16} style={{ position: 'absolute', left: 12, top: 12, color: 'var(--n400)' }}/>
          <input value={search} onChange={(e) => setSearch(e.target.value)} placeholder="Search name or roll #" style={{
            width: '100%', height: 40, paddingLeft: 36, paddingRight: 12, borderRadius: 12,
            border: '1px solid var(--n200)', background: '#fff', fontSize: 13, fontFamily: 'inherit',
          }}/>
        </div>

        {/* Filter chips */}
        <div className="row" style={{ gap: 6, marginBottom: 10, overflowX: 'auto', paddingBottom: 4 }}>
          {[
            { id: 'all', lab: 'All' },
            { id: 'flagged', lab: `Flagged · ${ROSTER.filter(s => s.flags.length).length}` },
            { id: 'top', lab: 'Top 10' },
            { id: 'bottom', lab: 'Needs help' },
          ].map(f => (
            <button key={f.id} onClick={() => setFilter(f.id)} style={{
              padding: '7px 12px', borderRadius: 20, fontSize: 11.5, fontWeight: 700,
              background: filter === f.id ? 'var(--n900)' : '#fff',
              color: filter === f.id ? '#fff' : 'var(--n700)',
              border: '1px solid var(--n100)', whiteSpace: 'nowrap',
            }}>{f.lab}</button>
          ))}
        </div>

        {/* Sort */}
        <div className="row" style={{ gap: 4, marginBottom: 10, fontSize: 10.5, color: 'var(--n500)', fontFamily: 'var(--mono)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '.04em' }}>
          <span>SORT:</span>
          {[['roll','#'],['name','Name'],['attendance','Att.'],['score','Score']].map(([k, l]) => (
            <button key={k} onClick={() => setSortBy(k)} style={{
              padding: '3px 8px', borderRadius: 6, fontSize: 10.5, fontWeight: 700,
              background: sortBy === k ? 'var(--p50)' : 'transparent',
              color: sortBy === k ? 'var(--p700)' : 'var(--n500)',
              fontFamily: 'var(--mono)',
            }}>{l}</button>
          ))}
        </div>

        {/* Roster */}
        <div className="col" style={{ gap: 6 }}>
          {list.map(s => (
            <button key={s.id} onClick={() => nav.push('teachStudentProfile', { id: s.id })} className="card row" style={{ padding: 12, gap: 10, background: '#fff', textAlign: 'left' }}>
              <div style={{ width: 28, textAlign: 'center', fontFamily: 'var(--mono)', fontSize: 11, fontWeight: 700, color: 'var(--n400)', flexShrink: 0 }}>{s.roll}</div>
              <div className={`av av-40 ${s.clr}`} style={{ flexShrink: 0 }}>{s.initial}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="spread">
                  <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--n900)' }}>{s.name}</div>
                  <div className="row" style={{ gap: 4 }}>
                    {s.flags.includes('attendance') && <Icon name="alert" size={12} style={{ color: 'var(--c500)' }}/>}
                    {s.flags.includes('behavior') && <Icon name="flag" size={12} style={{ color: 'var(--warning)' }}/>}
                    {s.flags.includes('fees') && <Icon name="rupee" size={12} style={{ color: 'var(--c500)' }}/>}
                  </div>
                </div>
                <div className="row" style={{ gap: 8, marginTop: 4, fontSize: 10.5, fontFamily: 'var(--mono)' }}>
                  <span style={{ color: s.attendance < 75 ? 'var(--c600)' : 'var(--n500)' }}>Att {s.attendance}%</span>
                  <span style={{ color: 'var(--n300)' }}>·</span>
                  <span style={{ color: 'var(--n500)' }}>Avg {s.avgPct}%</span>
                  <span style={{ color: 'var(--n300)' }}>·</span>
                  <span style={{ color: 'var(--n500)' }}>HW {s.hwSubmitted}%</span>
                </div>
              </div>
              <Icon name="chev-r" size={16} style={{ color: 'var(--n400)', flexShrink: 0 }}/>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 2. Student profile
// ─────────────────────────────────────────────────────────────
function TeacherStudentProfileScreen({ nav, params }) {
  const id = (params && params.id) || 's01';
  const s = findRosterStudent(id) || ROSTER[0];

  // Mock score trend (last 6 assessments).
  const trend = useMemoRos(() => {
    const r = (j) => ((Math.sin(s.roll * 7 + j * 11) * 10000) % 1 + 1) % 1;
    return Array.from({ length: 6 }, (_, j) => ({
      label: ['Sep','Oct','Nov','Dec','Jan','Feb'][j],
      pct: 40 + Math.round(r(j) * 50),
    }));
  }, [s.roll]);
  const recent = useMemoRos(() => [
    { type: 'asmt', title: 'Linear equations · Practice quiz', when: '2 days ago', score: '18/24', icon: 'flask', clr: 'var(--p600)', bg: 'var(--p50)' },
    { type: 'hw',   title: 'Algebra Ex. 7.3', when: 'Last Mon', score: '8/10', icon: 'clipboard', clr: 'var(--c600)', bg: 'var(--c50)' },
    { type: 'asmt', title: 'Mid-term · Mathematics', when: '3 weeks ago', score: '67/100', icon: 'flask', clr: 'var(--p600)', bg: 'var(--p50)' },
  ], []);
  const behavior = useMemoRos(() => {
    if (s.flags.includes('behavior')) return [
      { kind: 'incident', txt: 'Disruption during Period 4 — addressed verbally', when: 'Mon · 10 Mar', clr: 'var(--c600)' },
      { kind: 'commend', txt: 'Helped Diya with quadratic equations', when: 'Wed · 5 Mar', clr: 'var(--success)' },
    ];
    return [{ kind: 'commend', txt: 'Top scorer in Mental Math Sprint 4', when: 'Tue · 4 Mar', clr: 'var(--success)' }];
  }, [s.flags]);

  return (
    <div className="app screen-in" style={{ background: 'var(--n50)' }}>
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, zIndex: 60 }}><StatusBar dark/></div>
      <div className="app-body no-pad">
        {/* Hero */}
        <div className="head-grad" style={{ paddingTop: 56, paddingBottom: 26 }}>
          <button onClick={() => nav.pop()} style={{ width: 40, height: 40, borderRadius: 12, background: 'rgba(255,255,255,.18)', color: '#fff', display: 'grid', placeItems: 'center', marginBottom: 18 }}><Icon name="chev-l" size={20}/></button>
          <div className="row" style={{ gap: 16, alignItems: 'flex-start' }}>
            <div className={`av av-72 ${s.clr}`} style={{ background: 'rgba(255,255,255,.22)', color: '#fff', boxShadow: 'inset 0 0 0 2px rgba(255,255,255,.35)', flexShrink: 0 }}>{s.initial}</div>
            <div style={{ flex: 1, minWidth: 0, paddingTop: 4 }}>
              <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: '-.02em', lineHeight: 1.15 }}>{s.name}</div>
              <div style={{ fontSize: 10.5, opacity: .85, marginTop: 4, fontFamily: 'var(--mono)', fontWeight: 600, letterSpacing: '.04em' }}>ROLL {s.roll} · 8-B · DPS HYDERABAD</div>
              {s.flags.length > 0 && (
                <div className="row" style={{ gap: 6, marginTop: 10, flexWrap: 'wrap' }}>
                  {s.flags.includes('attendance') && <span style={{ padding: '3px 8px', borderRadius: 6, background: 'rgba(255,255,255,.22)', fontSize: 9.5, fontWeight: 700, fontFamily: 'var(--mono)', letterSpacing: '.06em', display: 'flex', alignItems: 'center', gap: 4 }}><Icon name="alert" size={10}/>ATT LOW</span>}
                  {s.flags.includes('behavior') && <span style={{ padding: '3px 8px', borderRadius: 6, background: 'rgba(255,255,255,.22)', fontSize: 9.5, fontWeight: 700, fontFamily: 'var(--mono)', letterSpacing: '.06em', display: 'flex', alignItems: 'center', gap: 4 }}><Icon name="flag" size={10}/>BEHAVIOR</span>}
                  {s.flags.includes('fees') && <span style={{ padding: '3px 8px', borderRadius: 6, background: 'rgba(255,255,255,.22)', fontSize: 9.5, fontWeight: 700, fontFamily: 'var(--mono)', letterSpacing: '.06em', display: 'flex', alignItems: 'center', gap: 4 }}><Icon name="rupee" size={10}/>FEES {s.feeStatus.toUpperCase()}</span>}
                </div>
              )}
            </div>
          </div>
          <div className="row" style={{ gap: 8, marginTop: 18 }}>
            <button onClick={() => nav.push('teachParentMessageThread', { sid: s.id, parent: s.parentName })} style={{ flex: 1, height: 40, borderRadius: 10, background: '#fff', color: 'var(--p700)', fontSize: 13, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
              <Icon name="message" size={14}/> Message {s.parentName}
            </button>
            <button onClick={() => nav.push('teachStudentNote', { id: s.id })} style={{ height: 40, padding: '0 14px', borderRadius: 10, background: 'rgba(255,255,255,.2)', color: '#fff', fontSize: 13, fontWeight: 700, display: 'flex', alignItems: 'center', gap: 6 }}>
              <Icon name="edit" size={14}/> Note
            </button>
          </div>
        </div>

        {/* Stats grid */}
        <div style={{ padding: 16, marginTop: -16 }}>
          <div className="card" style={{ padding: 0, background: '#fff' }}>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)' }}>
              {[
                { lab: 'ATTENDANCE', val: s.attendance + '%', sub: '22 days', clr: s.attendance < 75 ? 'var(--c600)' : 'var(--n900)' },
                { lab: 'AVG SCORE', val: s.avgPct + '%', sub: '6 tests', clr: 'var(--n900)' },
                { lab: 'HW SUBMITTED', val: s.hwSubmitted + '%', sub: '12 of ' + Math.round(12 / (s.hwSubmitted / 100)) },
              ].map((c, i) => (
                <div key={i} style={{ padding: 14, textAlign: 'center', borderRight: i < 2 ? '1px solid var(--n100)' : 'none' }}>
                  <div style={{ fontSize: 9.5, fontWeight: 700, color: 'var(--n500)', fontFamily: 'var(--mono)', letterSpacing: '.06em' }}>{c.lab}</div>
                  <div style={{ fontSize: 22, fontWeight: 800, color: c.clr || 'var(--n900)', fontVariantNumeric: 'tabular-nums', marginTop: 4, lineHeight: 1, letterSpacing: '-.02em' }}>{c.val}</div>
                  <div style={{ fontSize: 10.5, color: 'var(--n500)', marginTop: 3, fontFamily: 'var(--mono)' }}>{c.sub}</div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Score trend */}
        <div style={{ padding: '0 16px 16px' }}>
          <SectionLabel label="Score trend · last 6"/>
          <div className="card" style={{ padding: 14, background: '#fff' }}>
            <div style={{ display: 'flex', alignItems: 'flex-end', gap: 8, height: 96 }}>
              {trend.map((p, i) => (
                <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
                  <div style={{ fontSize: 9.5, color: 'var(--n500)', fontFamily: 'var(--mono)', fontWeight: 700 }}>{p.pct}</div>
                  <div style={{ width: '100%', height: Math.max(8, p.pct * 0.7), background: p.pct >= 75 ? 'var(--success)' : p.pct >= 50 ? 'var(--warning)' : 'var(--c500)', borderRadius: 4 }}/>
                  <div style={{ fontSize: 9.5, color: 'var(--n500)', fontFamily: 'var(--mono)', fontWeight: 700 }}>{p.label}</div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Recent activity */}
        <div style={{ padding: '0 16px 16px' }}>
          <SectionLabel label="Recent activity" right={<button onClick={() => nav.push('teachGradeBook')} style={{ fontSize: 11, color: 'var(--p600)', fontWeight: 600 }}>Grade book →</button>}/>
          <ListCard>
            {recent.map((r, i) => (
              <div key={i} className="row" style={{ padding: 12, gap: 12, borderBottom: i < recent.length - 1 ? '1px solid var(--n100)' : 'none' }}>
                <div style={{ width: 36, height: 36, borderRadius: 10, background: r.bg, color: r.clr, display: 'grid', placeItems: 'center', flexShrink: 0 }}><Icon name={r.icon} size={16}/></div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--n900)' }}>{r.title}</div>
                  <div style={{ fontSize: 11, color: 'var(--n500)', marginTop: 1 }}>{r.when}</div>
                </div>
                <div style={{ fontSize: 13, fontWeight: 800, color: 'var(--n900)', fontFamily: 'var(--mono)' }}>{r.score}</div>
              </div>
            ))}
          </ListCard>
        </div>

        {/* Behavior log */}
        <div style={{ padding: '0 16px 16px' }}>
          <SectionLabel label="Behavior log" right={<button onClick={() => nav.push('teachStudentNote', { id: s.id })} style={{ fontSize: 11, color: 'var(--p600)', fontWeight: 600 }}>+ New note</button>}/>
          <ListCard>
            {behavior.map((b, i) => (
              <div key={i} className="row" style={{ padding: 12, gap: 12, borderBottom: i < behavior.length - 1 ? '1px solid var(--n100)' : 'none' }}>
                <div style={{ width: 28, height: 28, borderRadius: 8, background: b.clr === 'var(--success)' ? 'var(--success-50)' : 'var(--c50)', color: b.clr, display: 'grid', placeItems: 'center', flexShrink: 0 }}>
                  <Icon name={b.kind === 'commend' ? 'star' : 'flag'} size={14}/>
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--n900)', lineHeight: 1.4 }}>{b.txt}</div>
                  <div style={{ fontSize: 11, color: 'var(--n500)', marginTop: 2, fontFamily: 'var(--mono)' }}>{b.when}</div>
                </div>
              </div>
            ))}
          </ListCard>
        </div>

        {/* Parent + admin */}
        <div style={{ padding: '0 16px 24px' }}>
          <SectionLabel label="Parent · admin"/>
          <ListCard>
            <ListRow ic="user" lab={s.parentName} sub="Primary contact"/>
            <ListRow ic="phone" lab={s.parentPhone} sub="Tap to call"/>
            <ListRow ic="rupee" lab={s.feeStatus === 'overdue' ? 'Fees · Overdue' : s.feeStatus === 'paid' ? 'Fees · Up to date' : 'Fees · Partial'} sub="View ledger"
              accent={s.feeStatus === 'overdue'} danger={s.feeStatus === 'overdue'} onClick={() => {}}/>
            <ListRow ic="bus" lab="Transport · Route 4 (PSR Sai)" sub="Pickup 7:18 AM · Stop B-7" last/>
          </ListCard>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 3. Add student note (behavior / commendation)
// ─────────────────────────────────────────────────────────────
function TeacherStudentNoteScreen({ nav, params }) {
  const id = (params && params.id) || 's01';
  const s = findRosterStudent(id) || ROSTER[0];
  const [kind, setKind] = useStateRos('commend'); // 'commend' | 'incident'
  const [text, setText] = useStateRos('');
  const [tag, setTag] = useStateRos(null);
  const [shareParent, setShareParent] = useStateRos(true);
  const [savedToast, setSavedToast] = useStateRos(false);

  const tags = kind === 'commend'
    ? ['Helpful to peers', 'Top performer', 'Consistent improvement', 'Class participation', 'Initiative', 'Creativity']
    : ['Disruption', 'Late submission', 'Missed class', 'Conduct concern', 'Bullying', 'Phone in class'];

  const save = () => {
    setSavedToast(true);
    setTimeout(() => { setSavedToast(false); nav.pop(); }, 900);
  };

  return (
    <div className="app screen-in">
      <StatusBar/>
      <NavHeader title="New note" onBack={() => nav.pop()}/>
      <div className="app-body">
        <div className="row" style={{ gap: 10, marginBottom: 14 }}>
          <div className={`av av-44 ${s.clr}`}>{s.initial}</div>
          <div>
            <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--n900)' }}>{s.name}</div>
            <div style={{ fontSize: 11, color: 'var(--n500)', fontFamily: 'var(--mono)' }}>ROLL {s.roll} · 8-B</div>
          </div>
        </div>

        <FieldT label="Type">
          <div className="row" style={{ gap: 8 }}>
            {[
              { id: 'commend', lab: 'Commendation', ic: 'star', clr: 'var(--success)', bg: 'var(--success-50)' },
              { id: 'incident', lab: 'Incident', ic: 'flag', clr: 'var(--c600)', bg: 'var(--c50)' },
            ].map(opt => (
              <button key={opt.id} onClick={() => { setKind(opt.id); setTag(null); }} style={{
                flex: 1, padding: '12px 12px', borderRadius: 12,
                background: kind === opt.id ? opt.bg : '#fff',
                color: kind === opt.id ? opt.clr : 'var(--n700)',
                border: kind === opt.id ? `1px solid ${opt.clr}` : '1px solid var(--n200)',
                display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
                fontSize: 13, fontWeight: 700,
              }}>
                <Icon name={opt.ic} size={16}/> {opt.lab}
              </button>
            ))}
          </div>
        </FieldT>

        <FieldT label="Quick tag">
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
            {tags.map(t => (
              <button key={t} onClick={() => setTag(t)} style={{
                padding: '7px 12px', borderRadius: 20,
                background: tag === t ? 'var(--p50)' : 'var(--n50)',
                color: tag === t ? 'var(--p700)' : 'var(--n700)',
                border: tag === t ? '1px solid var(--p600)' : '1px solid transparent',
                fontSize: 11.5, fontWeight: 600,
              }}>{t}</button>
            ))}
          </div>
        </FieldT>

        <FieldT label="Note">
          <textarea value={text} onChange={(e) => setText(e.target.value)} rows={5} placeholder="What happened? Specifics help during PTM…" style={{
            width: '100%', padding: 12, borderRadius: 12, border: '1px solid var(--n200)',
            fontSize: 13, fontFamily: 'inherit', resize: 'none',
          }}/>
        </FieldT>

        <ListCard>
          <ToggleRow ic="message" lab="Share with parent now" sub={shareParent ? 'Sends in-app notification + WhatsApp digest' : 'Visible in PTM only'} value={shareParent} onChange={setShareParent}/>
          <ToggleRow ic="users" lab="Notify HOD" sub={kind === 'incident' ? 'Recommended for incidents' : 'For exceptional commendations'} value={kind === 'incident'} onChange={() => {}} last/>
        </ListCard>

        <button onClick={save} className="btn-primary" style={{ height: 48, marginTop: 16, width: '100%' }} disabled={!text.trim() && !tag}>
          Save note
        </button>
      </div>

      {savedToast && (
        <div style={{ position: 'absolute', bottom: 32, left: 16, right: 16, background: 'var(--n900)', color: '#fff', padding: '12px 14px', borderRadius: 12, fontSize: 13, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 10, boxShadow: '0 12px 32px rgba(0,0,0,.25)', zIndex: 70 }}>
          <Icon name="check" size={16} style={{ color: 'var(--success)' }}/> Note saved {shareParent ? '· parent notified' : ''}
        </div>
      )}
    </div>
  );
}

Object.assign(window, {
  ROSTER,
  findRosterStudent,
  TeacherClassRosterScreen,
  TeacherStudentProfileScreen,
  TeacherStudentNoteScreen,
});