// Dashboard — Bali Drive Rentcar
const { useMemo: useMemoD } = React;

function Dashboard({ role, setPage }) {
  const can = ROLES[role]?.can || {};
  const today = KPI.hari_ini;
  const bulan = KPI.bulan_ini;

  const totalArmada = ARMADA.length;
  // Derive live counts from ARMADA status (data sumber tunggal)
  const armadaRented = ARMADA.filter(a => a.status === 'rented').length;
  const armadaWorkshop = ARMADA.filter(a => a.status === 'maintenance').length;
  const armadaAvail = ARMADA.filter(a => a.status === 'available').length;
  const utilPct = Math.round((armadaRented / totalArmada) * 100);
  const sparkPath = useMemoD(() => {
    const W = 280, H = 60, P = 4;
    const vals = REVENUE_14D.map(d => d.v);
    const min = Math.min(...vals), max = Math.max(...vals);
    const xStep = (W - P*2) / (vals.length - 1);
    return vals.map((v, i) => {
      const x = P + i * xStep;
      const y = H - P - ((v - min) / (max - min || 1)) * (H - P*2);
      return `${i===0?'M':'L'}${x.toFixed(1)},${y.toFixed(1)}`;
    }).join(' ');
  }, []);

  const onTripTrips = TRIPS.filter(t => t.status === 'in-trip');
  const alertCount = ALERTS.length;

  return (
    <div>
      <PageHeader
        eyebrow={`${cabangName(ROLES[role].cabang)} · ${formatDateID(TODAY)}`}
        title={`Selamat ${parseInt(NOW_HHMM) < 12 ? 'pagi' : parseInt(NOW_HHMM) < 17 ? 'siang' : 'sore'}, ${ROLES[role].name.split(' ')[0]}`}
        subtitle={`${TENANT.name} — ${ARMADA.length} armada di ${CABANG.length} cabang. ${armadaRented} disewa, ${armadaWorkshop} di workshop, ${armadaAvail} siap.`}
        actions={[
          <Btn key="bk" icon="plus" tone="primary" size="sm" onClick={() => setPage('booking')}>Booking baru</Btn>,
          <Btn key="trk" icon="navigation" tone="outline" size="sm" onClick={() => setPage('tracking')}>Buka tracking</Btn>,
        ]}
      />

      {/* KPI hari ini */}
      <div className="stat-grid mb-6">
        <Kpi label="Armada Terpakai" value={`${armadaRented}/${totalArmada}`}
             sub={`Utilisasi ${utilPct}% · ${armadaWorkshop} di workshop`}
             icon="car" tone="success" progress={utilPct} />
        <Kpi label="On Trip Sekarang" value={onTripTrips.length}
             sub={`${onTripTrips.filter(t=>t.driver).length} with-driver · ${onTripTrips.filter(t=>!t.driver).length} self-drive`}
             icon="navigation" tone="info" />
        <Kpi label="Revenue Hari Ini" value={rupiah(today.revenue_hari, {sym:true, compact:true})}
             sub={`${today.booking_baru} booking baru`}
             icon="dollar" tone="success" />
        <Kpi label="Alert Operasional" value={alertCount}
             sub={`${ALERTS.filter(a=>a.sev==='danger').length} kritis · ${ALERTS.filter(a=>a.sev==='warn').length} warning`}
             icon="alertTri" tone={alertCount > 3 ? 'warn' : 'info'} />
      </div>

      <div className="grid-2 mb-6">
        {/* Left: Live trip ringkas */}
        <Card className="p-4">
          <SectionHead
            title="Armada Sedang On-Trip"
            hint={`${onTripTrips.length} mobil bergerak — update last ping ${NOW_HHMM}`}
            action={<Btn size="sm" tone="ghost" icon="arrowRight" onClick={() => setPage('tracking')}>Buka peta</Btn>}
          />
          <div style={{display:'flex', flexDirection:'column', gap:8}}>
            {onTripTrips.slice(0, 6).map(tr => {
              const veh = ARMADA_BY_ID[tr.armada];
              return (
                <div key={tr.id} className="row gap-3" style={{padding:'10px 12px', borderRadius:10, background:'hsl(195 36% 98%)', border:'1px solid hsl(var(--border))', alignItems:'center'}}>
                  <div style={{width:8, height:8, borderRadius:999, background:'hsl(158 56% 42%)', flexShrink:0, animation:'pulse-live 1.8s infinite'}} />
                  <div style={{minWidth:0, flex:1}}>
                    <div className="row gap-2" style={{alignItems:'center'}}>
                      <span className="mono" style={{fontSize:11.5, fontWeight:700}}>{veh?.plat}</span>
                      <span style={{fontSize:12.5, fontWeight:500}}>{veh?.merk} {veh?.model}</span>
                      {tr.alert && (
                        <Pill tone={tr.alert==='overspeed'?'danger':'warn'}>
                          {tr.alert === 'overspeed' ? 'Overspeed' : 'BBM rendah'}
                        </Pill>
                      )}
                    </div>
                    <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', marginTop:2}}>
                      <Icon name="pin" size={10} /> {tr.lokasi} · {tr.kecepatan} km/j
                    </div>
                  </div>
                  <div style={{width:80}}>
                    <FuelGauge pct={tr.bbm_pct} />
                  </div>
                </div>
              );
            })}
          </div>
        </Card>

        {/* Right: Booking hari ini + upcoming */}
        <Card className="p-4">
          <SectionHead
            title="Booking Hari Ini"
            hint={`${BOOKINGS.filter(b => b.mulai.startsWith(TODAY) && (b.status==='ongoing'||b.status==='confirmed')).length} aktif · ${BOOKINGS.filter(b => b.status==='pending').length} menunggu konfirmasi`}
            action={<Btn size="sm" tone="ghost" icon="arrowRight" onClick={() => setPage('booking')}>Semua booking</Btn>}
          />
          <div style={{display:'flex', flexDirection:'column', gap:6}}>
            {BOOKINGS
              .filter(b => b.status === 'ongoing' || b.status === 'confirmed' || b.status === 'pending')
              .slice(0, 6)
              .map(b => {
                const veh = ARMADA_BY_ID[b.armada];
                const cust = CUSTOMER_BY_ID[b.cust];
                return (
                  <div key={b.id} className="row gap-3" style={{padding:'10px 12px', borderRadius:10, border:'1px solid hsl(var(--border))', alignItems:'center'}}>
                    <div style={{minWidth:0, flex:1}}>
                      <div className="row gap-2" style={{alignItems:'center'}}>
                        <span className="mono" style={{fontSize:11, fontWeight:600, color:'hsl(var(--muted-foreground))'}}>{b.id}</span>
                        <StatusPill status={b.status} />
                      </div>
                      <div style={{fontSize:12.5, fontWeight:500, marginTop:2}}>
                        {cust?.nama} · {veh?.merk} {veh?.model}
                      </div>
                      <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', marginTop:2}}>
                        {formatDateTimeID(b.mulai)} → {b.durasi} hari · {statusLabel(b.layanan)}
                      </div>
                    </div>
                    <div style={{textAlign:'right'}}>
                      <div style={{fontSize:13, fontWeight:600, fontVariantNumeric:'tabular-nums'}}>{rupiah(b.total, {sym:true, compact:true})}</div>
                      <div style={{fontSize:10.5, color:'hsl(var(--muted-foreground))', marginTop:2}}>{statusLabel(b.dibayar)}</div>
                    </div>
                  </div>
                );
              })}
          </div>
        </Card>
      </div>

      {/* Revenue trend + Top armada */}
      <div className="grid-2 mb-6">
        <Card className="p-4">
          <SectionHead
            title="Revenue 14 Hari Terakhir"
            hint={`Bulan ini ${rupiah(bulan.revenue, {sym:true, compact:true})} · +${bulan.growth_mom}% vs bulan lalu`}
          />
          <div style={{display:'flex', alignItems:'flex-end', gap:14}}>
            <div style={{flex:1}}>
              <svg viewBox="0 0 280 60" style={{width:'100%', height:60}}>
                <defs>
                  <linearGradient id="sparkFill" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="0%" stopColor="hsl(var(--accent-h) var(--accent-s) var(--accent-l))" stopOpacity="0.25" />
                    <stop offset="100%" stopColor="hsl(var(--accent-h) var(--accent-s) var(--accent-l))" stopOpacity="0" />
                  </linearGradient>
                </defs>
                <path d={sparkPath + ' L276,60 L4,60 Z'} fill="url(#sparkFill)" />
                <path d={sparkPath} fill="none" stroke="hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) - 8%))" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
              <div className="row between" style={{fontSize:10.5, color:'hsl(var(--muted-foreground))', marginTop:6}}>
                <span>{formatDateID(REVENUE_14D[0].d)}</span>
                <span>{formatDateID(REVENUE_14D[REVENUE_14D.length-1].d)}</span>
              </div>
            </div>
            <div style={{minWidth:130, display:'flex', flexDirection:'column', gap:8}}>
              <div>
                <div style={{fontSize:10.5, color:'hsl(var(--muted-foreground))', fontWeight:600, textTransform:'uppercase', letterSpacing:'0.05em'}}>Avg/hari</div>
                <div style={{fontSize:18, fontWeight:600, fontFamily:'Fraunces, Georgia, serif', fontVariantNumeric:'tabular-nums', marginTop:2}}>
                  {rupiah(Math.round(REVENUE_14D.reduce((s,d)=>s+d.v,0)/REVENUE_14D.length), {sym:true, compact:true})}
                </div>
              </div>
              <div>
                <div style={{fontSize:10.5, color:'hsl(var(--muted-foreground))', fontWeight:600, textTransform:'uppercase', letterSpacing:'0.05em'}}>Total booking</div>
                <div style={{fontSize:18, fontWeight:600, fontFamily:'Fraunces, Georgia, serif', fontVariantNumeric:'tabular-nums', marginTop:2}}>
                  {REVENUE_14D.reduce((s,d)=>s+d.booking,0)}
                </div>
              </div>
              <div>
                <div style={{fontSize:10.5, color:'hsl(var(--muted-foreground))', fontWeight:600, textTransform:'uppercase', letterSpacing:'0.05em'}}>Rating avg</div>
                <div style={{fontSize:18, fontWeight:600, fontFamily:'Fraunces, Georgia, serif', fontVariantNumeric:'tabular-nums', marginTop:2}}>★ {bulan.avg_rating}</div>
              </div>
            </div>
          </div>
        </Card>

        <Card className="p-4">
          <SectionHead
            title="Top Armada Bulan Ini"
            hint="Revenue tertinggi · ranking dari TOP_ARMADA"
            action={<Btn size="sm" tone="ghost" icon="arrowRight" onClick={() => setPage('laporan')}>Detail laporan</Btn>}
          />
          <div style={{display:'flex', flexDirection:'column'}}>
            {TOP_ARMADA.slice(0, 6).map((row, i) => {
              const veh = ARMADA_BY_ID[row.armada];
              return (
                <div key={row.armada} className="row gap-3" style={{padding:'10px 0', borderBottom: i === 5 ? 'none' : '1px solid hsl(var(--border))', alignItems:'center'}}>
                  <div style={{width:22, height:22, borderRadius:999, background:'hsl(var(--muted))', display:'grid', placeItems:'center', fontSize:11, fontWeight:700, color:'hsl(var(--muted-foreground))'}}>{i+1}</div>
                  <div style={{minWidth:0, flex:1}}>
                    <div style={{fontSize:12.5, fontWeight:600}}>{veh?.merk} {veh?.model}</div>
                    <div className="mono" style={{fontSize:11, color:'hsl(var(--muted-foreground))', marginTop:1}}>
                      {veh?.plat} · {row.trips} trip · ★{row.rating.toFixed(2)}
                    </div>
                  </div>
                  <div style={{textAlign:'right', minWidth:90}}>
                    <div style={{fontSize:13, fontWeight:600, fontVariantNumeric:'tabular-nums'}}>{rupiah(row.revenue, {sym:true, compact:true})}</div>
                    <div style={{fontSize:10.5, color:'hsl(var(--muted-foreground))', marginTop:1}}>util {row.util_pct}%</div>
                  </div>
                </div>
              );
            })}
          </div>
        </Card>
      </div>

      {/* Alerts + Activity */}
      <div className="grid-2 mb-6">
        <Card className="p-4">
          <SectionHead
            title="Alert & Notifikasi"
            hint={`${ALERTS.length} alert aktif perlu perhatian`}
          />
          <div style={{display:'flex', flexDirection:'column', gap:8}}>
            {ALERTS.map(a => {
              const veh = a.armada ? ARMADA_BY_ID[a.armada] : null;
              return (
                <div key={a.id} className="row gap-3" style={{padding:'10px 12px', borderRadius:10, border:'1px solid ' + (a.sev==='danger'?'hsl(0 70% 88%)':a.sev==='warn'?'hsl(38 80% 85%)':'hsl(var(--border))'), background: a.sev==='danger'?'hsl(0 80% 98%)':a.sev==='warn'?'hsl(38 90% 98%)':'hsl(195 36% 98%)', alignItems:'flex-start'}}>
                  <Icon name={a.sev==='danger'?'alertTri':a.sev==='warn'?'alert':'bell'} size={16} style={{color: a.sev==='danger'?'hsl(0 70% 45%)':a.sev==='warn'?'hsl(35 80% 38%)':'hsl(var(--muted-foreground))', flexShrink:0, marginTop:1}} />
                  <div style={{minWidth:0, flex:1}}>
                    <div style={{fontSize:12.5, fontWeight:500, color:'hsl(var(--foreground))'}}>{a.pesan}</div>
                    <div style={{fontSize:10.5, color:'hsl(var(--muted-foreground))', marginTop:3}}>
                      {veh && <><span className="mono" style={{fontWeight:600}}>{veh.plat}</span> · </>}
                      {a.trip && <>{a.trip} · </>}
                      {a.waktu} ({fmtMin(minutesSince(a.waktu))} lalu)
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </Card>

        <Card className="p-4">
          <SectionHead
            title="Aktivitas Terbaru"
            hint="Log operasional dari semua role"
          />
          <div style={{display:'flex', flexDirection:'column'}}>
            {ACTIVITY.map((a, i) => (
              <div key={a.id} className="row gap-3" style={{padding:'8px 0', borderBottom: i === ACTIVITY.length-1 ? 'none' : '1px solid hsl(var(--border))', alignItems:'flex-start'}}>
                <span className="mono" style={{fontSize:10.5, color:'hsl(var(--muted-foreground))', fontWeight:600, minWidth:34, marginTop:2}}>{a.t}</span>
                <div style={{minWidth:0, flex:1}}>
                  <div style={{fontSize:12.5}}>
                    <b style={{fontWeight:600}}>{a.actor}</b> {a.text}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </Card>
      </div>

      {/* Cabang ringkas */}
      <Card className="p-4 mb-6">
        <SectionHead title="Cabang" hint={`${CABANG.length} pool aktif di Bali`} />
        <div className="grid-3">
          {CABANG.map(c => {
            const armadaCabang = ARMADA.filter(a => a.cabang === c.id);
            const tersedia = armadaCabang.filter(a => a.status === 'available').length;
            const disewa = armadaCabang.filter(a => a.status === 'rented').length;
            const ws = armadaCabang.filter(a => a.status === 'maintenance').length;
            return (
              <div key={c.id} style={{padding:14, border:'1px solid hsl(var(--border))', borderRadius:12, background:'hsl(195 36% 99%)'}}>
                <div className="row gap-2" style={{alignItems:'center', marginBottom:8}}>
                  <Icon name="building" size={16} style={{color:'hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) - 8%))'}} />
                  <div>
                    <div style={{fontSize:14, fontWeight:600}}>{c.name}</div>
                    <div style={{fontSize:11, color:'hsl(var(--muted-foreground))'}}>{c.head} · {c.addr}</div>
                  </div>
                </div>
                <div className="row gap-3" style={{paddingTop:10, borderTop:'1px solid hsl(var(--border))'}}>
                  <div style={{flex:1}}>
                    <div style={{fontSize:18, fontWeight:600, fontFamily:'Fraunces, Georgia, serif', color:'hsl(158 56% 38%)', fontVariantNumeric:'tabular-nums'}}>{tersedia}</div>
                    <div style={{fontSize:10.5, color:'hsl(var(--muted-foreground))'}}>Tersedia</div>
                  </div>
                  <div style={{flex:1}}>
                    <div style={{fontSize:18, fontWeight:600, fontFamily:'Fraunces, Georgia, serif', color:'hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) - 8%))', fontVariantNumeric:'tabular-nums'}}>{disewa}</div>
                    <div style={{fontSize:10.5, color:'hsl(var(--muted-foreground))'}}>Disewa</div>
                  </div>
                  <div style={{flex:1}}>
                    <div style={{fontSize:18, fontWeight:600, fontFamily:'Fraunces, Georgia, serif', color:'hsl(35 80% 42%)', fontVariantNumeric:'tabular-nums'}}>{ws}</div>
                    <div style={{fontSize:10.5, color:'hsl(var(--muted-foreground))'}}>Workshop</div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </Card>
    </div>
  );
}

window.Dashboard = Dashboard;