/* Home dashboard */
function SectionLabel({ children, action }) {
  return (
    <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', margin:'18px 2px 9px' }}>
      <span style={{ fontSize:11, fontWeight:800, letterSpacing:'.09em', textTransform:'uppercase', color:'var(--gray-500)' }}>{children}</span>
      {action}
    </div>
  );
}

function HomeScreen({ onNav, onBack }) {
  const [busOpen, setBusOpen] = React.useState(true);
  const [emOpen, setEmOpen] = React.useState(true);
  const [emExp, setEmExp] = React.useState(false);
  return (
    <div style={{ background:'var(--gray-50)', minHeight:'100%' }}>
      <GreetingBar onBell={()=>jlToast('No new notifications', { icon:'bell' })} onBack={onBack} />
      <div style={{ padding:'0 18px 110px' }}>

        {/* emergency alert */}
        {emOpen && (
          <div style={{ background:'var(--danger-500)', borderRadius:14, padding:'13px 15px', color:'#fff', boxShadow:'0 8px 20px rgba(229,72,77,.32)', marginBottom:14 }}>
            <div style={{ display:'flex', alignItems:'center', gap:10 }}>
              <span style={{ width:34, height:34, borderRadius:10, background:'rgba(255,255,255,.2)', display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto' }}>
                <Icon name="siren" size={18} color="#fff" />
              </span>
              <div style={{ flex:1, minWidth:0 }}>
                <div style={{ fontSize:9.5, fontWeight:800, letterSpacing:'.1em', color:'rgba(255,255,255,.8)' }}>EMERGENCY ALERT · KATY MIDDLE</div>
                <div style={{ fontSize:14.5, fontWeight:700 }}>Early dismissal today at 1:00 PM</div>
              </div>
              <button onClick={()=>setEmOpen(false)} style={{ border:0, background:'rgba(255,255,255,.18)', width:26, height:26, borderRadius:'999px', display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer', flex:'0 0 auto' }}>
                <Icon name="x" size={14} color="#fff" />
              </button>
            </div>
            {emExp && (
              <div style={{ fontSize:13, color:'rgba(255,255,255,.92)', lineHeight:1.5, margin:'10px 0 2px', paddingLeft:44 }}>
                Due to a forecasted storm, all students will be dismissed at 1:00 PM. Buses will run on the early schedule. Please confirm your pickup plan.
              </div>
            )}
            <div style={{ display:'flex', gap:8, marginTop:11, paddingLeft:44 }}>
              <button onClick={()=>setEmExp(v=>!v)} style={{ flex:1, background:'#fff', color:'var(--danger-600)', border:0, borderRadius:9, padding:'9px', fontWeight:700, fontSize:12.5, cursor:'pointer', fontFamily:'var(--font-sans)' }}>{emExp?'Show Less':'Read More'}</button>
              <button onClick={()=>onNav('pickup')} style={{ flex:1, background:'rgba(255,255,255,.18)', color:'#fff', border:0, borderRadius:9, padding:'9px', fontWeight:700, fontSize:12.5, cursor:'pointer', fontFamily:'var(--font-sans)' }}>Update Pickup</button>
            </div>
          </div>
        )}

        {/* child selector */}
        <button onClick={()=>jlToast('EJ Hatten is your only linked child', { icon:'user' })} style={{
          width:'100%', display:'flex', alignItems:'center', gap:12,
          background:'#fff', border:'1px solid var(--gray-200)', borderRadius:14,
          padding:'13px 15px', boxShadow:'var(--shadow-sm)', cursor:'pointer',
          fontFamily:'var(--font-sans)', textAlign:'left',
        }}>
          <Avatar initials="EJ" color="green" size={40} />
          <div style={{ flex:1 }}>
            <div style={{ fontSize:15, fontWeight:700, color:'var(--ink)' }}>EJ Hatten</div>
            <div style={{ fontSize:12.5, color:'var(--gray-500)' }}>Grade 6 · Katy Middle School</div>
          </div>
          <Icon name="chevron-right" size={20} color="var(--gray-400)" />
        </button>

        {/* bus status hero */}
        {busOpen && (
          <div style={{
            marginTop:14, background:'var(--grad-hero)', borderRadius:18,
            padding:'17px 18px', color:'#fff', boxShadow:'var(--shadow-navy)', position:'relative', overflow:'hidden',
          }}>
            <button onClick={()=>setBusOpen(false)} style={{ position:'absolute', top:13, right:13, border:0, background:'rgba(255,255,255,.15)', width:26, height:26, borderRadius:'999px', display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer' }}>
              <Icon name="x" size={15} color="#fff" />
            </button>
            <div style={{ fontSize:10, fontWeight:800, letterSpacing:'.1em', color:'rgba(255,255,255,.7)' }}>BUS STATUS</div>
            <div style={{ display:'flex', alignItems:'center', gap:14, margin:'10px 0 4px' }}>
              <div>
                <div style={{ fontSize:20, fontWeight:800 }}>On the way</div>
                <Pill bg="rgba(255,255,255,.18)" fg="#fff" style={{ marginTop:6 }}>Bus #12</Pill>
              </div>
              <div style={{ marginLeft:'auto', textAlign:'right' }}>
                <Icon name="bus-front" size={54} color="var(--gold-400)" />
              </div>
            </div>
            <div style={{ display:'flex', alignItems:'flex-end', justifyContent:'space-between', marginTop:6 }}>
              <div>
                <div style={{ fontSize:10, fontWeight:800, letterSpacing:'.1em', color:'rgba(255,255,255,.7)' }}>ETA</div>
                <div style={{ fontSize:30, fontWeight:800, letterSpacing:'-.02em', lineHeight:1 }}>5<span style={{ fontSize:16, fontWeight:600, color:'rgba(255,255,255,.8)' }}> min</span></div>
                <div style={{ fontSize:11.5, color:'rgba(255,255,255,.7)', marginTop:4 }}>Last updated 3:19 PM</div>
              </div>
              <button onClick={()=>onNav('transport')} style={{ background:'rgba(255,255,255,.16)', color:'#fff', border:0, borderRadius:10, padding:'9px 14px', fontWeight:700, fontSize:13, cursor:'pointer', fontFamily:'var(--font-sans)', display:'flex', alignItems:'center', gap:6 }}>
                <Icon name="map-pin" size={15} color="#fff" />View on map
              </button>
            </div>
          </div>
        )}

        {/* quick actions */}
        <SectionLabel>Quick Actions</SectionLabel>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:10 }}>
          {[
            { id:'pickup', label:'Pickup', icon:'car-front', tint:'var(--gold-100)', ic:'var(--gold-600)' },
            { id:'grades', label:'Grades', icon:'graduation-cap', tint:'var(--blue-100)', ic:'var(--blue-500)' },
            { id:'wallet', label:'Lunch', icon:'utensils', tint:'var(--success-100)', ic:'var(--success-500)' },
            { id:'tutor', label:'AI Tutor', icon:'bot', tint:'var(--info-100)', ic:'var(--info-500)' },
          ].map(q => (
            <button key={q.id} onClick={()=>onNav(q.id)} style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:7, background:'#fff', border:'1px solid var(--gray-200)', borderRadius:14, padding:'13px 4px', cursor:'pointer', fontFamily:'var(--font-sans)', boxShadow:'var(--shadow-sm)' }}>
              <span style={{ width:40, height:40, borderRadius:11, background:q.tint, display:'flex', alignItems:'center', justifyContent:'center' }}><Icon name={q.icon} size={20} color={q.ic} /></span>
              <span style={{ fontSize:11.5, fontWeight:700, color:'var(--ink)' }}>{q.label}</span>
            </button>
          ))}
        </div>

        {/* explore */}
        <SectionLabel>Explore</SectionLabel>
        <div style={cardWrap}>
          <ScheduleRow icon="heart-pulse" tint="var(--success-100)" ic="var(--success-500)" title="Safety & Wellbeing" sub="Mood check-ins · teacher feedback" onClick={()=>onNav('safety')} />
          <Divider />
          <ScheduleRow icon="calendar-check" tint="var(--gold-100)" ic="var(--gold-600)" title="Attendance" sub="96% this year · report an absence" onClick={()=>onNav('attendance')} />
          <Divider />
          <ScheduleRow icon="store" tint="var(--danger-100)" ic="var(--danger-500)" title="Marketplace" sub="Tutoring, sports & programs" onClick={()=>onNav('marketplace')} />
          <Divider />
          <ScheduleRow icon="award" tint="var(--info-100)" ic="var(--info-500)" title="My Involvement" sub="Engagement score · 88" onClick={()=>onNav('engagement')} />
        </div>

        {/* today's schedule */}
        <SectionLabel>Today's Schedule</SectionLabel>
        <div style={cardWrap}>
          <ScheduleRow icon="book-open" tint="var(--blue-100)" ic="var(--blue-500)" title="Math Homework" sub="Due today · 11:59 PM" />
          <Divider />
          <ScheduleRow icon="flask-conical" tint="var(--gold-100)" ic="var(--gold-600)" title="Science Quiz" sub="Tomorrow · 9:00 AM" />
        </div>

        {/* recent alerts */}
        <SectionLabel action={<span style={{ fontSize:12, fontWeight:700, color:'var(--blue-500)' }}>View All</span>}>Recent Alerts</SectionLabel>
        <div style={cardWrap}>
          <ScheduleRow icon="alert-triangle" tint="var(--danger-100)" ic="var(--danger-500)" title="Missing Assignment" sub="ELA · Due Apr 26" right={<Pill bg="var(--danger-100)" fg="var(--danger-600)">High</Pill>} onClick={()=>onNav('activities')} />
          <Divider />
          <ScheduleRow icon="message-circle" tint="var(--blue-100)" ic="var(--blue-500)" title="New message" sub="From Mrs. Johnson" onClick={()=>onNav('messages')} />
        </div>
      </div>
      <BottomNav active="home" onNav={onNav} />
    </div>
  );
}

function ScheduleRow({ icon, tint, ic, title, sub, right, onClick }) {
  return (
    <button onClick={onClick} style={{ width:'100%', display:'flex', alignItems:'center', gap:12, padding:'13px 14px', border:0, background:'transparent', cursor: onClick?'pointer':'default', fontFamily:'var(--font-sans)', textAlign:'left' }}>
      <span style={{ width:38, height:38, borderRadius:10, background:tint, display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto' }}>
        <Icon name={icon} size={19} color={ic} />
      </span>
      <div style={{ flex:1, minWidth:0 }}>
        <div style={{ fontSize:14.5, fontWeight:700, color:'var(--ink)' }}>{title}</div>
        <div style={{ fontSize:12.5, color:'var(--gray-500)' }}>{sub}</div>
      </div>
      {right || <Icon name="chevron-right" size={18} color="var(--gray-400)" />}
    </button>
  );
}
const cardWrap = { background:'#fff', border:'1px solid var(--gray-200)', borderRadius:14, boxShadow:'var(--shadow-sm)', overflow:'hidden' };
function Divider(){ return <div style={{ height:1, background:'var(--gray-200)', marginLeft:64 }} />; }

Object.assign(window, { HomeScreen, SectionLabel, ScheduleRow, Divider, cardWrap });