/* Parent Engagement Score — involvement dashboard + ways to improve */
function EngBar({ icon, tint, ic, label, value, max, unit }) {
  const pct = Math.round((value / max) * 100);
  return (
    <div style={{ padding:'13px 14px' }}>
      <div style={{ display:'flex', alignItems:'center', gap:11 }}>
        <span style={{ width:36, height:36, borderRadius:10, background:tint, display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto' }}>
          <Icon name={icon} size={18} color={ic} />
        </span>
        <div style={{ flex:1, fontSize:14.5, fontWeight:700, color:'var(--ink)' }}>{label}</div>
        <div style={{ fontSize:13.5, fontWeight:700, color:'var(--gray-500)' }}>
          <span style={{ color:'var(--ink)', fontFamily:'var(--font-mono)' }}>{value}</span>/{max} {unit}
        </div>
      </div>
      <div style={{ height:7, borderRadius:'999px', background:'var(--gray-100)', marginTop:10, overflow:'hidden' }}>
        <div style={{ width:pct+'%', height:'100%', borderRadius:'999px', background:ic }} />
      </div>
    </div>
  );
}

function EngagementScreen({ onNav, onBack }) {
  const score = 88;
  const metrics = [
    { icon:'mail-open',     tint:'var(--blue-100)',    ic:'var(--blue-500)',    label:'Messages read',     value:12, max:14, unit:'' },
    { icon:'calendar-check',tint:'var(--gold-100)',    ic:'var(--gold-600)',    label:'Events attended',   value:3,  max:4,  unit:'' },
    { icon:'clipboard-check',tint:'var(--success-100)',ic:'var(--success-500)', label:'Homework checked',  value:18, max:20, unit:'' },
    { icon:'car-front',     tint:'var(--danger-100)',  ic:'var(--danger-500)',  label:'On-time pickups',   value:20, max:22, unit:'' },
  ];
  const boosts = [
    { icon:'message-circle', tint:'var(--blue-100)',    ic:'var(--blue-500)',    title:'Reply to Mrs. Johnson', sub:'1 message waiting', pts:'+4', go:()=>onNav('messages') },
    { icon:'calendar-plus',  tint:'var(--gold-100)',    ic:'var(--gold-600)',    title:'RSVP to the Science Fair', sub:'June 12 · 6:00 PM', pts:'+6', go:()=>jlToast('RSVP sent · see you there', { icon:'calendar-check' }) },
    { icon:'clipboard-list', tint:'var(--success-100)', ic:'var(--success-500)', title:'Check this week\u2019s homework', sub:'2 assignments due', pts:'+3', go:()=>onNav('activities') },
  ];

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

        {/* score hero */}
        <div style={{ background:'var(--grad-hero)', borderRadius:18, padding:'20px 18px', color:'#fff', boxShadow:'var(--shadow-navy)', display:'flex', alignItems:'center', gap:18 }}>
          <div style={{
            width:96, height:96, borderRadius:'999px', flex:'0 0 auto',
            background:'conic-gradient(var(--gold-400) ' + (score*3.6) + 'deg, rgba(255,255,255,.18) 0deg)',
            display:'flex', alignItems:'center', justifyContent:'center',
          }}>
            <div style={{ width:74, height:74, borderRadius:'999px', background:'#16335E', display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center' }}>
              <div style={{ fontSize:30, fontWeight:800, lineHeight:1, fontFamily:'var(--font-mono)' }}>{score}</div>
              <div style={{ fontSize:9.5, fontWeight:700, letterSpacing:'.08em', color:'rgba(255,255,255,.65)', marginTop:2 }}>/ 100</div>
            </div>
          </div>
          <div style={{ flex:1 }}>
            <div style={{ fontSize:10, fontWeight:800, letterSpacing:'.1em', color:'rgba(255,255,255,.7)' }}>ENGAGEMENT SCORE</div>
            <div style={{ fontSize:22, fontWeight:800, letterSpacing:'-.01em', margin:'4px 0 6px' }}>Highly Involved</div>
            <Pill bg="rgba(255,255,255,.18)" fg="#fff"><Icon name="trophy" size={13} color="var(--gold-400)" />Top 15% this month</Pill>
          </div>
        </div>

        {/* breakdown */}
        <SectionLabel>This Month</SectionLabel>
        <div style={cardWrap}>
          {metrics.map((m,i) => (
            <React.Fragment key={m.label}>
              {i>0 && <div style={{ height:1, background:'var(--gray-200)' }} />}
              <EngBar {...m} />
            </React.Fragment>
          ))}
        </div>

        {/* ways to boost */}
        <SectionLabel>Ways to Boost Your Score</SectionLabel>
        <div style={{ display:'flex', flexDirection:'column', gap:11 }}>
          {boosts.map((b,i) => (
            <button key={i} onClick={b.go} style={{ width:'100%', display:'flex', alignItems:'center', gap:12, background:'#fff', border:'1px solid var(--gray-200)', borderRadius:14, padding:'13px 14px', boxShadow:'var(--shadow-sm)', cursor:'pointer', fontFamily:'var(--font-sans)', textAlign:'left' }}>
              <span style={{ width:40, height:40, borderRadius:11, background:b.tint, display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto' }}>
                <Icon name={b.icon} size={19} color={b.ic} />
              </span>
              <div style={{ flex:1, minWidth:0 }}>
                <div style={{ fontSize:14.5, fontWeight:700, color:'var(--ink)' }}>{b.title}</div>
                <div style={{ fontSize:12.5, color:'var(--gray-500)' }}>{b.sub}</div>
              </div>
              <Pill bg="var(--success-100)" fg="var(--success-600)">{b.pts} pts</Pill>
            </button>
          ))}
        </div>

        {/* why it matters note */}
        <div style={{ display:'flex', alignItems:'flex-start', gap:11, marginTop:16, background:'var(--info-100)', borderRadius:14, padding:'14px 15px' }}>
          <Icon name="info" size={18} color="var(--info-500)" style={{ marginTop:1 }} />
          <div style={{ fontSize:12.5, color:'var(--info-500)', lineHeight:1.5 }}>
            Engaged families help kids thrive. Your score reflects involvement only — it's private to you and never shared with other parents.
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { EngagementScreen, EngBar });