// Guardian view — the hero. Tabs: Beranda, Tagihan, Riwayat
function GuardianApp({ ledger, view, setView }) {
  // Guardian "logged in" — pick W004 (Ibu Ratna) who has 2 children
  const guardianId = 'W004';
  const wali = WALI[guardianId];
  const myKids = STUDENTS.filter(s => s.wali === guardianId);
  const [activeKidId, setActiveKidId] = React.useState(myKids[0].id);
  const activeKid = myKids.find(k => k.id === activeKidId);

  const myLedger = ledger.filter(l => myKids.some(k => k.id === l.siswaId));
  const outstanding = myLedger.filter(l => l.status !== 'lunas');
  const ctx = { guardianId, outstandingCount: outstanding.length };

  let body;
  if (view === 'g_home') body = <GuardianHome wali={wali} myKids={myKids} ledger={myLedger}
                                              activeKidId={activeKidId} setActiveKidId={setActiveKidId}
                                              setView={setView} />;
  else if (view === 'g_tagihan') body = <GuardianTagihan myKids={myKids} ledger={myLedger}
                                                          activeKidId={activeKidId} setActiveKidId={setActiveKidId} />;
  else if (view === 'g_riwayat') body = <GuardianRiwayat myKids={myKids} ledger={myLedger}
                                                          activeKidId={activeKidId} setActiveKidId={setActiveKidId} />;

  return (
    <div className="app">
      <Sidebar role="guardian" view={view} setView={setView} ctx={ctx} />
      <div className="main">
        <Topbar>
          <div className="topbar-title">Portal Wali Murid</div>
          <div className="topbar-crumb">/ {NAV_LABEL[view] || ''}</div>
          <div className="topbar-spacer" />
          <KidSwitcher myKids={myKids} activeKidId={activeKidId} setActiveKidId={setActiveKidId} />
          <button className="btn ghost sm" title="Notifikasi">
            <Icon name="bell" size={16} />
          </button>
        </Topbar>
        <div className="content">{body}</div>
      </div>
    </div>
  );
}

const NAV_LABEL = {
  g_home: 'Beranda',
  g_tagihan: 'Tagihan',
  g_riwayat: 'Riwayat & Kuitansi',
  f_dashboard: 'Dashboard',
  f_teller: 'Loket Pembayaran',
  f_tagihan: 'Daftar Tagihan',
  f_siswa: 'Siswa & Wali',
  t_kelas: 'Kelas Saya',
  t_riwayat: 'Riwayat Pembayaran',
};

function KidSwitcher({ myKids, activeKidId, setActiveKidId }) {
  if (myKids.length <= 1) {
    const k = myKids[0];
    return (
      <div className="row gap-2" style={{ padding: '4px 10px', border: '1px solid hsl(var(--border))', borderRadius: 8 }}>
        <div className="avatar sm" style={{ background: avatarColor(k.nama) }}>{initials(k.nama)}</div>
        <div style={{ fontSize: 13 }}>
          <span style={{ fontWeight: 600 }}>{k.nama.split(' ').slice(0,2).join(' ')}</span>
          <span style={{ color: 'hsl(var(--muted-foreground))', marginLeft: 6 }}>· {k.kelas}</span>
        </div>
      </div>
    );
  }
  return (
    <div className="row gap-2">
      {myKids.map(k => {
        const active = k.id === activeKidId;
        return (
          <button key={k.id}
                  onClick={() => setActiveKidId(k.id)}
                  className="row gap-2"
                  style={{
                    padding: '4px 10px 4px 4px',
                    border: '1px solid ' + (active ? 'hsl(var(--accent-h) var(--accent-s) var(--accent-l))' : 'hsl(var(--border))'),
                    background: active ? 'hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.08)' : 'white',
                    borderRadius: 999,
                    cursor: 'pointer',
                  }}>
            <div className="avatar sm" style={{ background: avatarColor(k.nama) }}>{initials(k.nama)}</div>
            <div style={{ fontSize: 13, fontWeight: active ? 600 : 500 }}>
              {k.nama.split(' ')[0]}
              <span style={{ color: 'hsl(var(--muted-foreground))', fontWeight: 500, marginLeft: 6 }}>{k.kelas}</span>
            </div>
          </button>
        );
      })}
    </div>
  );
}

