/* Safety & Wellbeing — mood check-ins, teacher feedback, AI pattern insight */
const JL_MOODS = {
  happy: { icon:'smile',  label:'Happy',  bg:'var(--success-100)', fg:'var(--success-600)', dot:'var(--success-500)' },
  calm:  { icon:'meh',    label:'Calm',   bg:'var(--info-100)',    fg:'var(--info-500)',    dot:'var(--info-500)' },
  tired: { icon:'cloud',  label:'Tired',  bg:'var(--warning-100)', fg:'var(--warning-600)', dot:'var(--warning-500)' },
  upset: { icon:'frown',  label:'Upset',  bg:'var(--danger-100)',  fg:'var(--danger-600)',  dot:'var(--danger-500)' },
};

function SafetyScreen({ onNav, onBack }) {
  const week = [
    { d:'Mon', m:'tired' },
    { d:'Tue', m:'happy' },
    { d:'Wed', m:'calm'  },
    { d:'Thu', m:'happy' },
    { d:'Fri', m:'happy', today:true },
  ];
  const baseFeedback = [
    { icon:'hand-helping', tint:'var(--success-100)', ic:'var(--success-500)', title:'Helped a classmate clean up', who:'Ms. Rivera · Today', kind:'pos' },
    { icon:'target',       tint:'var(--success-100)', ic:'var(--success-500)', title:'Great focus during math',     who:'Mr. Allen · Today',  kind:'pos' },
    { icon:'volume-2',     tint:'var(--warning-100)', ic:'var(--warning-600)', title:'Chatty during quiet reading', who:'Mr. Lee · Yesterday', kind:'watch' },
  ];
  const [live, setLive] = React.useState([]);
  React.useEffect(() => {
    const read = () => { try { const all = JSON.parse(localStorage.getItem('jl_behavior') || '{}'); setLive(all[jlChild().id] || []); } catch(e){} };
    read();
    const onStore = (e) => { if (e.key === 'jl_behavior') read(); };
    window.addEventListener('storage', onStore);
    const iv = setInterval(read, 1500);
    return () => { window.removeEventListener('storage', onStore); clearInterval(iv); };
  }, []);
  const feedback = [
    ...live.map(n => ({ icon:n.icon, tint:n.kind==='pos'?'var(--success-100)':'var(--warning-100)', ic:n.kind==='pos'?'var(--success-500)':'var(--warning-600)', title:n.title, who:n.who, kind:n.kind })),
    ...baseFeedback,
  ];

  return (
    <div style={{ background:'var(--gray-50)', minHeight:'100%' }}>
      <PushBar titleKey="t_safety" onBack={onBack} />
      <div style={{ padding:'14px 18px 40px' }}>

        {/* mood-this-week hero */}
        <div style={{ background:'var(--color-grad-hero)', borderRadius:18, padding:'17px 18px', color:'#fff', boxShadow:'var(--shadow-navy)' }}>
          <div style={{ fontSize:10, fontWeight:800, letterSpacing:'.1em', color:'rgba(255,255,255,.7)' }}>MOOD THIS WEEK</div>
          <div style={{ display:'flex', alignItems:'center', gap:13, margin:'9px 0 2px' }}>
            <span style={{ width:46, height:46, borderRadius:13, background:'rgba(255,255,255,.16)', display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto' }}>
              <Icon name="smile" size={26} color="var(--gold-400)" />
            </span>
            <div>
              <div style={{ fontSize:22, fontWeight:800, letterSpacing:'-.01em' }}>Mostly Positive</div>
              <div style={{ fontSize:12.5, color:'rgba(255,255,255,.78)', marginTop:2 }}>4 of 5 check-ins were happy or calm</div>
            </div>
          </div>
          <div style={{ display:'flex', gap:8, marginTop:14 }}>
            {week.map(w => {
              const m = JL_MOODS[w.m];
              return (
                <button key={w.d} onClick={()=>jlToast(jlChild().first + ' felt ' + m.label.toLowerCase() + ' on ' + w.d, { icon:m.icon })} style={{
                  flex:1, display:'flex', flexDirection:'column', alignItems:'center', gap:6, border:0, cursor:'pointer',
                  background:'transparent', fontFamily:'var(--font-sans)',
                }}>
                  <span style={{
                    width:40, height:40, borderRadius:'999px', display:'flex', alignItems:'center', justifyContent:'center',
                    background: w.today ? '#fff' : 'rgba(255,255,255,.14)',
                    boxShadow: w.today ? '0 0 0 2px var(--gold-400)' : 'none',
                  }}>
                    <Icon name={m.icon} size={21} color={w.today ? m.fg : '#fff'} />
                  </span>
                  <span style={{ fontSize:10.5, fontWeight:700, color: w.today ? '#fff' : 'rgba(255,255,255,.62)' }}>{w.d}</span>
                </button>
              );
            })}
          </div>
        </div>

        {/* today's check-in */}
        <SectionLabel>{jlT('l_todays_checkin')}</SectionLabel>
        <div style={{ background:'#fff', border:'1px solid var(--gray-200)', borderRadius:14, padding:'15px 16px', boxShadow:'var(--shadow-sm)' }}>
          <div style={{ display:'flex', alignItems:'center', gap:12 }}>
            <span style={{ width:46, height:46, borderRadius:13, background:'var(--success-100)', display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto' }}>
              <Icon name="smile" size={24} color="var(--success-600)" />
            </span>
            <div style={{ flex:1 }}>
              <div style={{ fontSize:15, fontWeight:700, color:'var(--ink)' }}>{jlChild().first} checked in feeling Happy</div>
              <div style={{ fontSize:12.5, color:'var(--gray-500)' }}>8:42 AM · Homeroom self check-in</div>
            </div>
            <Pill bg="var(--success-100)" fg="var(--success-600)">Happy</Pill>
          </div>
          <div style={{ marginTop:12, padding:'11px 13px', background:'var(--gray-50)', borderRadius:11, fontSize:13.5, color:'var(--gray-600)', lineHeight:1.45 }}>
            <span style={{ fontWeight:700, color:'var(--ink)' }}>“</span>Looking forward to art class today.<span style={{ fontWeight:700, color:'var(--ink)' }}>”</span>
          </div>
        </div>

        {/* teacher feedback */}
        <SectionLabel>{jlT('l_teacher_feedback')}</SectionLabel>
        <div style={cardWrap}>
          {feedback.map((f,i) => (
            <React.Fragment key={i}>
              {i>0 && <Divider />}
              <div style={{ display:'flex', alignItems:'center', gap:12, padding:'13px 14px' }}>
                <span style={{ width:38, height:38, borderRadius:10, background:f.tint, display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto' }}>
                  <Icon name={f.icon} size={19} color={f.ic} />
                </span>
                <div style={{ flex:1, minWidth:0 }}>
                  <div style={{ fontSize:14.5, fontWeight:700, color:'var(--ink)' }}>{f.title}</div>
                  <div style={{ fontSize:12.5, color:'var(--gray-500)' }}>{f.who}</div>
                </div>
                {f.kind==='pos'
                  ? <Pill bg="var(--success-100)" fg="var(--success-600)"><Icon name="thumbs-up" size={12} color="var(--success-600)" />Positive</Pill>
                  : <Pill bg="var(--warning-100)" fg="var(--warning-600)">Watch</Pill>}
              </div>
            </React.Fragment>
          ))}
        </div>

        {/* AI wellbeing insight */}
        <div style={{ marginTop:18, background:'var(--color-grad-ai)', borderRadius:16, padding:'17px 18px', color:'#fff', boxShadow:'var(--shadow-md)' }}>
          <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:9 }}>
            <span style={{ width:34, height:34, borderRadius:10, background:'rgba(255,255,255,.16)', display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto' }}>
              <Icon name="sparkles" size={18} color="#fff" />
            </span>
            <div style={{ fontSize:15.5, fontWeight:800 }}>AI Wellbeing Insight</div>
          </div>
          <div style={{ fontSize:13.5, lineHeight:1.5, color:'rgba(255,255,255,.9)' }}>
            {jlChild().first}'s mood tends to dip on <strong style={{ color:'#fff' }}>Mondays</strong>, often after weekends. A calmer Sunday-evening routine may help ease the start of the week.
          </div>
          <button onClick={()=>jlToast('Opening full wellbeing report…', { icon:'file-text' })} style={{ marginTop:13, background:'#fff', color:'var(--blue-700)', border:0, borderRadius:10, padding:'10px 16px', fontWeight:700, fontSize:13, cursor:'pointer', fontFamily:'var(--font-sans)', display:'inline-flex', alignItems:'center', gap:7 }}>
            <Icon name="file-text" size={15} color="var(--blue-700)" />View Full Report
          </button>
        </div>

        {/* counselor CTA */}
        <button onClick={()=>onNav('messages')} style={{ width:'100%', marginTop:14, display:'flex', alignItems:'center', justifyContent:'center', gap:9, background:'var(--navy-600)', color:'#fff', border:0, borderRadius:12, padding:'14px', fontWeight:700, fontSize:14.5, cursor:'pointer', fontFamily:'var(--font-sans)' }}>
          <Icon name="message-circle" size={18} color="#fff" />Message {jlChild().first}'s Counselor
        </button>
      </div>
    </div>
  );
}

Object.assign(window, { SafetyScreen });