// Shared layout shell: sidebar + topbar
function Sidebar({ role, view, setView, ctx }) {
  const items = NAV[role];
  return (
    <aside className="sidebar">
      <div className="sidebar-brand">
        <div className="sidebar-brand-mark">PB</div>
        <div className="sidebar-brand-text">
          <div className="sidebar-brand-name">{SCHOOL.name}</div>
          <div className="sidebar-brand-sub">TA {SCHOOL.tahunAjaran}</div>
        </div>
      </div>

      {items.map((group, gi) => (
        <React.Fragment key={gi}>
          {group.label && <div className="sidebar-section">{group.label}</div>}
          {group.items.map((it) => {
            const active = view === it.id;
            const tail = it.tail ? it.tail(ctx) : null;
            return (
              <button key={it.id} className={`nav-item ${active ? 'active' : ''}`}
                      onClick={() => setView(it.id)}>
                <Icon name={it.icon} className="icon" />
                {it.label}
                {tail != null && <span className="nav-item-tail">{tail}</span>}
              </button>
            );
          })}
        </React.Fragment>
      ))}

      <div style={{ flex: 1 }} />
      <div style={{ borderTop: '1px solid hsl(var(--border))', marginTop: 8, paddingTop: 12 }}>
        <UserBadge role={role} ctx={ctx} />
      </div>
    </aside>
  );
}

function UserBadge({ role, ctx }) {
  let name, sub;
  if (role === 'guardian') {
    const w = WALI[ctx.guardianId];
    name = w?.nama || 'Wali Murid';
    sub = 'Wali Murid';
  } else if (role === 'finance') {
    name = 'Ibu Sinta Damayanti';
    sub = 'Bagian Keuangan';
  } else {
    name = 'Bpk. Yusuf Hidayat';
    sub = 'Wali Kelas 4A';
  }
  return (
    <div className="row" style={{ padding: '6px 8px' }}>
      <div className="avatar" style={{ background: avatarColor(name) }}>
        {initials(name)}
      </div>
      <div style={{ minWidth: 0, flex: 1 }}>
        <div style={{ fontSize: 13, fontWeight: 600, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{name}</div>
        <div style={{ fontSize: 11.5, color: 'hsl(var(--muted-foreground))' }}>{sub}</div>
      </div>
    </div>
  );
}

const NAV = {
  guardian: [
    { items: [
      { id: 'g_home', label: 'Beranda', icon: 'home' },
      { id: 'g_tagihan', label: 'Tagihan', icon: 'wallet',
        tail: (c) => c.outstandingCount > 0 ? c.outstandingCount : null },
      { id: 'g_riwayat', label: 'Riwayat & Kuitansi', icon: 'receipt' },
    ]},
    { label: 'Anak', items: [] }, // children list rendered separately
  ],
  finance: [
    { items: [
      { id: 'f_dashboard', label: 'Dashboard', icon: 'dashboard' },
      { id: 'f_teller', label: 'Loket Pembayaran', icon: 'cash' },
      { id: 'f_tagihan', label: 'Daftar Tagihan', icon: 'wallet' },
      { id: 'f_siswa', label: 'Siswa & Wali', icon: 'users' },
    ]},
  ],
  teacher: [
    { items: [
      { id: 't_kelas', label: 'Kelas Saya', icon: 'graduationCap' },
      { id: 't_riwayat', label: 'Riwayat Pembayaran', icon: 'receipt' },
    ]},
  ],
};

function Topbar({ children }) {
  return <div className="topbar">{children}</div>;
}

function StatusBadge({ status, size }) {
  const map = {
    lunas:       { cls: 'success',     label: 'Lunas', icon: 'check' },
    belum:       { cls: 'neutral',     label: 'Belum Bayar', icon: 'clock' },
    segera:      { cls: 'warning',     label: 'Segera', icon: 'clock' },
    jatuh_tempo: { cls: 'destructive', label: 'Jatuh Tempo', icon: 'alert' },
  };
  const m = map[status] || map.belum;
  return (
    <span className={`badge ${m.cls} dot`}>
      {m.label}
    </span>
  );
}

function ProgressBar({ value, max, success }) {
  const pct = Math.min(100, Math.max(0, (value / max) * 100));
  return (
    <div className="progress">
      <div className={`progress-bar ${success ? 'success' : ''}`} style={{ width: pct + '%' }} />
    </div>
  );
}

Object.assign(window, { Sidebar, Topbar, UserBadge, StatusBadge, ProgressBar });