// ── HOME ──
function GuardianHome({ wali, myKids, ledger, activeKidId, setActiveKidId, setView }) {
  const today = new Date('2026-05-05');
  const all = ledger;
  const lunas = all.filter(l => l.status === 'lunas');
  const overdue = all.filter(l => tagihanStatus(l, today) === 'jatuh_tempo');
  const upcoming = all
    .filter(l => l.status !== 'lunas')
    .sort((a, b) => new Date(a.jatuhTempo) - new Date(b.jatuhTempo));
  const totalDue = upcoming.reduce((s, l) => s + l.nominal, 0);
  const totalOverdue = overdue.reduce((s, l) => s + l.nominal, 0);

  const lastPayment = lunas
    .slice()
    .sort((a, b) => new Date(b.paidAt) - new Date(a.paidAt))[0];

  return (
    <>
      <div className="row between mb-4" style={{ alignItems: 'baseline' }}>
        <div>
          <h1>Halo, {wali.nama.replace(/^(Bpk\.|Ibu)\s/, '')} 👋</h1>
          <p className="lede">Berikut ringkasan pembayaran sekolah {myKids.length > 1 ? 'anak-anak' : 'anak'} Anda.</p>
        </div>
        <div className="text-sm muted">Hari ini · {formatDateLong('2026-05-05')}</div>
      </div>

      <div className="stat-grid mb-6">
        <div className="stat">
          <div className="stat-label row gap-2"><Icon name="alert" size={14} /> Tertunggak</div>
          <div className="stat-value" style={{ color: overdue.length ? 'hsl(var(--destructive))' : 'inherit' }}>
            {formatRupiah(totalOverdue)}
          </div>
          <div className="stat-delta">{overdue.length} tagihan lewat jatuh tempo</div>
        </div>
        <div className="stat">
          <div className="stat-label row gap-2"><Icon name="wallet" size={14} /> Total Belum Bayar</div>
          <div className="stat-value">{formatRupiah(totalDue)}</div>
          <div className="stat-delta">{upcoming.length} tagihan tersisa</div>
        </div>
        <div className="stat">
          <div className="stat-label row gap-2"><Icon name="checkCircle" size={14} /> Sudah Lunas</div>
          <div className="stat-value">{lunas.length}</div>
          <div className="stat-delta">dari {all.length} tagihan total</div>
        </div>
        <div className="stat">
          <div className="stat-label row gap-2"><Icon name="clock" size={14} /> Pembayaran Terakhir</div>
          <div className="stat-value" style={{ fontSize: 16 }}>
            {lastPayment ? formatDate(lastPayment.paidAt) : '—'}
          </div>
          <div className="stat-delta">
            {lastPayment ? formatRupiah(lastPayment.nominal) + ' · ' + (TAGIHAN.find(t => t.id === lastPayment.tagihanId)?.nama || '') : 'Belum ada'}
          </div>
        </div>
      </div>

      {overdue.length > 0 && <OverdueAlert overdue={overdue} setView={setView} />}

      <div className="card mb-6">
        <div className="card-header">
          <div>
            <h3 className="card-title">Tagihan Mendatang</h3>
            <p className="card-desc">Berikan uang ke anak Anda untuk dibayarkan ke loket Bagian Keuangan.</p>
          </div>
          <button className="btn outline sm" onClick={() => setView('g_tagihan')}>
            Lihat semua <Icon name="arrowRight" size={14} />
          </button>
        </div>
        <div className="card-body flush">
          <UpcomingList rows={upcoming.slice(0, 5)} myKids={myKids} />
        </div>
      </div>

      <div className="card">
        <div className="card-header">
          <div>
            <h3 className="card-title">Cara Pembayaran</h3>
            <p className="card-desc">Alur pembayaran di {SCHOOL.name}</p>
          </div>
        </div>
        <div className="card-body">
          <div className="flow">
            <FlowStep n="1" title="Wali murid menyerahkan uang"
                      desc="Berikan uang tunai sesuai tagihan kepada anak Anda di pagi hari." />
            <FlowStep n="2" title="Siswa membayar di Loket Keuangan"
                      desc="Anak menyerahkan uang ke teller (Bagian Keuangan) di sekolah." />
            <FlowStep n="3" title="Pembayaran ditandai Lunas"
                      desc="Bagian Keuangan menandai lunas, kuitansi otomatis tercetak di portal ini." />
          </div>
        </div>
      </div>
    </>
  );
}

