// Booking — gantt-style calendar + booking detail/new
const { useState: useStateB, useMemo: useMemoB } = React;

const BK_DAYS = 14; // jumlah hari ditampilkan di kalender (mulai dari TODAY - 2)

function Booking({ role, setPage }) {
  const [view, setView] = useStateB('cal'); // 'cal' | 'list'
  const [fStatus, setFStatus] = useStateB('all');
  const [fCabang, setFCabang] = useStateB('all');
  const [q, setQ] = useStateB('');
  const [selBk, setSelBk] = useStateB(null);
  const [showNew, setShowNew] = useStateB(false);

  // Calendar config
  const today = new Date(TODAY);
  const startDay = new Date(today); startDay.setDate(today.getDate() - 2);
  const days = useMemoB(() => Array.from({length: BK_DAYS}, (_, i) => {
    const d = new Date(startDay); d.setDate(startDay.getDate() + i);
    return {
      iso: d.toISOString().slice(0, 10),
      dt: d,
      day: d.getDate(),
      wd: ['Min','Sen','Sel','Rab','Kam','Jum','Sab'][d.getDay()],
      weekend: d.getDay() === 0 || d.getDay() === 6,
      isToday: d.toISOString().slice(0, 10) === TODAY,
    };
  }), []);

  const filteredBookings = useMemoB(() => BOOKINGS.filter(b => {
    if (fStatus !== 'all' && b.status !== fStatus) return false;
    if (fCabang !== 'all' && b.cabang !== fCabang) return false;
    if (q) {
      const s = q.toLowerCase();
      const cust = CUSTOMER_BY_ID[b.cust];
      if (!b.id.toLowerCase().includes(s)
        && !(cust?.nama || '').toLowerCase().includes(s)
        && !b.armada.toLowerCase().includes(s)) return false;
    }
    return true;
  }), [fStatus, fCabang, q]);

  // For calendar: group bookings by armada
  const calArmada = useMemoB(() => {
    // Hanya armada yang punya booking di window date range
    const set = new Set();
    filteredBookings.forEach(b => {
      const start = b.mulai.slice(0, 10);
      const end = b.selesai.slice(0, 10);
      if (end >= days[0].iso && start <= days[days.length-1].iso) {
        set.add(b.armada);
      }
    });
    // Tambah maintenance armada
    MAINTENANCE.forEach(m => {
      if (m.estimasi >= days[0].iso && m.masuk <= days[days.length-1].iso) {
        set.add(m.armada);
      }
    });
    return Array.from(set).map(id => ARMADA_BY_ID[id]).filter(Boolean).sort((a,b) => a.id.localeCompare(b.id));
  }, [filteredBookings, days]);

  // Calendar stats
  const totalBookings = BOOKINGS.length;
  const cOngoing = BOOKINGS.filter(b => b.status === 'ongoing').length;
  const cConfirmed = BOOKINGS.filter(b => b.status === 'confirmed').length;
  const cPending = BOOKINGS.filter(b => b.status === 'pending').length;
  const cDone = BOOKINGS.filter(b => b.status === 'done').length;

  return (
    <div>
      <PageHeader
        eyebrow="Reservasi & Sewa"
        title="Booking"
        subtitle={`${totalBookings} booking tercatat — ${cOngoing} berjalan · ${cConfirmed} terkonfirmasi · ${cPending} menunggu DP · ${cDone} selesai`}
        actions={[
          <Btn key="ex" icon="download" tone="ghost" size="sm">Export</Btn>,
          <Btn key="add" icon="plus" tone="primary" size="sm" onClick={() => setShowNew(true)}>Booking baru</Btn>,
        ]}
      />

      {/* View switch + filters */}
      <Card className="p-3 mb-4">
        <div className="row gap-3" style={{flexWrap:'wrap', alignItems:'center'}}>
          <div className="row" style={{background:'hsl(var(--muted))', borderRadius:8, padding:2}}>
            <button onClick={() => setView('cal')}
              style={{padding:'6px 14px', borderRadius:6, border:0, fontSize:12, fontWeight:600, cursor:'pointer',
                background: view==='cal' ? 'hsl(var(--card))' : 'transparent',
                color: view==='cal' ? 'hsl(var(--foreground))' : 'hsl(var(--muted-foreground))',
                boxShadow: view==='cal' ? 'var(--shadow-sm)' : 'none'}}>
              <Icon name="calendar" size={13} style={{marginRight:6}} />Kalender
            </button>
            <button onClick={() => setView('list')}
              style={{padding:'6px 14px', borderRadius:6, border:0, fontSize:12, fontWeight:600, cursor:'pointer',
                background: view==='list' ? 'hsl(var(--card))' : 'transparent',
                color: view==='list' ? 'hsl(var(--foreground))' : 'hsl(var(--muted-foreground))',
                boxShadow: view==='list' ? 'var(--shadow-sm)' : 'none'}}>
              <Icon name="list" size={13} style={{marginRight:6}} />Daftar
            </button>
          </div>
          <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 ID / customer / armada…" 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:160}}>
            <option value="all">Semua status</option>
            <option value="pending">Menunggu DP</option>
            <option value="confirmed">Terkonfirmasi</option>
            <option value="ongoing">Berjalan</option>
            <option value="done">Selesai</option>
            <option value="cancelled">Batal</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>
        </div>
      </Card>

      {view === 'cal' && (
        <Card style={{padding:0, overflow:'hidden'}}>
          <div style={{padding:'12px 16px', borderBottom:'1px solid hsl(var(--border))', display:'flex', alignItems:'center', justifyContent:'space-between'}}>
            <div>
              <div style={{fontSize:14, fontWeight:600, fontFamily:'Fraunces, Georgia, serif'}}>
                Kalender Armada · {formatDateID(days[0].iso)} → {formatDateID(days[days.length-1].iso)}
              </div>
              <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', marginTop:2}}>
                {calArmada.length} armada dengan booking di periode ini · klik bar untuk detail
              </div>
            </div>
            <div className="row gap-3" style={{fontSize:11, alignItems:'center'}}>
              <span className="row gap-1" style={{alignItems:'center'}}><span style={{width:10, height:10, borderRadius:3, background:'linear-gradient(90deg, hsl(28 78% 52%), hsl(20 78% 48%))'}} />Berjalan</span>
              <span className="row gap-1" style={{alignItems:'center'}}><span style={{width:10, height:10, borderRadius:3, background:'linear-gradient(90deg, hsl(var(--accent-h) var(--accent-s) 52%), hsl(var(--accent-h) var(--accent-s) 44%))'}} />Upcoming</span>
              <span className="row gap-1" style={{alignItems:'center'}}><span style={{width:10, height:10, borderRadius:3, background:'hsl(220 14% 56%)'}} />Maintenance</span>
              <span className="row gap-1" style={{alignItems:'center'}}><span style={{width:10, height:10, borderRadius:3, background:'linear-gradient(90deg, hsl(158 56% 44%), hsl(158 56% 36%))'}} />Selesai</span>
            </div>
          </div>
          <div style={{overflowX:'auto', padding:14}}>
            <div className="booking-cal">
              {/* Header row */}
              <div className="booking-cal-row-label" style={{background:'hsl(195 36% 96%)'}}>
                <div style={{fontFamily:'Fraunces, Georgia, serif', fontSize:13, color:'hsl(var(--foreground))'}}>Armada</div>
                <span className="veh-mini">{calArmada.length} mobil</span>
              </div>
              {days.map(d => (
                <div key={d.iso} className={'booking-cal-head' + (d.weekend ? ' weekend' : '')}
                  style={d.isToday ? {background:'hsl(var(--accent-h) var(--accent-s) 92%)', color:'hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) - 14%))', fontWeight:700} : {}}>
                  <div>{d.wd}</div>
                  <div style={{fontSize:14, fontWeight:600, marginTop:2}}>{d.day}</div>
                </div>
              ))}

              {/* Rows: per armada */}
              {calArmada.map(veh => {
                const vehBookings = filteredBookings.filter(b => b.armada === veh.id);
                const vehMaint = MAINTENANCE.filter(m => m.armada === veh.id);
                return (
                  <React.Fragment key={veh.id}>
                    <div className="booking-cal-row-label">
                      <span>{veh.plat}</span>
                      <span className="veh-mini">{veh.merk} {veh.model}</span>
                    </div>
                    {days.map((d, di) => {
                      // Render hanya pada cell pertama dari bar — pakai colSpan via style position absolute
                      const cellBookings = vehBookings.filter(b => b.mulai.slice(0,10) === d.iso);
                      const cellMaint = vehMaint.filter(m => m.masuk === d.iso);
                      return (
                        <div key={d.iso} className="booking-cal-cell" style={d.isToday ? {background:'hsl(195 36% 98%)'} : {}}>
                          {cellBookings.map(b => {
                            // Span days: hitung col span dari mulai → selesai
                            const sIdx = days.findIndex(dd => dd.iso === b.mulai.slice(0,10));
                            const eIdx = days.findIndex(dd => dd.iso === b.selesai.slice(0,10));
                            const span = (eIdx === -1 ? days.length - sIdx : eIdx - sIdx + 1);
                            if (span <= 0) return null;
                            const klass = b.status === 'ongoing' ? 'active'
                              : b.status === 'confirmed' || b.status === 'pending' ? 'upcoming'
                              : b.status === 'done' ? 'done' : 'upcoming';
                            const cust = CUSTOMER_BY_ID[b.cust];
                            return (
                              <div key={b.id} className={'booking-bar ' + klass}
                                onClick={(e) => { e.stopPropagation(); setSelBk(b.id); }}
                                style={{left:4, right:'auto', width: `calc(${span * 100}% + ${(span-1) * 1}px - 8px)`}}
                                title={`${b.id} · ${cust?.nama}`}
                              >
                                {cust?.nama || b.id}
                              </div>
                            );
                          })}
                          {cellMaint.map(m => {
                            const sIdx = days.findIndex(dd => dd.iso === m.masuk);
                            const eIdx = days.findIndex(dd => dd.iso === m.estimasi);
                            const span = Math.max(1, (eIdx === -1 ? days.length - sIdx : eIdx - sIdx + 1));
                            return (
                              <div key={m.id} className="booking-bar maint"
                                onClick={(e) => { e.stopPropagation(); setPage('maintenance'); }}
                                style={{left:4, width:`calc(${span * 100}% + ${(span-1) * 1}px - 8px)`, top:4, bottom:'auto', height:18, fontSize:10}}
                                title={`${m.id} · ${m.jenis}`}
                              >
                                <Icon name="wrench" size={10} style={{marginRight:4}} />{m.jenis}
                              </div>
                            );
                          })}
                        </div>
                      );
                    })}
                  </React.Fragment>
                );
              })}
            </div>
          </div>
        </Card>
      )}

      {view === 'list' && (
        <Card style={{padding:0}}>
          <table className="table">
            <thead>
              <tr>
                <th>ID</th>
                <th>Customer</th>
                <th>Armada</th>
                <th>Periode</th>
                <th style={{textAlign:'right'}}>Total</th>
                <th>Bayar</th>
                <th>Status</th>
              </tr>
            </thead>
            <tbody>
              {filteredBookings.map(b => {
                const veh = ARMADA_BY_ID[b.armada];
                const cust = CUSTOMER_BY_ID[b.cust];
                return (
                  <tr key={b.id} onClick={() => setSelBk(b.id)} style={{cursor:'pointer'}}>
                    <td className="mono" style={{fontWeight:600}}>{b.id}</td>
                    <td>
                      <div style={{fontWeight:500}}>{cust?.nama}</div>
                      <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', marginTop:2}}>{cust?.kota} · {statusLabel(b.layanan)}</div>
                    </td>
                    <td>
                      <div style={{fontSize:12.5}}>{veh?.merk} {veh?.model}</div>
                      <div className="mono" style={{fontSize:11, color:'hsl(var(--muted-foreground))', marginTop:2}}>{veh?.plat}</div>
                    </td>
                    <td style={{fontSize:12}}>
                      <div>{formatDateTimeID(b.mulai)}</div>
                      <div style={{color:'hsl(var(--muted-foreground))', fontSize:11, marginTop:2}}>{b.durasi} hari → {formatDateTimeID(b.selesai)}</div>
                    </td>
                    <td style={{textAlign:'right'}}>
                      <div className="mono" style={{fontWeight:600}}>{rupiah(b.total, {sym:true})}</div>
                      <div style={{fontSize:10.5, color:'hsl(var(--muted-foreground))', marginTop:2}}>DP {rupiah(b.dp, {sym:true, compact:true})}</div>
                    </td>
                    <td><Pill tone={statusTone(b.dibayar)}>{statusLabel(b.dibayar)}</Pill></td>
                    <td><StatusPill status={b.status} /></td>
                  </tr>
                );
              })}
            </tbody>
          </table>
          {filteredBookings.length === 0 && (
            <div className="empty">Tidak ada booking sesuai filter.</div>
          )}
        </Card>
      )}

      {selBk && <BookingDrawer id={selBk} onClose={() => setSelBk(null)} setPage={setPage} />}
      {showNew && <NewBookingDrawer onClose={() => setShowNew(false)} />}
    </div>
  );
}

