// Live GPS Tracking — Peta Bali + daftar trip aktif + detail drawer
const { useState: useStateT, useMemo: useMemoT } = React;

// ── SVG Bali outline (simplified) ────────────────────────────────────────
// Outline kasar pulau Bali untuk viewBox 800x500.
// Sumber: simplified hand-traced dari peta Bali — bukan akurat geografis, hanya recognizable.
const BALI_OUTLINE = `
  M 80,180 Q 95,150 125,140 L 165,135 Q 200,125 235,135 L 280,140
  Q 320,130 360,140 L 400,155 Q 440,150 480,160 L 530,175
  Q 575,170 620,185 L 660,205 Q 695,220 715,250 L 720,290
  Q 715,325 690,345 L 650,360 Q 605,370 565,365 L 520,360
  Q 475,365 430,360 L 385,355 Q 340,360 295,355 L 250,345
  Q 205,340 170,325 L 140,305 Q 110,285 95,255 L 85,220 Z
`;

// Lokasi penting di Bali untuk konteks (POI mock)
const BALI_POI = [
  { name: 'Denpasar',    lat: -8.6705, lng: 115.2126, kind: 'city' },
  { name: 'Kuta',        lat: -8.7180, lng: 115.1745, kind: 'pool' },
  { name: 'Ubud',        lat: -8.5070, lng: 115.2625, kind: 'pool' },
  { name: 'Sanur',       lat: -8.6850, lng: 115.2620, kind: 'town' },
  { name: 'Seminyak',    lat: -8.6850, lng: 115.1640, kind: 'town' },
  { name: 'Nusa Dua',    lat: -8.8050, lng: 115.2270, kind: 'town' },
  { name: 'Uluwatu',     lat: -8.8290, lng: 115.0850, kind: 'town' },
  { name: 'Tanah Lot',   lat: -8.6210, lng: 115.0867, kind: 'town' },
  { name: 'Bedugul',     lat: -8.2750, lng: 115.1660, kind: 'town' },
  { name: 'Lovina',      lat: -8.1580, lng: 115.0250, kind: 'town' },
  { name: 'Bandara DPS', lat: -8.7480, lng: 115.1660, kind: 'airport' },
];

function markerColor(trip) {
  if (trip.alert === 'overspeed') return 'hsl(0 72% 50%)';
  if (trip.alert === 'bbm-low')   return 'hsl(35 90% 50%)';
  if (trip.status === 'in-trip')  return 'hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) - 6%))';
  if (trip.status === 'parked')   return 'hsl(220 30% 55%)';
  return 'hsl(220 12% 60%)';
}

