// Driver — daftar driver, status, trip aktif, performa
const { useState: useStateDr, useMemo: useMemoDr } = React;

function DriverPage({ role, setPage }) {
  const [fStatus, setFStatus] = useStateDr('all');   // all | on-trip | standby | libur
  const [fCabang, setFCabang] = useStateDr('all');
  const [q, setQ] = useStateDr('');
  const [sel, setSel] = useStateDr(null);

  const filtered = useMemoDr(() => DRIVERS.filter(d => {
    if (fStatus !== 'all' && d.status !== fStatus) return false;
    if (fCabang !== 'all' && d.cabang !== fCabang) return false;
    if (q) {
      const s = q.toLowerCase();
      if (!d.nama.toLowerCase().includes(s)
        && !d.id.toLowerCase().includes(s)
        && !d.wa.includes(s)) return false;
    }
    return true;
  }), [fStatus, fCabang, q]);

  const counts = {
    all:       DRIVERS.length,
    'on-trip': DRIVERS.filter(d => d.status === 'on-trip').length,
    standby:   DRIVERS.filter(d => d.status === 'standby').length,
    libur:     DRIVERS.filter(d => d.status === 'libur').length,
  };
  const avgRating = (DRIVERS.reduce((s, d) => s + d.rating, 0) / DRIVERS.length).toFixed(2);
  const totalTrip = DRIVERS.reduce((s, d) => s + d.total_trip, 0);
  const avgPengalaman = (DRIVERS.reduce((s, d) => s + d.pengalaman, 0) / DRIVERS.length).toFixed(1);

  return (
    <div>
      <PageHeader
        eyebrow="Tim Driver"
        title="Manajemen Driver"
        subtitle={`${counts.all} driver aktif · ${counts['on-trip']} sedang on-trip · rating rata-rata ${avgRating}/5.0`}
        actions={[
          <Btn key="sched" icon="calendar" tone="ghost" size="sm">Jadwal Shift</Btn>,
          <Btn key="new"   icon="plus"     tone="primary" size="sm">Tambah Driver</Btn>,
        ]}
      />

      <div className="grid-4 mb-4">
        <Kpi label="Total Driver"        value={counts.all}                hint={`${counts.standby} siap antar`} icon="users" tone="info" />
        <Kpi label="Sedang On-Trip"      value={counts['on-trip']}         hint="With-driver service" icon="car"   tone="warn" />
        <Kpi label="Rating Rata-Rata"    value={`${avgRating} / 5.0`}      hint={`${totalTrip.toLocaleString('id-ID')} trip total`} icon="star" tone="success" />
        <Kpi label="Pengalaman Rata-Rata" value={`${avgPengalaman} thn`}   hint="Senior — A & B1 Umum" icon="star" tone="accent" />
      </div>

      {/* 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}}>
            {[
              { id:'all',     label:'Semua',    n:counts.all },
              { id:'on-trip', label:'On-Trip',  n:counts['on-trip'] },
              { id:'standby', label:'Standby',  n:counts.standby },
              { id:'libur',   label:'Libur',    n:counts.libur },
            ].map(t => (
              <button key={t.id} onClick={()=>setFStatus(t.id)}
                style={{padding:'6px 14px', borderRadius:6, border:0, fontSize:12, fontWeight:600, cursor:'pointer',
                  background: fStatus===t.id ? 'hsl(var(--card))' : 'transparent',
                  color: fStatus===t.id ? 'hsl(var(--foreground))' : 'hsl(var(--muted-foreground))',
                  boxShadow: fStatus===t.id ? 'var(--shadow-sm)' : 'none'}}>
                {t.label} <span style={{opacity:0.7}}>· {t.n}</span>
              </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 nama / ID / WhatsApp…" value={q} onChange={e=>setQ(e.target.value)} style={{paddingLeft:30, width:'100%'}} />
          </div>
          <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>

      {/* Driver grid */}
      <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(280px, 1fr))', gap:14}}>
        {filtered.map(d => <DriverCard key={d.id} driver={d} onClick={() => setSel(d)} />)}
        {filtered.length === 0 && (
          <div style={{gridColumn:'1 / -1'}}>
            <Card><div className="empty">Tidak ada driver sesuai filter.</div></Card>
          </div>
        )}
      </div>

      {sel && <DriverDrawer driver={sel} onClose={() => setSel(null)} setPage={setPage} />}
    </div>
  );
}