function BookingDrawer({ id, onClose, setPage }) {
  const b = BOOKINGS.find(x => x.id === id);
  if (!b) return null;
  const veh = ARMADA_BY_ID[b.armada];
  const cust = CUSTOMER_BY_ID[b.cust];
  const drv = b.driver ? DRIVER_BY_ID[b.driver] : null;
  const trip = b.trip ? TRIP_BY_ID[b.trip] : null;
  const sisa = b.total - b.dp;

  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}}>{b.id}</div>
            <div className="drawer-title" style={{marginTop:2}}>{cust?.nama}</div>
            <div className="row gap-2" style={{marginTop:8, alignItems:'center', flexWrap:'wrap'}}>
              <StatusPill status={b.status} />
              <Pill tone="muted">{statusLabel(b.layanan)}</Pill>
              <Pill tone={statusTone(b.dibayar)}>{statusLabel(b.dibayar)}</Pill>
              {cust?.status === 'vip' && <Pill tone="accent">VIP</Pill>}
              {cust?.asing && <Pill tone="muted">Wisman</Pill>}
            </div>
          </div>
          <Btn icon="x" tone="ghost" size="sm" onClick={onClose} />
        </div>

        <div className="drawer-body">
          {/* Vehicle summary */}
          <div className="row gap-3 mb-4" style={{padding:12, border:'1px solid hsl(var(--border))', borderRadius:10}}>
            <div className={'veh-thumb ' + veh.tipe} style={{width:84, height:64, flexShrink:0}}>
              <Icon name={veh.tipe === 'van' ? 'truck' : veh.tipe === 'premium' ? 'carFront' : 'car'} size={36} />
            </div>
            <div style={{minWidth:0, flex:1}}>
              <div style={{fontSize:14, fontWeight:600}}>{veh.merk} {veh.model}</div>
              <div className="mono" style={{fontSize:11.5, fontWeight:600, color:'hsl(var(--muted-foreground))', marginTop:2}}>{veh.plat}</div>
              <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', marginTop:4}}>{statusLabel(veh.trans)} · {veh.seat} kursi · {statusLabel(veh.bbm)}</div>
            </div>
            <Btn size="sm" tone="ghost" icon="arrowRight" onClick={() => setPage('armada')} />
          </div>

          <SectionHead title="Periode & Layanan" />
          <div className="kv-grid mb-4">
            <div className="kv"><span className="kv-k">Mulai</span><span className="kv-v mono">{formatDateTimeID(b.mulai)}</span></div>
            <div className="kv"><span className="kv-k">Selesai</span><span className="kv-v mono">{formatDateTimeID(b.selesai)}</span></div>
            <div className="kv"><span className="kv-k">Durasi</span><span className="kv-v">{b.durasi} hari</span></div>
            <div className="kv"><span className="kv-k">Layanan</span><span className="kv-v">{statusLabel(b.layanan)}</span></div>
            <div className="kv"><span className="kv-k">Pick-up</span><span className="kv-v">{b.pickup}</span></div>
            <div className="kv"><span className="kv-k">Drop-off</span><span className="kv-v">{b.dropoff}</span></div>
            <div className="kv"><span className="kv-k">Cabang</span><span className="kv-v">{cabangName(b.cabang)}</span></div>
            {drv && <div className="kv"><span className="kv-k">Driver</span><span className="kv-v">{drv.nama} · ★{drv.rating}</span></div>}
          </div>

          {/* Pembayaran */}
          <SectionHead title="Pembayaran" />
          <div style={{padding:14, background:'hsl(195 36% 98%)', border:'1px solid hsl(var(--border))', borderRadius:12, marginBottom:16}}>
            <div className="row between" style={{alignItems:'flex-end', marginBottom:10}}>
              <div>
                <div style={{fontSize:10.5, fontWeight:600, textTransform:'uppercase', letterSpacing:'0.06em', color:'hsl(var(--muted-foreground))'}}>Total tagihan</div>
                <div style={{fontSize:24, fontWeight:600, fontFamily:'Fraunces, Georgia, serif', fontVariantNumeric:'tabular-nums', marginTop:2}}>{rupiah(b.total, {sym:true})}</div>
              </div>
              <Pill tone={statusTone(b.dibayar)}>{statusLabel(b.dibayar)}</Pill>
            </div>
            <div className="kv-grid" style={{borderTop:'1px solid hsl(var(--border))', paddingTop:8}}>
              <div className="kv"><span className="kv-k">Tarif harian</span><span className="kv-v mono">{rupiah(b.tarif, {sym:true})}</span></div>
              <div className="kv"><span className="kv-k">Sub total ({b.durasi} hari)</span><span className="kv-v mono">{rupiah(b.tarif * b.durasi, {sym:true})}</span></div>
              <div className="kv"><span className="kv-k">DP dibayar</span><span className="kv-v mono">{rupiah(b.dp, {sym:true})}</span></div>
              <div className="kv"><span className="kv-k" style={{fontWeight:600, color:'hsl(var(--foreground))'}}>Sisa pembayaran</span><span className="kv-v mono" style={{fontWeight:700, color: sisa > 0 ? 'hsl(28 78% 42%)' : 'hsl(158 56% 38%)'}}>{rupiah(sisa, {sym:true})}</span></div>
            </div>
          </div>

          {/* Trip aktif (kalau ada) */}
          {trip && (
            <>
              <SectionHead title="Trip Aktif" action={<Btn size="sm" tone="ghost" icon="arrowRight" onClick={() => setPage('tracking')}>Buka tracking</Btn>} />
              <div style={{padding:12, border:'1px solid hsl(var(--border))', borderRadius:10, marginBottom:14}}>
                <div className="row between" style={{alignItems:'center'}}>
                  <span className="mono" style={{fontSize:11.5, fontWeight:700}}>{trip.id}</span>
                  <StatusPill status={trip.status} />
                </div>
                <div className="row gap-3" style={{marginTop:8, alignItems:'center'}}>
                  <Icon name="pin" size={14} style={{color:'hsl(var(--muted-foreground))'}} />
                  <div style={{minWidth:0, flex:1}}>
                    <div style={{fontSize:13, fontWeight:500}}>{trip.lokasi}</div>
                    <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', marginTop:2}}>{trip.kecepatan} km/j · BBM {trip.bbm_pct}% · {trip.jarak_km} km ditempuh</div>
                  </div>
                  <FuelGauge pct={trip.bbm_pct} />
                </div>
              </div>
            </>
          )}

          {/* Customer */}
          <SectionHead title="Customer" />
          <div className="row gap-3 mb-3" style={{padding:12, border:'1px solid hsl(var(--border))', borderRadius:10, alignItems:'center'}}>
            <Avatar name={cust.nama} />
            <div style={{minWidth:0, flex:1}}>
              <div style={{fontSize:13.5, fontWeight:600}}>{cust.nama}</div>
              <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', marginTop:2}}>{cust.kota} · {cust.wa}</div>
              <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', marginTop:2}}>{cust.total_booking}× booking · {rupiah(cust.total_spend, {compact:true})} · ★{cust.rating}</div>
            </div>
            <Btn icon="phone" tone="outline" size="sm" />
            <Btn icon="message" tone="outline" size="sm" />
          </div>

          {cust.blacklist && (
            <div style={{padding:12, background:'hsl(0 80% 97%)', border:'1px solid hsl(0 70% 85%)', borderRadius:10, marginBottom:14}}>
              <div className="row gap-2"><Icon name="alertTri" size={14} style={{color:'hsl(0 70% 45%)'}} />
                <div style={{fontSize:11.5, color:'hsl(0 60% 30%)'}}>Customer BLACKLIST — {cust.catatan}</div>
              </div>
            </div>
          )}

          {/* Actions */}
          <div className="row gap-2" style={{marginTop:10, flexWrap:'wrap'}}>
            {b.status === 'confirmed' && <Btn icon="check" tone="primary" size="sm" onClick={() => setPage('serah-terima')}>Mulai BAST</Btn>}
            {b.status === 'ongoing' && <Btn icon="navigation" tone="primary" size="sm" onClick={() => setPage('tracking')}>Lihat tracking</Btn>}
            {b.status === 'pending' && <Btn icon="check" tone="primary" size="sm">Konfirmasi pembayaran</Btn>}
            <Btn icon="message" tone="outline" size="sm">Kirim WhatsApp</Btn>
            <Btn icon="download" tone="outline" size="sm">Cetak invoice</Btn>
            {b.status !== 'done' && b.status !== 'cancelled' && <Btn icon="x" tone="ghost" size="sm">Batalkan</Btn>}
          </div>
        </div>
      </div>
    </div>
  );
}

