// Layout shell — AR Collection untuk CV Sinar Distribusi Nusantara
const NAV = [
  { group:'Piutang', items:[
    { id:'dashboard', label:'Dashboard', icon:'home' },
    { id:'aging', label:'Invoice Aging', icon:'receipt' },
    { id:'customers', label:'Customer', icon:'users' },
  ]},
  { group:'Collection', items:[
    { id:'tasks', label:'Tugas Collector', icon:'list' },
    { id:'followup', label:'Follow-up WA', icon:'bell' },
    { id:'payments', label:'Pembayaran', icon:'creditCard' },
  ]},
  { group:'Analitik', items:[
    { id:'reports', label:'Laporan', icon:'trending' },
  ]},
];

const PAGE_TITLES = {
  dashboard:{ t:'Dashboard AR', s:'Ringkasan piutang, overdue, collection target, janji bayar, dan risiko customer' },
  aging:{ t:'Invoice Aging', s:'Board aging piutang berdasarkan umur jatuh tempo dan prioritas penagihan' },
  customers:{ t:'Customer Ledger', s:'Profil toko, limit kredit, term pembayaran, histori bayar, dan outstanding' },
  tasks:{ t:'Tugas Collector', s:'Kanban tugas reminder, visit, promise-to-pay, dan dispute' },
  followup:{ t:'Follow-up WhatsApp', s:'Template reminder, histori komunikasi, janji bayar, dan dispute notes' },
  payments:{ t:'Pembayaran', s:'Bukti transfer, matching invoice, partial payment, dan rekonsiliasi' },
  reports:{ t:'Laporan', s:'DSO, collection rate, aging heatmap, overdue trend, dan top risky customers' },
};

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='navy', children }) { return <span className={'soft-pill ' + color}>{children}</span>; }
function StatusPill({ status }) {
  const color = status === 'matched' ? 'green' : status === 'pending' || status === 'due' || status === 'partial' ? 'amber' : status === 'overdue' || status === 'unmatched' ? 'rose' : 'navy';
  return <SoftPill color={color}>{statusLabel(status)}</SoftPill>;
}
function CollectorAvatar({ name, size='' }) { return <div className={'collector-avatar ' + size}>{initials(name)}</div>; }
function SectionHead({ title, hint, action }) {
  return <div className="row between" style={{marginBottom:12, gap:12}}><div><h3 style={{fontSize:14, fontWeight:750, margin:0}}>{title}</h3>{hint && <div className="text-sm muted" style={{marginTop:2}}>{hint}</div>}</div>{action}</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(222 48% 34%)'}}><Icon name="receipt" size={18} style={{color:'white'}}/></div><div className="sidebar-brand-text"><div className="sidebar-brand-name">AR Collection</div><div className="sidebar-brand-sub">Sinar Distribusi</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 === 'tasks' && KPI.tasksToday > 0 && <span style={{marginLeft:'auto', fontSize:11, fontWeight:800, background:'hsl(38 92% 94%)', color:'hsl(35 88% 30%)', borderRadius:999, padding:'2px 8px'}}>{KPI.tasksToday}</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'}}><CollectorAvatar 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, collector, setCollector }) {
  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:700, color:'hsl(var(--foreground))'}}>{PERIODE_LABEL}</span></div><CollectorFilter value={collector} onChange={setCollector}/><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 CollectorFilter({ value, onChange }) { return <select className="select" value={value} onChange={e=>onChange(e.target.value)} style={{width:'auto', minWidth:190, height:32}}><option value="all">Semua Collector</option>{COLLECTORS.map(c => <option key={c.id} value={c.id}>{c.name} · {c.area}</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:750, marginBottom:5}}>{eyebrow}</div>}<h1 style={{fontSize:21, fontWeight:800, letterSpacing:'-0.025em', margin:0}}>{title}</h1>{subtitle && <p style={{fontSize:13, color:'hsl(var(--muted-foreground))', margin:'5px 0 0', maxWidth:850}}>{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:750}}>{label}</div>{icon && <div className="kpi-icon" data-tone={tone}><Icon name={icon} size={14}/></div>}</div><div style={{fontSize:23, fontWeight:800, letterSpacing:'-0.03em', fontVariantNumeric:'tabular-nums', lineHeight:1.1}}>{value}</div>{sub && <div className="text-sm muted" style={{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:750, marginBottom:2}}>{label}</div><div style={{fontSize:12.5, fontWeight:650}}>{value}</div></div>; }

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