function DriverCard({ driver: d, onClick }) {
  const trip = d.trip_aktif ? TRIPS.find(t => t.id === d.trip_aktif) : null;
  const statusTone = d.status === 'on-trip' ? 'warn' : d.status === 'standby' ? 'success' : 'neutral';
  const statusLabel = d.status === 'on-trip' ? 'On-Trip' : d.status === 'standby' ? 'Standby' : 'Libur';
  return (
    <Card hoverLift onClick={onClick}>
      <div style={{padding:16, cursor:'pointer'}}>
        <div className="row gap-3" style={{alignItems:'flex-start'}}>
          <div style={{
            width:56, height:56, borderRadius:'50%', flexShrink:0,
            background:'linear-gradient(135deg, hsl(188 50% 70%), hsl(195 60% 55%))',
            color:'white', display:'grid', placeItems:'center',
            fontFamily:'Fraunces, Georgia, serif', fontSize:20, fontWeight:600,
          }}>{d.initials}</div>
          <div style={{flex:1, minWidth:0}}>
            <div style={{fontSize:15, fontWeight:600}}>{d.nama}</div>
            <div className="row gap-2" style={{fontSize:11.5, color:'hsl(var(--muted-foreground))', marginTop:2}}>
              <span className="mono">{d.id}</span>
              <span>·</span>
              <span>{cabangName(d.cabang)}</span>
            </div>
            <div style={{marginTop:8}}>
              <Pill tone={statusTone} dot>{statusLabel}</Pill>
            </div>
          </div>
        </div>

        <div className="kv-grid" style={{marginTop:14, gap:8}}>
          <div className="kv"><span className="kv-k">Lisensi</span><span className="kv-v">{d.lisensi}</span></div>
          <div className="kv"><span className="kv-k">Pengalaman</span><span className="kv-v">{d.pengalaman} thn</span></div>
          <div className="kv"><span className="kv-k">Total Trip</span><span className="kv-v mono">{d.total_trip}</span></div>
          <div className="kv"><span className="kv-k">Rating</span><span className="kv-v"><Icon name="star" size={11} style={{color:'hsl(45 90% 55%)'}}/> {d.rating}</span></div>
        </div>

        {trip && (
          <div style={{marginTop:12, padding:'8px 10px', background:'hsl(28 78% 96%)', borderRadius:8, border:'1px solid hsl(28 78% 88%)'}}>
            <div className="row gap-2" style={{fontSize:11, color:'hsl(28 60% 35%)', fontWeight:600, marginBottom:3}}>
              <Icon name="pin" size={11} />Sedang di {trip.lokasi}
            </div>
            <div className="row between" style={{fontSize:11, color:'hsl(var(--muted-foreground))'}}>
              <span className="mono">{trip.id} · {trip.armada}</span>
              <span className="mono">{trip.kecepatan} km/h</span>
            </div>
          </div>
        )}
      </div>
    </Card>
  );
}

