// Layout shell for Koperasi Karya Bersama
const { useState } = React;

const NAV = [
  { group: 'Operasional', items: [
    { id:'dashboard', label:'Dashboard', icon:'home' },
    { id:'anggota',   label:'Anggota', icon:'users' },
    { id:'simpanan',  label:'Simpanan', icon:'inbox' },
    { id:'pinjaman',  label:'Pinjaman', icon:'creditCard' },
    { id:'angsuran',  label:'Angsuran', icon:'receipt' },
  ]},
  { group: 'Akuntansi', items: [
    { id:'ledger',    label:'Ledger Kas', icon:'list' },
    { id:'laporan',   label:'Laporan', icon:'trending' },
  ]},
];

const PAGE_TITLES = {
  dashboard: { t:'Dashboard', s:'Ringkasan anggota, simpanan, pinjaman, angsuran, kas dan SHU' },
  anggota:   { t:'Anggota', s:'Master data anggota koperasi dan profil simpanan/pinjaman' },
  simpanan:  { t:'Simpanan', s:'Simpanan pokok, wajib, sukarela, dan progres target unit' },
  pinjaman:  { t:'Pinjaman', s:'Pengajuan pinjaman, outstanding, plafon, tenor, dan komite kredit' },
  angsuran:  { t:'Angsuran', s:'Tagihan jatuh tempo, pembayaran, denda, dan kolektibilitas' },
  ledger:    { t:'Ledger Kas', s:'Jurnal kas teller, kas bank, piutang anggota, dan pendapatan jasa' },
  laporan:   { t:'Laporan', s:'Analitik simpan pinjam, cashflow, SHU, dan risiko kredit' },
};

function Card({ className = '', children, style }) { return <div className={'card ' + className} style={style}>{children}</div>; }

function Btn({ tone = 'outline', size = 'sm', icon, children, onClick, disabled, title, type = 'button' }) {
  const cls = ['btn'];
  if (tone === 'primary') {/* default */}
  else if (tone === 'secondary') cls.push('secondary');
  else if (tone === 'ghost') cls.push('ghost');
  else if (tone === 'destructive') cls.push('destructive');
  else cls.push('outline');
  if (size === 'sm') cls.push('sm');
  if (size === 'lg') cls.push('lg');
  return <button type={type} onClick={onClick} disabled={disabled} title={title} className={cls.join(' ')}>{icon && <Icon name={icon} size={13}/>} {children}</button>;
}

function SoftPill({ color='green', children }) { return <span className={'soft-pill ' + color}>{children}</span>; }

function StatusPill({ status }) {
  const color = status === 'aktif' || status === 'paid' ? 'green'
    : status === 'pending' || status === 'due' ? 'amber'
    : status === 'late' || status === 'nonaktif' ? 'rose'
    : 'gray';
  return <SoftPill color={color}>{statusLabel(status)}</SoftPill>;
}

function SectionHead({ title, hint, action }) {
  return (
    <div className="row between" style={{marginBottom:12, gap:12}}>
      <div>
        <h3 style={{fontSize:14, fontWeight:700, margin:0}}>{title}</h3>
        {hint && <div style={{fontSize:11.5, color:'hsl(var(--muted-foreground))', marginTop:2}}>{hint}</div>}
      </div>
      {action}
    </div>
  );
}

function MemberAvatar({ name, size='' }) { return <div className={'member-avatar ' + size}>{initials(name)}</div>; }

function Sidebar({ active, setActive, role }) {
  const r = ROLES[role];
  return (
    <aside className="sidebar">
      <div className="sidebar-brand">
        <div className="sidebar-brand-mark" style={{background:'hsl(142 45% 35%)'}}><Icon name="layers" size={18} style={{color:'white'}}/></div>
        <div className="sidebar-brand-text">
          <div className="sidebar-brand-name">Karya Bersama</div>
          <div className="sidebar-brand-sub">Koperasi Simpan Pinjam</div>
        </div>
      </div>
      <div style={{flex:1, overflowY:'auto'}}>
        {NAV.map(g => <div key={g.group}>
          <div className="sidebar-section">{g.group}</div>
          {g.items.map(item => <button key={item.id} onClick={()=>setActive(item.id)} className={'nav-item' + (active === item.id ? ' active' : '')}>
            <Icon name={item.icon} size={15} className="icon"/><span>{item.label}</span>
            {item.id === 'pinjaman' && KPI.pendingPinjaman > 0 && <span style={{marginLeft:'auto', fontSize:11, fontWeight:700, background:'hsl(38 90% 94%)', color:'hsl(38 80% 30%)', borderRadius:999, padding:'2px 8px'}}>{KPI.pendingPinjaman}</span>}
          </button>)}
        </div>)}
      </div>
      <div style={{padding:'10px 4px 4px', borderTop:'1px solid hsl(var(--border))', marginTop:8}}>
        <div className="row" style={{padding:'4px 6px'}}>
          <MemberAvatar name={r.name} size="sm" />
          <div style={{minWidth:0, flex:1}}>
            <div className="sidebar-user-name">{r.name}</div>
            <div className="sidebar-user-role">{r.role}</div>
          </div>
        </div>
      </div>
    </aside>
  );
}

