// ============================================================
// SocialPulse — Onboarding (Welcome modal + Demo report)
// ============================================================

function spIsOnboarded() { try { return localStorage.getItem('sp_onboarded') === '1'; } catch { return true; } }
function spSetOnboarded() { try { localStorage.setItem('sp_onboarded', '1'); } catch {} }
function spIsDemoReportDismissed() { try { return localStorage.getItem('sp_demo_report_dismissed') === '1'; } catch { return true; } }
function spDismissDemoReport() { try { localStorage.setItem('sp_demo_report_dismissed', '1'); } catch {} }

function WelcomeModal({ onSkip, onGoBrands }) {
  const steps = [
    { n:'1', title:'新增競品品牌', desc:'貼上 FB 粉專或 IG 帳號連結，免費版可追蹤 1 個。' },
    { n:'2', title:'執行首次爬取', desc:'系統會抓取最近 7 天貼文，約需 2 分鐘。' },
    { n:'3', title:'產生 AI 週報', desc:'Claude 會用中文整理成一份可讀的報告。' },
  ];
  return (
    <div style={{position:'fixed',inset:0,background:'rgba(10,10,19,.65)',backdropFilter:'blur(4px)',WebkitBackdropFilter:'blur(4px)',zIndex:250,display:'flex',alignItems:'center',justifyContent:'center',padding:16}}>
      <div style={{background:'var(--panel)',border:'1px solid var(--line)',borderRadius:'var(--r-2xl)',width:'100%',maxWidth:440,boxShadow:'0 20px 60px rgba(0,0,0,.5)',overflow:'hidden'}}>
        {/* Hero */}
        <div style={{
          padding:'28px 24px 22px',
          background:'linear-gradient(135deg, rgba(99,102,241,.15), rgba(168,85,247,.15))',
          borderBottom:'1px solid var(--line)',textAlign:'center',
        }}>
          <div style={{
            width:56,height:56,borderRadius:14,margin:'0 auto 14px',
            background:'linear-gradient(135deg, #6366f1, #a855f7)',
            display:'grid',placeItems:'center',
            boxShadow:'0 10px 30px rgba(99,102,241,.4)',
          }}>
            <svg width="28" height="28" viewBox="0 0 24 24" fill="#fff"><path d="M3.5 18.49l6-6.01 4 4L22 6.92l-1.41-1.41-7.09 7.97-4-4L2 16.99z"/></svg>
          </div>
          <h3 style={{fontSize:20,fontWeight:800,letterSpacing:'-.01em',margin:'0 0 6px'}}>歡迎加入 SocialPulse 👋</h3>
          <div style={{color:'var(--text2)',fontSize:13}}>三步驟設定，馬上開始追蹤競品</div>
        </div>
        {/* Steps */}
        <div style={{padding:'20px 24px'}}>
          {steps.map(s => (
            <div key={s.n} style={{display:'flex',gap:12,alignItems:'flex-start',padding:12,borderRadius:10}}>
              <div style={{
                width:26,height:26,borderRadius:'50%',
                background:'var(--panel3, var(--panel2))',color:'var(--indigo2)',
                display:'grid',placeItems:'center',fontSize:11,fontWeight:700,fontFamily:'var(--font-mono)',
                flexShrink:0,border:'1px solid var(--line2)',
              }}>{s.n}</div>
              <div style={{flex:1,minWidth:0}}>
                <div style={{fontWeight:600,fontSize:13,marginBottom:2}}>{s.title}</div>
                <div style={{fontSize:12,color:'var(--text3)',lineHeight:1.5}}>{s.desc}</div>
              </div>
            </div>
          ))}
        </div>
        {/* Footer */}
        <div style={{padding:'16px 24px',borderTop:'1px solid var(--line)',display:'flex',gap:8}}>
          <button className="btn btn-ghost" onClick={onSkip}
            style={{flex:1,justifyContent:'center',padding:'10px 16px',fontSize:13,fontWeight:600}}>
            先逛逛示範資料
          </button>
          <button className="btn btn-primary" onClick={onGoBrands}
            style={{flex:1,justifyContent:'center',padding:'10px 16px',fontSize:13,fontWeight:600}}>
            開始設定 →
          </button>
        </div>
      </div>
    </div>
  );
}

