/* Activities — assignments + behavior + AI helper */
function ActivitiesScreen({ onNav, onBack }) {
  const [tab, setTab] = React.useState('todo');
  const todo = [
    { subj:'Math', tint:'var(--blue-100)', ic:'var(--blue-500)', icon:'calculator', title:'Fractions Worksheet', due:'Due Today · 11:59 PM', pr:'High', prBg:'var(--danger-100)', prFg:'var(--danger-600)' },
    { subj:'Science', tint:'var(--gold-100)', ic:'var(--gold-600)', icon:'flask-conical', title:'Study for Quiz', due:'Due Tomorrow · 9:00 AM', pr:'Medium', prBg:'var(--warning-100)', prFg:'var(--warning-600)' },
    { subj:'ELA', tint:'var(--success-100)', ic:'var(--success-500)', icon:'book-open', title:'Reading Response', due:'Due Apr 28 · 11:59 PM', pr:'Low', prBg:'var(--success-100)', prFg:'var(--success-600)' },
  ];
  const done = [
    { subj:'History', tint:'var(--gray-200)', ic:'var(--gray-600)', icon:'scroll', title:'Civil War Essay', due:'Submitted Apr 22' },
    { subj:'Art', tint:'var(--gray-200)', ic:'var(--gray-600)', icon:'palette', title:'Color Wheel', due:'Submitted Apr 20' },
  ];
  return (
    <div style={{ background:'var(--gray-50)', minHeight:'100%' }}>
      <PushBar title="Assignments" onBack={onBack} />
      <div style={{ padding:'12px 18px 110px' }}>
        {/* segmented */}
        <div style={{ display:'flex', gap:6, background:'var(--gray-200)', borderRadius:'999px', padding:4, marginBottom:16 }}>
          {[['todo','To Do'],['done','Completed']].map(([id,lab])=>(
            <button key={id} onClick={()=>setTab(id)} style={{
              flex:1, padding:'9px 0', borderRadius:'999px', border:0, cursor:'pointer',
              fontWeight:700, fontSize:13.5, fontFamily:'var(--font-sans)',
              background: tab===id ? 'var(--navy-600)' : 'transparent',
              color: tab===id ? '#fff' : 'var(--gray-600)',
            }}>{lab}</button>
          ))}
        </div>

        {(tab==='todo'?todo:done).map((a,i)=>(
          <div key={i} style={{ display:'flex', alignItems:'center', gap:13, background:'#fff', border:'1px solid var(--gray-200)', borderRadius:14, padding:'14px 15px', boxShadow:'var(--shadow-sm)', marginBottom:11 }}>
            <span style={{ width:42, height:42, borderRadius:11, background:a.tint, display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto' }}>
              <Icon name={a.icon} size={20} color={a.ic} />
            </span>
            <div style={{ flex:1, minWidth:0 }}>
              <div style={{ fontSize:11.5, fontWeight:700, color:'var(--gray-500)', letterSpacing:'.03em' }}>{a.subj}</div>
              <div style={{ fontSize:15, fontWeight:700, color:'var(--ink)' }}>{a.title}</div>
              <div style={{ fontSize:12.5, color:'var(--gray-500)' }}>{a.due}</div>
            </div>
            {a.pr
              ? <Pill bg={a.prBg} fg={a.prFg}>{a.pr}</Pill>
              : <Icon name="circle-check-big" size={22} color="var(--success-500)" />}
          </div>
        ))}

        {/* behavior (To Do tab only) */}
        {tab==='todo' && (
          <React.Fragment>
            <SectionLabel>Behavior</SectionLabel>
            <div style={{ display:'flex', alignItems:'center', gap:13, background:'#fff', border:'1px solid var(--gray-200)', borderRadius:14, padding:'14px 15px', boxShadow:'var(--shadow-sm)' }}>
              <span style={{ width:42, height:42, borderRadius:11, background:'var(--gold-100)', display:'flex', alignItems:'center', justifyContent:'center' }}><Icon name="star" size={20} color="var(--gold-600)" fill="var(--gold-500)" /></span>
              <div style={{ flex:1 }}>
                <div style={{ fontSize:15, fontWeight:700, color:'var(--ink)' }}>Great participation today</div>
                <div style={{ fontSize:12.5, color:'var(--gray-500)' }}>Rating · 4 / 5</div>
              </div>
            </div>
          </React.Fragment>
        )}

        {/* AI helper card */}
        <div style={{ marginTop:18, background:'var(--grad-ai)', borderRadius:16, padding:'17px 18px', color:'#fff', boxShadow:'var(--shadow-md)', display:'flex', alignItems:'center', gap:14 }}>
          <div style={{ flex:1 }}>
            <div style={{ fontSize:16, fontWeight:800 }}>AI Homework Helper</div>
            <div style={{ fontSize:12.5, color:'rgba(255,255,255,.82)', marginTop:4, lineHeight:1.4 }}>Get step-by-step help and understand any topic.</div>
            <button onClick={()=>onNav('tutor')} style={{ marginTop:12, background:'#fff', color:'var(--blue-700)', border:0, borderRadius:10, padding:'10px 18px', fontWeight:700, fontSize:13, cursor:'pointer', fontFamily:'var(--font-sans)', display:'inline-flex', alignItems:'center', gap:7 }}>
              <Icon name="sparkles" size={15} color="var(--blue-700)" />Ask AI
            </button>
          </div>
          <div style={{ width:54, height:54, borderRadius:14, background:'rgba(255,255,255,.16)', display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto' }}>
            <Icon name="bot" size={28} color="#fff" />
          </div>
        </div>
      </div>
      <BottomNav active="activities" onNav={onNav} />
    </div>
  );
}

Object.assign(window, { ActivitiesScreen });