function Topbar({ page, unit, setUnit }) {
  const cur = PAGE_TITLES[page] || {t:page,s:''};
  return (
    <header className="topbar">
      <div style={{flex:1, minWidth:0}}>
        <div className="topbar-title">{cur.t}</div>
        <div className="topbar-crumb">{cur.s}</div>
      </div>
      <div className="row gap-2 text-sm muted"><Icon name="calendar" size={13}/><span className="mono" style={{fontWeight:600, color:'hsl(var(--foreground))'}}>{PERIODE_LABEL}</span></div>
      <UnitFilter value={unit} onChange={setUnit}/>
      <button className="btn outline sm" title="Notifikasi" style={{position:'relative'}}><Icon name="bell" size={13}/><span style={{position:'absolute', top:5, right:5, width:6, height:6, borderRadius:999, background:'hsl(var(--destructive))'}} /></button>
    </header>
  );
}

function UnitFilter({ value, onChange }) {
  return <select className="select" value={value} onChange={e=>onChange(e.target.value)} style={{width:'auto', minWidth:180, height:32}}><option value="all">Semua Unit</option>{UNIT.map(u => <option key={u.id} value={u.id}>{u.name}</option>)}</select>;
}

function PageHeader({ eyebrow, title, subtitle, actions }) {
  return (
    <div className="card" style={{padding:'16px 20px', marginBottom:16, display:'flex', alignItems:'flex-start', gap:16}}>
      <div style={{flex:1, minWidth:0}}>
        {eyebrow && <div style={{fontSize:10.5, textTransform:'uppercase', letterSpacing:'0.08em', color:'hsl(var(--muted-foreground))', fontWeight:700, marginBottom:5}}>{eyebrow}</div>}
        <h1 style={{fontSize:21, fontWeight:700, letterSpacing:'-0.02em', margin:0}}>{title}</h1>
        {subtitle && <p style={{fontSize:13, color:'hsl(var(--muted-foreground))', margin:'5px 0 0', maxWidth:820}}>{subtitle}</p>}
      </div>
      {actions && <div className="row gap-2" style={{flexWrap:'wrap', justifyContent:'flex-end'}}>{actions}</div>}
    </div>
  );
}

function Kpi({ label, value, sub, icon, tone, progress }) {
  return (
    <div className="card kpi" style={{padding:14}}>
      <div className="row between" style={{marginBottom:7}}>
        <div style={{fontSize:10.5, color:'hsl(var(--muted-foreground))', textTransform:'uppercase', letterSpacing:'0.06em', fontWeight:700}}>{label}</div>
        {icon && <div className="kpi-icon" data-tone={tone}><Icon name={icon} size={14}/></div>}
      </div>
      <div style={{fontSize:23, fontWeight:700, letterSpacing:'-0.025em', fontVariantNumeric:'tabular-nums', lineHeight:1.1}}>{value}</div>
      {sub && <div style={{fontSize:11.5, color:'hsl(var(--muted-foreground))', marginTop:4}}>{sub}</div>}
      {progress != null && <div className="kpi-progress"><div style={{width: Math.min(100, progress) + '%'}} /></div>}
    </div>
  );
}

function Field({ label, value }) {
  return <div><div style={{fontSize:10.5, textTransform:'uppercase', letterSpacing:'0.06em', color:'hsl(var(--muted-foreground))', fontWeight:700, marginBottom:2}}>{label}</div><div style={{fontSize:12.5, fontWeight:650}}>{value}</div></div>;
}

Object.assign(window, { NAV, PAGE_TITLES, Card, Btn, SoftPill, StatusPill, SectionHead, MemberAvatar, Sidebar, Topbar, UnitFilter, PageHeader, Kpi, Field });