function OverdueAlert({ overdue, setView }) {
  return (
    <div style={{
      background: 'hsl(0 80% 97%)',
      border: '1px solid hsl(0 60% 86%)',
      borderRadius: 8,
      padding: '14px 18px',
      marginBottom: 24,
      display: 'flex',
      gap: 14,
      alignItems: 'flex-start',
    }}>
      <div style={{
        width: 32, height: 32, borderRadius: 8,
        background: 'hsl(0 72% 50%)', color: 'white',
        display: 'grid', placeItems: 'center', flexShrink: 0,
      }}>
        <Icon name="alert" size={18} />
      </div>
      <div style={{ flex: 1 }}>
        <div style={{ fontWeight: 600, fontSize: 14 }}>
          Ada {overdue.length} tagihan yang sudah lewat jatuh tempo
        </div>
        <div style={{ fontSize: 13, color: 'hsl(0 50% 32%)', marginTop: 2 }}>
          Total {formatRupiah(overdue.reduce((s, l) => s + l.nominal, 0))} — mohon segera dilunasi untuk menghindari catatan pada rapor.
        </div>
      </div>
      <button className="btn destructive sm" onClick={() => setView('g_tagihan')}>
        Lihat tagihan
      </button>
    </div>
  );
}

function FlowStep({ n, title, desc }) {
  return (
    <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start', padding: '10px 0' }}>
      <div style={{
        width: 28, height: 28, borderRadius: 999,
        background: 'hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.12)',
        color: 'hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) - 10%))',
        display: 'grid', placeItems: 'center',
        fontWeight: 600, fontSize: 13, flexShrink: 0,
      }}>{n}</div>
      <div>
        <div style={{ fontWeight: 600, fontSize: 13.5 }}>{title}</div>
        <div style={{ fontSize: 13, color: 'hsl(var(--muted-foreground))' }}>{desc}</div>
      </div>
    </div>
  );
}

