// Laporan — KPI lengkap, revenue 14d, top armada, breakdown cabang, per-kategori
const { useState: useStateLp, useMemo: useMemoLp } = React;

function Laporan({ role, setPage }) {
  const [periode, setPeriode] = useStateLp('14d'); // 7d | 14d | 30d | mtd
  const addDays = (iso, n) => { const d = new Date(iso); d.setDate(d.getDate() + n); return d.toISOString().slice(0, 10); };

  // Derived dari ARMADA
  const utilByCabang = useMemoLp(() => CABANG.map(c => {
    const inCabang = ARMADA.filter(a => a.cabang === c.id);
    const rented   = inCabang.filter(a => a.status === 'rented').length;
    return {
      id: c.id, name: c.name,
      total: inCabang.length,
      rented,
      available: inCabang.filter(a => a.status === 'available').length,
      maint: inCabang.filter(a => a.status === 'maintenance').length,
      utilPct: inCabang.length ? Math.round((rented / inCabang.length) * 100) : 0,
    };
  }), []);

  const byKategori = useMemoLp(() => {
    const cats = ['city', 'mpv', 'suv', 'premium', 'van'];
    return cats.map(k => {
      const list = ARMADA.filter(a => a.tipe === k);
      const rentedBookings = BOOKINGS.filter(b => {
        const v = ARMADA_BY_ID[b.armada];
        return v && v.tipe === k && (b.status === 'ongoing' || b.status === 'done');
      });
      const revenue = rentedBookings.reduce((s, b) => s + b.total, 0);
      return {
        id: k,
        label: tipeArmadaLabel(k),
        unit: list.length,
        booking: rentedBookings.length,
        revenue,
        avgTarif: list.length ? Math.round(list.reduce((s, a) => s + a.tarif, 0) / list.length) : 0,
      };
    }).sort((a, b) => b.revenue - a.revenue);
  }, []);

  const topArmada = useMemoLp(() => {
    const rev = {};
    BOOKINGS.filter(b => b.status === 'ongoing' || b.status === 'done').forEach(b => {
      rev[b.armada] = (rev[b.armada] || 0) + b.total;
    });
    return Object.entries(rev)
      .map(([id, r]) => ({ armada: ARMADA_BY_ID[id], rev: r }))
      .filter(x => x.armada)
      .sort((a, b) => b.rev - a.rev)
      .slice(0, 8);
  }, []);

  // Revenue spark series — fake 14 hari
  const revDays = useMemoLp(() => Array.from({ length: 14 }, (_, i) => {
    const base = 8_500_000 + Math.sin(i * 0.8) * 2_200_000 + (i % 7 === 0 ? 3_500_000 : 0);
    return Math.round(base + Math.random() * 1_500_000);
  }), []);
  const revTotal = revDays.reduce((s, v) => s + v, 0);
  const revPeak  = Math.max(...revDays);

  const totalBookingPeriod = BOOKINGS.length;
  const totalRevenuePeriod = BOOKINGS.filter(b => b.status === 'ongoing' || b.status === 'done').reduce((s, b) => s + b.total, 0);
  const avgOrderValue      = Math.round(totalRevenuePeriod / Math.max(1, BOOKINGS.filter(b => b.status === 'ongoing' || b.status === 'done').length));
  const utilOverall        = Math.round((ARMADA.filter(a => a.status === 'rented').length / ARMADA.length) * 100);

  return (
    <div>
      <PageHeader
        eyebrow="Laporan & Analytics"
        title="Performa Bisnis"
        subtitle={`Periode 14 hari terakhir · ${formatDateID(addDays(TODAY, -14))} → ${formatDateID(TODAY)}`}
        actions={[
          <div key="period" className="row" style={{background:'hsl(var(--muted))', borderRadius:8, padding:2}}>
            {[{id:'7d',l:'7H'},{id:'14d',l:'14H'},{id:'30d',l:'30H'},{id:'mtd',l:'MTD'}].map(p => (
              <button key={p.id} onClick={()=>setPeriode(p.id)}
                style={{padding:'5px 12px', borderRadius:6, border:0, fontSize:12, fontWeight:600, cursor:'pointer',
                  background: periode===p.id ? 'hsl(var(--card))' : 'transparent',
                  color: periode===p.id ? 'hsl(var(--foreground))' : 'hsl(var(--muted-foreground))',
                  boxShadow: periode===p.id ? 'var(--shadow-sm)' : 'none'}}>{p.l}</button>
            ))}
          </div>,
          <Btn key="exp" icon="download" tone="outline" size="sm">Export PDF</Btn>,
        ]}
      />

      <div className="grid-4 mb-4">
        <Kpi label="Revenue Total"      value={rupiah(totalRevenuePeriod, {compact:true})} hint={`${BOOKINGS.length} booking · ${BOOKINGS.filter(b=>b.status==='done').length} selesai`} icon="dollar" tone="success" progress={78} />
        <Kpi label="Avg Order Value"    value={rupiah(avgOrderValue, {compact:true})}      hint="Rata-rata nilai sewa" icon="receipt" tone="info" />
        <Kpi label="Utilisasi Armada"   value={`${utilOverall}%`}                          hint={`${ARMADA.filter(a=>a.status==='rented').length} dari ${ARMADA.length} unit on-rent`} icon="car" tone="warn" progress={utilOverall} />
        <Kpi label="Total Booking"      value={totalBookingPeriod}                         hint={`${BOOKINGS.filter(b=>b.status==='ongoing').length} aktif · ${BOOKINGS.filter(b=>b.status==='confirmed' || b.status==='pending').length} upcoming`} icon="calendar" tone="accent" />
      </div>

      {/* Revenue trend chart */}
      <Card className="mb-4">
        <div style={{padding:16}}>
          <div className="row between" style={{marginBottom:14}}>
            <div>
              <div style={{fontFamily:'Fraunces, Georgia, serif', fontSize:16, fontWeight:600}}>Revenue Harian</div>
              <div style={{fontSize:11.5, color:'hsl(var(--muted-foreground))', marginTop:2}}>14 hari terakhir · total {rupiah(revTotal, {compact:true})}</div>
            </div>
            <Pill tone="success" dot>+18% vs periode sebelumnya</Pill>
          </div>
          <div style={{display:'flex', alignItems:'flex-end', gap:6, height:160, padding:'8px 0'}}>
            {revDays.map((v, i) => {
              const h = (v / revPeak) * 100;
              const date = addDays(TODAY, -13 + i);
              const isToday = i === 13;
              return (
                <div key={i} style={{flex:1, display:'flex', flexDirection:'column', alignItems:'center', gap:6, position:'relative'}} title={`${formatDateID(date)}: ${rupiah(v)}`}>
                  <div style={{
                    width:'100%', height:`${h}%`,
                    background: isToday ? 'linear-gradient(180deg, hsl(28 78% 55%), hsl(20 78% 48%))' : 'linear-gradient(180deg, hsl(188 60% 55%), hsl(195 65% 42%))',
                    borderRadius:'4px 4px 0 0', transition:'opacity 120ms', cursor:'pointer',
                    minHeight:8,
                  }} />
                  <div style={{fontSize:9.5, color:'hsl(var(--muted-foreground))', fontWeight: isToday ? 700 : 400}}>
                    {date.slice(8, 10)}
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </Card>

      <div className="grid-2 mb-4">
        {/* Per Kategori */}
        <Card>
          <div style={{padding:16}}>
            <div className="row between" style={{marginBottom:14}}>
              <div style={{fontFamily:'Fraunces, Georgia, serif', fontSize:16, fontWeight:600}}>Performa Kategori</div>
              <Pill tone="neutral">5 kategori</Pill>
            </div>
            {byKategori.map((k, i) => {
              const maxRev = byKategori[0].revenue;
              const pct = maxRev ? (k.revenue / maxRev) * 100 : 0;
              return (
                <div key={k.id} style={{marginBottom: i === byKategori.length-1 ? 0 : 12}}>
                  <div className="row between" style={{marginBottom:5}}>
                    <div className="row gap-2" style={{fontSize:13}}>
                      <span style={{fontWeight:600}}>{k.label}</span>
                      <span style={{color:'hsl(var(--muted-foreground))', fontSize:11.5}}>· {k.unit} unit · {k.booking} booking</span>
                    </div>
                    <span className="mono" style={{fontSize:12.5, fontWeight:600}}>{rupiah(k.revenue, {compact:true})}</span>
                  </div>
                  <div style={{height:7, background:'hsl(var(--border))', borderRadius:999, overflow:'hidden'}}>
                    <div style={{height:'100%', width:`${pct}%`, background:'linear-gradient(90deg, hsl(188 60% 50%), hsl(195 60% 40%))', borderRadius:999}} />
                  </div>
                </div>
              );
            })}
          </div>
        </Card>

        {/* Cabang breakdown */}
        <Card>
          <div style={{padding:16}}>
            <div className="row between" style={{marginBottom:14}}>
              <div style={{fontFamily:'Fraunces, Georgia, serif', fontSize:16, fontWeight:600}}>Utilisasi per Cabang</div>
              <Pill tone="neutral">{CABANG.length} lokasi</Pill>
            </div>
            <div style={{display:'flex', flexDirection:'column', gap:14}}>
              {utilByCabang.map(c => (
                <div key={c.id}>
                  <div className="row between" style={{marginBottom:6}}>
                    <div>
                      <div style={{fontSize:13, fontWeight:600}}>{c.name}</div>
                      <div style={{fontSize:11, color:'hsl(var(--muted-foreground))'}}>{c.rented} on-rent · {c.available} ready · {c.maint} maintenance</div>
                    </div>
                    <div style={{textAlign:'right'}}>
                      <div style={{fontFamily:'Fraunces, Georgia, serif', fontSize:20, fontWeight:600}}>{c.utilPct}%</div>
                      <div style={{fontSize:10.5, color:'hsl(var(--muted-foreground))'}}>{c.rented}/{c.total}</div>
                    </div>
                  </div>
                  <div style={{height:8, background:'hsl(var(--border))', borderRadius:999, overflow:'hidden', display:'flex'}}>
                    <div style={{height:'100%', width:`${(c.rented/c.total)*100}%`, background:'hsl(28 78% 55%)'}} />
                    <div style={{height:'100%', width:`${(c.maint/c.total)*100}%`, background:'hsl(0 65% 55%)'}} />
                    <div style={{height:'100%', width:`${(c.available/c.total)*100}%`, background:'hsl(158 56% 48%)'}} />
                  </div>
                </div>
              ))}
            </div>
            <div className="row gap-3" style={{marginTop:14, fontSize:10.5, color:'hsl(var(--muted-foreground))', justifyContent:'center'}}>
              <span><span style={{display:'inline-block', width:9, height:9, background:'hsl(28 78% 55%)', borderRadius:2, marginRight:4, verticalAlign:'middle'}}/>Rented</span>
              <span><span style={{display:'inline-block', width:9, height:9, background:'hsl(0 65% 55%)',  borderRadius:2, marginRight:4, verticalAlign:'middle'}}/>Maintenance</span>
              <span><span style={{display:'inline-block', width:9, height:9, background:'hsl(158 56% 48%)',borderRadius:2, marginRight:4, verticalAlign:'middle'}}/>Available</span>
            </div>
          </div>
        </Card>
      </div>

      {/* Top armada */}
      <Card className="mb-4">
        <div style={{padding:16}}>
          <div className="row between" style={{marginBottom:14}}>
            <div style={{fontFamily:'Fraunces, Georgia, serif', fontSize:16, fontWeight:600}}>Top 8 Armada — Revenue</div>
            <Pill tone="accent">14 hari</Pill>
          </div>
          <div className="table-wrap">
            <table className="table">
              <thead>
                <tr>
                  <th style={{width:32}}>#</th>
                  <th>Armada</th>
                  <th>Kategori</th>
                  <th>Cabang</th>
                  <th className="num">Tarif/Hari</th>
                  <th className="num">Revenue</th>
                  <th>Status</th>
                </tr>
              </thead>
              <tbody>
                {topArmada.map((t, i) => (
                  <tr key={t.armada.id}>
                    <td>
                      <div style={{
                        width:24, height:24, borderRadius:'50%', display:'grid', placeItems:'center',
                        background: i < 3 ? 'linear-gradient(135deg, hsl(45 80% 60%), hsl(38 75% 50%))' : 'hsl(var(--muted))',
                        color: i < 3 ? 'white' : 'hsl(var(--muted-foreground))',
                        fontSize:11, fontWeight:700,
                      }}>{i+1}</div>
                    </td>
                    <td>
                      <div style={{fontSize:13, fontWeight:600}}>{t.armada.merk} {t.armada.model}</div>
                      <div className="mono" style={{fontSize:11, color:'hsl(var(--muted-foreground))'}}>{t.armada.plat}</div>
                    </td>
                    <td>{tipeArmadaLabel(t.armada.tipe)}</td>
                    <td>{cabangName(t.armada.cabang)}</td>
                    <td className="num">{rupiah(t.armada.tarif, {compact:true})}</td>
                    <td className="num"><strong>{rupiah(t.rev, {compact:true})}</strong></td>
                    <td><StatusPill status={t.armada.status} /></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </Card>

      {/* Stats grid */}
      <div className="grid-4">
        <Card><div style={{padding:14}}>
          <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', fontWeight:600, textTransform:'uppercase', letterSpacing:'0.06em'}}>Self-Drive vs With-Driver</div>
          <div className="row gap-2" style={{marginTop:8, alignItems:'baseline'}}>
            <span style={{fontFamily:'Fraunces, Georgia, serif', fontSize:22, fontWeight:600}}>{BOOKINGS.filter(b=>b.layanan==='self-drive').length}</span>
            <span style={{fontSize:12, color:'hsl(var(--muted-foreground))'}}>vs {BOOKINGS.filter(b=>b.layanan==='with-driver').length}</span>
          </div>
          <div style={{fontSize:10.5, color:'hsl(var(--muted-foreground))', marginTop:6}}>booking dalam periode</div>
        </div></Card>
        <Card><div style={{padding:14}}>
          <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', fontWeight:600, textTransform:'uppercase', letterSpacing:'0.06em'}}>Customer Asing</div>
          <div style={{fontFamily:'Fraunces, Georgia, serif', fontSize:22, fontWeight:600, marginTop:8}}>
            {CUSTOMERS.filter(c=>c.asing).length} <span style={{fontSize:13, color:'hsl(var(--muted-foreground))'}}>/ {CUSTOMERS.length}</span>
          </div>
          <div style={{fontSize:10.5, color:'hsl(var(--muted-foreground))', marginTop:6}}>wisatawan internasional</div>
        </div></Card>
        <Card><div style={{padding:14}}>
          <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', fontWeight:600, textTransform:'uppercase', letterSpacing:'0.06em'}}>WO Maintenance Aktif</div>
          <div style={{fontFamily:'Fraunces, Georgia, serif', fontSize:22, fontWeight:600, marginTop:8}}>{MAINTENANCE.filter(m=>m.status==='in-progress').length}</div>
          <div style={{fontSize:10.5, color:'hsl(var(--muted-foreground))', marginTop:6}}>{rupiah(MAINTENANCE.filter(m=>m.status==='in-progress').reduce((s,m)=>s+m.biaya,0), {compact:true})} estimasi biaya</div>
        </div></Card>
        <Card><div style={{padding:14}}>
          <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', fontWeight:600, textTransform:'uppercase', letterSpacing:'0.06em'}}>Driver On-Trip</div>
          <div style={{fontFamily:'Fraunces, Georgia, serif', fontSize:22, fontWeight:600, marginTop:8}}>
            {DRIVERS.filter(d=>d.status==='on-trip').length} <span style={{fontSize:13, color:'hsl(var(--muted-foreground))'}}>/ {DRIVERS.length}</span>
          </div>
          <div style={{fontSize:10.5, color:'hsl(var(--muted-foreground))', marginTop:6}}>{DRIVERS.filter(d=>d.status==='standby').length} standby siap antar</div>
        </div></Card>
      </div>
    </div>
  );
}

window.Laporan = Laporan;