// Kendaraan page — Bengkel Mitra Sejahtera
function KendaraanPage({ role }) {
  const [kat, setKat] = useState('all');
  const [cabang, setCabang] = useState('all');
  const [search, setSearch] = useState('');
  const [selected, setSelected] = useState(null);
  const [view, setView] = useState('grid');

  const filtered = KENDARAAN.filter(v => {
    if (kat !== 'all') {
      if (['mobil','motor','komersial'].includes(kat) && v.tipe !== kat) return false;
      if (['matic','manual'].includes(kat) && v.trans !== kat) return false;
    }
    if (cabang !== 'all' && v.cabang !== cabang) return false;
    if (search) {
      const q = search.toLowerCase();
      const owner = OWNER_BY_ID[v.ownerId]?.name || '';
      if (!(`${v.plat} ${v.merk} ${v.model} ${owner}`).toLowerCase().includes(q)) return false;
    }
    return true;
  });

  const avgHealth = Math.round(KENDARAAN.map(v => healthScore(v) || 0).reduce((s,n) => s+n, 0) / KENDARAAN.length);
  const dueServis = KENDARAAN.filter(v => {
    const w = vehicleNextService(v);
    return w && w.ratio >= 0.85;
  }).length;

  return (
    <div>
      <PageHeader
        eyebrow="Database"
        title="Kendaraan Customer"
        subtitle={`${KPI.kendaraanAktif} kendaraan terdaftar — ${KENDARAAN.filter(v => v.tipe==='mobil').length} mobil, ${KENDARAAN.filter(v => v.tipe==='motor').length} motor, ${KENDARAAN.filter(v => v.tipe==='komersial').length} komersial.`}
        actions={
          <Fragment>
            <Btn icon="download" tone="outline">Export</Btn>
            <Btn icon="plus">Tambah Kendaraan</Btn>
          </Fragment>
        }
      />

      {/* KPI strip */}
      <div className="grid mb-6" style={{gridTemplateColumns:'repeat(4, 1fr)', gap:12}}>
        <Kpi label="Total Terdaftar" value={KPI.kendaraanAktif} hint="3 cabang" icon="car" tone="info" />
        <Kpi label="Health Average" value={`${avgHealth}/100`} hint="dari semua kendaraan" icon="heart" tone={scoreTone(avgHealth)} progress={avgHealth} />
        <Kpi label="Butuh Servis" value={dueServis} hint="komponen ≥85% terpakai" icon="wrench" tone="warn" />
        <Kpi label="Dokumen Exp Soon" value={KPI.dokumenExpSoon} hint="dalam 90 hari" icon="document" tone="warn" />
      </div>

      {/* Filter */}
      <Card style={{padding:14, marginBottom:12}}>
        <div className="row gap-3" style={{flexWrap:'wrap', alignItems:'center'}}>
          <div className="row gap-1" style={{background:'hsl(var(--muted))', borderRadius:8, padding:3, flexWrap:'wrap'}}>
            {KATEGORI.map(k => (
              <button key={k.id} onClick={() => setKat(k.id)}
                style={{padding:'6px 12px', fontSize:13, fontWeight:600, borderRadius:6,
                  background: kat === k.id ? 'hsl(var(--card))' : 'transparent',
                  color: kat === k.id ? 'hsl(var(--foreground))' : 'hsl(var(--muted-foreground))',
                  border:'none', cursor:'pointer',
                  boxShadow: kat === k.id ? '0 1px 2px rgb(0 0 0 / 0.06)' : 'none'}}>{k.label}</button>
            ))}
          </div>
          <select value={cabang} onChange={e => setCabang(e.target.value)} style={{padding:'7px 10px', border:'1px solid hsl(var(--border))', borderRadius:8, fontSize:13, background:'hsl(var(--card))'}}>
            <option value="all">Semua cabang</option>
            {CABANG.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
          </select>
          <div style={{flex:1, position:'relative', minWidth:200}}>
            <Icon name="search" size={14} style={{position:'absolute', left:10, top:'50%', transform:'translateY(-50%)', color:'hsl(var(--muted-foreground))'}} />
            <input value={search} onChange={e => setSearch(e.target.value)} placeholder="Cari plat, merk, atau owner..."
              style={{width:'100%', padding:'7px 10px 7px 30px', border:'1px solid hsl(var(--border))', borderRadius:8, fontSize:13, background:'hsl(var(--card))'}} />
          </div>
          <div className="row gap-1" style={{background:'hsl(var(--muted))', borderRadius:8, padding:3}}>
            <button onClick={() => setView('grid')} style={{padding:'6px 10px', borderRadius:6, border:'none', background: view==='grid' ? 'hsl(var(--card))' : 'transparent', cursor:'pointer'}}><Icon name="grid" size={14} /></button>
            <button onClick={() => setView('table')} style={{padding:'6px 10px', borderRadius:6, border:'none', background: view==='table' ? 'hsl(var(--card))' : 'transparent', cursor:'pointer'}}><Icon name="list" size={14} /></button>
          </div>
        </div>
      </Card>

      {view === 'grid' ? (
        <div className="veh-grid">
          {filtered.map(v => (
            <VehicleCard key={v.id} veh={v} onClick={setSelected} selected={selected?.id === v.id} />
          ))}
        </div>
      ) : (
        <Card style={{padding:0, overflow:'hidden'}}>
          <table className="table">
            <thead>
              <tr>
                <th style={{width:110}}>Plat</th>
                <th>Kendaraan</th>
                <th>Owner</th>
                <th style={{width:80}}>Tipe</th>
                <th style={{width:90}}>KM</th>
                <th style={{width:100}}>Servis Trakhir</th>
                <th style={{width:90}}>Health</th>
                <th style={{width:120}}>Cabang</th>
                <th style={{width:80}}>Aksi</th>
              </tr>
            </thead>
            <tbody>
              {filtered.map(v => {
                const owner = OWNER_BY_ID[v.ownerId];
                const score = healthScore(v);
                return (
                  <tr key={v.id} onClick={() => setSelected(v)} style={{cursor:'pointer'}}>
                    <td className="mono" style={{fontWeight:600}}>{v.plat}</td>
                    <td>
                      <div style={{fontWeight:600}}>{v.merk} {v.model}</div>
                      <div style={{fontSize:11, color:'hsl(var(--muted-foreground))'}}>{v.tahun} • {v.warna} • {v.trans}</div>
                    </td>
                    <td>
                      <div style={{fontSize:13}}>{owner?.name}</div>
                      {owner?.corporate && <Pill tone="accent">Korporat</Pill>}
                    </td>
                    <td><span style={{fontSize:12, textTransform:'capitalize'}}>{v.tipe}</span></td>
                    <td className="mono" style={{fontVariantNumeric:'tabular-nums'}}>{v.km.toLocaleString('id-ID')}</td>
                    <td className="mono" style={{fontSize:12}}>{formatDateID(v.lastService)}</td>
                    <td>{score != null && <HealthBadge tone={scoreTone(score)}>{score}</HealthBadge>}</td>
                    <td style={{fontSize:12.5}}>{cabangName(v.cabang)}</td>
                    <td><Btn size="sm" tone="ghost" icon="eye" /></td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </Card>
      )}

      {/* Detail drawer */}
      {selected && (
        <div className="drawer-overlay" onClick={() => setSelected(null)}>
          <div className="drawer" onClick={e => e.stopPropagation()}>
            <div className="drawer-head">
              <div>
                <div className="row gap-2" style={{alignItems:'center', marginBottom:4}}>
                  <span className="mono" style={{fontSize:14, fontWeight:700}}>{selected.plat}</span>
                  {(() => { const s = healthScore(selected); return s != null ? <HealthBadge tone={scoreTone(s)}>{s} · {scoreLabel(s)}</HealthBadge> : null; })()}
                </div>
                <h2 style={{margin:0, fontSize:20, fontWeight:600, fontFamily:'Fraunces, Georgia, serif'}}>{selected.merk} {selected.model}</h2>
                <div style={{fontSize:12, color:'hsl(var(--muted-foreground))', marginTop:4}}>
                  {selected.tahun} · {selected.warna} · {selected.trans} · {selected.km.toLocaleString('id-ID')} km · {cabangName(selected.cabang)}
                </div>
              </div>
              <button className="btn outline sm" onClick={() => setSelected(null)}><Icon name="x" size={14} /></button>
            </div>

            <div className="drawer-body">
              {/* Owner */}
              <SectionHead title="Pemilik" />
              <Card style={{padding:12, marginBottom:14}}>
                {(() => { const o = OWNER_BY_ID[selected.ownerId]; return (
                  <div className="row gap-3" style={{alignItems:'center'}}>
                    <Avatar initials={(o?.name || 'X').split(' ').map(w=>w[0]).slice(0,2).join('')} />
                    <div style={{flex:1}}>
                      <div style={{fontWeight:600}}>{o?.name}</div>
                      <div style={{fontSize:12, color:'hsl(var(--muted-foreground))'}}>{o?.phone} · {o?.email}</div>
                    </div>
                    <Btn size="sm" tone="outline" icon="whatsapp">WA</Btn>
                  </div>
                ); })()}
              </Card>

              {/* Health overview */}
              <SectionHead title="Status komponen" hint="Persentase = pemakaian / interval (km atau bulan, mana yang lebih dulu)" />
              <div className="gauge-cluster" style={{padding:0, marginBottom:14}}>
                {HEALTH_COMPONENTS.map(c => {
                  const r = componentRatio(selected, c.id);
                  if (r == null) return null;
                  const cur = selected.components[c.id];
                  return (
                    <MiniGauge key={c.id} label={c.label} icon={c.icon} ratio={r}
                      sub={`${cur.km.toLocaleString('id-ID')} km / ${cur.mo} bln`} />
                  );
                })}
              </div>

              {/* Dokumen */}
              <SectionHead title="Dokumen" />
              <div className="doc-strip" style={{marginBottom:14}}>
                {[
                  { kind:'STNK',     iso: selected.stnkExp },
                  { kind:'Pajak',    iso: selected.pajakExp },
                  { kind:'Asuransi', iso: selected.asuransiExp },
                  selected.kirExp ? { kind:'KIR', iso: selected.kirExp } : null,
                ].filter(Boolean).map(d => {
                  const days = daysToExpiry(d.iso);
                  const lvl = dueLevel(days);
                  return (
                    <div key={d.kind} className={'doc-chip' + (lvl === 'danger' || lvl === 'overdue' ? ' urgent' : lvl === 'warn' ? ' warn' : '')}>
                      <div className="doc-chip-head"><Icon name="document" size={11} /> {d.kind}</div>
                      <div className="doc-chip-val">{formatDateID(d.iso)}</div>
                      <div className="doc-chip-sub">{dueLabel(days)}</div>
                    </div>
                  );
                })}
              </div>

              {/* Quick actions */}
              <div className="row gap-2">
                <Btn icon="calendar">Booking Servis</Btn>
                <Btn tone="outline" icon="history">Riwayat Lengkap</Btn>
                <Btn tone="outline" icon="heart">Health Dashboard</Btn>
                <Btn tone="ghost" icon="whatsapp">Kirim Reminder</Btn>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

window.KendaraanPage = KendaraanPage;