// ============ 대시보드 ============
function DashboardScreen({ members, reports, notices, go, showToast }){
  const { useState } = React;
  const [metric, setMetric] = useState('records');
  const pending = members.filter(m=>m.status==='pending').length;
  const reportN = reports.filter(r=>r.status==='pending').length;
  const scheduled = notices.filter(n=>n.status==='scheduled').length;

  const metricMeta = { records:{label:'기록', key:'records'}, attend:{label:'출석', key:'attend'}, access:{label:'접속', key:'access'} };
  const max = Math.max(...WEEK.map(w => w[metric]));
  const totalMembers = 842;

  const kpis = [
    { feature:true, icon:'users2', label:'오늘 활성 성도', val:'512', up:true, delta:'+8.4%', foot:'어제 대비' },
    { icon:'edit', tone:'blue', label:'오늘 신규 기록', val:'233', up:true, delta:'+12%', foot:'기도·감사노트' },
    { icon:'userCheck', tone:'gold', label:'가입 승인 대기', val:String(pending), foot:'확인이 필요해요', alert: pending>0 },
    { icon:'flag', tone:'danger', label:'신고 검토 대기', val:String(reportN), foot:'커뮤니티 신고', alert: reportN>0 },
  ];

  // donut
  let acc = 0; const totalLv = LEVEL_DIST.reduce((s,x)=>s+x.n,0);
  const segs = LEVEL_DIST.map(x => { const from=acc/totalLv*100; acc+=x.n; const to=acc/totalLv*100; return `${x.c} ${from}% ${to}%`; }).join(', ');

  return (
    <div style={{display:'flex',flexDirection:'column',gap:20}}>
      {/* KPI */}
      <div className="kpi-grid">
        {kpis.map((k,i)=>(
          <div key={i} className={`kpi ${k.feature?'feature':''}`}>
            <div className="kicon" style={k.feature?undefined:{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">
              {k.delta && <span className={k.up?'up':'down'}>{k.up?'▲':'▼'} {k.delta}</span>}
              {k.alert && <span className="st gold" style={{padding:'2px 8px'}}>처리 필요</span>}
              <span className="lbl">{k.foot}</span>
            </div>
          </div>
        ))}
      </div>

      <div style={{display:'grid',gridTemplateColumns:'1.55fr 1fr',gap:20}}>
        {/* activity chart */}
        <Panel title="활동 추이" sub="최근 7일 · 일요일 정점" right={
          <div className="seg">
            {Object.keys(metricMeta).map(m=>(
              <button key={m} className={metric===m?'on':''} onClick={()=>setMetric(m)}>{metricMeta[m].label}</button>
            ))}
          </div>
        }>
          <div className="chart-bars">
            {WEEK.map((w,i)=>(
              <div key={i} className={`bcol ${w.d==='일'?'on':''}`}>
                <div className="bg" style={{height:`${Math.round(w[metric]/max*100)}%`}} title={`${w.d} · ${nf(w[metric])}`}></div>
                <div className="bl">{w.d}</div>
              </div>
            ))}
          </div>
          <div className="row" style={{marginTop:16,gap:24,paddingTop:14,borderTop:'1px solid var(--line-2)'}}>
            <div><div className="muted" style={{fontSize:12.5}}>주간 누계</div><div style={{fontSize:22,fontWeight:900,letterSpacing:'-0.6px'}}>{nf(WEEK.reduce((s,w)=>s+w[metric],0))}</div></div>
            <div><div className="muted" style={{fontSize:12.5}}>일 평균</div><div style={{fontSize:22,fontWeight:900,letterSpacing:'-0.6px'}}>{nf(Math.round(WEEK.reduce((s,w)=>s+w[metric],0)/7))}</div></div>
            <div><div className="muted" style={{fontSize:12.5}}>최고 ({WEEK.find(w=>w[metric]===max).d})</div><div style={{fontSize:22,fontWeight:900,letterSpacing:'-0.6px',color:'var(--gold-2)'}}>{nf(max)}</div></div>
          </div>
        </Panel>

        {/* level distribution */}
        <Panel title="성도 레벨 분포" sub={`전체 ${nf(totalMembers)}명`}>
          <div className="donut-wrap">
            <div className="donut" style={{background:`conic-gradient(${segs})`}}>
              <div className="center">
                <div style={{textAlign:'center'}}>
                  <div style={{fontSize:24,fontWeight:900,letterSpacing:'-1px'}}>{nf(totalMembers)}</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>

      {/* to-do + recent */}
      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:20}}>
        <Panel title="처리할 일" sub="바로 이동해서 처리하세요" right={<span className="st gold">{pending+reportN+scheduled}건</span>}>
          <div style={{display:'flex',flexDirection:'column',gap:10}}>
            <div className="todo-item" onClick={()=>go('members')}>
              <div className="ti" style={{background:'var(--gold-soft)',color:'var(--gold-ink)'}}><Icon name="userCheck"/></div>
              <div className="grow"><div className="tt">가입 승인 대기</div><div className="td">새가족 신청을 검토하고 승인하세요</div></div>
              <div className="cnt" style={{background:'var(--gold-soft)',color:'var(--gold-ink)'}}>{pending}</div>
              <Icon name="chevR" size={18} style={{color:'var(--ink-4)'}}/>
            </div>
            <div className="todo-item" onClick={()=>go('community')}>
              <div className="ti" style={{background:'var(--danger-bg)',color:'var(--danger)'}}><Icon name="flag"/></div>
              <div className="grow"><div className="tt">신고 글 검토</div><div className="td">신고가 누적된 글을 우선 확인하세요</div></div>
              <div className="cnt" style={{background:'var(--danger-bg)',color:'var(--danger)'}}>{reportN}</div>
              <Icon name="chevR" size={18} style={{color:'var(--ink-4)'}}/>
            </div>
            <div className="todo-item" onClick={()=>go('notices')}>
              <div className="ti" style={{background:'var(--blue-bg)',color:'var(--blue)'}}><Icon name="clock"/></div>
              <div className="grow"><div className="tt">예약 발송 대기</div><div className="td">예약된 공지가 발송을 기다리고 있어요</div></div>
              <div className="cnt" style={{background:'var(--blue-bg)',color:'var(--blue)'}}>{scheduled}</div>
              <Icon name="chevR" size={18} style={{color:'var(--ink-4)'}}/>
            </div>
          </div>
        </Panel>

        <Panel title="최근 발송 공지" sub="앱으로 전달된 소식·말씀" right={<button className="btn sm" onClick={()=>go('notices')}>전체 보기</button>}>
          <div style={{display:'flex',flexDirection:'column'}}>
            {notices.filter(n=>n.status==='sent').slice(0,4).map((n,i)=>(
              <div key={n.id} className="row" style={{padding:'12px 2px',borderTop:i?'1px solid var(--line-2)':'none'}}>
                <div style={{width:34,height:34,borderRadius:10,flex:'0 0 auto',display:'grid',placeItems:'center',
                  background: n.kind==='말씀'?'var(--gold-soft)':'var(--blue-bg)', color:n.kind==='말씀'?'var(--gold-ink)':'var(--blue)'}}>
                  <Icon name={n.kind==='말씀'?'book':'notice'} size={17}/>
                </div>
                <div className="grow">
                  <div style={{fontWeight:700,fontSize:13.5,letterSpacing:'-0.3px',overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{n.title}</div>
                  <div className="muted" style={{fontSize:12,marginTop:1}}>{n.target} · 도달 {nf(n.reach)}명</div>
                </div>
                <div className="muted tnum" style={{fontSize:12,whiteSpace:'nowrap'}}>{n.when.split(' ')[0].slice(5)}</div>
              </div>
            ))}
          </div>
        </Panel>
      </div>
    </div>
  );
}
window.DashboardScreen = DashboardScreen;