function InstructorPortal({ onNavigate }) {
  const [riskOnly, setRiskOnly] = React.useState(false);
  const batch = [
    { name: 'Rahul Kumar', trade: 'Fitter', roll: 'FTR-24-018', prog: 68, score: 82, streak: 12, risk: null },
    { name: 'Pooja Devi', trade: 'Fitter', roll: 'FTR-24-032', prog: 91, score: 88, streak: 21, risk: null },
    { name: 'Amit Verma', trade: 'Fitter', roll: 'FTR-24-041', prog: 42, score: 61, streak: 3, risk: 'medium' },
    { name: 'Suresh Naik', trade: 'Fitter', roll: 'FTR-24-054', prog: 24, score: 48, streak: 0, risk: 'high' },
    { name: 'Priya Behera', trade: 'Fitter', roll: 'FTR-24-071', prog: 76, score: 79, streak: 9, risk: null },
    { name: 'Manoj Sahu', trade: 'Fitter', roll: 'FTR-24-089', prog: 58, score: 72, streak: 5, risk: null },
    { name: 'Ritika Panda', trade: 'Fitter', roll: 'FTR-24-092', prog: 84, score: 91, streak: 18, risk: null },
    { name: 'Deepak Meher', trade: 'Fitter', roll: 'FTR-24-101', prog: 34, score: 56, streak: 2, risk: 'medium' },
  ];

  return (
    <div className="content">
      <div style={{ display: 'flex', alignItems: 'end', justifyContent: 'space-between', marginBottom: 20 }}>
        <div>
          <div className="section-eyebrow">Instructor Portal</div>
          <h1 className="section-title" style={{ fontSize: 30 }}>Fitter · Batch F-2024-A</h1>
          <p className="section-sub">Semester 3 · 38 students · Govt ITI Cuttack</p>
        </div>
        <div style={{ display: 'flex', gap: 10 }}>
          <button className="btn btn-ghost" onClick={() => onNavigate('classroom')}><window.IconBoard size={13}/> Smart Classroom</button>
          <button className="btn btn-ghost" onClick={() => onNavigate('questionbank')}><window.IconClipboard size={13}/> Question Bank</button>
          <button className="btn btn-primary" onClick={() => onNavigate('questionbank')}><window.IconPlus size={13}/> Assign test</button>
        </div>
      </div>

      {/* Top KPI row */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 20 }}>
        {[
          { k: '38', v: 'Students in batch', s: '2 at risk', color: 'var(--red-600)' },
          { k: '64%', v: 'Avg. course completion', s: '↑ 6% this week', color: 'var(--green-600)' },
          { k: '74', v: 'Avg. assessment score', s: 'On track for AITT', color: 'var(--green-600)' },
          { k: '11 / 14', v: 'Practicals cleared (avg)', s: '3 batches lagging', color: 'var(--saffron-600)' },
        ].map(s => (
          <div key={s.v} className="card" style={{ padding: 20 }}>
            <div className="stat-num">{s.k}</div>
            <div className="stat-label">{s.v}</div>
            <div style={{ fontSize: 11, color: s.color, marginTop: 8, fontWeight: 500 }}>{s.s}</div>
          </div>
        ))}
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 20 }}>
        {/* Roster */}
        <div className="card">
          <div className="card-header" style={{ justifyContent: 'space-between' }}>
            <div>
              <div className="card-title">Student roster</div>
              <div className="card-sub">Sortable by progress, score, or streak</div>
            </div>
            <div style={{ display: 'flex', gap: 6 }}>
              <button className="btn btn-ghost" onClick={() => setRiskOnly(false)} style={{ padding: '6px 10px', fontSize: 12, background: !riskOnly ? 'var(--navy-800)' : undefined, color: !riskOnly ? 'white' : undefined, borderColor: !riskOnly ? 'var(--navy-800)' : undefined }}>All (38)</button>
              <button className="btn btn-ghost" onClick={() => setRiskOnly(true)} style={{ padding: '6px 10px', fontSize: 12, background: 'var(--red-100)', color: 'var(--red-600)', borderColor: riskOnly ? 'var(--red-600)' : 'var(--red-100)' }}>At risk (2)</button>
            </div>
          </div>
          <table style={{ width: '100%', borderCollapse: 'collapse' }}>
            <thead>
              <tr style={{ background: 'var(--ink-50)', fontFamily: 'var(--font-mono)', fontSize: 10, textAlign: 'left', letterSpacing: '0.08em', color: 'var(--ink-600)' }}>
                <th style={{ padding: '10px 16px', fontWeight: 600 }}>STUDENT</th>
                <th style={{ padding: '10px 8px', fontWeight: 600 }}>PROGRESS</th>
                <th style={{ padding: '10px 8px', fontWeight: 600 }}>SCORE</th>
                <th style={{ padding: '10px 8px', fontWeight: 600 }}>STREAK</th>
                <th style={{ padding: '10px 16px', fontWeight: 600 }}>STATUS</th>
              </tr>
            </thead>
            <tbody>
              {(riskOnly ? batch.filter(s => s.risk) : batch).map((s, i) => (
                <tr key={s.roll} style={{ borderTop: '1px solid var(--ink-100)' }}>
                  <td style={{ padding: '12px 16px' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                      <div className="avatar" style={{ background: 'var(--navy-700)', fontSize: 10 }}>{s.name.split(' ').map(w => w[0]).slice(0, 2).join('')}</div>
                      <div>
                        <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink-900)' }}>{s.name}</div>
                        <div style={{ fontSize: 11, color: 'var(--ink-600)', fontFamily: 'var(--font-mono)' }}>{s.roll}</div>
                      </div>
                    </div>
                  </td>
                  <td style={{ padding: '12px 8px', minWidth: 140 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <div className="progress-track" style={{ flex: 1 }}>
                        <div className="progress-fill" style={{ width: `${s.prog}%`, background: s.prog >= 75 ? 'var(--green-600)' : s.prog >= 50 ? 'var(--saffron-500)' : 'var(--red-600)' }}/>
                      </div>
                      <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-700)', fontWeight: 600, width: 30 }}>{s.prog}%</span>
                    </div>
                  </td>
                  <td style={{ padding: '12px 8px', fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--ink-900)', fontWeight: 600 }}>{s.score}</td>
                  <td style={{ padding: '12px 8px', fontSize: 13, color: 'var(--ink-700)' }}>
                    <span style={{ color: s.streak >= 7 ? 'var(--saffron-600)' : 'var(--ink-600)' }}>
                      <window.IconFlame size={12} style={{ verticalAlign: 'middle' }}/> {s.streak}d
                    </span>
                  </td>
                  <td style={{ padding: '12px 16px' }}>
                    {s.risk === 'high' && <span className="badge red">● At risk — 3 missed</span>}
                    {s.risk === 'medium' && <span className="badge saffron">◐ Falling behind</span>}
                    {!s.risk && <span className="badge green">● On track</span>}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {/* Performance heatmap */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          <div className="card" style={{ padding: 20 }}>
            <div className="card-title" style={{ marginBottom: 4 }}>Concept mastery heatmap</div>
            <div style={{ fontSize: 12, color: 'var(--ink-600)', marginBottom: 14 }}>Weakest concepts across the batch</div>

            {[
              { t: 'Bench work — filing', v: 84 },
              { t: 'Measuring — vernier caliper', v: 71 },
              { t: 'Marking — surface plate', v: 78 },
              { t: 'Fits & tolerances', v: 52 },
              { t: 'Sheet metal joining', v: 46 },
              { t: 'Drilling — speed & feed', v: 68 },
              { t: 'Threading — dies', v: 61 },
              { t: 'Reading engineering drawings', v: 39 },
            ].map(c => (
              <div key={c.t} style={{ padding: '8px 0', borderBottom: '1px dashed var(--ink-200)' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, marginBottom: 4 }}>
                  <span style={{ color: 'var(--ink-800)', fontWeight: 500 }}>{c.t}</span>
                  <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--ink-600)', fontSize: 11 }}>{c.v}%</span>
                </div>
                <div style={{ height: 5, borderRadius: 999, background: 'var(--ink-100)' }}>
                  <div style={{ height: '100%', width: `${c.v}%`, borderRadius: 999, background: c.v < 55 ? 'var(--red-600)' : c.v < 75 ? 'var(--saffron-500)' : 'var(--green-600)' }}/>
                </div>
              </div>
            ))}

            <button className="btn btn-ghost" style={{ width: '100%', justifyContent: 'center', marginTop: 14 }} onClick={() => window.toast('AI remedial plan generated for weak concepts')}>
              Generate remedial plan <window.IconSparkle size={13}/>
            </button>
          </div>

          <div className="card" style={{ padding: 20 }}>
            <div className="card-title" style={{ marginBottom: 12 }}>Today's classes</div>
            {[
              { t: '09:00', c: 'Theory: Fits & tolerances', room: 'CR-3' },
              { t: '11:30', c: 'Practical: Filing exercise', room: 'W-1' },
              { t: '14:00', c: 'Virtual lab: MIG welding', room: 'Digital Lab' },
            ].map(x => (
              <div key={x.t} style={{ padding: '10px 0', borderBottom: '1px dashed var(--ink-200)', display: 'flex', gap: 12 }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--navy-800)', fontWeight: 600 }}>{x.t}</div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13, color: 'var(--ink-900)', fontWeight: 500 }}>{x.c}</div>
                  <div style={{ fontSize: 11, color: 'var(--ink-600)', marginTop: 2 }}>{x.room}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

window.InstructorPortal = InstructorPortal;