// Laporan — revenue by branch, top items, mechanic performance, P&L
function LaporanPage({ role }) {
  const [period, setPeriod] = React.useState(CURRENT_PERIOD);

  // Aggregate per cabang
  const perCabang = CABANG.map(c => {
    const rev = SERVIS_HISTORY.filter(h => h.cabang === c.id).reduce((s, h) => s + h.total, 0);
    const cnt = SERVIS_HISTORY.filter(h => h.cabang === c.id).length;
    return { ...c, rev, cnt };
  });
  const totalRev = perCabang.reduce((s, c) => s + c.rev, 0);

  // Top items
  const itemCount = {};
  SERVIS_HISTORY.forEach(h => h.items.forEach(id => { itemCount[id] = (itemCount[id] || 0) + 1; }));
  const topItems = Object.entries(itemCount).map(([id, n]) => ({ id, n, item: ITEM_SERVIS_BY_ID[id] })).sort((a, b) => b.n - a.n).slice(0, 6);

  // Mechanic perf
  const mekanikPerf = MEKANIK.map(m => {
    const wos = SERVIS_HISTORY.filter(h => h.mekanikId === m.id);
    return { ...m, jobs: wos.length, rev: wos.reduce((s, h) => s + h.total, 0) };
  }).sort((a, b) => b.rev - a.rev);

  return (
    <div>
      <PageHeader
        eyebrow="Insight"
        title="Laporan & Analitik"
        subtitle={`Performa bisnis ${PERIOD_LIST.find(p => p.id === period)?.label || period}`}
        actions={
          <>
            <select value={period} onChange={e => setPeriod(e.target.value)} style={{padding:'7px 10px', border:'1px solid hsl(var(--border))', borderRadius:8, fontSize:13, background:'hsl(var(--card))'}}>
              {PERIOD_LIST.map(p => <option key={p.id} value={p.id}>{p.label}</option>)}
            </select>
            <Btn icon="download" tone="outline">Export PDF</Btn>
          </>
        }
      />

      <div className="grid mb-6" style={{gridTemplateColumns:'repeat(4, 1fr)', gap:12}}>
        <Kpi label="Revenue" value={rupiah(totalRev, {compact:true})} hint="+12% vs bulan lalu" icon="dollar" tone="good" />
        <Kpi label="Total WO" value={SERVIS_HISTORY.length} hint={`${Math.round(SERVIS_HISTORY.length / 30)} WO/hari rata2`} icon="wrench" tone="info" />
        <Kpi label="Avg Ticket" value={rupiah(Math.round(totalRev / SERVIS_HISTORY.length), {compact:true})} hint="per transaksi" icon="receipt" tone="accent" />
        <Kpi label="Margin Kotor" value="38%" hint="jasa + sparepart" icon="trending" tone="good" />
      </div>

      <div className="grid mb-6" style={{gridTemplateColumns:'1.3fr 1fr', gap:14}}>
        {/* Revenue per cabang */}
        <Card style={{padding:14}}>
          <SectionHead title="Revenue per Cabang" subtitle="kontribusi 3 cabang" />
          <div className="flex-col gap-3">
            {perCabang.map(c => {
              const pct = Math.round((c.rev / totalRev) * 100);
              return (
                <div key={c.id}>
                  <div className="row" style={{justifyContent:'space-between', marginBottom:5}}>
                    <div>
                      <div style={{fontWeight:600, fontSize:13}}>{c.name}</div>
                      <div style={{fontSize:11, color:'hsl(var(--muted-foreground))'}}>{c.cnt} WO · {c.bay} bay</div>
                    </div>
                    <div style={{textAlign:'right'}}>
                      <div className="mono" style={{fontWeight:650, fontSize:14}}>{rupiah(c.rev, {compact:true})}</div>
                      <div style={{fontSize:11, color:'hsl(var(--muted-foreground))'}}>{pct}% kontribusi</div>
                    </div>
                  </div>
                  <div style={{height:7, background:'hsl(var(--muted))', borderRadius:99, overflow:'hidden'}}>
                    <div style={{height:'100%', width: pct + '%', background:'linear-gradient(90deg, hsl(var(--accent)), hsl(180 50% 35%))', borderRadius:99}} />
                  </div>
                </div>
              );
            })}
          </div>
        </Card>

        {/* Top items */}
        <Card style={{padding:14}}>
          <SectionHead title="Item Servis Terlaris" subtitle="frekuensi pengerjaan" />
          <div className="flex-col gap-2">
            {topItems.map((it, i) => (
              <div key={it.id} className="row" style={{justifyContent:'space-between', padding:'7px 0', borderBottom: i < topItems.length - 1 ? '1px solid hsl(var(--border))' : 'none'}}>
                <div className="row gap-2" style={{alignItems:'center'}}>
                  <span style={{width:22, height:22, background:'hsl(var(--muted))', borderRadius:5, display:'flex', alignItems:'center', justifyContent:'center', fontSize:11, fontWeight:700, color:'hsl(var(--muted-foreground))'}}>{i+1}</span>
                  <span style={{fontSize:12.5, fontWeight:600}}>{it.item?.label}</span>
                </div>
                <div className="row gap-2" style={{alignItems:'center'}}>
                  <span style={{fontSize:11, color:'hsl(var(--muted-foreground))'}}>{it.n}x</span>
                  <span className="mono" style={{fontSize:11.5, fontWeight:600}}>{rupiah(it.n * (it.item?.hargaJasa || 0), {compact:true})}</span>
                </div>
              </div>
            ))}
          </div>
        </Card>
      </div>

      <Card style={{padding:14, marginBottom:14}}>
        <SectionHead title="Performa Mekanik" subtitle="ranking berdasarkan revenue tertangani" />
        <table className="table">
          <thead>
            <tr>
              <th style={{width:30}}>#</th>
              <th>Mekanik</th>
              <th style={{width:90}}>Cabang</th>
              <th style={{width:100}}>Spesialisasi</th>
              <th style={{width:80}}>Rating</th>
              <th style={{width:80}}>Job Period</th>
              <th style={{width:140}}>Revenue</th>
            </tr>
          </thead>
          <tbody>
            {mekanikPerf.map((m, i) => (
              <tr key={m.id}>
                <td><span style={{fontSize:11, fontWeight:700, color:'hsl(var(--muted-foreground))'}}>{i+1}</span></td>
                <td><div className="row gap-2" style={{alignItems:'center'}}><Avatar initials={m.initials} className="sm" tone="accent" /><div><div style={{fontWeight:600, fontSize:13}}>{m.name}</div><div style={{fontSize:10.5, color:'hsl(var(--muted-foreground))'}}>{m.level}</div></div></div></td>
                <td style={{fontSize:12}}>{cabangName(m.cabang)}</td>
                <td style={{fontSize:12}}>{m.spec}</td>
                <td><span style={{fontSize:12, fontWeight:600}}>★ {m.rating}</span></td>
                <td className="mono" style={{fontSize:12}}>{m.jobs}</td>
                <td className="mono" style={{fontWeight:650, fontVariantNumeric:'tabular-nums'}}>{rupiah(m.rev, {compact:true})}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </Card>

      <Card style={{padding:14}}>
        <SectionHead title="Ringkasan Profit & Loss" subtitle={PERIOD_LIST.find(p => p.id === period)?.label || period} />
        <div className="grid" style={{gridTemplateColumns:'1fr 1fr', gap:18}}>
          <div>
            <table className="table" style={{fontSize:13}}>
              <tbody>
                <tr><td style={{padding:'8px 0'}}>Revenue Jasa</td><td className="mono" style={{textAlign:'right', fontWeight:600}}>{rupiah(totalRev * 0.55, {compact:true})}</td></tr>
                <tr><td style={{padding:'8px 0'}}>Revenue Sparepart</td><td className="mono" style={{textAlign:'right', fontWeight:600}}>{rupiah(totalRev * 0.45, {compact:true})}</td></tr>
                <tr style={{borderTop:'1px solid hsl(var(--border))'}}><td style={{padding:'8px 0', fontWeight:700}}>Total Revenue</td><td className="mono" style={{textAlign:'right', fontWeight:700}}>{rupiah(totalRev, {compact:true})}</td></tr>
                <tr><td style={{padding:'8px 0'}}>HPP Sparepart</td><td className="mono" style={{textAlign:'right'}}>({rupiah(totalRev * 0.45 * 0.7, {compact:true})})</td></tr>
                <tr><td style={{padding:'8px 0'}}>Gaji Mekanik & Staff</td><td className="mono" style={{textAlign:'right'}}>({rupiah(28000000, {compact:true})})</td></tr>
                <tr><td style={{padding:'8px 0'}}>Sewa & Utilitas 3 cabang</td><td className="mono" style={{textAlign:'right'}}>({rupiah(18000000, {compact:true})})</td></tr>
                <tr style={{borderTop:'2px solid hsl(var(--border))'}}><td style={{padding:'10px 0', fontWeight:700, color:'hsl(var(--good))'}}>Laba Bersih</td><td className="mono" style={{textAlign:'right', fontWeight:700, color:'hsl(var(--good))'}}>{rupiah(totalRev - totalRev * 0.45 * 0.7 - 46000000, {compact:true})}</td></tr>
              </tbody>
            </table>
          </div>
          <div>
            <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', textTransform:'uppercase', letterSpacing:0.4, fontWeight:600, marginBottom:10}}>Trend 14 Hari</div>
            <div style={{height:140, display:'flex', alignItems:'flex-end', gap:3}}>
              {REVENUE_14D.map((r, i) => {
                const max = Math.max(...REVENUE_14D.map(x => x.amount));
                const h = (r.amount / max) * 100;
                return (
                  <div key={i} style={{flex:1, display:'flex', flexDirection:'column', alignItems:'center', gap:3}}>
                    <div style={{width:'100%', height: h + '%', background:'linear-gradient(180deg, hsl(var(--accent)), hsl(180 50% 30%))', borderRadius:'3px 3px 0 0', minHeight:4}} />
                  </div>
                );
              })}
            </div>
            <div className="row" style={{justifyContent:'space-between', marginTop:5, fontSize:10, color:'hsl(var(--muted-foreground))'}}>
              <span>2 minggu lalu</span><span>Hari ini</span>
            </div>
          </div>
        </div>
      </Card>
    </div>
  );
}

window.LaporanPage = LaporanPage;