function TrackingPage({ role, pushToast }) {
  const can = ROLES[role]?.can || {};
  const [selectedId, setSelectedId] = useStateT(TRIPS[1].id); // default TRP-1018 (Ubud route demo)
  const [tab, setTab] = useStateT('live');
  const [filterStatus, setFilterStatus] = useStateT('all');
  const [filterCabang, setFilterCabang] = useStateT('all');
  const [showRoute, setShowRoute] = useStateT(true);
  const [search, setSearch] = useStateT('');

  const trips = useMemoT(() => {
    return TRIPS.filter(t => {
      if (filterStatus !== 'all' && t.status !== filterStatus) return false;
      const veh = ARMADA_BY_ID[t.armada];
      if (filterCabang !== 'all' && veh?.cabang !== filterCabang) return false;
      if (search) {
        const q = search.toLowerCase();
        if (!t.id.toLowerCase().includes(q) &&
            !(veh?.plat || '').toLowerCase().includes(q) &&
            !(t.driver_name || '').toLowerCase().includes(q) &&
            !t.lokasi.toLowerCase().includes(q)) return false;
      }
      return true;
    });
  }, [filterStatus, filterCabang, search]);

  const selected = TRIP_BY_ID[selectedId];
  const selectedVeh = selected ? ARMADA_BY_ID[selected.armada] : null;
  const selectedBooking = selected ? BOOKINGS.find(b => b.id === selected.booking) : null;
  const selectedCust = selectedBooking ? CUSTOMER_BY_ID[selectedBooking.cust] : null;

  return (
    <div>
      <PageHeader
        eyebrow="Operasional · Real-time"
        title="Live GPS Tracking"
        subtitle={`${TRIPS.filter(t=>t.status==='in-trip').length} armada on-trip · ${TRIPS.filter(t=>t.status==='parked').length} parkir · last update ${NOW_HHMM} WITA`}
        actions={[
          <Btn key="rf" icon="refresh" tone="ghost" size="sm">Refresh</Btn>,
          <Btn key="dl" icon="download" tone="outline" size="sm">Export trip log</Btn>,
        ]}
      />

      {ALERTS.filter(a => a.tipe === 'overspeed' || a.tipe === 'bbm-low').length > 0 && (
        <div className="mb-4" style={{display:'flex', gap:10, padding:'10px 14px', borderRadius:12, background:'hsl(0 80% 97%)', border:'1px solid hsl(0 70% 88%)'}}>
          <Icon name="alertTri" size={18} style={{color:'hsl(0 70% 45%)', flexShrink:0, marginTop:1}} />
          <div style={{flex:1, fontSize:13}}>
            <b style={{color:'hsl(0 70% 35%)'}}>Alert aktif:</b>{' '}
            {ALERTS.filter(a => a.tipe === 'overspeed').map(a => `Overspeed ${ARMADA_BY_ID[a.armada]?.plat}`).join(', ')}
            {' · '}
            {ALERTS.filter(a => a.tipe === 'bbm-low').map(a => `BBM rendah ${ARMADA_BY_ID[a.armada]?.plat}`).join(', ')}
          </div>
          <Btn size="sm" tone="ghost" onClick={() => pushToast && pushToast({msg:'Notifikasi dikirim ke driver', type:'ok'})}>Notifikasi driver</Btn>
        </div>
      )}

      <div className="tracking-shell">
        {/* LEFT: list trip */}
        <div className="trk-list">
          <div className="trk-list-head">
            <div className="trk-list-title">
              <span>Armada Aktif</span>
              <span style={{fontSize:11, color:'hsl(var(--muted-foreground))', fontWeight:400}}>{trips.length} dari {TRIPS.length}</span>
            </div>
            <div style={{position:'relative'}}>
              <Icon name="search" size={13} style={{position:'absolute', left:9, top:'50%', transform:'translateY(-50%)', color:'hsl(var(--muted-foreground))'}} />
              <input
                className="input"
                placeholder="Cari plat, driver, lokasi…"
                value={search} onChange={e=>setSearch(e.target.value)}
                style={{paddingLeft:28, height:30, fontSize:12, width:'100%'}}
              />
            </div>
            <div className="row gap-1">
              <select className="select" value={filterStatus} onChange={e=>setFilterStatus(e.target.value)} style={{flex:1, height:28, fontSize:11.5}}>
                <option value="all">Semua status</option>
                <option value="in-trip">Jalan</option>
                <option value="parked">Parkir</option>
                <option value="idle">Idle</option>
              </select>
              <select className="select" value={filterCabang} onChange={e=>setFilterCabang(e.target.value)} style={{flex:1, height:28, fontSize:11.5}}>
                <option value="all">Semua cabang</option>
                {CABANG.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
              </select>
            </div>
          </div>
          <div className="trk-list-body">
            {trips.map(tr => {
              const veh = ARMADA_BY_ID[tr.armada];
              const sel = tr.id === selectedId;
              return (
                <button key={tr.id} className={'trk-item' + (sel ? ' selected' : '')} onClick={() => setSelectedId(tr.id)}>
                  <div className="trk-item-top">
                    <span className="trk-item-plate">{veh?.plat}</span>
                    <StatusPill status={tr.status} />
                  </div>
                  <div className="trk-item-name">{veh?.merk} {veh?.model}</div>
                  <div className="trk-item-meta">
                    <Icon name="pin" size={11} />
                    <span style={{flex:1, minWidth:0, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}}>{tr.lokasi}</span>
                  </div>
                  <div className="row between" style={{alignItems:'center'}}>
                    <span className="mono" style={{fontSize:10.5, color:'hsl(var(--muted-foreground))'}}>
                      <Icon name="speed" size={10} /> {tr.kecepatan} km/j
                    </span>
                    <FuelGauge pct={tr.bbm_pct} />
                  </div>
                  {tr.alert && (
                    <div className="row gap-1" style={{fontSize:10.5, color: tr.alert==='overspeed' ? 'hsl(0 70% 45%)' : 'hsl(35 80% 38%)', fontWeight:600}}>
                      <Icon name="alert" size={11} />
                      {tr.alert === 'overspeed' ? 'Overspeed' : 'BBM rendah'}
                    </div>
                  )}
                </button>
              );
            })}
            {trips.length === 0 && (
              <div style={{padding:30, textAlign:'center', color:'hsl(var(--muted-foreground))', fontSize:12.5}}>
                Tidak ada armada cocok dengan filter.
              </div>
            )}
          </div>
        </div>

        {/* CENTER: map */}
        <div className="trk-map-wrap">
          <div className="trk-map-toolbar">
            <div className="row gap-2">
              <span className="trk-chip live">Live · {NOW_HHMM}</span>
              <span className="trk-chip"><Icon name="car" size={12} /> {trips.length} armada</span>
            </div>
            <div className="row gap-1">
              <button className="trk-chip" onClick={() => setShowRoute(s => !s)} style={{cursor:'pointer'}}>
                <Icon name={showRoute ? 'route' : 'pin'} size={12} />
                {showRoute ? 'Sembunyikan rute' : 'Tampilkan rute'}
              </button>
              <button className="trk-chip" style={{cursor:'pointer'}}><Icon name="plus" size={12} /></button>
              <button className="trk-chip" style={{cursor:'pointer'}}><Icon name="minus" size={12} /></button>
            </div>
          </div>

          <svg className="trk-map-svg" viewBox="0 0 800 500" preserveAspectRatio="xMidYMid meet">
            <defs>
              <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
                <path d="M 40 0 L 0 0 0 40" fill="none" stroke="hsl(195 30% 86%)" strokeWidth="0.5"/>
              </pattern>
            </defs>
            <rect width="800" height="500" fill="url(#grid)" />

            {/* Pulau Bali */}
            <path d={BALI_OUTLINE}
                  fill="hsl(48 60% 92%)"
                  stroke="hsl(165 30% 55%)"
                  strokeWidth="1.5"
                  opacity="0.85" />

            {/* Cabang BDR */}
            {CABANG.map(c => {
              const p = latLngToSvg(c.lat, c.lng);
              return (
                <g key={c.id}>
                  <rect x={p.x - 8} y={p.y - 8} width="16" height="16" rx="3"
                        fill="hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) - 12%))"
                        stroke="white" strokeWidth="2" />
                  <text x={p.x} y={p.y + 22} fontSize="10" fontWeight="600"
                        textAnchor="middle" fill="hsl(220 25% 25%)">{c.name}</text>
                </g>
              );
            })}

            {/* POI lain */}
            {BALI_POI.filter(p => p.kind !== 'pool').map(poi => {
              const p = latLngToSvg(poi.lat, poi.lng);
              return (
                <g key={poi.name} opacity="0.65">
                  <circle cx={p.x} cy={p.y} r="2.5" fill="hsl(220 20% 55%)" />
                  <text x={p.x + 6} y={p.y + 3} fontSize="9.5" fill="hsl(220 25% 40%)" fontStyle={poi.kind==='airport'?'normal':'italic'}>{poi.name}</text>
                </g>
              );
            })}

            {/* Route polyline untuk selected trip */}
            {showRoute && selected && selected.id === 'TRP-1018' && (
              <g>
                <polyline
                  points={TRIP_ROUTE_DEMO.map(pt => {
                    const p = latLngToSvg(pt.lat, pt.lng);
                    return `${p.x},${p.y}`;
                  }).join(' ')}
                  fill="none"
                  stroke="hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) - 5%))"
                  strokeWidth="3"
                  strokeLinecap="round"
                  strokeDasharray="0"
                  opacity="0.7"
                />
                {TRIP_ROUTE_DEMO.map((pt, i) => {
                  const p = latLngToSvg(pt.lat, pt.lng);
                  if (i === 0) {
                    return <circle key={i} cx={p.x} cy={p.y} r="5" fill="hsl(158 56% 42%)" stroke="white" strokeWidth="2" />;
                  }
                  if (i === TRIP_ROUTE_DEMO.length - 1) return null; // current pos = marker
                  return <circle key={i} cx={p.x} cy={p.y} r="2" fill="hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) - 5%))" opacity="0.5" />;
                })}
              </g>
            )}

            {/* Marker armada */}
            {trips.map(tr => {
              const p = latLngToSvg(tr.lat, tr.lng);
              const color = markerColor(tr);
              const sel = tr.id === selectedId;
              const moving = tr.status === 'in-trip';
              return (
                <g key={tr.id} className="marker" onClick={() => setSelectedId(tr.id)} style={{cursor:'pointer'}}>
                  {moving && (
                    <circle className="marker-pulse" cx={p.x} cy={p.y} r="10" fill={color} opacity="0.4" />
                  )}
                  <circle cx={p.x} cy={p.y} r={sel ? 11 : 8}
                          fill={color}
                          stroke="white"
                          strokeWidth={sel ? 3 : 2} />
                  {sel && (
                    <circle cx={p.x} cy={p.y} r="14"
                            fill="none"
                            stroke={color}
                            strokeWidth="2"
                            opacity="0.5" />
                  )}
                  {sel && (
                    <text x={p.x} y={p.y - 18} fontSize="10" fontWeight="700"
                          textAnchor="middle" fill="hsl(220 25% 20%)"
                          style={{paintOrder:'stroke', stroke:'white', strokeWidth:3, strokeLinejoin:'round'}}>
                      {ARMADA_BY_ID[tr.armada]?.plat}
                    </text>
                  )}
                </g>
              );
            })}
          </svg>

          <div className="trk-map-legend">
            <div className="row" style={{gap:6}}><span className="legend-dot" style={{background:'hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) - 6%))'}} /> Jalan</div>
            <div className="row" style={{gap:6}}><span className="legend-dot" style={{background:'hsl(220 30% 55%)'}} /> Parkir</div>
            <div className="row" style={{gap:6}}><span className="legend-dot" style={{background:'hsl(0 72% 50%)'}} /> Overspeed</div>
            <div className="row" style={{gap:6}}><span className="legend-dot" style={{background:'hsl(35 90% 50%)'}} /> BBM rendah</div>
            <div className="row" style={{gap:6, marginTop:4, paddingTop:4, borderTop:'1px solid hsl(var(--border))'}}>
              <span style={{width:9,height:9,borderRadius:2,background:'hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) - 12%))'}} /> Cabang BDR
            </div>
          </div>
        </div>

        {/* RIGHT: detail drawer */}
        <div className="trip-detail">
          {selected ? (
            <>
              <div className="trip-detail-head">
                <div className="row between" style={{alignItems:'flex-start'}}>
                  <div style={{minWidth:0}}>
                    <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', fontWeight:600, letterSpacing:'0.05em', textTransform:'uppercase'}}>{selected.id} · {selected.booking}</div>
                    <div style={{fontSize:18, fontWeight:600, fontFamily:'Fraunces, Georgia, serif', marginTop:2, lineHeight:1.2}}>
                      {selectedVeh?.merk} {selectedVeh?.model}
                    </div>
                    <div className="mono" style={{fontSize:12, color:'hsl(var(--muted-foreground))', marginTop:2}}>
                      {selectedVeh?.plat} · {cabangName(selectedVeh?.cabang)}
                    </div>
                  </div>
                  <StatusPill status={selected.status} />
                </div>
              </div>
              <div className="trip-detail-tabs">
                {[
                  {id:'live', label:'Live'},
                  {id:'trip', label:'Trip'},
                  {id:'odo', label:'Odo/BBM'},
                  {id:'cust', label:'Customer'},
                ].map(tt => (
                  <button key={tt.id} className={'trip-detail-tab' + (tab===tt.id?' active':'')} onClick={() => setTab(tt.id)}>{tt.label}</button>
                ))}
              </div>
              <div className="trip-detail-body">
                {tab === 'live' && (
                  <Fragment>
                    <div className="kv-grid">
                      <div className="kv"><span className="kv-k">Lokasi</span><span className="kv-v">{selected.lokasi}</span></div>
                      <div className="kv"><span className="kv-k">Kecepatan</span><span className="kv-v mono">{selected.kecepatan} km/jam</span></div>
                      <div className="kv"><span className="kv-k">Heading</span><span className="kv-v">{selected.heading}</span></div>
                      <div className="kv"><span className="kv-k">BBM</span><span className="kv-v" style={{flex:1, marginLeft:8}}><FuelGauge pct={selected.bbm_pct} /></span></div>
                      <div className="kv"><span className="kv-k">Odometer</span><span className="kv-v mono">{selected.odo_now.toLocaleString('id-ID')} km</span></div>
                      <div className="kv"><span className="kv-k">Jarak trip</span><span className="kv-v mono">{selected.jarak_km} km</span></div>
                      <div className="kv"><span className="kv-k">Ignition on</span><span className="kv-v mono" style={{fontSize:11.5}}>{formatDateTimeID(selected.ig_on)}</span></div>
                      <div className="kv"><span className="kv-k">Last ping</span><span className="kv-v mono">{selected.last_ping} ({fmtMin(minutesSince(selected.last_ping))} lalu)</span></div>
                      <div className="kv"><span className="kv-k">Driver</span><span className="kv-v">{selected.driver_name}</span></div>
                      <div className="kv"><span className="kv-k">Koordinat</span><span className="kv-v mono" style={{fontSize:11}}>{selected.lat.toFixed(4)}, {selected.lng.toFixed(4)}</span></div>
                    </div>
                    {selected.alert && (
                      <div style={{padding:'10px 12px', borderRadius:10, background: selected.alert==='overspeed'?'hsl(0 80% 96%)':'hsl(35 90% 96%)', border:'1px solid ' + (selected.alert==='overspeed'?'hsl(0 70% 85%)':'hsl(35 80% 80%)'), fontSize:12.5}}>
                        <div className="row gap-2" style={{alignItems:'center', fontWeight:600, color: selected.alert==='overspeed'?'hsl(0 70% 38%)':'hsl(35 80% 35%)'}}>
                          <Icon name="alertTri" size={14} />
                          {selected.alert === 'overspeed' ? 'Kecepatan melebihi batas' : 'BBM rendah — perlu refuel'}
                        </div>
                        <div style={{marginTop:4, color:'hsl(var(--muted-foreground))'}}>
                          {selected.alert === 'overspeed'
                            ? `${selected.kecepatan} km/j di area batas 60 km/j. Notifikasi ke driver dikirim 2 menit lalu.`
                            : `Sisa ${selected.bbm_pct}% — rekomendasi isi di SPBU terdekat dalam 30 menit.`
                          }
                        </div>
                      </div>
                    )}
                    <div className="row gap-2">
                      <Btn icon="phone" size="sm" tone="outline" style={{flex:1}}>Telepon</Btn>
                      <Btn icon="whatsapp" size="sm" tone="outline" style={{flex:1}}>WhatsApp</Btn>
                      <Btn icon="send" size="sm" tone="primary" style={{flex:1}}>Kirim pesan</Btn>
                    </div>
                  </Fragment>
                )}

                {tab === 'trip' && selectedBooking && (
                  <Fragment>
                    <div>
                      <div style={{fontSize:11, fontWeight:600, color:'hsl(var(--muted-foreground))', textTransform:'uppercase', letterSpacing:'0.05em', marginBottom:8}}>Timeline trip</div>
                      <div className="trip-timeline">
                        <div className="trip-step done">
                          <div className="label">Booking dikonfirmasi</div>
                          <div style={{fontSize:11.5, color:'hsl(var(--muted-foreground))', marginTop:2}}>{formatDateTimeID(selectedBooking.mulai)} · DP {rupiah(selectedBooking.dp, {sym:true, compact:true})}</div>
                        </div>
                        <div className="trip-step done">
                          <div className="label">Serah terima (BAST)</div>
                          <div style={{fontSize:11.5, color:'hsl(var(--muted-foreground))', marginTop:2}}>{selectedBooking.pickup} · Foto 4 sisi, checklist 32 item OK</div>
                        </div>
                        <div className="trip-step active">
                          <div className="label">Sedang berjalan</div>
                          <div style={{fontSize:11.5, color:'hsl(var(--muted-foreground))', marginTop:2}}>Saat ini di {selected.lokasi} · {selected.jarak_km} km terjelajahi</div>
                        </div>
                        <div className="trip-step">
                          <div className="label">Jadwal kembali</div>
                          <div style={{fontSize:11.5, color:'hsl(var(--muted-foreground))', marginTop:2}}>{formatDateTimeID(selectedBooking.selesai)} · {selectedBooking.dropoff}</div>
                        </div>
                      </div>
                    </div>
                    <div className="kv-grid">
                      <div className="kv"><span className="kv-k">Layanan</span><span className="kv-v">{statusLabel(selectedBooking.layanan)}</span></div>
                      <div className="kv"><span className="kv-k">Durasi</span><span className="kv-v">{selectedBooking.durasi} hari</span></div>
                      <div className="kv"><span className="kv-k">Pickup</span><span className="kv-v">{selectedBooking.pickup}</span></div>
                      <div className="kv"><span className="kv-k">Dropoff</span><span className="kv-v">{selectedBooking.dropoff}</span></div>
                      <div className="kv"><span className="kv-k">Total</span><span className="kv-v mono" style={{fontWeight:600}}>{rupiah(selectedBooking.total)}</span></div>
                      <div className="kv"><span className="kv-k">Pembayaran</span><span className="kv-v"><Pill tone="accent">{statusLabel(selectedBooking.dibayar)}</Pill></span></div>
                    </div>
                  </Fragment>
                )}

                {tab === 'odo' && selectedVeh && (
                  <Fragment>
                    <div className="kv-grid">
                      <div className="kv"><span className="kv-k">Odo awal trip</span><span className="kv-v mono">{(selectedVeh.odo).toLocaleString('id-ID')} km</span></div>
                      <div className="kv"><span className="kv-k">Odo sekarang</span><span className="kv-v mono" style={{fontWeight:600}}>{selected.odo_now.toLocaleString('id-ID')} km</span></div>
                      <div className="kv"><span className="kv-k">Selisih</span><span className="kv-v mono">{(selected.odo_now - selectedVeh.odo).toLocaleString('id-ID')} km</span></div>
                      <div className="kv"><span className="kv-k">BBM</span><span className="kv-v" style={{flex:1, marginLeft:8}}><FuelGauge pct={selected.bbm_pct} /></span></div>
                      <div className="kv"><span className="kv-k">Konsumsi est.</span><span className="kv-v mono">~{Math.round(selected.jarak_km / 10)} L · ~{rupiah(Math.round(selected.jarak_km / 10) * 13500, {compact:true})}</span></div>
                      <div className="kv"><span className="kv-k">Servis terakhir</span><span className="kv-v">{formatDateID(selectedVeh.lastService)}</span></div>
                      <div className="kv"><span className="kv-k">Servis berikutnya</span><span className="kv-v mono">{selectedVeh.nextService.toLocaleString('id-ID')} km ({(selectedVeh.nextService - selected.odo_now).toLocaleString('id-ID')} km lagi)</span></div>
                    </div>
                  </Fragment>
                )}

                {tab === 'cust' && selectedCust && (
                  <Fragment>
                    <div className="row gap-3" style={{alignItems:'center'}}>
                      <Avatar initials={selectedCust.nama.split(' ').map(w=>w[0]).join('').slice(0,2)} tone="accent" />
                      <div style={{minWidth:0, flex:1}}>
                        <div style={{fontSize:14, fontWeight:600}}>{selectedCust.nama}</div>
                        <div style={{fontSize:11.5, color:'hsl(var(--muted-foreground))'}}>{selectedCust.id} · {selectedCust.kota}</div>
                      </div>
                      <StatusPill status={selectedCust.status} />
                    </div>
                    <div className="kv-grid">
                      <div className="kv"><span className="kv-k">WhatsApp</span><span className="kv-v mono" style={{fontSize:11.5}}>{selectedCust.wa}</span></div>
                      <div className="kv"><span className="kv-k">Email</span><span className="kv-v" style={{fontSize:11.5}}>{selectedCust.email}</span></div>
                      <div className="kv"><span className="kv-k">{selectedCust.asing ? 'Passport' : 'KTP'}</span><span className="kv-v mono" style={{fontSize:11}}>{selectedCust.ktp}</span></div>
                      <div className="kv"><span className="kv-k">SIM</span><span className="kv-v">{selectedCust.sim}</span></div>
                      <div className="kv"><span className="kv-k">Customer sejak</span><span className="kv-v">{formatDateID(selectedCust.sejak)}</span></div>
                      <div className="kv"><span className="kv-k">Total booking</span><span className="kv-v">{selectedCust.total_booking}× · {rupiah(selectedCust.total_spend, {compact:true})}</span></div>
                      <div className="kv"><span className="kv-k">Rating</span><span className="kv-v">★ {selectedCust.rating.toFixed(1)}</span></div>
                    </div>
                    {selectedCust.catatan && (
                      <div style={{padding:'10px 12px', borderRadius:10, background:'hsl(38 90% 96%)', border:'1px solid hsl(38 80% 85%)', fontSize:12, color:'hsl(35 70% 30%)'}}>
                        <b>Catatan: </b>{selectedCust.catatan}
                      </div>
                    )}
                  </Fragment>
                )}
              </div>
            </>
          ) : (
            <div style={{padding:30, textAlign:'center', color:'hsl(var(--muted-foreground))'}}>
              Pilih armada di kiri atau klik marker di peta.
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

window.TrackingPage = TrackingPage;