// Armada — daftar & detail kendaraan
const { useState: useStateA, useMemo: useMemoA } = React;

function Armada({ role, setPage }) {
  const [q, setQ] = useStateA('');
  const [fStatus, setFStatus] = useStateA('all');
  const [fCabang, setFCabang] = useStateA('all');
  const [fKat, setFKat] = useStateA('all');
  const [selId, setSelId] = useStateA(null);
  const [tab, setTab] = useStateA('info');

  const filtered = useMemoA(() => {
    return ARMADA.filter(a => {
      if (fStatus !== 'all' && a.status !== fStatus) return false;
      if (fCabang !== 'all' && a.cabang !== fCabang) return false;
      if (fKat !== 'all') {
        // 'matic'/'manual' filter via trans, else tipe
        if (fKat === 'matic' || fKat === 'manual') {
          if (a.trans !== fKat) return false;
        } else if (a.tipe !== fKat) return false;
      }
      if (q) {
        const s = q.toLowerCase();
        if (!a.plat.toLowerCase().includes(s)
          && !`${a.merk} ${a.model}`.toLowerCase().includes(s)) return false;
      }
      return true;
    });
  }, [q, fStatus, fCabang, fKat]);

  const sel = selId ? ARMADA_BY_ID[selId] : null;

  const cTersedia = ARMADA.filter(a => a.status === 'available').length;
  const cDisewa = ARMADA.filter(a => a.status === 'rented').length;
  const cWS = ARMADA.filter(a => a.status === 'maintenance').length;
  const cClean = ARMADA.filter(a => a.status === 'cleaning').length;

  return (
    <div>
      <PageHeader
        eyebrow="Manajemen Armada"
        title="Armada"
        subtitle={`${ARMADA.length} kendaraan terdaftar — ${cTersedia} tersedia · ${cDisewa} disewa · ${cWS} workshop · ${cClean} cuci`}
        actions={[
          <Btn key="ex" icon="download" tone="ghost" size="sm">Export</Btn>,
          <Btn key="add" icon="plus" tone="primary" size="sm">Tambah armada</Btn>,
        ]}
      />

      {/* Filter bar */}
      <Card className="p-3 mb-4">
        <div className="row gap-3" style={{flexWrap:'wrap', alignItems:'center'}}>
          <div style={{flex:'1 1 220px', minWidth:200, position:'relative'}}>
            <Icon name="search" size={14} style={{position:'absolute', left:10, top:'50%', transform:'translateY(-50%)', color:'hsl(var(--muted-foreground))', pointerEvents:'none'}} />
            <input className="input" placeholder="Cari plat / merk / model…" value={q} onChange={e=>setQ(e.target.value)} style={{paddingLeft:30, width:'100%'}} />
          </div>
          <select className="select" value={fStatus} onChange={e=>setFStatus(e.target.value)} style={{minWidth:140}}>
            <option value="all">Semua status</option>
            <option value="available">Tersedia</option>
            <option value="rented">Disewa</option>
            <option value="cleaning">Cuci</option>
            <option value="maintenance">Workshop</option>
            <option value="reserved">Reserved</option>
          </select>
          <select className="select" value={fCabang} onChange={e=>setFCabang(e.target.value)} style={{minWidth:140}}>
            <option value="all">Semua cabang</option>
            {CABANG.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
          </select>
          <select className="select" value={fKat} onChange={e=>setFKat(e.target.value)} style={{minWidth:160}}>
            {KATEGORI.map(k => <option key={k.id} value={k.id}>{k.label}</option>)}
          </select>
          <div style={{marginLeft:'auto', fontSize:12, color:'hsl(var(--muted-foreground))'}}>
            <b style={{color:'hsl(var(--foreground))'}}>{filtered.length}</b> dari {ARMADA.length}
          </div>
        </div>
      </Card>

      <div className="grid-3">
        {filtered.map(v => (
          <VehicleCard key={v.id} veh={v} selected={selId === v.id} onClick={() => { setSelId(v.id); setTab('info'); }} />
        ))}
      </div>

      {filtered.length === 0 && (
        <Card className="p-6" style={{textAlign:'center'}}>
          <Icon name="search" size={28} style={{color:'hsl(var(--muted-foreground))', opacity:0.5}} />
          <div style={{fontSize:14, fontWeight:600, marginTop:8}}>Tidak ada armada cocok</div>
          <div style={{fontSize:12, color:'hsl(var(--muted-foreground))', marginTop:4}}>Coba ubah filter atau kata kunci pencarian</div>
        </Card>
      )}

      {sel && <ArmadaDrawer veh={sel} onClose={() => setSelId(null)} tab={tab} setTab={setTab} setPage={setPage} />}
    </div>
  );
}

function ArmadaDrawer({ veh, onClose, tab, setTab, setPage }) {
  // Trip via booking lookup
  const bookings = BOOKINGS.filter(b => b.armada === veh.id);
  const trips = TRIPS.filter(t => t.armada === veh.id);
  const wos = MAINTENANCE.filter(m => m.armada === veh.id);
  const top = TOP_ARMADA.find(t => t.armada === veh.id);
  const iconName = veh.tipe === 'van' ? 'truck' : veh.tipe === 'premium' ? 'carFront' : 'car';

  // Service projection
  const kmToService = Math.max(0, veh.nextService - veh.odo);
  const servicePct = Math.min(100, Math.max(0, (1 - kmToService / 5000) * 100));

  return (
    <div className="drawer-backdrop" onClick={onClose}>
      <div className="drawer" onClick={e => e.stopPropagation()}>
        <div className="drawer-header">
          <div>
            <div className="mono" style={{fontSize:11, color:'hsl(var(--muted-foreground))', fontWeight:600}}>{veh.id}</div>
            <div className="drawer-title" style={{marginTop:2}}>
              {veh.merk} {veh.model} <span style={{color:'hsl(var(--muted-foreground))', fontWeight:400, fontSize:15}}>· {veh.thn}</span>
            </div>
            <div className="row gap-2" style={{marginTop:8, alignItems:'center', flexWrap:'wrap'}}>
              <span className="mono" style={{fontSize:12, fontWeight:700, padding:'3px 9px', background:'hsl(var(--muted))', borderRadius:6}}>{veh.plat}</span>
              <StatusPill status={veh.status} />
              <Pill tone="muted">{tipeArmadaLabel(veh.tipe)}</Pill>
            </div>
          </div>
          <Btn icon="x" tone="ghost" size="sm" onClick={onClose} />
        </div>

        <div className="drawer-tabs">
          {[
            {id:'info', label:'Info'},
            {id:'trips', label:`Trip & Booking (${bookings.length})`},
            {id:'servis', label:`Servis (${wos.length})`},
            {id:'finance', label:'Performance'},
          ].map(t => (
            <button key={t.id} className={'drawer-tab' + (tab === t.id ? ' active' : '')} onClick={() => setTab(t.id)}>{t.label}</button>
          ))}
        </div>

        <div className="drawer-body">
          {tab === 'info' && (
            <>
              <div className={'veh-thumb ' + veh.tipe} style={{height:140, marginBottom:16, position:'relative'}}>
                <span className="veh-plate">{veh.plat}</span>
                <span className="veh-cat-tag">{tipeArmadaLabel(veh.tipe)}</span>
                <Icon name={iconName} size={64} />
              </div>

              <div className="kv-grid mb-4">
                <div className="kv"><span className="kv-k">Cabang</span><span className="kv-v">{cabangName(veh.cabang)}</span></div>
                <div className="kv"><span className="kv-k">Warna</span><span className="kv-v">{veh.warna}</span></div>
                <div className="kv"><span className="kv-k">Transmisi</span><span className="kv-v">{statusLabel(veh.trans)}</span></div>
                <div className="kv"><span className="kv-k">BBM</span><span className="kv-v">{statusLabel(veh.bbm)}</span></div>
                <div className="kv"><span className="kv-k">Kapasitas</span><span className="kv-v">{veh.seat} penumpang</span></div>
                <div className="kv"><span className="kv-k">Tahun</span><span className="kv-v">{veh.thn}</span></div>
                <div className="kv"><span className="kv-k">Odometer</span><span className="kv-v mono">{veh.odo.toLocaleString('id-ID')} km</span></div>
                <div className="kv"><span className="kv-k">Tarif harian</span><span className="kv-v mono">{rupiah(veh.tarif, {sym:true})}</span></div>
                <div className="kv"><span className="kv-k">Tarif mingguan (est)</span><span className="kv-v mono">{rupiah(veh.tarif * 6, {sym:true})}</span></div>
                <div className="kv"><span className="kv-k">Tarif bulanan (est)</span><span className="kv-v mono">{rupiah(veh.tarif * 22, {sym:true})}</span></div>
              </div>

              {/* Service projection card */}
              <div style={{padding:12, background:'hsl(195 36% 98%)', borderRadius:10, border:'1px solid hsl(var(--border))', marginBottom:14}}>
                <div className="row between" style={{alignItems:'flex-end'}}>
                  <div>
                    <div style={{fontSize:10.5, fontWeight:600, textTransform:'uppercase', letterSpacing:'0.06em', color:'hsl(var(--muted-foreground))'}}>Servis berikutnya</div>
                    <div style={{fontSize:14, fontWeight:600, fontFamily:'Fraunces, Georgia, serif', marginTop:4}}>
                      {veh.nextService.toLocaleString('id-ID')} km
                    </div>
                  </div>
                  <div style={{textAlign:'right'}}>
                    <div style={{fontSize:18, fontWeight:600, fontVariantNumeric:'tabular-nums', color: kmToService < 1000 ? 'hsl(35 80% 38%)' : 'hsl(var(--foreground))'}}>
                      {kmToService.toLocaleString('id-ID')} km
                    </div>
                    <div style={{fontSize:10.5, color:'hsl(var(--muted-foreground))'}}>tersisa</div>
                  </div>
                </div>
                <div style={{height:6, background:'hsl(var(--muted))', borderRadius:999, marginTop:10, overflow:'hidden'}}>
                  <div style={{height:'100%', width:servicePct+'%', background: kmToService < 1000 ? 'hsl(35 80% 50%)' : 'hsl(158 56% 45%)', transition:'width 200ms ease'}} />
                </div>
                <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', marginTop:8}}>
                  Servis terakhir: {formatDateID(veh.lastService)}
                </div>
              </div>

              <div className="row gap-2" style={{flexWrap:'wrap'}}>
                <Btn icon="navigation" tone="primary" size="sm" onClick={() => setPage('tracking')}>Lihat di peta</Btn>
                <Btn icon="calendar" tone="outline" size="sm" onClick={() => setPage('booking')}>Booking baru</Btn>
                <Btn icon="wrench" tone="outline" size="sm" onClick={() => setPage('maintenance')}>Jadwalkan servis</Btn>
              </div>
            </>
          )}

          {tab === 'trips' && (
            <div style={{display:'flex', flexDirection:'column', gap:8}}>
              {trips.length > 0 && (
                <>
                  <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', textTransform:'uppercase', fontWeight:600, letterSpacing:'0.06em', marginBottom:4}}>Trip aktif</div>
                  {trips.map(t => {
                    const b = BOOKINGS.find(bk => bk.id === t.booking);
                    const cust = b ? CUSTOMER_BY_ID[b.cust] : null;
                    return (
                      <div key={t.id} style={{padding:'10px 12px', border:'1px solid hsl(var(--border))', borderRadius:10, background:'hsl(195 36% 98%)'}}>
                        <div className="row between" style={{alignItems:'center'}}>
                          <span className="mono" style={{fontSize:11, fontWeight:600}}>{t.id}</span>
                          <StatusPill status={t.status} />
                        </div>
                        <div style={{fontSize:12.5, fontWeight:500, marginTop:4}}>{cust?.nama || t.driver_name}</div>
                        <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', marginTop:2}}>
                          <Icon name="pin" size={10} /> {t.lokasi} · {t.kecepatan} km/j · BBM {t.bbm_pct}%
                        </div>
                      </div>
                    );
                  })}
                </>
              )}
              <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', textTransform:'uppercase', fontWeight:600, letterSpacing:'0.06em', marginTop: trips.length ? 10 : 0, marginBottom:4}}>Riwayat booking</div>
              {bookings.length === 0 && <div style={{fontSize:13, color:'hsl(var(--muted-foreground))', padding:14, textAlign:'center'}}>Belum ada booking</div>}
              {bookings.slice(0, 10).map(b => {
                const cust = CUSTOMER_BY_ID[b.cust];
                return (
                  <div key={b.id} style={{padding:'8px 10px', border:'1px solid hsl(var(--border))', borderRadius:8}}>
                    <div className="row between" style={{alignItems:'center'}}>
                      <span className="mono" style={{fontSize:11, fontWeight:600}}>{b.id}</span>
                      <StatusPill status={b.status} />
                    </div>
                    <div style={{fontSize:12.5, marginTop:3}}>{cust?.nama} · {formatDateID(b.mulai)} · {b.durasi} hari</div>
                    <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', marginTop:2, fontVariantNumeric:'tabular-nums'}}>{rupiah(b.total, {sym:true})} · {statusLabel(b.dibayar)}</div>
                  </div>
                );
              })}
            </div>
          )}

          {tab === 'servis' && (
            <div style={{display:'flex', flexDirection:'column', gap:8}}>
              {wos.length === 0 && <div style={{fontSize:13, color:'hsl(var(--muted-foreground))', padding:20, textAlign:'center'}}>Belum ada catatan servis</div>}
              {wos.map(w => (
                <div key={w.id} style={{padding:'10px 12px', border:'1px solid hsl(var(--border))', borderRadius:10}}>
                  <div className="row between" style={{alignItems:'center'}}>
                    <span className="mono" style={{fontSize:11, fontWeight:600}}>{w.id}</span>
                    <div className="row gap-2">
                      <Pill tone={statusTone(w.prioritas)}>{statusLabel(w.prioritas)}</Pill>
                      <StatusPill status={w.status} />
                    </div>
                  </div>
                  <div style={{fontSize:13, fontWeight:500, marginTop:4}}>{w.jenis}</div>
                  <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', marginTop:3}}>
                    Masuk {formatDateID(w.masuk)} · Estimasi {formatDateID(w.estimasi)} · {w.mekanik}
                  </div>
                  <div className="row between" style={{marginTop:6, fontSize:11.5, fontVariantNumeric:'tabular-nums'}}>
                    <span style={{color:'hsl(var(--muted-foreground))'}}>Biaya {rupiah(w.biaya, {sym:true})}</span>
                    <span style={{color:'hsl(var(--muted-foreground))'}}>Odo {w.odo.toLocaleString('id-ID')} km</span>
                  </div>
                  {w.parts.length > 0 && (
                    <div style={{marginTop:6, paddingTop:6, borderTop:'1px dashed hsl(var(--border))', fontSize:11, color:'hsl(var(--muted-foreground))'}}>
                      <b style={{color:'hsl(var(--foreground))', fontWeight:600}}>Parts:</b> {w.parts.join(', ')}
                    </div>
                  )}
                </div>
              ))}
            </div>
          )}

          {tab === 'finance' && (
            <>
              {top ? (
                <div style={{padding:14, background:'hsl(var(--accent-h) var(--accent-s) 96%)', border:'1px solid hsl(var(--accent-h) var(--accent-s) 86%)', borderRadius:12, marginBottom:14}}>
                  <div style={{fontSize:10.5, fontWeight:600, textTransform:'uppercase', letterSpacing:'0.06em', color:'hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) - 14%))'}}>Performance Bulan Ini</div>
                  <div className="grid-2" style={{marginTop:10, gap:12}}>
                    <div>
                      <div style={{fontSize:22, fontWeight:600, fontFamily:'Fraunces, Georgia, serif', fontVariantNumeric:'tabular-nums'}}>{rupiah(top.revenue, {sym:true, compact:true})}</div>
                      <div style={{fontSize:11, color:'hsl(var(--muted-foreground))'}}>Total revenue</div>
                    </div>
                    <div>
                      <div style={{fontSize:22, fontWeight:600, fontFamily:'Fraunces, Georgia, serif', fontVariantNumeric:'tabular-nums'}}>{top.trips}</div>
                      <div style={{fontSize:11, color:'hsl(var(--muted-foreground))'}}>Total trip</div>
                    </div>
                    <div>
                      <div style={{fontSize:22, fontWeight:600, fontFamily:'Fraunces, Georgia, serif', fontVariantNumeric:'tabular-nums'}}>{top.util_pct}%</div>
                      <div style={{fontSize:11, color:'hsl(var(--muted-foreground))'}}>Utilisasi</div>
                    </div>
                    <div>
                      <div style={{fontSize:22, fontWeight:600, fontFamily:'Fraunces, Georgia, serif', fontVariantNumeric:'tabular-nums'}}>★ {top.rating.toFixed(2)}</div>
                      <div style={{fontSize:11, color:'hsl(var(--muted-foreground))'}}>Rating customer</div>
                    </div>
                  </div>
                </div>
              ) : (
                <div style={{padding:20, textAlign:'center', fontSize:13, color:'hsl(var(--muted-foreground))', border:'1px dashed hsl(var(--border))', borderRadius:12, marginBottom:14}}>
                  Belum cukup data revenue bulan ini
                </div>
              )}

              <div className="kv-grid">
                <div className="kv"><span className="kv-k">Total booking (lifetime)</span><span className="kv-v mono">{bookings.length}×</span></div>
                <div className="kv"><span className="kv-k">Total revenue (lifetime)</span><span className="kv-v mono">{rupiah(bookings.reduce((s,b)=>s+b.total,0), {sym:true, compact:true})}</span></div>
                <div className="kv"><span className="kv-k">Avg revenue / booking</span><span className="kv-v mono">{bookings.length ? rupiah(Math.round(bookings.reduce((s,b)=>s+b.total,0)/bookings.length), {sym:true, compact:true}) : '—'}</span></div>
                <div className="kv"><span className="kv-k">Total maintenance cost</span><span className="kv-v mono">{rupiah(wos.reduce((s,w)=>s+(typeof w.biaya==='number'?w.biaya:0),0), {sym:true, compact:true})}</span></div>
                <div className="kv"><span className="kv-k">ROI ratio (sederhana)</span><span className="kv-v mono">{(() => {
                  const rev = bookings.reduce((s,b)=>s+b.total,0);
                  const cost = wos.reduce((s,w)=>s+(typeof w.biaya==='number'?w.biaya:0),0);
                  return cost > 0 ? (rev/cost).toFixed(1) + '×' : '—';
                })()}</span></div>
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

window.Armada = Armada;