// ---- Demo report (injected into reports list when user has 0 reports) ----
function spGetDemoReport() {
  const today = new Date();
  const weekAgo = new Date(today.getTime() - 7 * 86400000);
  const iso = d => d.toISOString().slice(0, 10);
  return {
    id: 'demo',
    is_demo: true,
    title: 'ASUS Taiwan 競品分析週報（示範）',
    week_start: iso(weekAgo),
    week_end: iso(today),
    created_at: today.toISOString(),
    summary: '示範報告 · ASUS Taiwan 本週以 ROG 電競新品主導聲量，跨平台策略成熟，IG 短影音互動率顯著高於 FB，建議加入 MSI/Acer 橫向對比追蹤。',
    content: `# ASUS Taiwan 競品分析週報（示範）

📌 這是**示範報告**，讓你預覽 SocialPulse 生成的報告長什麼樣。新增品牌、更新數據後，就能產出基於真實數據的 AI 分析週報。

## 一、期間摘要

ASUS Taiwan 本週（共 18 篇貼文、FB 13 + IG 5）以 **ROG 電競新品**為聲量主軸，單篇平均互動約 1,515，總互動 27,270，較前一週成長 **+23%**。IG 短影音表現亮眼，互動率（6.8%）顯著高於 FB（2.1%）。本週最具擴散力的題材為 ROG Strix G16 上市資訊與 Zenbook Duo 雙螢幕開箱，留言區以規格詢問與購買意願為主。

## 二、品牌表現分析

### ASUS Taiwan（華碩台灣）

- **貼文數**：18（FB 13 · IG 5）· 週發文頻率 2.6/日
- **總互動**：27,270（❤️ 24,510 · 💬 1,820 · 🔄 940）
- **平均互動**：1,515/篇（中位數 980，頭部效應明顯）
- **互動率**：FB 2.1% / IG 6.8%（IG 約為 FB 3.2 倍）
- **最佳時段**：週三、週五 20:00–22:00（留言高峰集中於晚間）

**內容結構：**

- **新品導向**（約 56%）：ROG Strix G16、Zenbook Duo、ROG Phone 9 Pro
- **促銷/優惠**（約 22%）：限時優惠、會員回饋、分期 0 利率
- **生活情境/使用教學**（約 17%）：攝影師、創作者實用場景
- **品牌理念/活動**（約 5%）：永續回收、電競贊助

**語氣風格：**

FB 偏「規格完整介紹 + 優惠資訊」長文；IG 主打「短影音 + 生活情境」，文案短、標籤密集，更適合導向年輕電競客群。

## 三、熱門貼文 Top 3

### 🥇 ROG Strix G16 2026 新品開箱（FB）

- ❤️ 4,820 · 💬 512 · 🔄 186 · 總互動 **5,518**
- **表現原因**：搶先開箱 + 規格對比圖 + 首購優惠三要素齊全；留言區出現大量「比 MSI 如何」「散熱怎麼樣」的實質比較詢問，帶動演算法二次推送。

### 🥈 Zenbook Duo 創作者場景短片（IG）

- ❤️ 3,910 · 💬 287 · 🔄 124 · 總互動 **4,321**
- **表現原因**：15 秒精剪展示雙螢幕實際作業流程，主打「插畫師 + 剪接師」雙角色敘事；Reels 觸及超出追蹤者 8.4 倍，屬於本週最強 organic 素材。

### 🥉 ROG Phone 9 Pro 電競手機搶先看（IG）

- ❤️ 3,120 · 💬 198 · 🔄 88 · 總互動 **3,406**
- **表現原因**：明星玩家合拍 + 散熱背夾配件彩蛋 + 限時登記抽獎組合拳；標籤 #ROGPhone9Pro 單週曝光破 12 萬。

## 四、內容趨勢觀察

1. **短影音滲透加速** — IG Reels 佔 IG 總互動的 **82%**，純圖文貼文已顯著式微；建議未來 IG 排程以 Reels 為主力，圖文作為輔助。
2. **「實測/對比」題材表現強** — 規格比較、散熱實測、跑分對照等貼文平均互動為一般型錄貼文的 **1.8 倍**，留言討論深度更高。
3. **週三、週五夜間為黃金時段** — 20:00–22:00 的貼文平均互動高出其他時段 **34%**，且留言轉化率最高。
4. **電競社群敏感詞**：「散熱」「續航」「鍵盤手感」「垂直對比」是留言最常出現的關鍵字，反映購買決策重點。

## 五、下週行動建議

1. **新品貼文前 3 天盯緊互動曲線** — 若 48 小時互動未達 2,500，考慮 boost 或補位再發；本週 ROG Strix G16 表現強勁，可複製素材節奏套用到 Zenbook 下週上市。
2. **IG Reels 加碼** — 本週 IG Reels 平均互動是 FB 的 3 倍，建議下週將 IG 排程比例由 28% 提高到 **40% 以上**。
3. **回應留言熱門疑問** — 留言中高頻出現「Linux 驅動支援」「散熱表現」「鍵盤回彈」，可產出 1 篇 FAQ 長文 + 1 支 60 秒短片集中回應。
4. **週三、週五 20:00 黃金時段** — 本週表現最好的 3 篇皆落在此時段，新品首發建議鎖定此時段。
5. **加入 MSI / Acer 橫向對比追蹤** — 針對 ROG Strix G16 vs MSI Raider、Zenbook Duo vs Acer SpatialLabs，定期產出對比報告供業務使用。

---

*這份報告僅為示範，實際報告會依照你爬取的真實貼文即時生成，數據與建議皆會因內容而有所不同。*`,
  };
}

