// ============================================================
// SocialPulse — Overview Page (API-connected)
// ============================================================

const _OV_RANGES = [
  { key: 'week',  label: '週',   days: 7  },
  { key: 'month', label: '月',   days: 30 },
  { key: 'all',   label: '全部', days: null },
];

function _fmtRangeLabel(r, offset) {
  if (r.key === 'all') return '全部時間';
  const end = new Date();
  end.setDate(end.getDate() - offset * r.days);
  const start = new Date(end);
  start.setDate(start.getDate() - r.days + 1);
  const f = (d) => `${d.getMonth()+1}/${d.getDate()}`;
  return `${f(start)} – ${f(end)}`;
}

function _rangeParams(r, offset) {
  if (r.key === 'all') return {};
  const end = new Date();
  end.setDate(end.getDate() - offset * r.days);
  const start = new Date(end);
  start.setDate(start.getDate() - r.days + 1);
  const toIso = (d) => d.toISOString().slice(0, 10);
  return { from: toIso(start), to: toIso(end) };
}

function OverviewPage({ onNavigate } = {}) {
  const [rangeKey, setRangeKey] = useState('week');
  const [offset, setOffset] = useState(0); // 0 = current, 1 = prev, ...
  const range = _OV_RANGES.find(r => r.key === rangeKey) || _OV_RANGES[0];

  const params = useMemo(() => _rangeParams(range, offset), [rangeKey, offset]);
  const stats = useApi(() => spStats.dashboard(params), [rangeKey, offset]);
  const reports = useApi(() => spReports.list({ limit: 3 }), []);
  const [demoDashDismissed, setDemoDashDismissed] = useState(spIsDemoDashboardDismissed());

  const realData = stats.data || {};
  const showDemo = !stats.loading && !stats.error && (realData.brands || 0) === 0 && !demoDashDismissed;
  const d = showDemo ? spGetDemoDashboard() : realData;
  const user = spGetUser() || {};
  const creditsLeft = (user.monthly_credits || 0) - (user.credits_used || 0);
  const creditsTotal = user.monthly_credits || 10;

  const topPosts = (d.topPosts || []).slice(0, 5);
  const brandStats = d.brandStats || [];

  const styles = {
    rangeBar: { display:'flex', alignItems:'center', gap:10, marginBottom:14 },
    segBtn: (active) => ({
      fontFamily:'var(--font-mono)', fontSize:11, fontWeight:700,
      padding:'6px 12px', borderRadius:'var(--r-sm)',
      letterSpacing:'.08em', textTransform:'uppercase',
      background: active ? 'var(--text)' : 'var(--panel2)',
      color: active ? 'var(--bg)' : 'var(--text2)',
      border:'1px solid var(--line)', cursor:'pointer',
    }),
    navBtn: (dis) => ({
      padding:'4px 10px', borderRadius:'var(--r-sm)',
      background:'var(--panel2)', border:'1px solid var(--line)',
      color: dis ? 'var(--text3)' : 'var(--text2)',
      cursor: dis ? 'not-allowed' : 'pointer',
      fontFamily:'var(--font-mono)', fontSize:12,
    }),
    rangeLabel: { fontFamily:'var(--font-mono)', fontSize:12, color:'var(--text2)', minWidth:110, textAlign:'center' },
    statsRow: { display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:12, marginBottom:16 },
    stat: { background:'var(--panel)', border:'1px solid var(--line)', borderRadius:'var(--r-lg)', padding:'16px 18px' },
    statK: { fontFamily:'var(--font-mono)', fontSize:10, color:'var(--text3)', textTransform:'uppercase', letterSpacing:'.1em', marginBottom:6 },
    statV: { fontSize:28, fontWeight:800, letterSpacing:'-.02em', lineHeight:1 },
    topGrid: { display:'grid', gridTemplateColumns:'1.6fr 1fr', gap:16, marginBottom:16 },
    card: { background:'var(--panel)', border:'1px solid var(--line)', borderRadius:'var(--r-xl)', overflow:'hidden' },
    head: { padding:'16px 22px', borderBottom:'1px solid var(--line)', display:'flex', alignItems:'center', justifyContent:'space-between' },
    table: { width:'100%', borderCollapse:'collapse' },
    th: { textAlign:'left', padding:'10px 20px', fontFamily:'var(--font-mono)', fontSize:10, color:'var(--text3)', textTransform:'uppercase', letterSpacing:'.08em', borderBottom:'1px solid var(--line)', background:'var(--panel2)' },
    td: { padding:'12px 20px', borderBottom:'1px solid var(--line)', fontSize:13 },
    tdNum: { padding:'12px 20px', borderBottom:'1px solid var(--line)', fontFamily:'var(--font-mono)', fontSize:13, fontWeight:600, textAlign:'right' },
  };

  return (
    <div>
      {/* Range selector */}
      <div style={styles.rangeBar}>
        {_OV_RANGES.map(r => (
          <button key={r.key}
            style={styles.segBtn(rangeKey === r.key)}
            onClick={() => { setRangeKey(r.key); setOffset(0); }}>
            {r.label}
          </button>
        ))}
        {range.key !== 'all' && (
          <>
            <button style={styles.navBtn(false)} onClick={() => setOffset(o => o + 1)} title="上一段">‹</button>
            <span style={styles.rangeLabel}>{_fmtRangeLabel(range, offset)}</span>
            <button style={styles.navBtn(offset === 0)} disabled={offset === 0} onClick={() => setOffset(o => Math.max(0, o - 1))} title="下一段">›</button>
            {offset > 0 && (
              <button style={styles.navBtn(false)} onClick={() => setOffset(0)} title="回到現在">今</button>
            )}
          </>
        )}
        {stats.loading && <span style={{fontSize:11,color:'var(--text3)',marginLeft:8}}>載入中…</span>}
        <button className="btn btn-ghost btn-sm" style={{marginLeft:'auto',fontSize:11}}
          onClick={() => { stats.reload(); reports.reload(); }} disabled={stats.loading}>
          ↻ 重新整理
        </button>
      </div>

      {stats.error ? <ErrorState error={stats.error} onRetry={stats.reload}/> : (
      <>
      {showDemo && (
        <div style={{
          position:'relative',overflow:'hidden',
          padding:'12px 18px',marginBottom:16,
          background:'linear-gradient(90deg, rgba(168,85,247,.2), rgba(99,102,241,.15))',
          border:'1px solid rgba(168,85,247,.4)',borderRadius:'var(--r-lg)',
          display:'flex',alignItems:'center',gap:14,flexWrap:'wrap',
        }}>
          <span style={{position:'absolute',left:0,top:0,bottom:0,width:3,background:'var(--purple)'}}/>
          <div style={{
            width:32,height:32,borderRadius:8,background:'rgba(168,85,247,.2)',color:'var(--purple)',
            display:'grid',placeItems:'center',flexShrink:0,
          }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
          </div>
          <div style={{flex:1,minWidth:220}}>
            <div style={{fontSize:13,fontWeight:700,color:'var(--text)',marginBottom:2}}>你正在查看示範資料</div>
            <div style={{fontSize:12,color:'var(--text2)'}}>這是示範品牌的公開資料（已去識別化）。新增你自己的品牌後，這個橫幅會消失。</div>
          </div>
          {onNavigate && (
            <button onClick={()=>onNavigate('brands')}
              style={{padding:'7px 14px',background:'var(--purple)',color:'#fff',border:'none',borderRadius:8,fontSize:12,fontWeight:600,cursor:'pointer',whiteSpace:'nowrap'}}>
              新增我的品牌 →
            </button>
          )}
          <button className="btn btn-ghost btn-sm" onClick={()=>{spDismissDemoDashboard();setDemoDashDismissed(true);}}
            style={{fontSize:11,color:'var(--text3)'}}>
            隱藏
          </button>
        </div>
      )}

      {/* Stats */}
      <div style={styles.statsRow}>
        <div style={styles.stat}>
          <div style={styles.statK}>Posts · {range.key === 'all' ? 'all time' : range.label}</div>
          <div style={styles.statV}>{fmtK(d.posts || 0)}</div>
        </div>
        <div style={styles.stat}>
          <div style={styles.statK}>Brands tracked</div>
          <div style={styles.statV}>{d.brands || 0}</div>
        </div>
        <div style={styles.stat}>
          <div style={styles.statK}>Reports generated</div>
          <div style={styles.statV}>{d.reports || 0}</div>
        </div>
        <div style={styles.stat}>
          <div style={styles.statK}>Credits left</div>
          <div style={{...styles.statV, color: creditsLeft < 5 ? 'var(--red)' : 'var(--text)'}}>
            {creditsLeft}<span style={{fontSize:14,color:'var(--text3)',fontWeight:400,marginLeft:4}}>/ {creditsTotal}</span>
          </div>
        </div>
      </div>

      {/* Top posts + Reports */}
      <div style={styles.topGrid}>
        <div style={styles.card}>
          <div style={styles.head}>
            <span style={{fontSize:15,fontWeight:700}}>熱門貼文（按互動排序）</span>
            <span style={{fontFamily:'var(--font-mono)',fontSize:10,color:'var(--text3)',textTransform:'uppercase',letterSpacing:'.1em'}}>Top 5</span>
          </div>
          {topPosts.length === 0 ? (
            <EmptyState title="尚無貼文" desc="到品牌頁新增品牌並更新數據後，這裡會顯示熱門貼文"/>
          ) : topPosts.map((p, i) => {
            const eng = (p.likes_count||0)+(p.comments_count||0)+(p.shares_count||0);
            const go = () => onNavigate && onNavigate('posts');
            return (
              <div key={p.id||i} onClick={go} style={{padding:'12px 20px',borderBottom:i===topPosts.length-1?'none':'1px solid var(--line)',display:'grid',gridTemplateColumns:'auto 1fr auto',gap:14,alignItems:'center',cursor:'pointer'}}>
                <BrandAvatar name={p.brand_name} color="var(--indigo)" size={28}/>
                <div style={{minWidth:0}}>
                  <div style={{display:'flex',gap:6,alignItems:'center',marginBottom:2}}>
                    <span style={{fontWeight:600,fontSize:13}}>{p.brand_name}</span>
                    <PlatformBadge platform={p.platform || 'fb'}/>
                  </div>
                  <div style={{fontSize:12,color:'var(--text2)',overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{p.message}</div>
                </div>
                <div style={{textAlign:'right',fontFamily:'var(--font-mono)',fontSize:15,fontWeight:700}}>{fmtK(eng)}</div>
              </div>
            );
          })}
        </div>

        <div style={styles.card}>
          <div style={styles.head}>
            <span style={{fontSize:15,fontWeight:700}}>最新報告</span>
            {onNavigate && <button className="btn btn-ghost btn-sm" onClick={() => onNavigate('reports')}>全部</button>}
          </div>
          {reports.loading ? <LoadingState/> :
           reports.error ? <ErrorState error={reports.error}/> :
           (reports.data || []).length === 0 ? <EmptyState title="尚無報告" desc="到報告頁「+ 生成報告」建立第一份"/> :
           (reports.data || []).map((r,i) => (
            <div key={r.id} onClick={() => onNavigate && onNavigate('reports')} style={{padding:'14px 20px',borderBottom:i===reports.data.length-1?'none':'1px solid var(--line)',cursor:'pointer'}}>
              <div style={{fontWeight:600,fontSize:14,marginBottom:4}}>{r.title}</div>
              <div style={{fontFamily:'var(--font-mono)',fontSize:10,color:'var(--text3)'}}>{r.created_at?.slice(0,10)}</div>
              <div style={{fontSize:12,color:'var(--text2)',marginTop:4,display:'-webkit-box',WebkitLineClamp:2,WebkitBoxOrient:'vertical',overflow:'hidden'}}>{_stripMd(r.summary)}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Full brand ranking table */}
      <div style={styles.card}>
        <div style={styles.head}>
          <span style={{fontSize:15,fontWeight:700}}>品牌排行</span>
          <span style={{fontFamily:'var(--font-mono)',fontSize:10,color:'var(--text3)',textTransform:'uppercase',letterSpacing:'.1em'}}>{brandStats.length} brand{brandStats.length === 1 ? '' : 's'}</span>
        </div>
        {brandStats.length === 0 ? (
          <EmptyState title="尚無品牌數據" desc="新增品牌並更新後，這裡會依互動數排名"/>
        ) : (
          <div style={{overflowX:'auto'}}>
            <table style={styles.table}>
              <thead>
                <tr>
                  <th style={{...styles.th, width:50}}>#</th>
                  <th style={styles.th}>品牌</th>
                  <th style={{...styles.th, textAlign:'right'}}>貼文</th>
                  <th style={{...styles.th, textAlign:'right'}}>❤ 讚</th>
                  <th style={{...styles.th, textAlign:'right'}}>💬 留言</th>
                  <th style={{...styles.th, textAlign:'right'}}>🔄 分享</th>
                  <th style={{...styles.th, textAlign:'right'}}>🔥 總互動</th>
                </tr>
              </thead>
              <tbody>
                {brandStats.map((b, i) => {
                  const total = (b.total_likes||0)+(b.total_comments||0)+(b.total_shares||0);
                  return (
                    <tr key={b.id || i} onClick={() => onNavigate && onNavigate('brands')} style={{cursor:'pointer'}}>
                      <td style={{...styles.td, fontFamily:'var(--font-mono)', color:'var(--text3)'}}>{i + 1}</td>
                      <td style={styles.td}>
                        <div style={{display:'flex', alignItems:'center', gap:10}}>
                          <BrandAvatar name={b.name} color={b.color || 'var(--indigo)'} size={26}/>
                          <span style={{fontWeight:600}}>{b.name}</span>
                          {b.category_name && <span style={{fontSize:11,color:'var(--text3)'}}>· {b.category_name}</span>}
                        </div>
                      </td>
                      <td style={styles.tdNum}>{b.post_count || 0}</td>
                      <td style={{...styles.tdNum, color:'var(--red)'}}>{fmtK(b.total_likes||0)}</td>
                      <td style={{...styles.tdNum, color:'var(--indigo2)'}}>{fmtK(b.total_comments||0)}</td>
                      <td style={{...styles.tdNum, color:'var(--green)'}}>{fmtK(b.total_shares||0)}</td>
                      <td style={{...styles.tdNum, color:'var(--amber)'}}>{fmtK(total)}</td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        )}
      </div>
      </>
      )}
    </div>
  );
}

Object.assign(window, { OverviewPage });