function NewBookingDrawer({ onClose }) {
  const [step, setStep] = useStateB(1);
  const [layanan, setLayanan] = useStateB('self-drive');
  const [tgl, setTgl] = useStateB(TODAY);
  const [durasi, setDurasi] = useStateB(3);
  const [vehId, setVehId] = useStateB(ARMADA.find(a => a.status === 'available')?.id || ARMADA[0].id);
  const [custId, setCustId] = useStateB('');
  const [asuransi, setAsuransi] = useStateB('TLO');

  const veh = ARMADA_BY_ID[vehId];
  const cust = custId ? CUSTOMER_BY_ID[custId] : null;
  const insur = ASURANSI.find(a => a.id === asuransi);
  const subtotal = veh ? veh.tarif * durasi : 0;
  const driverFee = layanan === 'with-driver' ? 350_000 * durasi : 0;
  const premiPct = insur ? insur.premi_pct : 0;
  const premiAmt = Math.round(subtotal * (premiPct / 100));
  const total = subtotal + driverFee + premiAmt;
  const availArmada = ARMADA.filter(a => a.status === 'available' || a.status === 'cleaning');

  return (
    <div className="drawer-backdrop" onClick={onClose}>
      <div className="drawer" onClick={e => e.stopPropagation()}>
        <div className="drawer-header">
          <div>
            <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', fontWeight:600, textTransform:'uppercase', letterSpacing:'0.06em'}}>Booking Baru</div>
            <div className="drawer-title" style={{marginTop:2}}>Buat reservasi</div>
            <div className="row gap-2" style={{marginTop:8}}>
              {[1,2,3].map(s => (
                <div key={s} style={{width:38, height:5, borderRadius:999, background: s <= step ? 'hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) - 8%))' : 'hsl(var(--border))'}} />
              ))}
              <span style={{fontSize:11, color:'hsl(var(--muted-foreground))', marginLeft:6}}>Langkah {step} / 3</span>
            </div>
          </div>
          <Btn icon="x" tone="ghost" size="sm" onClick={onClose} />
        </div>

        <div className="drawer-body">
          {step === 1 && (
            <>
              <SectionHead title="Layanan & Periode" />
              <div className="row gap-2 mb-4">
                {['self-drive','with-driver'].map(l => (
                  <button key={l} onClick={() => setLayanan(l)}
                    style={{flex:1, padding:'14px 16px', borderRadius:10, border:'1px solid ' + (layanan===l ? 'hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) - 8%))' : 'hsl(var(--border))'), background: layanan===l ? 'hsl(var(--accent-h) var(--accent-s) 95%)' : 'hsl(var(--card))', cursor:'pointer', textAlign:'left'}}>
                    <Icon name={l === 'self-drive' ? 'key' : 'steering'} size={20} style={{color: 'hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) - 8%))', marginBottom:6}} />
                    <div style={{fontSize:13, fontWeight:600}}>{statusLabel(l)}</div>
                    <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', marginTop:2}}>
                      {l === 'self-drive' ? 'Customer bawa sendiri, deposit + SIM' : 'Termasuk driver pengalaman, +Rp 350rb/hari'}
                    </div>
                  </button>
                ))}
              </div>

              <div className="grid-2 mb-4">
                <div>
                  <label style={{fontSize:11, fontWeight:600, color:'hsl(var(--muted-foreground))', textTransform:'uppercase', letterSpacing:'0.06em'}}>Tanggal mulai</label>
                  <input className="input" type="date" value={tgl} onChange={e=>setTgl(e.target.value)} style={{marginTop:6, width:'100%'}} />
                </div>
                <div>
                  <label style={{fontSize:11, fontWeight:600, color:'hsl(var(--muted-foreground))', textTransform:'uppercase', letterSpacing:'0.06em'}}>Durasi (hari)</label>
                  <input className="input" type="number" min="1" value={durasi} onChange={e=>setDurasi(parseInt(e.target.value)||1)} style={{marginTop:6, width:'100%'}} />
                </div>
              </div>

              <SectionHead title="Pilih Armada" hint={`${availArmada.length} mobil tersedia`} />
              <div style={{display:'flex', flexDirection:'column', gap:8, maxHeight:280, overflowY:'auto', padding:2}}>
                {availArmada.map(v => (
                  <button key={v.id} onClick={() => setVehId(v.id)}
                    style={{display:'flex', alignItems:'center', gap:10, padding:'10px 12px', border:'1px solid ' + (vehId === v.id ? 'hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) - 8%))' : 'hsl(var(--border))'), borderRadius:10, background: vehId === v.id ? 'hsl(var(--accent-h) var(--accent-s) 97%)' : 'hsl(var(--card))', cursor:'pointer', textAlign:'left'}}>
                    <div className={'veh-thumb ' + v.tipe} style={{width:54, height:42, flexShrink:0}}>
                      <Icon name={v.tipe === 'van' ? 'truck' : v.tipe === 'premium' ? 'carFront' : 'car'} size={22} />
                    </div>
                    <div style={{minWidth:0, flex:1}}>
                      <div style={{fontSize:13, fontWeight:600}}>{v.merk} {v.model}</div>
                      <div className="mono" style={{fontSize:11, color:'hsl(var(--muted-foreground))', marginTop:2}}>{v.plat} · {tipeArmadaLabel(v.tipe)} · {v.seat} kursi</div>
                    </div>
                    <div style={{textAlign:'right'}}>
                      <div className="mono" style={{fontSize:13, fontWeight:600}}>{rupiah(v.tarif, {sym:true, compact:true})}</div>
                      <div style={{fontSize:10, color:'hsl(var(--muted-foreground))'}}>/ hari</div>
                    </div>
                  </button>
                ))}
              </div>
            </>
          )}

          {step === 2 && (
            <>
              <SectionHead title="Pilih Customer" />
              <div style={{display:'flex', flexDirection:'column', gap:8, marginBottom:14}}>
                {CUSTOMERS.filter(c => !c.blacklist).slice(0, 8).map(c => (
                  <button key={c.id} onClick={() => setCustId(c.id)}
                    style={{display:'flex', alignItems:'center', gap:10, padding:'10px 12px', border:'1px solid ' + (custId === c.id ? 'hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) - 8%))' : 'hsl(var(--border))'), borderRadius:10, background: custId === c.id ? 'hsl(var(--accent-h) var(--accent-s) 97%)' : 'hsl(var(--card))', cursor:'pointer', textAlign:'left'}}>
                    <Avatar name={c.nama} />
                    <div style={{minWidth:0, flex:1}}>
                      <div className="row gap-2" style={{alignItems:'center'}}>
                        <span style={{fontSize:13, fontWeight:600}}>{c.nama}</span>
                        {c.status === 'vip' && <Pill tone="accent">VIP</Pill>}
                        {c.asing && <Pill tone="muted">Wisman</Pill>}
                      </div>
                      <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', marginTop:2}}>{c.kota} · {c.total_booking}× · ★{c.rating}</div>
                    </div>
                  </button>
                ))}
                <button style={{padding:'12px 14px', border:'1px dashed hsl(var(--border))', borderRadius:10, background:'transparent', cursor:'pointer', fontSize:12.5, fontWeight:500, color:'hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) - 8%))'}}>
                  <Icon name="plus" size={13} style={{marginRight:6}} />Tambah customer baru
                </button>
              </div>

              <SectionHead title="Asuransi" />
              <div style={{display:'flex', flexDirection:'column', gap:8}}>
                {ASURANSI.map(a => (
                  <button key={a.id} onClick={() => setAsuransi(a.id)}
                    style={{display:'flex', alignItems:'flex-start', gap:10, padding:'10px 12px', border:'1px solid ' + (asuransi===a.id ? 'hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) - 8%))' : 'hsl(var(--border))'), borderRadius:10, background: asuransi===a.id ? 'hsl(var(--accent-h) var(--accent-s) 97%)' : 'hsl(var(--card))', cursor:'pointer', textAlign:'left'}}>
                    <Icon name="shield" size={18} style={{color: 'hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) - 8%))', marginTop:2}} />
                    <div style={{minWidth:0, flex:1}}>
                      <div className="row between"><span style={{fontSize:13, fontWeight:600}}>{a.nama}</span><span className="mono" style={{fontSize:12, fontWeight:600}}>{a.premi_pct}%</span></div>
                      <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', marginTop:3}}>{a.deskripsi}</div>
                    </div>
                  </button>
                ))}
              </div>
            </>
          )}

          {step === 3 && (
            <>
              <SectionHead title="Ringkasan Booking" />
              <div className="row gap-3 mb-4" style={{padding:12, border:'1px solid hsl(var(--border))', borderRadius:10}}>
                <div className={'veh-thumb ' + veh.tipe} style={{width:80, height:60}}>
                  <Icon name={veh.tipe === 'van' ? 'truck' : veh.tipe === 'premium' ? 'carFront' : 'car'} size={32} />
                </div>
                <div style={{minWidth:0, flex:1}}>
                  <div style={{fontSize:13, fontWeight:600}}>{veh.merk} {veh.model}</div>
                  <div className="mono" style={{fontSize:11, color:'hsl(var(--muted-foreground))', marginTop:2}}>{veh.plat}</div>
                  <div style={{fontSize:11, marginTop:4}}>{cust?.nama || <span style={{color:'hsl(0 70% 50%)'}}>Pilih customer dulu</span>}</div>
                </div>
              </div>

              <div className="kv-grid mb-4">
                <div className="kv"><span className="kv-k">Layanan</span><span className="kv-v">{statusLabel(layanan)}</span></div>
                <div className="kv"><span className="kv-k">Mulai</span><span className="kv-v">{formatDateID(tgl)}</span></div>
                <div className="kv"><span className="kv-k">Durasi</span><span className="kv-v">{durasi} hari</span></div>
                <div className="kv"><span className="kv-k">Asuransi</span><span className="kv-v">{insur?.nama}</span></div>
              </div>

              <SectionHead title="Rincian Biaya" />
              <div className="kv-grid mb-3">
                <div className="kv"><span className="kv-k">Sewa ({rupiah(veh.tarif)} × {durasi})</span><span className="kv-v mono">{rupiah(subtotal, {sym:true})}</span></div>
                {driverFee > 0 && <div className="kv"><span className="kv-k">Driver (Rp 350rb × {durasi})</span><span className="kv-v mono">{rupiah(driverFee, {sym:true})}</span></div>}
                {premiAmt > 0 && <div className="kv"><span className="kv-k">Asuransi {insur.id} ({premiPct}%)</span><span className="kv-v mono">{rupiah(premiAmt, {sym:true})}</span></div>}
              </div>
              <div style={{padding:14, background:'hsl(var(--accent-h) var(--accent-s) 95%)', borderRadius:10, marginBottom:10}}>
                <div className="row between">
                  <span style={{fontSize:13, fontWeight:600}}>Total</span>
                  <span className="mono" style={{fontSize:20, fontWeight:700, fontFamily:'Fraunces, Georgia, serif'}}>{rupiah(total, {sym:true})}</span>
                </div>
                <div className="row between" style={{marginTop:6, fontSize:11.5, color:'hsl(var(--muted-foreground))'}}>
                  <span>DP minimum (50%)</span>
                  <span className="mono">{rupiah(Math.round(total * 0.5), {sym:true})}</span>
                </div>
              </div>

              {!cust && (
                <div style={{padding:10, background:'hsl(38 90% 97%)', border:'1px solid hsl(38 80% 85%)', borderRadius:8, fontSize:11.5, color:'hsl(35 60% 25%)', marginBottom:10}}>
                  <Icon name="alert" size={12} /> Customer belum dipilih — kembali ke langkah 2
                </div>
              )}
            </>
          )}
        </div>

        {/* Footer actions */}
        <div style={{padding:16, borderTop:'1px solid hsl(var(--border))', display:'flex', gap:8, background:'hsl(195 36% 99%)'}}>
          {step > 1 && <Btn tone="outline" size="sm" onClick={() => setStep(step - 1)}>Kembali</Btn>}
          <div style={{flex:1}} />
          {step < 3 && <Btn tone="primary" size="sm" icon="arrowRight" onClick={() => setStep(step + 1)}>Lanjut</Btn>}
          {step === 3 && <Btn tone="primary" size="sm" icon="check" onClick={onClose}>Buat booking</Btn>}
        </div>
      </div>
    </div>
  );
}

window.Booking = Booking;