// Driver App — mobile phone-frame preview (untuk driver lapangan)
const { useState: useStateDA } = React;

function DriverApp({ role, setPage }) {
  const [tab, setTab] = useStateDA('home'); // home | trip | history | profil
  // Pakai driver pertama as demo
  const driver = DRIVERS[0]; // Wayan Surya
  const trip = TRIPS.find(t => t.id === driver.trip_aktif);
  const booking = trip ? BOOKINGS.find(b => b.id === trip.booking) : null;
  const veh = booking ? ARMADA_BY_ID[booking.armada] : null;
  const cust = booking ? CUSTOMER_BY_ID[booking.cust] : null;

  return (
    <div>
      <PageHeader
        eyebrow="Mobile · Driver App"
        title="Driver Lapangan"
        subtitle="Preview aplikasi mobile yang dipakai driver — GPS check-in, trip aktif, riwayat antaran"
        actions={[
          <Btn key="ios"  icon="download" tone="ghost"   size="sm">Download iOS</Btn>,
          <Btn key="and"  icon="download" tone="primary" size="sm">Download Android</Btn>,
        ]}
      />

      <div className="phone-stage">
        {/* LEFT phone — home/trip aktif */}
        <div style={{display:'flex', flexDirection:'column', alignItems:'center'}}>
          <div className="phone-frame">
            <div className="phone-screen">
              <div className="phone-status">
                <span>{NOW_HHMM}</span>
                <span>•••• 5G  ◐ 87%</span>
              </div>

              <div style={{padding:'8px 18px 4px', background:'linear-gradient(135deg, hsl(188 50% 30%), hsl(195 60% 22%))', color:'white'}}>
                <div className="row between" style={{marginBottom:10}}>
                  <div>
                    <div style={{fontSize:11, opacity:0.8}}>Selamat siang,</div>
                    <div style={{fontSize:16, fontWeight:600, fontFamily:'Fraunces, Georgia, serif'}}>{driver.nama}</div>
                  </div>
                  <div style={{
                    width:38, height:38, borderRadius:'50%',
                    background:'rgba(255,255,255,0.18)', display:'grid', placeItems:'center',
                    fontFamily:'Fraunces, Georgia, serif', fontSize:14, fontWeight:600,
                  }}>{driver.initials}</div>
                </div>
                <div className="row gap-2" style={{fontSize:11, opacity:0.9, paddingBottom:12}}>
                  <Icon name="pin" size={11} />
                  <span>Pool {cabangName(driver.cabang)}</span>
                  <span style={{marginLeft:'auto'}}>
                    <Pill tone="warn" dot>On-Trip</Pill>
                  </span>
                </div>
              </div>

              <div className="phone-body">
                {trip && booking && (
                  <>
                    <div style={{fontSize:10.5, fontWeight:700, textTransform:'uppercase', letterSpacing:'0.06em', color:'hsl(var(--muted-foreground))', margin:'4px 0 8px'}}>
                      Trip Aktif
                    </div>
                    <div className="phone-card" style={{borderLeft:'3px solid hsl(28 78% 52%)'}}>
                      <div className="row between" style={{marginBottom:8}}>
                        <span className="code">{trip.id}</span>
                        <Pill tone="warn" dot>Bergerak</Pill>
                      </div>
                      <div style={{fontSize:14, fontWeight:600, marginBottom:4}}>{cust?.nama || 'Customer'}</div>
                      <div style={{fontSize:11, color:'hsl(var(--muted-foreground))', marginBottom:10}}>
                        {veh ? `${veh.merk} ${veh.model} · ${veh.plat}` : booking.armada}
                      </div>
                      <div style={{display:'flex', flexDirection:'column', gap:8, fontSize:12}}>
                        <div className="row gap-2"><Icon name="pin" size={12} style={{color:'hsl(158 56% 45%)', flexShrink:0}}/>
                          <div><div style={{fontSize:10, color:'hsl(var(--muted-foreground))'}}>Pickup</div>{booking.pickup}</div>
                        </div>
                        <div className="row gap-2"><Icon name="flag" size={12} style={{color:'hsl(0 60% 50%)', flexShrink:0}}/>
                          <div><div style={{fontSize:10, color:'hsl(var(--muted-foreground))'}}>Dropoff</div>{booking.dropoff}</div>
                        </div>
                      </div>
                      <div className="row gap-2" style={{marginTop:10, paddingTop:10, borderTop:'1px solid hsl(var(--border))', fontSize:11}}>
                        <span className="row gap-1"><Icon name="speed" size={11}/>{trip.kecepatan} km/h</span>
                        <span>·</span>
                        <span className="row gap-1"><Icon name="fuel" size={11}/>{trip.bbm_pct}%</span>
                        <span>·</span>
                        <span className="row gap-1"><Icon name="route" size={11}/>{trip.jarak_km} km</span>
                      </div>

                      <button className="phone-btn">Buka Navigasi</button>
                      <button className="phone-btn outline">Hubungi Tamu</button>
                    </div>

                    <div className="phone-section-title">Trip Berikutnya</div>
                    <div className="phone-card">
                      <div className="row between" style={{marginBottom:6}}>
                        <span style={{fontSize:12.5, fontWeight:600}}>Pickup besok 06:00</span>
                        <Pill tone="info" dot>Esok</Pill>
                      </div>
                      <div style={{fontSize:11, color:'hsl(var(--muted-foreground))'}}>BKG-30264 · Toyota Alphard · Hotel The Mulia</div>
                    </div>
                  </>
                )}
              </div>

              <div className="phone-tabbar">
                {[
                  { id:'home',    icon:'home',       label:'Beranda' },
                  { id:'trip',    icon:'navigation', label:'Trip' },
                  { id:'history', icon:'history',    label:'Riwayat' },
                  { id:'profil',  icon:'user',       label:'Profil' },
                ].map(t => (
                  <button key={t.id} className={`phone-tab ${tab===t.id?'active':''}`} onClick={()=>setTab(t.id)}>
                    <Icon name={t.icon} size={18} />
                    {t.label}
                  </button>
                ))}
              </div>
            </div>
          </div>
          <div style={{marginTop:10, fontSize:11, color:'hsl(var(--muted-foreground))', textAlign:'center'}}>
            <Icon name="phone" size={11} /> Tampilan: Beranda + Trip Aktif
          </div>
        </div>

        {/* RIGHT phone — check-in / serah-terima */}
        <div style={{display:'flex', flexDirection:'column', alignItems:'center'}}>
          <div className="phone-frame">
            <div className="phone-screen">
              <div className="phone-status">
                <span>{NOW_HHMM}</span>
                <span>•••• 5G  ◐ 87%</span>
              </div>

              <div style={{padding:'14px 18px 10px', borderBottom:'1px solid hsl(var(--border))', background:'hsl(var(--card))'}}>
                <div className="row gap-2" style={{fontSize:11, color:'hsl(var(--muted-foreground))', marginBottom:4}}>
                  <button style={{background:'none', border:0, padding:0, color:'inherit'}}><Icon name="x" size={14}/></button>
                  <span>Serah Terima Mobil</span>
                </div>
                <div style={{fontSize:16, fontWeight:600, fontFamily:'Fraunces, Georgia, serif'}}>Check-In Kembali</div>
              </div>

              <div className="phone-body">
                <div className="phone-card">
                  <div className="row gap-2" style={{marginBottom:8}}>
                    <div className="veh-thumb mpv" style={{width:44, height:32, flexShrink:0}}>
                      <Icon name="car" size={20}/>
                    </div>
                    <div style={{flex:1, minWidth:0}}>
                      <div style={{fontSize:12.5, fontWeight:600}}>Toyota Avanza Veloz</div>
                      <div className="mono" style={{fontSize:11, color:'hsl(var(--muted-foreground))'}}>DK 2202 BC</div>
                    </div>
                  </div>
                  <div className="kv-grid" style={{gap:6}}>
                    <div className="kv"><span className="kv-k">Booking</span><span className="kv-v mono" style={{fontSize:11}}>BKG-30231</span></div>
                    <div className="kv"><span className="kv-k">Customer</span><span className="kv-v" style={{fontSize:11.5}}>Putri Maharani</span></div>
                    <div className="kv"><span className="kv-k">Odo Awal</span><span className="kv-v mono" style={{fontSize:11}}>28.410 KM</span></div>
                  </div>
                </div>

                <div style={{fontSize:10.5, fontWeight:700, textTransform:'uppercase', letterSpacing:'0.06em', color:'hsl(var(--muted-foreground))', margin:'10px 0 6px'}}>
                  Inspeksi Cepat
                </div>
                {[
                  { l:'Foto 4 Sisi Mobil', ic:'camera', done:true },
                  { l:'Odometer & BBM',    ic:'gauge',  done:true },
                  { l:'Kelengkapan Mobil', ic:'check',  done:false },
                  { l:'Catat Kerusakan',   ic:'edit',   done:false },
                  { l:'Tanda Tangan Tamu', ic:'signature', done:false },
                ].map((it, i) => (
                  <div key={i} style={{
                    display:'flex', alignItems:'center', gap:10,
                    padding:'10px 12px', marginBottom:6,
                    background: it.done ? 'hsl(158 56% 96%)' : 'hsl(var(--card))',
                    border:'1px solid hsl(var(--border))', borderRadius:10, fontSize:12.5,
                  }}>
                    <div style={{
                      width:22, height:22, borderRadius:'50%',
                      background: it.done ? 'hsl(158 56% 45%)' : 'hsl(var(--muted))',
                      color: it.done ? 'white' : 'hsl(var(--muted-foreground))',
                      display:'grid', placeItems:'center', flexShrink:0,
                    }}>
                      <Icon name={it.done ? 'check' : it.ic} size={12}/>
                    </div>
                    <span style={{flex:1, textDecoration: it.done ? 'line-through' : 'none', opacity: it.done ? 0.6 : 1}}>{it.l}</span>
                    {!it.done && <Icon name="more" size={14} style={{color:'hsl(var(--muted-foreground))'}}/>}
                  </div>
                ))}

                <button className="phone-btn">Lanjutkan Inspeksi</button>
              </div>
            </div>
          </div>
          <div style={{marginTop:10, fontSize:11, color:'hsl(var(--muted-foreground))', textAlign:'center'}}>
            <Icon name="clipboard" size={11}/> Tampilan: BAST Check-In Mobile
          </div>
        </div>
      </div>

      {/* Features list */}
      <Card style={{marginTop:24}}>
        <div style={{padding:18}}>
          <div style={{fontFamily:'Fraunces, Georgia, serif', fontSize:16, fontWeight:600, marginBottom:14}}>Fitur Driver App</div>
          <div className="grid-3" style={{gap:14}}>
            {[
              { ic:'navigation', t:'GPS Tracking',     d:'Live position dikirim setiap 5 detik ke dispatcher' },
              { ic:'camera',     t:'Foto 4 Sisi',      d:'Wajib foto sebelum mulai trip & saat return' },
              { ic:'signature',  t:'Tanda Tangan',     d:'Tamu tanda tangan langsung di layar HP driver' },
              { ic:'message',    t:'Chat Dispatcher',  d:'Komunikasi real-time dengan tim cabang' },
              { ic:'route',      t:'Trip History',     d:'Riwayat seluruh trip & total earning bulan ini' },
              { ic:'alert',      t:'SOS Emergency',    d:'Tombol panik untuk situasi darurat' },
            ].map((f, i) => (
              <div key={i} style={{padding:14, background:'hsl(195 36% 97%)', borderRadius:12, border:'1px solid hsl(var(--border))'}}>
                <div style={{
                  width:36, height:36, borderRadius:10,
                  background:'linear-gradient(135deg, hsl(188 60% 50%), hsl(195 60% 40%))',
                  color:'white', display:'grid', placeItems:'center', marginBottom:10,
                }}><Icon name={f.ic} size={18}/></div>
                <div style={{fontSize:13.5, fontWeight:600, marginBottom:3}}>{f.t}</div>
                <div style={{fontSize:11.5, color:'hsl(var(--muted-foreground))'}}>{f.d}</div>
              </div>
            ))}
          </div>
        </div>
      </Card>
    </div>
  );
}

window.DriverApp = DriverApp;