// screens-driver.jsx — Driver app screens (bottom nav, trip, issues, vehicle, history)

const { useState: useStateD } = React;

// ─────────────────────────────────────────────────────────────
// Bottom nav
// ─────────────────────────────────────────────────────────────
function DriverBottomNav({ active, onTab }) {
  const tabs = [
    { id: 'home',    label: 'Home',    icon: 'home' },
    { id: 'trip',    label: 'Trip',    icon: 'bus' },
    { id: 'issues',  label: 'Issues',  icon: 'alert' },
    { id: 'vehicle', label: 'Vehicle', icon: 'shield' },
    { id: 'profile', label: 'Profile', icon: 'user' },
  ];
  return (
    <div style={{ position:'absolute', bottom:0, left:0, right:0, height:64, background:'#fff', borderTop:'1px solid var(--n100)', display:'flex' }}>
      {tabs.map((t) => {
        const on = active === t.id;
        return (
          <button key={t.id} onClick={() => onTab(t.id)} style={{ flex:1, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:3, color: on ? 'var(--p600)' : 'var(--n400)', background:'none', border:'none' }}>
            <Icon name={t.icon} size={20}/>
            <div style={{ fontSize:10, fontWeight:700 }}>{t.label}</div>
          </button>
        );
      })}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Trip — boarding checklist
// ─────────────────────────────────────────────────────────────
function DriverTripScreen({ nav }) {
  const [phase, setPhase] = useStateD('outbound'); // outbound | return
  const stops = [
    { name: 'Madhapur Junction', time: '07:42', kids: 4, school: 'DPS', state: 'done' },
    { name: 'Hi-Tech City', time: '07:54', kids: 6, school: 'DPS · Vidyaranya', state: 'now' },
    { name: 'Kondapur', time: '08:02', kids: 5, school: 'Vidyaranya', state: 'next' },
    { name: 'Botanical Gardens', time: '08:12', kids: 3, school: 'Oakridge', state: 'next' },
    { name: 'Gachibowli (last)', time: '08:20', kids: 4, school: 'Chirec', state: 'next' },
  ];
  const riders = [
    { name: 'Aarav R.', cls: '8-B · DPS', stop: 'Hi-Tech City', boarded: true },
    { name: 'Ishaan M.', cls: '7-A · DPS', stop: 'Hi-Tech City', boarded: true },
    { name: 'Diya R.', cls: '5-A · DPS', stop: 'Hi-Tech City', boarded: false, absent: true },
    { name: 'Kabir P.', cls: '6-C · Vidyaranya', stop: 'Hi-Tech City', boarded: false },
    { name: 'Sara K.', cls: '4-B · Vidyaranya', stop: 'Hi-Tech City', boarded: false },
    { name: 'Vihaan S.', cls: '9-A · DPS', stop: 'Hi-Tech City', boarded: false },
  ];
  return (
    <div className="app screen-in">
      <StatusBar/>
      <NavHeader title="Today's trip" onBack={() => nav.pop()}/>
      <div className="app-body" style={{ padding: 0, paddingBottom: 96 }}>
        {/* Phase tabs */}
        <div style={{ padding: '12px 16px 0' }}>
          <div className="row" style={{ background: 'var(--n50)', borderRadius: 12, padding: 4, gap: 4 }}>
            {[
              { id: 'outbound', l: 'Morning · pick-up' },
              { id: 'return', l: 'Evening · drop' },
            ].map((p) => (
              <button key={p.id} onClick={() => setPhase(p.id)} style={{ flex: 1, padding: '8px 10px', borderRadius: 9, background: phase === p.id ? '#fff' : 'transparent', boxShadow: phase === p.id ? '0 1px 2px rgba(0,0,0,0.05)' : 'none', border:'none', fontSize: 12, fontWeight: 700, color: phase === p.id ? 'var(--n900)' : 'var(--n500)' }}>{p.l}</button>
            ))}
          </div>
        </div>

        {/* Live status */}
        <div style={{ padding: '14px 16px 0' }}>
          <div className="card" style={{ padding: 16, background: 'linear-gradient(135deg,#1E40AF 0%,#0F172A 100%)', color: '#fff' }}>
            <div className="row" style={{ gap: 6 }}>
              <span className="dot" style={{ background: '#10B981', boxShadow: '0 0 0 4px rgba(16,185,129,.2)' }}></span>
              <div style={{ fontSize: 10, fontFamily: 'var(--mono)', letterSpacing: '.08em', fontWeight: 700, opacity: .9 }}>EN ROUTE · STOP 2/5</div>
            </div>
            <div style={{ fontSize: 22, fontWeight: 800, marginTop: 4, letterSpacing: '-.02em' }}>Hi-Tech City</div>
            <div style={{ fontSize: 12, opacity: .9, marginTop: 2 }}>6 boarding · ETA 07:54 · 1.2 km away</div>
            <div className="row" style={{ marginTop: 14, gap: 8 }}>
              <button style={{ flex: 1, padding: '10px', background: 'rgba(255,255,255,.18)', color: '#fff', borderRadius: 10, fontWeight: 700, fontSize: 12 }}>Open in Maps</button>
              <button style={{ flex: 1, padding: '10px', background: '#fff', color: 'var(--p700)', borderRadius: 10, fontWeight: 700, fontSize: 12 }}>Mark arrived</button>
            </div>
          </div>
        </div>

        {/* Boarding checklist */}
        <div style={{ padding: '20px 20px 8px' }}>
          <SH title="Boarding · Hi-Tech City" right={<span style={{ fontSize: 11, color: 'var(--n500)', fontWeight: 600 }}>2 of 6 marked</span>}/>
          <div className="card" style={{ padding: 0 }}>
            {riders.map((r, i) => (
              <div key={i} className="row" style={{ padding: 14, gap: 12, borderBottom: i < riders.length - 1 ? '1px solid var(--n100)' : 'none' }}>
                <div style={{ width: 36, height: 36, borderRadius: 99, background: 'var(--p50)', color: 'var(--p600)', display: 'grid', placeItems: 'center', fontWeight: 800, fontSize: 13 }}>{r.name.split(' ').map(n=>n[0]).join('').slice(0,2)}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--n900)' }}>{r.name}</div>
                  <div style={{ fontSize: 11, color: 'var(--n500)' }}>{r.cls}</div>
                </div>
                {r.absent ? (
                  <span className="pill" style={{ background: 'var(--warning-50)', color: 'var(--warning)', fontSize: 10 }}>Absent today</span>
                ) : r.boarded ? (
                  <span className="pill" style={{ background: 'var(--success-50)', color: 'var(--success)', fontSize: 10 }}>✓ Boarded</span>
                ) : (
                  <button className="btn-sm" style={{ background: 'var(--p600)', color: '#fff', height: 30, padding: '0 12px', fontSize: 11, fontWeight: 700, borderRadius: 8 }}>Mark</button>
                )}
              </div>
            ))}
          </div>
        </div>

        {/* Stops summary */}
        <div style={{ padding: '12px 20px 24px' }}>
          <SH title="Today's stops"/>
          <div className="card" style={{ padding: 16, position: 'relative' }}>
            <div style={{ position: 'absolute', left: 27, top: 24, bottom: 24, width: 2, background: 'var(--n100)' }}></div>
            {stops.map((s, i) => (
              <div key={i} className="row" style={{ gap: 14, padding: '8px 0', position: 'relative', zIndex: 1 }}>
                <div style={{
                  width: 16, height: 16, borderRadius: 99, flexShrink: 0,
                  background: s.state === 'now' ? 'var(--p600)' : s.state === 'done' ? 'var(--success)' : '#fff',
                  border: s.state === 'next' ? '2px solid var(--n200)' : '0',
                  boxShadow: s.state === 'now' ? '0 0 0 4px var(--p100)' : 'none',
                  display: 'grid', placeItems: 'center', color: '#fff', fontSize: 9,
                }}>{s.state === 'done' && '✓'}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div className="spread">
                    <div style={{ fontSize: 13, fontWeight: 700, color: s.state === 'done' ? 'var(--n400)' : 'var(--n900)', textDecoration: s.state === 'done' ? 'line-through' : 'none' }}>{s.name}</div>
                    <div style={{ fontSize: 11, fontFamily: 'var(--mono)', fontWeight: 700, color: 'var(--n500)' }}>{s.time}</div>
                  </div>
                  <div style={{ fontSize: 10, color: 'var(--n500)', marginTop: 2 }}>{s.kids} kids · {s.school}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Issues — report + history
// ─────────────────────────────────────────────────────────────
function DriverIssuesScreen({ nav }) {
  const [tab, setTab] = useStateD('open');
  const issues = {
    open: [
      { type: 'Traffic delay', loc: 'Hi-Tech flyover', time: '07:36 · today', sev: 'Low', sevBg: 'var(--info-50)', sevClr: 'var(--info)', note: 'Slow traffic, ETA +6 mins. Dispatch notified.' },
    ],
    closed: [
      { type: 'Student absent', loc: 'Diya R. · Hi-Tech City', time: 'Yesterday · 07:55', sev: 'Info', sevBg: 'var(--n100)', sevClr: 'var(--n600)', note: 'Parent informed via app, marked absent.' },
      { type: 'Engine warning light', loc: 'TS09 EQ 4421', time: '12 Mar · 08:14', sev: 'High', sevBg: 'var(--error-50)', sevClr: 'var(--error)', note: 'Service done at Sai Garage, cleared on 13 Mar.' },
      { type: 'Late pickup', loc: 'Kondapur stop', time: '08 Mar · 08:08', sev: 'Med', sevBg: 'var(--warning-50)', sevClr: 'var(--warning)', note: 'Heavy rain, stop missed by 4 mins. Parents apologised to.' },
    ],
  };
  const list = issues[tab] || [];
  return (
    <div className="app screen-in">
      <StatusBar/>
      <NavHeader title="Issues & incidents" onBack={() => nav.pop()}/>
      <div className="app-body" style={{ padding: 0, paddingBottom: 96 }}>
        {/* Quick report */}
        <div style={{ padding: '14px 16px 0' }}>
          <div className="card" style={{ padding: 16, background: 'var(--c50)', border: '1px solid var(--c100)' }}>
            <div style={{ fontSize: 13, fontWeight: 800, color: 'var(--n900)' }}>Need to report something?</div>
            <div style={{ fontSize: 11, color: 'var(--n600)', marginTop: 2 }}>Dispatch + school admins are alerted within 30 sec.</div>
            <div className="row" style={{ marginTop: 12, gap: 8, flexWrap: 'wrap' }}>
              {[
                { l: 'Breakdown', i: 'alert', clr: 'var(--error)' },
                { l: 'Accident', i: 'alert', clr: 'var(--error)' },
                { l: 'Traffic', i: 'clock', clr: 'var(--warning)' },
                { l: 'Student missing', i: 'user', clr: 'var(--warning)' },
                { l: 'Other', i: 'message', clr: 'var(--p600)' },
              ].map((q, i) => (
                <button key={i} className="row" style={{ gap: 6, padding: '8px 12px', background: '#fff', borderRadius: 99, fontSize: 11, fontWeight: 700, color: 'var(--n900)', border: '1px solid var(--n100)' }}>
                  <Icon name={q.i} size={13} style={{ color: q.clr }}/> {q.l}
                </button>
              ))}
            </div>
          </div>
        </div>

        {/* Tabs */}
        <div style={{ padding: '16px 16px 0' }}>
          <div className="row" style={{ background: 'var(--n50)', borderRadius: 12, padding: 4, gap: 4 }}>
            {[ {id:'open',l:'Open · 1'}, {id:'closed',l:'Closed · 3'} ].map(p => (
              <button key={p.id} onClick={() => setTab(p.id)} style={{ flex: 1, padding: '8px 10px', borderRadius: 9, background: tab === p.id ? '#fff' : 'transparent', boxShadow: tab === p.id ? '0 1px 2px rgba(0,0,0,0.05)' : 'none', border:'none', fontSize: 12, fontWeight: 700, color: tab === p.id ? 'var(--n900)' : 'var(--n500)' }}>{p.l}</button>
            ))}
          </div>
        </div>

        {/* List */}
        <div style={{ padding: '16px 20px 24px', display: 'flex', flexDirection: 'column', gap: 10 }}>
          {list.map((it, i) => (
            <div key={i} className="card" style={{ padding: 14 }}>
              <div className="row" style={{ gap: 10, alignItems: 'flex-start' }}>
                <div style={{ width: 36, height: 36, borderRadius: 10, background: it.sevBg, color: it.sevClr, display: 'grid', placeItems: 'center', flexShrink: 0 }}>
                  <Icon name="alert" size={16}/>
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div className="spread">
                    <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--n900)' }}>{it.type}</div>
                    <span className="pill" style={{ background: it.sevBg, color: it.sevClr, fontSize: 10, fontWeight: 700 }}>{it.sev}</span>
                  </div>
                  <div style={{ fontSize: 11, color: 'var(--n500)', marginTop: 2 }}>{it.loc} · {it.time}</div>
                  <div style={{ fontSize: 12, color: 'var(--n700)', marginTop: 8, lineHeight: 1.5 }}>{it.note}</div>
                </div>
              </div>
            </div>
          ))}
          {list.length === 0 && (
            <div className="card" style={{ padding: 24, textAlign: 'center' }}>
              <div style={{ fontSize: 13, color: 'var(--n500)' }}>No issues here. 🎉</div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Vehicle — pre-trip checklist + docs
// ─────────────────────────────────────────────────────────────
function DriverVehicleScreen({ nav }) {
  const [checks, setChecks] = useStateD({ tyres: true, fuel: true, lights: false, mirrors: false, brakes: false, firstaid: false });
  const items = [
    { k: 'tyres', l: 'Tyres & pressure', sub: 'No visible damage, normal pressure' },
    { k: 'fuel', l: 'Fuel level', sub: '78% · enough for AM + PM' },
    { k: 'lights', l: 'Lights & indicators', sub: 'All four directions, brake, hazard' },
    { k: 'mirrors', l: 'Mirrors & wipers', sub: 'Clean, adjusted' },
    { k: 'brakes', l: 'Brakes', sub: 'Test from depot exit' },
    { k: 'firstaid', l: 'First-aid + fire ext.', sub: 'Sealed, in date' },
  ];
  const done = items.filter(x => checks[x.k]).length;
  return (
    <div className="app screen-in">
      <StatusBar/>
      <NavHeader title="Vehicle log" onBack={() => nav.pop()}/>
      <div className="app-body" style={{ padding: 0, paddingBottom: 96 }}>
        {/* Vehicle hero */}
        <div style={{ padding: '14px 16px 0' }}>
          <div className="card" style={{ padding: 16 }}>
            <div className="row" style={{ gap: 12 }}>
              <div style={{ width: 56, height: 56, borderRadius: 14, background: 'var(--p50)', color: 'var(--p600)', display: 'grid', placeItems: 'center', flexShrink: 0 }}><Icon name="bus" size={26}/></div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 16, fontWeight: 800, color: 'var(--n900)', letterSpacing: '-.01em' }}>TS09 EQ 4421</div>
                <div style={{ fontSize: 11, color: 'var(--n500)', marginTop: 2 }}>Tata Starbus · 32 seater · 2.5 yrs</div>
                <div className="row" style={{ gap: 6, marginTop: 6 }}>
                  <span className="pill" style={{ fontSize: 10, background:'var(--success-50)', color:'var(--success)' }}>Sai Travels</span>
                  <span className="pill" style={{ fontSize: 10 }}>Route 14</span>
                </div>
              </div>
            </div>
            <div className="row" style={{ marginTop: 12, paddingTop: 12, borderTop: '1px dashed var(--n100)', gap: 12 }}>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 10, color: 'var(--n500)', fontWeight: 600 }}>Odometer</div>
                <div style={{ fontSize: 14, fontWeight: 800, color: 'var(--n900)', fontVariantNumeric: 'tabular-nums' }}>84,210 km</div>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 10, color: 'var(--n500)', fontWeight: 600 }}>Next service</div>
                <div style={{ fontSize: 14, fontWeight: 800, color: 'var(--n900)' }}>in 1,790 km</div>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 10, color: 'var(--n500)', fontWeight: 600 }}>Last check</div>
                <div style={{ fontSize: 14, fontWeight: 800, color: 'var(--n900)' }}>Today 07:18</div>
              </div>
            </div>
          </div>
        </div>

        {/* Checklist */}
        <div style={{ padding: '20px 20px 0' }}>
          <SH title="Pre-trip checks" right={<span style={{ fontSize: 11, color: 'var(--n500)', fontWeight: 600 }}>{done}/{items.length} done</span>}/>
          <div className="card" style={{ padding: 0 }}>
            {items.map((it, i) => (
              <button key={it.k} onClick={() => setChecks({ ...checks, [it.k]: !checks[it.k] })} className="row" style={{ padding: 14, gap: 12, borderBottom: i < items.length - 1 ? '1px solid var(--n100)' : 'none', width: '100%', textAlign: 'left', background: 'transparent' }}>
                <div style={{ width: 24, height: 24, borderRadius: 7, background: checks[it.k] ? 'var(--success)' : '#fff', border: checks[it.k] ? '0' : '2px solid var(--n200)', display: 'grid', placeItems: 'center', color: '#fff', flexShrink: 0 }}>
                  {checks[it.k] && <Icon name="check" size={14}/>}
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--n900)' }}>{it.l}</div>
                  <div style={{ fontSize: 11, color: 'var(--n500)', marginTop: 2 }}>{it.sub}</div>
                </div>
              </button>
            ))}
          </div>
        </div>

        {/* Docs */}
        <div style={{ padding: '20px 20px 24px' }}>
          <SH title="Compliance · documents"/>
          <div className="card" style={{ padding: 0 }}>
            {[
              { l: 'Insurance', exp: 'Valid till 22 Aug 2026', state: 'ok' },
              { l: 'PUC', exp: 'Valid till 14 Jun 2026', state: 'ok' },
              { l: 'Fitness certificate', exp: 'Valid till 02 Apr 2026', state: 'soon' },
              { l: 'Permit', exp: 'Valid till 30 Sep 2027', state: 'ok' },
              { l: 'RC', exp: 'Valid till 12 Jan 2032', state: 'ok' },
            ].map((d, i, arr) => (
              <div key={i} className="row" style={{ padding: 14, gap: 12, borderBottom: i < arr.length - 1 ? '1px solid var(--n100)' : 'none' }}>
                <Icon name="shield" size={18} style={{ color: d.state === 'ok' ? 'var(--success)' : 'var(--warning)' }}/>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--n900)' }}>{d.l}</div>
                  <div style={{ fontSize: 11, color: 'var(--n500)' }}>{d.exp}</div>
                </div>
                <button className="btn-sm btn-ghost" style={{ height: 28, padding: '0 10px', fontSize: 11 }}>View</button>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// Driver profile — delegates to the shared ProfileScreen shell
// ─────────────────────────────────────────────────────────────
function DriverProfileScreen({ nav, onSwitch, membership, lang }) {
  return <ProfileScreen nav={nav} role="driver" lang={lang || 'en'} membership={membership} onSwitch={onSwitch}/>;
}

Object.assign(window, {
  DriverBottomNav, DriverTripScreen, DriverIssuesScreen, DriverVehicleScreen, DriverProfileScreen,
});