// ============ 통계 · 후원 현황 ============
function AnalyticsScreen({ showToast }){
  const { useState } = React;
  const [period, setPeriod] = useState('월');

  const maxDon = Math.max(...DONATION.map(d=>d.v));
  let acc=0; const totalLv=LEVEL_DIST.reduce((s,x)=>s+x.n,0);
  const segs = LEVEL_DIST.map(x=>{const f=acc/totalLv*100;acc+=x.n;const t=acc/totalLv*100;return `${x.c} ${f}% ${t}%`;}).join(', ');

  const kpis = [
    { icon:'users2', tone:'blue', label:'주일 평균 출석률', val:'62%', delta:'+4%p', up:true },
    { icon:'edit', tone:'gold', label:'성도 1인 월 평균 기록', val:'18.4', delta:'+2.1', up:true },
    { icon:'fire', tone:'danger', label:'7일 연속 출석 성도', val:'214', delta:'+12', up:true },
    { icon:'gift', tone:'done', label:'이달 후원 누계', val:'₩980만', delta:'진행중', up:true },
  ];

  return (
    <div style={{display:'flex',flexDirection:'column',gap:18}}>
      <div className="spread">
        <div className="seg">{['주','월','연'].map(p=>(<button key={p} className={period===p?'on':''} onClick={()=>setPeriod(p)}>{p}간</button>))}</div>
        <button className="btn" onClick={()=>showToast('리포트를 내보냈습니다 (CSV · 데모)','ok')}><Icon name="download" size={16}/>리포트 내보내기</button>
      </div>

      <div className="kpi-grid">
        {kpis.map((k,i)=>(
          <div key={i} className="kpi">
            <div className="kicon" style={{background:`var(--${k.tone}-bg)`,color:`var(--${k.tone})`}}><Icon name={k.icon}/></div>
            <div className="klabel">{k.label}</div><div className="kval">{k.val}</div>
            <div className="kfoot"><span className="up">▲ {k.delta}</span><span className="lbl">전 {period} 대비</span></div>
          </div>
        ))}
      </div>

      <div style={{display:'grid',gridTemplateColumns:'1.5fr 1fr',gap:20}}>
        <Panel title="출석 · 기록 추이" sub={`최근 7일 · ${period}간 기준`}>
          <div className="chart-bars" style={{height:200}}>
            {WEEK.map((w,i)=>(
              <div key={i} className={`bcol ${w.d==='일'?'on':''}`} style={{justifyContent:'flex-end'}}>
                <div style={{width:'100%',display:'flex',flexDirection:'column',gap:3,alignItems:'center'}}>
                  <div className="bg" style={{height:`${w.attend/2}px`,maxWidth:30,background:w.d==='일'?'linear-gradient(180deg,var(--gold),var(--gold-2))':'linear-gradient(180deg,#9DBEE8,#6FA8DC)'}}></div>
                </div>
                <div className="bl">{w.d}</div>
              </div>
            ))}
          </div>
          <div className="row" style={{gap:18,marginTop:14,paddingTop:14,borderTop:'1px solid var(--line-2)'}}>
            <div className="legend-row" style={{gap:7}}><span className="sw" style={{background:'#6FA8DC'}}></span>평일 출석</div>
            <div className="legend-row" style={{gap:7}}><span className="sw" style={{background:'var(--gold)'}}></span>주일 출석</div>
            <div className="grow"></div>
            <span className="muted" style={{fontSize:13}}>주일 정점 <b style={{color:'var(--ink)'}}>418명</b></span>
          </div>
        </Panel>

        <Panel title="성도 레벨 분포">
          <div className="donut-wrap">
            <div className="donut" style={{background:`conic-gradient(${segs})`}}>
              <div className="center"><div style={{textAlign:'center'}}><div style={{fontSize:22,fontWeight:900}}>842</div><div className="muted" style={{fontSize:11}}>전체</div></div></div>
            </div>
            <div className="legend-list grow">{LEVEL_DIST.map((x,i)=>(<div className="legend-row" key={i}><span className="sw" style={{background:x.c}}></span><span>{x.lv}</span><span className="lv tnum">{nf(x.n)}</span></div>))}</div>
          </div>
        </Panel>
      </div>

      <Panel title="후원 · 헌금 현황" sub="최근 6개월 추이 (단위: 만원)" right={<span className="st done">누계 ₩8,470만</span>}>
        <div className="chart-bars" style={{height:170}}>
          {DONATION.map((d,i)=>(
            <div key={i} className={`bcol ${i===DONATION.length-1?'on':''}`}>
              <div style={{fontSize:12,fontWeight:800,color:i===DONATION.length-1?'var(--gold-2)':'var(--ink-3)',marginBottom:4}} className="tnum">{nf(d.v)}</div>
              <div className="bg" style={{height:`${d.v/maxDon*100}%`}}></div>
              <div className="bl">{d.m}</div>
            </div>
          ))}
        </div>
        <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:12,marginTop:18,paddingTop:18,borderTop:'1px solid var(--line-2)'}}>
          {[['이달 후원자','142명'],['1인 평균','₩6.9만'],['정기 후원 비율','71%']].map(([l,v],i)=>(
            <div key={i}><div className="muted" style={{fontSize:12.5}}>{l}</div><div style={{fontSize:20,fontWeight:900,letterSpacing:'-0.5px',marginTop:3}}>{v}</div></div>
          ))}
        </div>
      </Panel>
    </div>
  );
}
window.AnalyticsScreen = AnalyticsScreen;