// ---- Demo dashboard (shown on Overview when user has 0 brands) ----
function spIsDemoDashboardDismissed() {
  try { return localStorage.getItem('sp_demo_dashboard_dismissed') === '1'; } catch { return true; }
}
function spDismissDemoDashboard() {
  try { localStorage.setItem('sp_demo_dashboard_dismissed', '1'); } catch {}
}

function spGetDemoDashboard() {
  const demoBrands = [
    { id: 'demo-asus',  name: 'ASUS Taiwan', color: '#1a73e8', category_name: '3C · 電腦',
      post_count: 18, total_likes: 24510, total_comments: 1820, total_shares: 940 },
    { id: 'demo-msi',   name: 'MSI Taiwan',  color: '#e41e26', category_name: '3C · 電腦',
      post_count: 14, total_likes: 18340, total_comments: 1205, total_shares: 621 },
    { id: 'demo-acer',  name: 'Acer Taiwan', color: '#83b81a', category_name: '3C · 電腦',
      post_count: 11, total_likes: 12880, total_comments: 891, total_shares: 402 },
    { id: 'demo-ig',    name: 'ASUS ROG',    color: '#bc1888', category_name: '3C · 電競',
      post_count: 9,  total_likes: 15620, total_comments: 1012, total_shares: 488 },
  ];
  return {
    brands: demoBrands.length,
    posts: demoBrands.reduce((s,b)=>s+b.post_count, 0),
    reports: 1,
    topPosts: [
      { id:'dp1', brand_name:'ASUS Taiwan', platform:'fb', message:'ROG Strix G16 2026 新品開箱 — 13900HX + RTX 4080 搭配白色極光機身',
        likes_count:4820, comments_count:512, shares_count:186 },
      { id:'dp2', brand_name:'ASUS ROG',    platform:'ig', message:'Zenbook Duo 創作者場景短片 — 雙螢幕實戰剪輯',
        likes_count:3910, comments_count:287, shares_count:124 },
      { id:'dp3', brand_name:'MSI Taiwan',  platform:'fb', message:'MSI Raider GE78 HX 新色上市，電競機皇規格全面升級',
        likes_count:3610, comments_count:342, shares_count:198 },
      { id:'dp4', brand_name:'ASUS ROG',    platform:'ig', message:'ROG Phone 9 Pro 電競手機搶先看 — 散熱背夾配件彩蛋',
        likes_count:3120, comments_count:198, shares_count:88 },
      { id:'dp5', brand_name:'Acer Taiwan', platform:'fb', message:'SpatialLabs 3D 筆電創作者體驗會回顧',
        likes_count:2090, comments_count:156, shares_count:72 },
    ],
    brandStats: demoBrands,
    _isDemo: true,
  };
}

Object.assign(window, {
  WelcomeModal,
  spIsOnboarded, spSetOnboarded,
  spIsDemoReportDismissed, spDismissDemoReport, spGetDemoReport,
  spIsDemoDashboardDismissed, spDismissDemoDashboard, spGetDemoDashboard,
});