// Dashboard page — multi-account overview

function DashboardPage({ state, setState }) {
  const [refreshing, setRefreshing] = React.useState(false);

  async function handleRefresh() {
    setRefreshing(true);
    try { await window.refreshSajuData(); } finally { setRefreshing(false); }
  }

  const { ACCOUNTS, POSTS } = window.SAJU;
  const total = POSTS.length;
  const pending = POSTS.filter(p=>p.status==='pending').length;
  const scheduled = POSTS.filter(p=>p.status==='scheduled'||p.status==='approved').length;
  const published = POSTS.filter(p=>p.status==='published').length;
  const failed = POSTS.filter(p=>p.status==='failed').length;
  const held = POSTS.filter(p=>p.status==='held').length;

  const attention = POSTS.filter(p => p.status === 'pending' || p.status === 'failed' || p.status === 'held').slice(0, 5);
  const upcoming = POSTS.filter(p => p.status === 'scheduled' || p.status === 'approved')
    .sort((a,b) => new Date(a.scheduledAt) - new Date(b.scheduledAt))
    .slice(0, 6);

  // sparkline data (mock)
  const spark = [3, 5, 4, 8, 7, 12, 9, 14, 11, 16, 13, 18];
  const bars = [8, 12, 9, 14, 18, 22, 17, 24];

  return (
    <>
      <div className="page-header">
        <div>
          <h1 className="page-title">전체 대시보드</h1>
          <div className="page-subtitle">모든 Threads 계정의 예약 현황과 주의가 필요한 항목을 한눈에.</div>
        </div>
        <div style={{ display:'flex', gap:8 }}>
          <button className="btn" onClick={handleRefresh} disabled={refreshing}>
            <Icon name="refresh" size={13}/>{refreshing ? '새로고침 중...' : '새로고침'}
          </button>
          <button className="btn primary"><Icon name="plus" size={13}/>새 게시글</button>
        </div>
      </div>

      <div className="kpi-grid">
        <div className="kpi">
          <div className="kpi-label"><Icon name="clock" size={13}/>대기 중</div>
          <div className="kpi-value">{pending}<span className="unit">건</span><span className="kpi-delta up">+2</span></div>
          <div className="kpi-hint">승인 필요 · 평균 대기 23분</div>
          <div className="kpi-spark"><Sparkline data={spark} color="var(--status-pending-dot)" /></div>
        </div>
        <div className="kpi">
          <div className="kpi-label"><Icon name="calendar" size={13}/>예약됨</div>
          <div className="kpi-value">{scheduled}<span className="unit">건</span></div>
          <div className="kpi-hint">오늘 {POSTS.filter(p=>(p.status==='scheduled'||p.status==='approved')&&new Date(p.scheduledAt).getDate()===20).length}건 · 내일 {POSTS.filter(p=>(p.status==='scheduled'||p.status==='approved')&&new Date(p.scheduledAt).getDate()===21).length}건</div>
          <div className="kpi-spark"><Sparkline data={[5,6,4,7,9,8,11,10,12,14,13,15]} color="var(--status-scheduled-dot)"/></div>
        </div>
        <div className="kpi">
          <div className="kpi-label"><Icon name="check" size={13}/>게시완료</div>
          <div className="kpi-value">{published}<span className="unit">건</span><span className="kpi-delta up">+42%</span></div>
          <div className="kpi-hint">이번 주 · 조회수 합 40.9k</div>
          <div className="kpi-spark"><Bars data={bars} color="var(--status-published-dot)"/></div>
        </div>
        <div className="kpi">
          <div className="kpi-label"><Icon name="alert" size={13}/>주의 필요</div>
          <div className="kpi-value">{failed+held}<span className="unit">건</span></div>
          <div className="kpi-hint">실패 {failed} · 보류 {held}</div>
          <div className="kpi-spark"><Sparkline data={[1,0,2,1,3,1,2,2,1,0,1,1]} color="var(--status-failed-dot)"/></div>
        </div>
      </div>

      <div className="split-3">
        {/* Left: attention + upcoming */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>

          <div className="card">
            <div className="card-header">
              <div>
                <div className="card-title">주의 필요 항목</div>
                <div className="card-sub">승인 대기, 실패, 보류된 게시글</div>
              </div>
              <button className="btn ghost sm" style={{ marginLeft: 'auto' }} onClick={()=>setState(s=>({...s,page:'posts',postFilter:'pending'}))}>
                전체 보기 <Icon name="chevronRight" size={12}/>
              </button>
            </div>
            <div>
              {attention.map(p => {
                const acc = ACCOUNTS.find(a=>a.id===p.account);
                const zMeta = window.SAJU.ZODIAC.find(z=>z.key===p.zodiac);
                return (
                  <div key={p.id} className="post-row" onClick={()=>setState(s=>({...s,page:'posts',postFilter:'all',selectedPost:p.id}))}>
                    <div className="zodiac">{zMeta?.emoji}</div>
                    <div className="post-body">
                      <div className="post-head">
                        <span className="mono">{p.id}</span>
                        <span className="dot-sep">·</span>
                        <AccountAvatar acc={acc} size={14}/>
                        <span>{acc.handle}</span>
                        <span className="dot-sep">·</span>
                        <span>{p.type === 'day' ? '낮' : '밤'} {p.category && window.SAJU.CATEGORIES.find(c=>c.key===p.category)?.ko}</span>
                        <span className="dot-sep">·</span>
                        <span className="mono">{fmtTime(p.scheduledAt)}</span>
                      </div>
                      <div className="post-text">{p.body}</div>
                      {p.error && <div style={{ fontSize: 11, color: 'var(--status-failed-fg)', marginTop: 4, fontFamily: 'var(--font-mono)' }}>⚠ {p.error}</div>}
                      {p.holdReason && <div style={{ fontSize: 11, color: 'var(--status-held-fg)', marginTop: 4 }}>⏸ {p.holdReason}</div>}
                    </div>
                    <div className="post-actions">
                      <Badge status={p.status}/>
                      {p.status === 'pending' && <button className="btn primary sm"><Icon name="check" size={11}/>승인</button>}
                      {p.status === 'failed'  && <button className="btn sm"><Icon name="refresh" size={11}/>재시도</button>}
                      {p.status === 'held'    && <button className="btn sm">검토</button>}
                    </div>
                  </div>
                );
              })}
              {attention.length === 0 && <div className="empty">모두 처리됨 ✓</div>}
            </div>
          </div>

          <div className="card">
            <div className="card-header">
              <div>
                <div className="card-title">곧 게시될 예약</div>
                <div className="card-sub">시간 순 다음 6건</div>
              </div>
              <button className="btn ghost sm" style={{ marginLeft: 'auto' }} onClick={()=>setState(s=>({...s,page:'posts',postView:'calendar'}))}>
                캘린더 <Icon name="calendar" size={12}/>
              </button>
            </div>
            <div style={{ padding: '10px 16px 14px' }}>
              {upcoming.map(p => {
                const acc = ACCOUNTS.find(a=>a.id===p.account);
                const zMeta = window.SAJU.ZODIAC.find(z=>z.key===p.zodiac);
                return (
                  <div key={p.id} className="rail" style={{ padding: '6px 0', borderTop: '1px solid var(--border-subtle)' }}>
                    <div className="rail-time">
                      {fmtTime(p.scheduledAt)}
                      <div style={{ color: 'var(--fg-faint)', fontSize: 10, marginTop: 2 }}>{fmtRelative(p.scheduledAt)}</div>
                    </div>
                    <div className="rail-card" style={{ borderLeftColor: acc.color }}>
                      <div style={{ display:'flex', alignItems:'center', gap:6, fontSize:11, color:'var(--fg-subtle)', marginBottom:3 }}>
                        <AccountAvatar acc={acc} size={14}/>
                        <span>{acc.handle}</span>
                        <span className="dot-sep">·</span>
                        <span>{zMeta?.emoji} {zMeta?.ko}</span>
                        <span className="dot-sep">·</span>
                        <span>{p.type === 'day' ? <><Icon name="sun" size={10}/> 낮</> : <><Icon name="moon" size={10}/> 밤</>}</span>
                        <Badge status={p.status}/>
                      </div>
                      <div style={{ fontSize: 12.5, lineHeight: 1.5 }}>{p.body.slice(0, 90)}{p.body.length > 90 ? '…' : ''}</div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>

        {/* Right: account health */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div className="card">
            <div className="card-header">
              <div>
                <div className="card-title">계정별 상태</div>
                <div className="card-sub">오늘 발행 · 예약 대기</div>
              </div>
            </div>
            <div>
              {ACCOUNTS.map(acc => (
                <div key={acc.id} style={{ display:'grid', gridTemplateColumns:'auto 1fr auto', gap:10, alignItems:'center', padding:'10px 14px', borderBottom:'1px solid var(--border-subtle)', cursor:'pointer' }}
                     onClick={()=>setState(s=>({...s, page:'posts', selectedAccount: acc.id}))}>
                  <AccountAvatar acc={acc} size={24}/>
                  <div style={{ minWidth:0 }}>
                    <div style={{ fontSize: 12, fontWeight: 500, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{acc.handle}</div>
                    <div style={{ fontSize: 10.5, color:'var(--fg-subtle)', fontFamily:'var(--font-mono)' }}>
                      오늘 <span style={{color:'var(--fg-muted)'}}>{acc.today}</span> · 예약 <span style={{color:'var(--fg-muted)'}}>{acc.scheduled}</span>
                      {acc.errors > 0 && <span style={{ color:'var(--status-failed-fg)'}}> · 오류 {acc.errors}</span>}
                    </div>
                  </div>
                  <Bars data={[3,5,4,6,8,7,acc.today||1]} color={acc.color} w={60} h={22}/>
                </div>
              ))}
            </div>
          </div>

          <div className="card">
            <div className="card-header">
              <div>
                <div className="card-title">자동 댓글 활동</div>
                <div className="card-sub">최근 24시간</div>
              </div>
            </div>
            <div style={{ padding: 16, display:'flex', flexDirection:'column', gap:10 }}>
              <div style={{ display:'flex', alignItems:'baseline', gap:10 }}>
                <div className="mono" style={{ fontSize: 28, letterSpacing:'-0.03em' }}>1,604</div>
                <div style={{ color:'var(--fg-subtle)', fontSize: 11 }}>자동 답글 생성</div>
                <div style={{ marginLeft:'auto' }} className="kpi-delta up"><Icon name="chevronRight" size={10}/>+18%</div>
              </div>
              <Sparkline data={[20,28,24,35,42,38,55,62,58,71,68,84]} w={240} h={40} color="var(--accent)"/>
              <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:10, marginTop:6, fontSize:11 }}>
                <div><div style={{color:'var(--fg-subtle)'}}>생년월일 인식</div><div className="mono" style={{fontSize:15,marginTop:2}}>400</div></div>
                <div><div style={{color:'var(--fg-subtle)'}}>답글 생성</div><div className="mono" style={{fontSize:15,marginTop:2}}>1,292</div></div>
                <div><div style={{color:'var(--fg-subtle)'}}>보류</div><div className="mono" style={{fontSize:15,marginTop:2,color:'var(--status-held-fg)'}}>12</div></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

window.DashboardPage = DashboardPage;