function DriverDrawer({ driver: d, onClose, setPage }) {
  const [tab, setTab] = useStateDr('profil');
  const trip = d.trip_aktif ? TRIPS.find(t => t.id === d.trip_aktif) : null;
  const bookingHistory = BOOKINGS.filter(b => b.driver === d.id).slice(0, 8);

  return (
    <div className="drawer-backdrop" onClick={onClose}>
      <div className="drawer" onClick={e => e.stopPropagation()}>
        <div className="drawer-header">
          <div className="row gap-3" style={{alignItems:'center'}}>
            <div style={{
              width:48, height:48, borderRadius:'50%',
              background:'linear-gradient(135deg, hsl(188 50% 70%), hsl(195 60% 55%))',
              color:'white', display:'grid', placeItems:'center',
              fontFamily:'Fraunces, Georgia, serif', fontSize:18, fontWeight:600,
            }}>{d.initials}</div>
            <div>
              <div className="drawer-title" style={{marginBottom:2}}>{d.nama}</div>
              <div className="row gap-2" style={{fontSize:11.5, color:'hsl(var(--muted-foreground))'}}>
                <span className="mono">{d.id}</span>
                <span>·</span>
                <span>{d.lisensi}</span>
                <span>·</span>
                <Pill tone={d.status==='on-trip'?'warn':d.status==='standby'?'success':'neutral'} dot>
                  {d.status==='on-trip'?'On-Trip':d.status==='standby'?'Standby':'Libur'}
                </Pill>
              </div>
            </div>
          </div>
          <Btn icon="x" tone="ghost" size="sm" onClick={onClose} />
        </div>

        <div className="drawer-tabs">
          {[
            { id:'profil',   label:'Profil',         icon:'user' },
            { id:'trip',     label:'Trip Aktif',     icon:'navigation' },
            { id:'riwayat',  label:'Riwayat',        icon:'history' },
            { id:'performa', label:'Performa',       icon:'trending' },
          ].map(t => (
            <button key={t.id} className={`drawer-tab ${tab===t.id?'active':''}`} onClick={()=>setTab(t.id)}>
              <Icon name={t.icon} size={13} />{t.label}
            </button>
          ))}
        </div>

        <div className="drawer-body">
          {tab === 'profil' && (
            <>
              <Card className="mb-4">
                <div style={{padding:14}}>
                  <div style={{fontSize:11, fontWeight:700, textTransform:'uppercase', letterSpacing:'0.06em', color:'hsl(var(--muted-foreground))', marginBottom:10}}>Informasi Driver</div>
                  <div className="kv-grid">
                    <div className="kv"><span className="kv-k">Nama Lengkap</span><span className="kv-v">{d.nama}</span></div>
                    <div className="kv"><span className="kv-k">ID Driver</span><span className="kv-v mono">{d.id}</span></div>
                    <div className="kv"><span className="kv-k">Usia</span><span className="kv-v">{d.usia} tahun</span></div>
                    <div className="kv"><span className="kv-k">Pengalaman</span><span className="kv-v">{d.pengalaman} tahun</span></div>
                    <div className="kv"><span className="kv-k">Lisensi</span><span className="kv-v">{d.lisensi}</span></div>
                    <div className="kv"><span className="kv-k">Cabang</span><span className="kv-v">{cabangName(d.cabang)}</span></div>
                    <div className="kv"><span className="kv-k">WhatsApp</span><span className="kv-v mono">{d.wa}</span></div>
                    <div className="kv"><span className="kv-k">Status Kerja</span><span className="kv-v">{d.status==='on-trip'?'On-Trip':d.status==='standby'?'Standby':'Libur'}</span></div>
                  </div>
                </div>
              </Card>

              <Card>
                <div style={{padding:14}}>
                  <div style={{fontSize:11, fontWeight:700, textTransform:'uppercase', letterSpacing:'0.06em', color:'hsl(var(--muted-foreground))', marginBottom:10}}>Dokumen & Sertifikasi</div>
                  <div style={{display:'flex', flexDirection:'column', gap:8}}>
                    {[
                      { name:'KTP',                 status:'valid', exp:'Seumur hidup' },
                      { name:`SIM ${d.lisensi}`,    status:'valid', exp:'2027-08-12' },
                      { name:'Sertifikasi Hospitality', status:'valid', exp:'2027-01-30' },
                      { name:'Medical Check-up',    status:'expired', exp:'2025-12-01' },
                    ].map((doc, i) => (
                      <div key={i} className="row between" style={{padding:'8px 10px', background:doc.status==='valid'?'hsl(158 56% 96%)':'hsl(0 70% 96%)', borderRadius:8, fontSize:12.5}}>
                        <span className="row gap-2"><Icon name="clipboard" size={13} />{doc.name}</span>
                        <span className="row gap-2">
                          <span className="mono" style={{fontSize:11, color:'hsl(var(--muted-foreground))'}}>{doc.exp}</span>
                          <Pill tone={doc.status==='valid'?'success':'danger'} dot>{doc.status==='valid'?'Valid':'Expired'}</Pill>
                        </span>
                      </div>
                    ))}
                  </div>
                </div>
              </Card>
            </>
          )}

          {tab === 'trip' && (
            <>
              {trip ? (
                <>
                  <Card className="mb-4">
                    <div style={{padding:14}}>
                      <div className="row between" style={{marginBottom:12}}>
                        <div>
                          <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', fontWeight:600, textTransform:'uppercase', letterSpacing:'0.06em'}}>Trip Sedang Berlangsung</div>
                          <div style={{fontFamily:'Fraunces, Georgia, serif', fontSize:18, fontWeight:600, marginTop:2}}>{trip.id}</div>
                        </div>
                        <Pill tone={trip.status==='in-trip'?'warn':'info'} dot>{trip.status==='in-trip'?'Bergerak':'Parked'}</Pill>
                      </div>

                      <div className="kv-grid">
                        <div className="kv"><span className="kv-k">Lokasi Saat Ini</span><span className="kv-v">{trip.lokasi}</span></div>
                        <div className="kv"><span className="kv-k">Booking</span><span className="kv-v mono">{trip.booking}</span></div>
                        <div className="kv"><span className="kv-k">Armada</span><span className="kv-v mono">{trip.armada}</span></div>
                        <div className="kv"><span className="kv-k">Kecepatan</span><span className="kv-v mono">{trip.kecepatan} km/h · {trip.heading}</span></div>
                        <div className="kv"><span className="kv-k">BBM</span><span className="kv-v mono">{trip.bbm_pct}%</span></div>
                        <div className="kv"><span className="kv-k">Jarak Total</span><span className="kv-v mono">{trip.jarak_km} KM</span></div>
                        <div className="kv"><span className="kv-k">Mulai Trip</span><span className="kv-v mono" style={{fontSize:11.5}}>{trip.ig_on}</span></div>
                        <div className="kv"><span className="kv-k">Ping Terakhir</span><span className="kv-v mono">{trip.last_ping}</span></div>
                      </div>
                    </div>
                  </Card>

                  <div className="row gap-2">
                    <Btn icon="pin" tone="primary" onClick={() => { setPage('tracking'); onClose(); }} style={{flex:1}}>Lihat di Peta Live</Btn>
                    <Btn icon="message" tone="outline">Hubungi via WA</Btn>
                  </div>
                </>
              ) : (
                <Card>
                  <div className="empty" style={{padding:'40px 20px'}}>
                    <Icon name="clock" size={32} style={{opacity:0.4, marginBottom:8}} />
                    <div>{d.nama} sedang {d.status==='standby'?'standby di pool':'libur hari ini'}.</div>
                    <div style={{fontSize:11.5, color:'hsl(var(--muted-foreground))', marginTop:4}}>Tidak ada trip aktif yang ditugaskan.</div>
                  </div>
                </Card>
              )}
            </>
          )}

          {tab === 'riwayat' && (
            <Card>
              <div style={{padding:14}}>
                <div style={{fontSize:11, fontWeight:700, textTransform:'uppercase', letterSpacing:'0.06em', color:'hsl(var(--muted-foreground))', marginBottom:10}}>
                  Booking Sebagai Driver · {bookingHistory.length} terakhir
                </div>
                {bookingHistory.length > 0 ? (
                  <div className="table-wrap">
                    <table className="table">
                      <thead>
                        <tr>
                          <th>Booking</th>
                          <th>Armada</th>
                          <th>Periode</th>
                          <th>Status</th>
                          <th className="num">Tarif</th>
                        </tr>
                      </thead>
                      <tbody>
                        {bookingHistory.map(b => {
                          const veh = ARMADA_BY_ID[b.armada];
                          return (
                            <tr key={b.id}>
                              <td className="code">{b.id}</td>
                              <td>{veh ? `${veh.merk} ${veh.model}` : b.armada}</td>
                              <td className="mono" style={{fontSize:11.5}}>{formatDateID(b.mulai)} → {formatDateID(b.selesai)}</td>
                              <td><StatusPill status={b.status} /></td>
                              <td className="num">{rupiah(b.total, {compact:true})}</td>
                            </tr>
                          );
                        })}
                      </tbody>
                    </table>
                  </div>
                ) : (
                  <div className="empty">Belum ada riwayat trip with-driver.</div>
                )}
              </div>
            </Card>
          )}

          {tab === 'performa' && (
            <>
              <div className="grid-2 mb-4">
                <Card>
                  <div style={{padding:14}}>
                    <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', fontWeight:600, textTransform:'uppercase', letterSpacing:'0.06em'}}>Rating Driver</div>
                    <div style={{fontFamily:'Fraunces, Georgia, serif', fontSize:32, fontWeight:600, marginTop:6}}>{d.rating}<span style={{fontSize:16, color:'hsl(var(--muted-foreground))'}}> / 5.0</span></div>
                    <div className="row gap-1" style={{marginTop:8}}>
                      {[1,2,3,4,5].map(n => (
                        <Icon key={n} name="star" size={16} style={{color: n <= Math.round(d.rating) ? 'hsl(45 90% 55%)' : 'hsl(var(--border))'}} />
                      ))}
                    </div>
                    <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', marginTop:10}}>Berdasarkan {d.total_trip} trip</div>
                  </div>
                </Card>
                <Card>
                  <div style={{padding:14}}>
                    <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', fontWeight:600, textTransform:'uppercase', letterSpacing:'0.06em'}}>Total Trip Lifetime</div>
                    <div style={{fontFamily:'Fraunces, Georgia, serif', fontSize:32, fontWeight:600, marginTop:6}}>{d.total_trip}</div>
                    <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', marginTop:10}}>≈ {Math.round(d.total_trip / Math.max(1, d.pengalaman))} trip/tahun</div>
                  </div>
                </Card>
              </div>

              <Card>
                <div style={{padding:14}}>
                  <div style={{fontSize:11, fontWeight:700, textTransform:'uppercase', letterSpacing:'0.06em', color:'hsl(var(--muted-foreground))', marginBottom:14}}>Breakdown Performa 90 Hari</div>
                  {[
                    { label:'On-Time Pick-up', val: 96, tone:'success' },
                    { label:'Kebersihan Mobil', val: 92, tone:'success' },
                    { label:'Komunikasi',       val: 94, tone:'success' },
                    { label:'Safety Score',     val: 89, tone:'info' },
                    { label:'Pelayanan Tamu',   val: 97, tone:'success' },
                  ].map((m, i) => (
                    <div key={i} style={{marginBottom:12}}>
                      <div className="row between" style={{marginBottom:5, fontSize:12.5}}>
                        <span>{m.label}</span>
                        <span className="mono" style={{fontWeight:600}}>{m.val}%</span>
                      </div>
                      <div style={{height:6, background:'hsl(var(--border))', borderRadius:999, overflow:'hidden'}}>
                        <div style={{height:'100%', width:`${m.val}%`,
                          background: m.tone==='success' ? 'linear-gradient(90deg, hsl(158 56% 48%), hsl(165 60% 42%))' : 'linear-gradient(90deg, hsl(195 60% 50%), hsl(200 65% 45%))',
                          borderRadius:999}} />
                      </div>
                    </div>
                  ))}
                </div>
              </Card>
            </>
          )}
        </div>

        <div className="row between" style={{padding:'14px 26px', borderTop:'1px solid hsl(var(--border))', background:'hsl(195 36% 99%)'}}>
          <div className="row gap-2" style={{fontSize:11.5, color:'hsl(var(--muted-foreground))'}}>
            <Icon name="phone" size={12} />
            <span className="mono">{d.wa}</span>
          </div>
          <div className="row gap-2">
            <Btn tone="ghost" size="sm" onClick={onClose}>Tutup</Btn>
            <Btn icon="edit" tone="outline" size="sm">Edit Profil</Btn>
            {d.status === 'standby' && <Btn icon="navigation" tone="primary" size="sm">Assign ke Trip</Btn>}
          </div>
        </div>
      </div>
    </div>
  );
}

window.DriverPage = DriverPage;