// Teacher view — read-only class roster of payment status
function TeacherApp({ ledger, view, setView }) {
  const teacherKelas = '4A'; // Pak Yusuf is wali kelas 4A
  let body;
  if (view === 't_kelas') body = <TeacherClass kelas={teacherKelas} ledger={ledger} />;
  else if (view === 't_riwayat') body = <TeacherRiwayat kelas={teacherKelas} ledger={ledger} />;

  return (
    <div className="app">
      <Sidebar role="teacher" view={view} setView={setView} ctx={{}} />
      <div className="main">
        <Topbar>
          <div className="topbar-title">Portal Guru</div>
          <div className="topbar-crumb">/ {NAV_LABEL[view] || ''}</div>
          <div className="topbar-spacer" />
          <div className="badge accent">Wali Kelas {teacherKelas}</div>
          <button className="btn ghost sm"><Icon name="bell" size={16} /></button>
        </Topbar>
        <div className="content">{body}</div>
      </div>
    </div>
  );
}

function TeacherClass({ kelas, ledger }) {
  const [selectedTagihanId, setSelectedTagihanId] = React.useState('all');
  const kids = STUDENTS.filter(s => s.kelas === kelas);
  const kidIds = new Set(kids.map(k => k.id));
  const classLedger = ledger.filter(l => kidIds.has(l.siswaId));

  // Build per-tagihan summary
  const tagihanSummary = TAGIHAN.map(t => {
    const rows = classLedger.filter(l => l.tagihanId === t.id);
    if (rows.length === 0) return null;
    const lunas = rows.filter(l => l.status === 'lunas').length;
    return { t, rows, lunas, total: rows.length };
  }).filter(Boolean);

  // Per-student summary
  const perStudent = kids.map(s => {
    const rows = classLedger.filter(l => l.siswaId === s.id);
    const lunas = rows.filter(l => l.status === 'lunas').length;
    const overdue = rows.filter(l => tagihanStatus(l) === 'jatuh_tempo').length;
    const overdueAmt = rows.filter(l => tagihanStatus(l) === 'jatuh_tempo').reduce((sum,l)=>sum+l.nominal,0);
    return { s, rows, lunas, overdue, overdueAmt, total: rows.length };
  });

  const classOverdueCount = perStudent.filter(p => p.overdue > 0).length;
  const classOverdueAmt = perStudent.reduce((sum, p) => sum + p.overdueAmt, 0);
  const classLunasRate = Math.round(perStudent.reduce((sum, p) => sum + p.lunas, 0) / perStudent.reduce((sum, p) => sum + p.total, 0) * 100);

  return (
    <>
      <h1>Kelas {kelas}</h1>
      <p className="lede">Pantau status pembayaran siswa di kelas Anda. Tampilan ini hanya bisa dilihat (read-only).</p>

      <div className="stat-grid mb-6">
        <div className="stat">
          <div className="stat-label row gap-2"><Icon name="users" size={14} /> Total Siswa</div>
          <div className="stat-value">{kids.length}</div>
          <div className="stat-delta">Kelas {kelas}</div>
        </div>
        <div className="stat">
          <div className="stat-label row gap-2"><Icon name="checkCircle" size={14} /> Tingkat Pelunasan</div>
          <div className="stat-value">{classLunasRate}%</div>
          <div className="stat-delta">dari total tagihan kelas</div>
        </div>
        <div className="stat">
          <div className="stat-label row gap-2"><Icon name="alert" size={14} /> Siswa Tertunggak</div>
          <div className="stat-value" style={{ color: classOverdueCount ? 'hsl(var(--destructive))' : 'inherit' }}>{classOverdueCount}</div>
          <div className="stat-delta">{formatRupiahShort(classOverdueAmt)} total</div>
        </div>
      </div>

      <div className="card mb-6">
        <div className="card-header">
          <div>
            <h3 className="card-title">Status per Tagihan</h3>
            <p className="card-desc">Pilih tagihan untuk melihat detail per siswa</p>
          </div>
        </div>
        <div className="card-body flush">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))', gap: 12, padding: '0 20px 20px' }}>
            <button onClick={() => setSelectedTagihanId('all')}
                    style={{
                      padding: 14, borderRadius: 8, textAlign: 'left',
                      background: selectedTagihanId === 'all' ? 'hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.08)' : 'white',
                      border: '1px solid ' + (selectedTagihanId === 'all' ? 'hsl(var(--accent-h) var(--accent-s) var(--accent-l))' : 'hsl(var(--border))'),
                      cursor: 'pointer', fontFamily: 'inherit',
                    }}>
              <div className="text-sm muted">Semua Tagihan</div>
              <div style={{ fontSize: 16, fontWeight: 600, marginTop: 4 }}>Ringkasan kelas</div>
            </button>
            {tagihanSummary.map(({ t, lunas, total }) => {
              const active = selectedTagihanId === t.id;
              const pct = lunas / total;
              const bt = BILL_TYPES[t.tipe];
              return (
                <button key={t.id} onClick={() => setSelectedTagihanId(t.id)}
                        style={{
                          padding: 14, borderRadius: 8, textAlign: 'left',
                          background: active ? 'hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.08)' : 'white',
                          border: '1px solid ' + (active ? 'hsl(var(--accent-h) var(--accent-s) var(--accent-l))' : 'hsl(var(--border))'),
                          cursor: 'pointer', fontFamily: 'inherit',
                        }}>
                  <div className="row between mb-2">
                    <div className="text-sm muted row gap-2"><Icon name={bt.icon} size={12} /> {bt.label}</div>
                    <span className={`badge ${pct === 1 ? 'success' : pct >= 0.5 ? 'warning' : 'destructive'}`}>{lunas}/{total}</span>
                  </div>
                  <div style={{ fontSize: 13.5, fontWeight: 600 }}>{t.nama}</div>
                  <div className="mt-2"><ProgressBar value={lunas} max={total} success={pct === 1} /></div>
                </button>
              );
            })}
          </div>
        </div>
      </div>

      <div className="card">
        <div className="card-header">
          <div>
            <h3 className="card-title">
              {selectedTagihanId === 'all' ? 'Daftar Siswa' : TAGIHAN.find(t => t.id === selectedTagihanId)?.nama}
            </h3>
            <p className="card-desc">
              {selectedTagihanId === 'all'
                ? 'Status pembayaran keseluruhan tiap siswa.'
                : 'Status siswa untuk tagihan yang dipilih.'}
            </p>
          </div>
        </div>
        <div className="card-body flush">
          <div className="table-wrap">
            <table className="table">
              {selectedTagihanId === 'all' ? (
                <>
                  <thead>
                    <tr>
                      <th>Siswa</th>
                      <th>NIS</th>
                      <th>Progres</th>
                      <th>Status</th>
                      <th className="num">Tunggakan</th>
                    </tr>
                  </thead>
                  <tbody>
                    {perStudent.sort((a,b) => b.overdueAmt - a.overdueAmt).map(({ s, lunas, total, overdue, overdueAmt }) => (
                      <tr key={s.id}>
                        <td>
                          <div className="row gap-2">
                            <div className="avatar sm" style={{ background: avatarColor(s.nama) }}>{initials(s.nama)}</div>
                            <div style={{ fontWeight: 500 }}>{s.nama}</div>
                          </div>
                        </td>
                        <td className="mono text-sm">{s.nis}</td>
                        <td style={{ width: 220 }}>
                          <div className="row gap-2">
                            <ProgressBar value={lunas} max={total} success={lunas === total} />
                            <span className="text-sm muted tnum" style={{ minWidth: 44, textAlign: 'right' }}>{lunas}/{total}</span>
                          </div>
                        </td>
                        <td>
                          {overdue > 0 ? <span className="badge destructive dot">{overdue} tertunggak</span> :
                           lunas < total ? <span className="badge warning dot">{total - lunas} belum bayar</span> :
                           <span className="badge success dot">Lunas semua</span>}
                        </td>
                        <td className="num tnum" style={{ fontWeight: 600, color: overdueAmt > 0 ? 'hsl(var(--destructive))' : 'inherit' }}>
                          {overdueAmt > 0 ? formatRupiah(overdueAmt) : '—'}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </>
              ) : (
                <>
                  <thead>
                    <tr>
                      <th>Siswa</th>
                      <th>NIS</th>
                      <th>Status</th>
                      <th>Tanggal Bayar</th>
                      <th>No. Kuitansi</th>
                    </tr>
                  </thead>
                  <tbody>
                    {classLedger.filter(l => l.tagihanId === selectedTagihanId).map(l => {
                      const s = STUDENTS.find(x => x.id === l.siswaId);
                      const status = tagihanStatus(l);
                      return (
                        <tr key={l.id}>
                          <td>
                            <div className="row gap-2">
                              <div className="avatar sm" style={{ background: avatarColor(s.nama) }}>{initials(s.nama)}</div>
                              <div style={{ fontWeight: 500 }}>{s.nama}</div>
                            </div>
                          </td>
                          <td className="mono text-sm">{s.nis}</td>
                          <td><StatusBadge status={status} /></td>
                          <td className="tnum">{l.paidAt ? formatDate(l.paidAt) : '—'}</td>
                          <td className="mono text-sm">{l.receiptNo || '—'}</td>
                        </tr>
                      );
                    })}
                  </tbody>
                </>
              )}
            </table>
          </div>
        </div>
      </div>
    </>
  );
}

function TeacherRiwayat({ kelas, ledger }) {
  const kids = STUDENTS.filter(s => s.kelas === kelas);
  const kidIds = new Set(kids.map(k => k.id));
  const lunas = ledger.filter(l => kidIds.has(l.siswaId) && l.status === 'lunas')
    .sort((a, b) => new Date(b.paidAt) - new Date(a.paidAt));

  return (
    <>
      <h1>Riwayat Pembayaran Kelas {kelas}</h1>
      <p className="lede">{lunas.length} pembayaran tercatat untuk siswa kelas Anda.</p>

      <div className="card">
        <div className="card-body flush">
          <div className="table-wrap">
            <table className="table">
              <thead>
                <tr>
                  <th>Tanggal</th>
                  <th>Siswa</th>
                  <th>Tagihan</th>
                  <th>No. Kuitansi</th>
                  <th>Diterima Oleh</th>
                  <th className="num">Nominal</th>
                </tr>
              </thead>
              <tbody>
                {lunas.map(l => {
                  const t = TAGIHAN.find(t => t.id === l.tagihanId);
                  const s = STUDENTS.find(x => x.id === l.siswaId);
                  return (
                    <tr key={l.id}>
                      <td className="tnum">{formatDate(l.paidAt)}</td>
                      <td>
                        <div className="row gap-2">
                          <div className="avatar sm" style={{ background: avatarColor(s.nama) }}>{initials(s.nama)}</div>
                          <div style={{ fontWeight: 500 }}>{s.nama.split(' ').slice(0,2).join(' ')}</div>
                        </div>
                      </td>
                      <td>{t.nama}</td>
                      <td className="mono text-sm">{l.receiptNo}</td>
                      <td className="text-sm muted">{l.paidBy}</td>
                      <td className="num tnum" style={{ fontWeight: 600 }}>{formatRupiah(l.nominal)}</td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </>
  );
}

window.TeacherApp = TeacherApp;