/* Transport — live bus tracking */
function MapCanvas({ live }) {
  const STOPS = [
    { id:1, x:40, y:52, name:'Cypress Trace', time:'3:12 PM' },
    { id:2, x:63, y:33, name:'Morton Ranch Rd', time:'3:20 PM' },
    { id:3, x:10, y:86, name:'Your stop · Home', time:'3:25 PM' },
  ];
  const seg = live ? Math.max(0, Math.min(2, live.progress * 2)) : 1;
  const doneCount = Math.floor(seg);
  const nextStopId = live ? Math.min(3, doneCount + 1) : 2;
  const [sel, setSel] = React.useState(nextStopId);
  React.useEffect(() => { setSel(nextStopId); }, [nextStopId]);
  // live bus position interpolated along the stop chain by progress
  const i = Math.min(1, Math.floor(seg)), frac = seg - i;
  const busX = live ? STOPS[i].x + (STOPS[i+1].x - STOPS[i].x) * frac : null;
  const busY = live ? STOPS[i].y + (STOPS[i+1].y - STOPS[i].y) * frac : null;
  const cur = STOPS.find(s => s.id === sel) || STOPS[1];
  const isDone = (s) => live ? (s.id - 1) < doneCount : s.id === 1;
  const isNext = (s) => s.id === nextStopId;
  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>
      {/* bus — live position by progress, else the ambient CSS travel animation */}
      {live ? (
        <div style={{ position:'absolute', left:busX+'%', top:busY+'%', width:40, height:40, marginLeft:-20, marginTop:-20, zIndex:4, transition:'left 1s linear, top 1s linear' }}>
          <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>
      ) : (
        <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, done = isDone(s), nxt = isNext(s);
        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={nxt?'jl-pulse':''} style={{ display:'block', width:16, height:16, borderRadius:'999px', background: done?'var(--success-500)':(nxt?'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: isDone(cur)?'var(--success-100)':'var(--blue-100)', display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto' }}><Icon name={isDone(cur)?'check':'map-pin'} size={15} color={isDone(cur)?'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)' }}>{isDone(cur) ? 'Arrived' : 'ETA'} · {cur.time}</div>
        </div>
        {isNext(cur) && <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 [live, setLive] = React.useState(null);
  React.useEffect(() => {
    const read = () => { try { setLive(JSON.parse(localStorage.getItem('jl_buspos') || 'null')); } catch(e){} };
    read();
    const onStore = (e) => { if (e.key === 'jl_buspos') read(); };
    window.addEventListener('storage', onStore);
    const iv = setInterval(read, 1500);
    return () => { window.removeEventListener('storage', onStore); clearInterval(iv); };
  }, []);
  const REASONS = ['Stayed after class', 'Running late', 'Felt sick', 'Other'];
  const scans = [
    { n:jlChild().name, t:'3:05 PM', c:jlChild().color, 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 }}>{jlChild().first} 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={live} />

        {/* live source attribution */}
        <div style={{ display:'flex', alignItems:'center', gap:7, margin:'8px 2px 0' }}>
          <span className={live?'jl-pulse':''} style={{ width:7, height:7, borderRadius:'999px', background: live?'var(--success-500)':'var(--gray-400)', 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 ? "Live from driver's phone GPS · updated just now" : 'Bus not on route yet · showing last plan'}</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 }}>{live ? live.nextStop : 'Morton Ranch Rd'}</div>
          </div>
          <div style={{ width:120, background:'var(--color-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 }}>{live ? live.eta : 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)' }}>{jlChild().name} · 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 });