/* Admin → Engagement: family-involvement analytics.
   Aggregates the per-family engagement scores parents see in "My Involvement". */
function EngagementAnalyticsScreen() {
  const grades = [
    { g:'Grade 6', score:84, fams:312, trend:'up' },
    { g:'Grade 7', score:79, fams:298, trend:'up' },
    { g:'Grade 8', score:72, fams:284, trend:'down' },
  ];
  const drivers = [
    { icon:'mail-open',      tint:'var(--blue-100)',    ic:'var(--blue-500)',    label:'Messages read',    pct:88 },
    { icon:'calendar-check', tint:'var(--gold-100)',    ic:'var(--gold-600)',    label:'Event attendance', pct:64 },
    { icon:'clipboard-check',tint:'var(--success-100)', ic:'var(--success-500)', label:'Homework checked', pct:81 },
    { icon:'car-front',      tint:'var(--danger-100)',  ic:'var(--danger-500)',  label:'On-time pickups',  pct:92 },
  ];
  const lowest = [
    { n:'Bennett family', kid:'Noah · Gr 6', score:31, c:'cyan' },
    { n:'Alvarez family', kid:'Mia · Gr 8', score:38, c:'red' },
    { n:'Okoro family',   kid:'David · Gr 7', score:44, c:'navy' },
    { n:'Nguyen family',  kid:'Kim · Gr 8', score:47, c:'blue' },
  ];
  const sColor = (s) => s>=80?'var(--success-500)':s>=60?'var(--gold-500)':s>=45?'var(--warning-600)':'var(--danger-500)';

  return (
    <div style={{ padding:'22px 28px 40px', height:'100%', overflowY:'auto', boxSizing:'border-box' }}>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:16, marginBottom:16 }}>
        <StatTile icon="gauge" tint="var(--success-100)" ic="var(--success-600)" value="78" label="Avg engagement" delta="+4" trend="up" />
        <StatTile icon="users" tint="var(--blue-100)" ic="var(--blue-500)" value="71%" label="Highly involved" delta="+6%" trend="up" />
        <StatTile icon="user-round-minus" tint="var(--warning-100)" ic="var(--warning-600)" value="94" label="Low-engagement families" />
        <StatTile icon="message-circle" tint="var(--gold-100)" ic="var(--gold-600)" value="86%" label="Message open rate" delta="+2%" trend="up" />
      </div>

      <div style={{ display:'grid', gridTemplateColumns:'1.4fr 1fr', gap:16, marginBottom:16 }}>
        <Panel title="Engagement Trend" action={<Pill bg="var(--success-100)" fg="var(--success-600)"><Icon name="trending-up" size={13} color="var(--success-600)" />+9 since Sept</Pill>}>
          <div style={{ padding:'8px 4px 0' }}>
            <AreaChart data={[62,64,67,66,70,72,74,78]} labels={['Sep','Oct','Nov','Dec','Jan','Feb','Mar','Apr']} color="var(--success-500)" height={168} />
          </div>
        </Panel>
        <Panel title="By Grade">
          <div style={{ padding:'4px 0 2px', display:'flex', flexDirection:'column', gap:14 }}>
            {grades.map(g => (
              <div key={g.g}>
                <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:6 }}>
                  <span style={{ fontSize:13.5, fontWeight:700, color:'var(--ink)', flex:1 }}>{g.g}</span>
                  <Icon name={g.trend==='up'?'trending-up':'trending-down'} size={14} color={g.trend==='up'?'var(--success-500)':'var(--danger-500)'} />
                  <span style={{ fontSize:13.5, fontWeight:800, color:sColor(g.score), fontFamily:'var(--font-mono)', width:28, textAlign:'right' }}>{g.score}</span>
                </div>
                <div style={{ height:8, borderRadius:'999px', background:'var(--gray-100)', overflow:'hidden' }}>
                  <div style={{ width:g.score+'%', height:'100%', borderRadius:'999px', background:sColor(g.score) }} />
                </div>
                <div style={{ fontSize:11.5, color:'var(--gray-400)', marginTop:4 }}>{g.fams} families</div>
              </div>
            ))}
          </div>
        </Panel>
      </div>

      <div style={{ display:'grid', gridTemplateColumns:'1fr 1.1fr', gap:16 }}>
        <Panel title="What Drives Engagement">
          <div style={{ padding:'4px 0 2px', display:'flex', flexDirection:'column', gap:13 }}>
            {drivers.map(d => (
              <div key={d.label}>
                <div style={{ display:'flex', alignItems:'center', gap:9, marginBottom:6 }}>
                  <span style={{ width:30, height:30, borderRadius:8, background:d.tint, display:'flex', alignItems:'center', justifyContent:'center', flex:'0 0 auto' }}><Icon name={d.icon} size={15} color={d.ic} /></span>
                  <span style={{ fontSize:13.5, fontWeight:700, color:'var(--ink)', flex:1 }}>{d.label}</span>
                  <span style={{ fontSize:13, fontWeight:700, color:'var(--gray-600)', fontFamily:'var(--font-mono)' }}>{d.pct}%</span>
                </div>
                <div style={{ height:7, borderRadius:'999px', background:'var(--gray-100)', overflow:'hidden' }}>
                  <div style={{ width:d.pct+'%', height:'100%', borderRadius:'999px', background:d.ic }} />
                </div>
              </div>
            ))}
          </div>
        </Panel>

        <Panel title="Families to Reach Out To" action={<span onClick={()=>jlToast('Nudge sent to 4 families', { icon:'send' })} style={{ display:'inline-flex', alignItems:'center', gap:5, fontSize:12.5, fontWeight:700, color:'var(--blue-500)', cursor:'pointer' }}><Icon name="send" size={14} color="var(--blue-500)" />Nudge all</span>} pad={false}>
          {lowest.map((f,i) => (
            <div key={i} style={{ display:'flex', alignItems:'center', gap:12, padding:'12px 18px', borderTop: i>0?'1px solid var(--gray-100)':'0' }}>
              <Avatar initials={f.n.split(' ')[0].slice(0,2)} color={f.c} size={34} />
              <div style={{ flex:1, minWidth:0 }}>
                <div style={{ fontSize:13.5, fontWeight:700, color:'var(--ink)' }}>{f.n}</div>
                <div style={{ fontSize:12, color:'var(--gray-500)' }}>{f.kid}</div>
              </div>
              <span style={{ fontSize:15, fontWeight:800, color:sColor(f.score), fontFamily:'var(--font-mono)' }}>{f.score}</span>
              <button onClick={()=>jlToast('Message ' + f.n, { icon:'message-circle' })} style={{ width:34, height:34, borderRadius:9, border:'1px solid var(--gray-200)', background:'#fff', display:'flex', alignItems:'center', justifyContent:'center', cursor:'pointer', flex:'0 0 auto' }}><Icon name="message-circle" size={15} color="var(--blue-500)" /></button>
            </div>
          ))}
        </Panel>
      </div>
    </div>
  );
}
Object.assign(window, { EngagementAnalyticsScreen });