function UpcomingList({ rows, myKids }) {
  if (rows.length === 0) {
    return (
      <div style={{ padding: 40, textAlign: 'center', color: 'hsl(var(--muted-foreground))' }}>
        <Icon name="checkCircle" size={32} />
        <div style={{ marginTop: 8, fontWeight: 500 }}>Semua tagihan sudah lunas</div>
        <div style={{ fontSize: 13 }}>Tidak ada pembayaran yang perlu dilakukan saat ini.</div>
      </div>
    );
  }
  return (
    <div className="table-wrap">
      <table className="table">
        <thead>
          <tr>
            <th>Tagihan</th>
            <th>Untuk</th>
            <th>Jatuh Tempo</th>
            <th>Status</th>
            <th className="num">Nominal</th>
          </tr>
        </thead>
        <tbody>
          {rows.map(l => {
            const t = TAGIHAN.find(t => t.id === l.tagihanId);
            const s = STUDENTS.find(s => s.id === l.siswaId);
            const status = tagihanStatus(l);
            const bt = BILL_TYPES[t.tipe];
            return (
              <tr key={l.id}>
                <td>
                  <div className="row gap-2">
                    <div style={{
                      width: 30, height: 30, borderRadius: 6,
                      background: 'hsl(var(--accent-h) var(--accent-s) 95%)',
                      color: 'hsl(var(--accent-h) var(--accent-s) 35%)',
                      display: 'grid', placeItems: 'center',
                    }}>
                      <Icon name={bt.icon} size={14} />
                    </div>
                    <div>
                      <div style={{ fontWeight: 500 }}>{t.nama}</div>
                      <div className="text-sm muted">{bt.label}</div>
                    </div>
                  </div>
                </td>
                <td>{s.nama.split(' ').slice(0,2).join(' ')} <span className="muted">· {s.kelas}</span></td>
                <td className="tnum">{formatDate(l.jatuhTempo)}</td>
                <td><StatusBadge status={status} /></td>
                <td className="num tnum" style={{ fontWeight: 600 }}>{formatRupiah(l.nominal)}</td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

// ── TAGIHAN tab ──
function GuardianTagihan({ myKids, ledger, activeKidId, setActiveKidId }) {
  const [filter, setFilter] = React.useState('belum');
  const today = new Date('2026-05-05');

  // Show all kids combined when guardian has multiple — let them filter via kid switcher in topbar
  const visible = ledger.filter(l => {
    const status = tagihanStatus(l, today);
    if (filter === 'all') return true;
    if (filter === 'belum') return status !== 'lunas';
    if (filter === 'lunas') return status === 'lunas';
    if (filter === 'overdue') return status === 'jatuh_tempo';
    return true;
  }).sort((a, b) => {
    // unpaid first, by due date
    if (a.status === 'lunas' && b.status !== 'lunas') return 1;
    if (a.status !== 'lunas' && b.status === 'lunas') return -1;
    return new Date(a.jatuhTempo) - new Date(b.jatuhTempo);
  });

  return (
    <>
      <h1>Tagihan</h1>
      <p className="lede">Daftar lengkap tagihan sekolah untuk anak Anda.</p>

      <div className="row between mb-4">
        <div className="tabs">
          {['belum', 'overdue', 'lunas', 'all'].map(f => (
            <button key={f}
                    className={`tab ${filter === f ? 'active' : ''}`}
                    onClick={() => setFilter(f)}>
              {f === 'belum' ? 'Belum Lunas' :
               f === 'overdue' ? 'Tertunggak' :
               f === 'lunas' ? 'Sudah Lunas' : 'Semua'}
              <span className="muted" style={{ marginLeft: 6 }}>
                {ledger.filter(l => {
                  const st = tagihanStatus(l, today);
                  if (f === 'all') return true;
                  if (f === 'belum') return st !== 'lunas';
                  if (f === 'lunas') return st === 'lunas';
                  if (f === 'overdue') return st === 'jatuh_tempo';
                  return false;
                }).length}
              </span>
            </button>
          ))}
        </div>
      </div>

      <div className="card">
        <div className="card-body flush">
          <div className="table-wrap">
            <table className="table">
              <thead>
                <tr>
                  <th>Tagihan</th>
                  <th>Anak</th>
                  <th>Jatuh Tempo</th>
                  <th>Status</th>
                  <th className="num">Nominal</th>
                </tr>
              </thead>
              <tbody>
                {visible.map(l => {
                  const t = TAGIHAN.find(t => t.id === l.tagihanId);
                  const s = STUDENTS.find(s => s.id === l.siswaId);
                  const status = tagihanStatus(l, today);
                  const bt = BILL_TYPES[t.tipe];
                  return (
                    <tr key={l.id}>
                      <td>
                        <div className="row gap-2">
                          <div style={{
                            width: 30, height: 30, borderRadius: 6,
                            background: 'hsl(var(--accent-h) var(--accent-s) 95%)',
                            color: 'hsl(var(--accent-h) var(--accent-s) 35%)',
                            display: 'grid', placeItems: 'center',
                          }}>
                            <Icon name={bt.icon} size={14} />
                          </div>
                          <div>
                            <div style={{ fontWeight: 500 }}>{t.nama}</div>
                            <div className="text-sm muted">{bt.label}</div>
                          </div>
                        </div>
                      </td>
                      <td>
                        <div className="row gap-2">
                          <div className="avatar sm" style={{ background: avatarColor(s.nama) }}>{initials(s.nama)}</div>
                          <div>
                            <div style={{ fontWeight: 500 }}>{s.nama.split(' ').slice(0,2).join(' ')}</div>
                            <div className="text-sm muted">{s.kelas}</div>
                          </div>
                        </div>
                      </td>
                      <td className="tnum">{formatDate(l.jatuhTempo)}</td>
                      <td><StatusBadge status={status} /></td>
                      <td className="num tnum" style={{ fontWeight: 600 }}>{formatRupiah(l.nominal)}</td>
                    </tr>
                  );
                })}
                {visible.length === 0 && (
                  <tr><td colSpan="5" style={{ textAlign: 'center', padding: 40, color: 'hsl(var(--muted-foreground))' }}>Tidak ada tagihan dengan filter ini.</td></tr>
                )}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </>
  );
}

// ── RIWAYAT tab ──
function GuardianRiwayat({ myKids, ledger, activeKidId, setActiveKidId }) {
  const lunas = ledger.filter(l => l.status === 'lunas')
    .sort((a, b) => new Date(b.paidAt) - new Date(a.paidAt));
  const [openReceipt, setOpenReceipt] = React.useState(null);

  return (
    <>
      <h1>Riwayat & Kuitansi</h1>
      <p className="lede">Pembayaran yang sudah dilunasi. Klik untuk melihat kuitansi.</p>

      <div className="card">
        <div className="card-header">
          <div>
            <h3 className="card-title">Riwayat Pembayaran</h3>
            <p className="card-desc">{lunas.length} pembayaran tercatat</p>
          </div>
          <div className="row gap-2">
            <button className="btn outline sm"><Icon name="download" size={14} /> Ekspor</button>
          </div>
        </div>
        <div className="card-body flush">
          <div className="table-wrap">
            <table className="table">
              <thead>
                <tr>
                  <th>Tanggal Bayar</th>
                  <th>Tagihan</th>
                  <th>Anak</th>
                  <th>No. Kuitansi</th>
                  <th>Diterima Oleh</th>
                  <th className="num">Nominal</th>
                  <th className="actions"></th>
                </tr>
              </thead>
              <tbody>
                {lunas.map(l => {
                  const t = TAGIHAN.find(t => t.id === l.tagihanId);
                  const s = STUDENTS.find(s => s.id === l.siswaId);
                  return (
                    <tr key={l.id} onClick={() => setOpenReceipt(l)} style={{ cursor: 'pointer' }}>
                      <td className="tnum">{formatDate(l.paidAt)}</td>
                      <td><span style={{ fontWeight: 500 }}>{t.nama}</span></td>
                      <td>{s.nama.split(' ').slice(0,2).join(' ')} <span className="muted">· {s.kelas}</span></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>
                      <td className="actions">
                        <button className="btn ghost sm" onClick={(e) => { e.stopPropagation(); setOpenReceipt(l); }}>
                          <Icon name="receipt" size={14} /> Kuitansi
                        </button>
                      </td>
                    </tr>
                  );
                })}
                {lunas.length === 0 && (
                  <tr><td colSpan="7" style={{ textAlign: 'center', padding: 40, color: 'hsl(var(--muted-foreground))' }}>Belum ada pembayaran tercatat.</td></tr>
                )}
              </tbody>
            </table>
          </div>
        </div>
      </div>

      {openReceipt && <ReceiptDialog row={openReceipt} onClose={() => setOpenReceipt(null)} />}
    </>
  );
}

function ReceiptDialog({ row, onClose }) {
  const t = TAGIHAN.find(t => t.id === row.tagihanId);
  const s = STUDENTS.find(s => s.id === row.siswaId);
  const w = WALI[s.wali];
  return (
    <div className="dialog-backdrop" onClick={onClose}>
      <div className="dialog" onClick={e => e.stopPropagation()}>
        <div className="dialog-header">
          <div className="row between">
            <div>
              <div className="dialog-title">Kuitansi Pembayaran</div>
              <div className="dialog-desc mono">{row.receiptNo}</div>
            </div>
            <div className="badge success dot">Lunas</div>
          </div>
        </div>
        <div className="dialog-body">
          <div className="row between mb-4" style={{ alignItems: 'flex-start' }}>
            <div>
              <div style={{ fontWeight: 600, fontSize: 14 }}>{SCHOOL.name}</div>
              <div className="text-sm muted">Jl. Pendidikan No. 12, Bandung</div>
              <div className="text-sm muted">TA {SCHOOL.tahunAjaran}</div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div className="text-sm muted">Tanggal Bayar</div>
              <div className="tnum" style={{ fontWeight: 500 }}>{formatDateLong(row.paidAt)}</div>
            </div>
          </div>

          <div className="receipt">
            <div className="receipt-line"><span className="muted">Nama Siswa</span><span style={{ fontWeight: 500 }}>{s.nama}</span></div>
            <div className="receipt-line"><span className="muted">NIS</span><span className="mono">{s.nis}</span></div>
            <div className="receipt-line"><span className="muted">Kelas</span><span>{s.kelas}</span></div>
            <div className="receipt-line"><span className="muted">Wali Murid</span><span>{w.nama}</span></div>
            <div style={{ height: 1, background: 'hsl(var(--border))', margin: '8px 0' }} />
            <div className="receipt-line"><span className="muted">Jenis Pembayaran</span><span>{BILL_TYPES[t.tipe].label}</span></div>
            <div className="receipt-line"><span className="muted">Keterangan</span><span style={{ fontWeight: 500 }}>{t.nama}</span></div>
            <div className="receipt-line"><span className="muted">Diterima Oleh</span><span>{row.paidBy}</span></div>
            <div className="receipt-line total"><span>Total Dibayar</span><span className="tnum">{formatRupiah(row.nominal)}</span></div>
          </div>

          <div style={{ marginTop: 18, padding: '12px 16px', background: 'hsl(150 50% 96%)', border: '1px solid hsl(150 35% 85%)', borderRadius: 8, fontSize: 13, color: 'hsl(150 60% 24%)' }}>
            <div className="row gap-2"><Icon name="checkCircle" size={14} /> <span style={{ fontWeight: 500 }}>Pembayaran sah</span></div>
            <div style={{ marginTop: 4, paddingLeft: 22 }}>Kuitansi ini sah tanpa stempel basah dan dapat dicetak sebagai bukti pembayaran.</div>
          </div>
        </div>
        <div className="dialog-footer">
          <button className="btn outline" onClick={onClose}>Tutup</button>
          <button className="btn secondary"><Icon name="download" size={14} /> Unduh PDF</button>
          <button className="btn"><Icon name="print" size={14} /> Cetak</button>
        </div>
      </div>
    </div>
  );
}

window.GuardianApp = GuardianApp;
window.NAV_LABEL = NAV_LABEL;