/* Transport — live bus tracking */
function MapCanvas() {
  const STOPS = [
    { id:1, x:'40%', y:'52%', name:'Cypress Trace', time:'3:12 PM', done:true },
    { id:2, x:'63%', y:'33%', name:'Morton Ranch Rd', time:'3:20 PM', done:false, next:true },
    { id:3, x:'10%', y:'86%', name:'Your stop · Home', time:'3:25 PM', done:false },
  ];
  const [sel, setSel] = React.useState(2);
  const cur = STOPS.find(s => s.id === sel);
  return (
    <div style={{ position:'relative', height:230, borderRadius:16, overflow:'hidden', border:'1px solid var(--gray-200)', background:'#E8EEF0' }}>
      <div style={{ position:'absolute', inset:0, background:
        'radial-gradient(circle at 20% 30%, #DCEAD9 0 70px, transparent 71px),'+
        'radial-gradient(circle at 80% 70%, #DCEAD9 0 90px, transparent 91px),'+
        'linear-gradient(180deg,#EAF0F1,#E4EBEC)' }} />
      <div style={{ position:'absolute', top:'46%', left:0, right:0, height:14, background:'#fff', boxShadow:'0 0 0 1px #D5DEE0' }} />
      <div style={{ position:'absolute', top:0, bottom:0, left:'62%', width:12, background:'#fff', boxShadow:'0 0 0 1px #D5DEE0' }} />
      <div style={{ position:'absolute', top:0, bottom:0, left:'24%', width:9, background:'#F2F5F6', boxShadow:'0 0 0 1px #DFE6E8' }} />
      {/* route line */}
      <svg style={{ position:'absolute', inset:0, width:'100%', height:'100%' }} viewBox="0 0 360 230" preserveAspectRatio="none">
        <path d="M40 200 L40 120 L150 120 L150 78 L300 78" fill="none" stroke="var(--blue-500)" strokeWidth="5" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="3 9" opacity="0.85">
          <animate attributeName="stroke-dashoffset" from="24" to="0" dur="0.8s" repeatCount="indefinite" />
        </path>
      </svg>
      {/* animated bus traveling the route */}
      <div className="jl-bus-travel" style={{ position:'absolute', left:0, top:0, width:40, height:40, marginLeft:-20, marginTop:-20, zIndex:4 }}>
        <div style={{ width:40, height:40, borderRadius:'999px', background:'var(--gold-400)', display:'flex', alignItems:'center', justifyContent:'center', boxShadow:'0 4px 12px rgba(0,0,0,.25)', border:'2.5px solid #fff' }}>
          <Icon name="bus-front" size={20} color="var(--navy-700)" />
        </div>
      </div>
      {/* tappable stops */}
      {STOPS.map(s => {
        const on = s.id === sel;
        return (
          <button key={s.id} onClick={()=>setSel(s.id)} style={{ position:'absolute', left:s.x, top:s.y, transform:`translate(-50%,-50%) scale(${on?1.18:1})`, transition:'transform .15s ease', border:0, background:'transparent', cursor:'pointer', padding:0, zIndex: on?6:3 }}>
            <span className={s.next?'jl-pulse':''} style={{ display:'block', width:16, height:16, borderRadius:'999px', background: s.done?'var(--success-500)':(s.next?'var(--blue-600)':'#fff'), border:`3px solid ${on?'var(--navy-700)':'#fff'}`, boxShadow:'0 2px 6px rgba(0,0,0,.22)' }} />
          </button>
        );
      })}
      {/* stop detail chip */}
      <div style={{ position:'absolute', left:12, right:12, top:12, background:'rgba(255,255,255,.96)', borderRadius:12, padding:'9px 12px', boxShadow:'var(--shadow-md)', display:'flex', alignItems:'center', gap:10, zIndex:8 }}>
        <span style={{ width:30, height:30, borderRadius:8, background: cur.done?'var(--success-100)':'var(--blue-100)', display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto' }}><Icon name={cur.done?'check':'map-pin'} size={15} color={cur.done?'var(--success-600)':'var(--blue-600)'} stroke={2.4} /></span>
        <div style={{ flex:1, minWidth:0 }}>
          <div style={{ fontSize:13, fontWeight:700, color:'var(--ink)' }}>{cur.name}</div>
          <div style={{ fontSize:11.5, color:'var(--gray-500)' }}>{cur.done ? 'Arrived' : 'ETA'} · {cur.time}</div>
        </div>
        {cur.next && <span style={{ fontSize:11, fontWeight:800, color:'var(--blue-600)', background:'var(--blue-100)', padding:'3px 9px', borderRadius:'999px' }}>NEXT STOP</span>}
      </div>
    </div>
  );
}

function TransportScreen({ onNav, onBack }) {
  const [notify, setNotify] = React.useState(false);
  const [reportOpen, setReportOpen] = React.useState(false);
  const [reported, setReported] = React.useState(false);
  const [reason, setReason] = React.useState('Stayed after class');
  const REASONS = ['Stayed after class', 'Running late', 'Felt sick', 'Other'];
  const scans = [
    { n:'EJ Hatten', t:'3:05 PM', c:'green', done:true },
    { n:'James Walker', t:'3:07 PM', c:'blue', done:true },
    { n:'Sophia Perez', t:'3:08 PM', c:'gold', done:true },
  ];
  return (
    <div style={{ background:'var(--gray-50)', minHeight:'100%' }}>
      <PushBar title="Bus #12" onBack={onBack} />
      <div style={{ padding:'14px 18px 110px' }}>
        {/* missed-bus confirmation banner */}
        {reported && (
          <div style={{ display:'flex', alignItems:'center', gap:11, marginBottom:14, background:'var(--warning-100)', border:'1px solid var(--gold-200)', borderRadius:14, padding:'13px 15px' }}>
            <span style={{ width:34, height:34, borderRadius:'999px', background:'var(--warning-500)', display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto' }}><Icon name="check" size={18} color="#fff" /></span>
            <div style={{ flex:1 }}>
              <div style={{ fontSize:13.5, fontWeight:700, color:'var(--warning-600)' }}>School &amp; family notified</div>
              <div style={{ fontSize:12, color:'var(--warning-600)', opacity:.85 }}>EJ missed Bus #12 · {reason}</div>
            </div>
            <button onClick={()=>setReported(false)} style={{ border:0, background:'transparent', cursor:'pointer', display:'flex' }}><Icon name="x" size={16} color="var(--warning-600)" /></button>
          </div>
        )}

        {/* driver */}
        <div style={{ display:'flex', alignItems:'center', gap:12, background:'#fff', border:'1px solid var(--gray-200)', borderRadius:14, padding:'12px 14px', boxShadow:'var(--shadow-sm)', marginBottom:14 }}>
          <Avatar initials="MT" color="navy" size={42} />
          <div style={{ flex:1 }}>
            <div style={{ fontSize:12, color:'var(--gray-500)', fontWeight:600 }}>Driver</div>
            <div style={{ fontSize:15, fontWeight:700, color:'var(--ink)' }}>Mark Thompson</div>
          </div>
          <Pill bg="var(--gold-100)" fg="var(--gold-600)"><Icon name="star" size={13} color="var(--gold-600)" fill="var(--gold-600)" />4.9</Pill>
        </div>

        <MapCanvas />

        {/* live source attribution */}
        <div style={{ display:'flex', alignItems:'center', gap:7, margin:'8px 2px 0' }}>
          <span style={{ width:7, height:7, borderRadius:'999px', background:'var(--success-500)', flex:'0 0 auto' }} />
          <Icon name="smartphone" size={13} color="var(--gray-500)" />
          <span style={{ fontSize:11.5, color:'var(--gray-500)', fontWeight:600 }}>Live from driver's phone GPS · updated just now</span>
        </div>

        {/* next stop / ETA */}
        <div style={{ display:'flex', gap:12, marginTop:14 }}>
          <div style={{ flex:1, background:'#fff', border:'1px solid var(--gray-200)', borderRadius:14, padding:'13px 15px', boxShadow:'var(--shadow-sm)' }}>
            <div style={{ fontSize:10, fontWeight:800, letterSpacing:'.09em', color:'var(--gray-500)' }}>NEXT STOP</div>
            <div style={{ fontSize:16, fontWeight:700, color:'var(--ink)', marginTop:3 }}>Morton Ranch Rd</div>
          </div>
          <div style={{ width:120, background:'var(--grad-hero)', borderRadius:14, padding:'13px 15px', color:'#fff', boxShadow:'var(--shadow-navy)' }}>
            <div style={{ fontSize:10, fontWeight:800, letterSpacing:'.09em', color:'rgba(255,255,255,.7)' }}>ETA</div>
            <div style={{ fontSize:24, fontWeight:800, lineHeight:1, marginTop:3 }}>5<span style={{ fontSize:14, fontWeight:600 }}> min</span></div>
            <div style={{ fontSize:11, color:'rgba(255,255,255,.75)', marginTop:3 }}>3:20 PM</div>
          </div>
        </div>

        {/* notify toggle */}
        <button onClick={()=>{ setNotify(n=>!n); jlToast(notify ? 'Alerts off for Bus #12' : "We'll alert you when Bus #12 is close", { icon: notify?'bell-off':'bell' }); }} style={{ width:'100%', marginTop:14, display:'flex', alignItems:'center', justifyContent:'center', gap:8, background: notify?'var(--success-500)':'var(--navy-600)', color:'#fff', border:0, borderRadius:12, padding:'14px', fontWeight:700, fontSize:14.5, cursor:'pointer', fontFamily:'var(--font-sans)' }}>
          <Icon name={notify?'check':'bell'} size={17} color="#fff" />{notify ? 'Alerts On' : 'Notify Me When Close'}
        </button>

        {/* missed the bus */}
        <button onClick={()=>setReportOpen(true)} style={{ width:'100%', marginTop:10, display:'flex', alignItems:'center', gap:11, background:'#fff', border:'1px solid var(--gray-200)', borderRadius:12, padding:'13px 14px', cursor:'pointer', fontFamily:'var(--font-sans)', textAlign:'left', boxShadow:'var(--shadow-sm)' }}>
          <span style={{ width:36, height:36, borderRadius:10, background:'var(--danger-100)', display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto' }}><Icon name="bus" size={18} color="var(--danger-500)" /></span>
          <div style={{ flex:1 }}>
            <div style={{ fontSize:14, fontWeight:700, color:'var(--ink)' }}>Missed the bus?</div>
            <div style={{ fontSize:12, color:'var(--gray-500)' }}>Tell the school &amp; your family right away</div>
          </div>
          <Icon name="chevron-right" size={18} color="var(--gray-400)" />
        </button>

        {/* scanned students */}
        <SectionLabel>On Board</SectionLabel>
        <div style={cardWrap}>
          {scans.map((s,i)=>(
            <React.Fragment key={s.n}>
              {i>0 && <Divider />}
              <div style={{ display:'flex', alignItems:'center', gap:12, padding:'12px 14px' }}>
                <Avatar initials={s.n.split(' ').map(w=>w[0]).join('')} color={s.c} size={38} />
                <div style={{ flex:1 }}>
                  <div style={{ fontSize:14.5, fontWeight:700, color:'var(--ink)' }}>{s.n}</div>
                  <div style={{ fontSize:12.5, color:'var(--gray-500)' }}>Scanned on · {s.t}</div>
                </div>
                <Icon name="circle-check-big" size={22} color="var(--success-500)" />
              </div>
            </React.Fragment>
          ))}
        </div>
      </div>

      {/* bottom sheet: report missed bus */}
      {reportOpen && (
        <div onClick={()=>setReportOpen(false)} style={{ position:'absolute', inset:0, zIndex:60, background:'rgba(10,20,40,.4)', display:'flex', alignItems:'flex-end' }}>
          <div onClick={e=>e.stopPropagation()} style={{ width:'100%', background:'#fff', borderRadius:'22px 22px 0 0', padding:'10px 18px 34px' }}>
            <div style={{ width:40, height:4, borderRadius:'999px', background:'var(--gray-300)', margin:'0 auto 16px' }} />
            <div style={{ display:'flex', alignItems:'center', gap:11, marginBottom:6 }}>
              <span style={{ width:42, height:42, borderRadius:12, background:'var(--danger-100)', display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto' }}><Icon name="bus" size={21} color="var(--danger-500)" /></span>
              <div>
                <div style={{ fontSize:18, fontWeight:800, color:'var(--ink)' }}>Report Missed Bus</div>
                <div style={{ fontSize:13, color:'var(--gray-500)' }}>EJ Hatten · Bus #12</div>
              </div>
            </div>
            <div style={{ fontSize:13.5, color:'var(--gray-600)', lineHeight:1.5, margin:'8px 0 16px' }}>We'll instantly notify the school office and your family so someone can arrange a safe pickup.</div>

            <div style={{ fontSize:11, fontWeight:800, letterSpacing:'.09em', textTransform:'uppercase', color:'var(--gray-500)', marginBottom:9 }}>What happened?</div>
            <div style={{ display:'flex', flexWrap:'wrap', gap:8, marginBottom:20 }}>
              {REASONS.map(r => {
                const on = r===reason;
                return (
                  <button key={r} onClick={()=>setReason(r)} style={{ padding:'9px 15px', borderRadius:'999px', border: on?'1.5px solid var(--blue-500)':'1px solid var(--gray-300)', background: on?'var(--blue-100)':'#fff', color: on?'var(--blue-700)':'var(--gray-700)', fontWeight:700, fontSize:13, cursor:'pointer', fontFamily:'var(--font-sans)' }}>{r}</button>
                );
              })}
            </div>

            <div style={{ display:'flex', alignItems:'center', gap:10, background:'var(--gray-100)', borderRadius:12, padding:'12px 14px', marginBottom:16 }}>
              <Icon name="users" size={17} color="var(--gray-500)" />
              <span style={{ fontSize:13, color:'var(--gray-600)' }}>Notifies <strong style={{ color:'var(--ink)' }}>Katy Middle office</strong> &amp; <strong style={{ color:'var(--ink)' }}>Ashley Hatten</strong></span>
            </div>

            <button onClick={()=>{ setReportOpen(false); setReported(true); jlToast('School & Ashley have been notified', { icon:'bell' }); }} style={{ width:'100%', display:'flex', alignItems:'center', justifyContent:'center', gap:8, background:'var(--danger-500)', color:'#fff', border:0, borderRadius:12, padding:'15px', fontWeight:800, fontSize:15, cursor:'pointer', fontFamily:'var(--font-sans)' }}>
              <Icon name="send-horizontal" size={17} color="#fff" />Notify School &amp; Parent
            </button>
            <button onClick={()=>setReportOpen(false)} style={{ width:'100%', marginTop:9, background:'transparent', color:'var(--gray-500)', border:0, padding:'10px', fontWeight:700, fontSize:14, cursor:'pointer', fontFamily:'var(--font-sans)' }}>Cancel</button>
          </div>
        </div>
      )}
      <BottomNav active="transport" onNav={onNav} />
    </div>
  );
}

Object.assign(window, { TransportScreen, MapCanvas });