// P10 — Speak to Score 活动主页

const TASK_TABS = [
  { key: 'study',  label: '📚 学习', color: '#4CAF50' },
  { key: 'social', label: '🤝 社交', color: '#87CEEB' },
  { key: 'paid',   label: '💎 付费', color: '#FFD700' },
  { key: 'match',  label: '⚽ 赛事', color: '#FF4444' },
];
const TASKS = {
  study: [
    { ic: '📖', n: '每日足球单词打卡',       d: '10 词 / 天', r: '+10 热力', p: 0, max: 10, rep: '未完成' },
    { ic: '🎙', n: '跟读足球解说金句',       d: '跟读 3 句',  r: '+15/次',   p: 0, max: 3 },
    { ic: '❓', n: '国家文化一问',           d: '单选题',     r: '+20',      p: 0, max: 1, rep: '未完成' },
    { ic: '💬', n: '与母语者对话 1 次',      d: '语言角',     r: '+50/次',   p: 0, max: 2 },
    { ic: '✍', n: '纠错外国用户中文贴',     d: '纠错助攻',   r: '+20/次',   p: 1, max: 3 },
    { ic: '📺', n: '陪看房观看 15 分钟',     d: '无限次',     r: '+5',       p: 0, max: 1, rep: '无限' },
    { ic: '📷', n: '圈子发图文贴',           d: '国家文化',   r: '+30/次',   p: 0, max: 2 },
  ],
  social: [
    { ic: '➕', n: '关注对方国家用户',        d: '随机推荐',   r: '+15',      p: 0, max: 1 },
    { ic: '🌐', n: '加入跨国语言角',          d: '连续 5 分钟',r: '+25',      p: 0, max: 1 },
    { ic: '👥', n: '被关注 (被动)',           d: '自动记录',   r: '+10',      p: 2, max: 5 },
    { ic: '📣', n: '邀请好友',                d: '成功注册',   r: '+100/人',  p: 1, max: 10 },
  ],
  paid: [
    { ic: '🎁', n: '购买国家应援包',   d: '19 / 99 / 199 币', r: '+100/+500/+1200', p: 0, max: 3 },
    { ic: '🏆', n: '送国家限定礼物',   d: '金额 × 2 热力',    r: '按额度',          p: 0, max: 1 },
    { ic: '👑', n: 'VIP 开通 / 续费',  d: '本赛事期',          r: '+2000 一次性',     p: 0, max: 1 },
    { ic: '⚡', n: '双倍热力卡',       d: '39 币',             r: '当日 ×2',          p: 0, max: 1 },
    { ic: '🎖', n: '国家代言人徽章',   d: '199 币',            r: '+500',             p: 0, max: 1 },
    { ic: '💰', n: 'HT 币首充礼包',    d: '首充解锁',          r: '+300',             p: 1, max: 1 },
  ],
  match: [
    { ic: '🔮', n: '比分竞猜成功',    d: '今日 3 场',  r: '+100',        p: 0, max: 3 },
    { ic: '🇨🇳', n: '国家赢球日全勤', d: '应援国胜利',  r: '+50 全员',   p: 0, max: 1 },
    { ic: '🎊', n: '晋级庆祝房送礼',  d: '庆祝房内',    r: '按金额',     p: 0, max: 1 },
    { ic: '🏁', n: '决赛签到',        d: '决赛日',     r: '+500',        p: 0, max: 1 },
  ],
};

const ALL_CODES = ['ar','br','en','de','fr','es','cn','pt','nl','jp','kr','be','hr','mx','us','ma','sn'];

function P10Page({ onBack, toast, nav }) {
  const [tab, setTab] = React.useState(0);
  const activeKey = TASK_TABS[tab].key;

  return (
    <PageShell title="SPEAK TO SCORE" subtitle="开口即进球 · 语言就是你的武器" onBack={onBack} darkHeader>
      {/* Logo 区 */}
      <div style={{
        background: `linear-gradient(135deg, ${PX.grassGreen} 0%, #66BB6A 100%)`,
        border: `3px solid ${PX.night}`, boxShadow: `4px 4px 0 ${PX.night}`,
        padding: 12, position: 'relative', overflow: 'hidden',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <div style={{ fontSize: 36 }}>👄</div>
          <div style={{ fontFamily: "'Press Start 2P', monospace", fontSize: 10, color: PX.sunYellow }}>»»»</div>
          <div className="ball-wobble"><PixelBall size={20}/></div>
          <div style={{ fontFamily: "'Press Start 2P', monospace", fontSize: 10, color: PX.sunYellow }}>»</div>
          <div style={{ position: 'relative' }}>
            <PixelGoal width={60} height={36}/>
          </div>
        </div>
        <div className="live-blink" style={{
          marginTop: 8, fontFamily: "'PingFang SC', sans-serif", fontSize: 13,
          color: '#fff', fontWeight: 700, textShadow: `2px 2px 0 ${PX.night}`,
          textAlign: 'center',
        }}>让每一次开口都变成进球</div>
      </div>

      {/* 我的应援国家大卡 */}
      <Card style={{ marginTop: 12, background: PX.night, borderColor: PX.sunYellow }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <PixelFlag code="cn" px={7}/>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: "'PingFang SC', sans-serif", fontSize: 13, color: '#fff', fontWeight: 700 }}>🇨🇳 中国</div>
            <div style={{ fontFamily: "'Press Start 2P', monospace", fontSize: 7, color: 'rgba(255,255,255,0.7)', marginTop: 4 }}>MY COUNTRY · RANK #3</div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{ fontFamily: "'Press Start 2P', monospace", fontSize: 20, color: PX.sunYellow, textShadow: `2px 2px 0 ${PX.red}` }}>1280</div>
            <div style={{ fontFamily: "'Press Start 2P', monospace", fontSize: 6, color: '#fff', marginTop: 2 }}>HEAT</div>
          </div>
        </div>
        <div onClick={() => toast('切换应援国家 · 剩 1 次')} className="pixel-btn" style={{
          marginTop: 10, padding: '6px 8px', background: PX.sunYellow, color: PX.night,
          fontFamily: "'Press Start 2P', monospace", fontSize: 8, textAlign: 'center',
          border: `2px solid #fff`, cursor: 'pointer',
        }}>🔄 切换应援国家 (剩 1 次)</div>
      </Card>

      {/* 今日任务面板 */}
      <SecHead title="TODAY TASKS" sub="完成任务 · 为国家积累热力"/>
      <div style={{ display: 'flex', gap: 4, marginBottom: 8 }}>
        {TASK_TABS.map((t, i) => (
          <div key={t.key} onClick={() => setTab(i)} style={{
            flex: 1, padding: '8px 4px', cursor: 'pointer', textAlign: 'center',
            fontFamily: "'PingFang SC', sans-serif", fontSize: 10, fontWeight: 700,
            background: tab === i ? t.color : PX.cream,
            color: tab === i ? PX.night : PX.night,
            border: `2px solid ${PX.night}`,
            boxShadow: tab === i ? `inset 2px 2px 0 rgba(0,0,0,0.15)` : `2px 2px 0 ${PX.night}`,
          }}>{t.label}</div>
        ))}
      </div>
      <Card>
        {TASKS[activeKey].map((t, i) => (
          <div key={i} onClick={() => toast(`任务详情 · ${t.n}`)}
            className="pixel-btn"
            style={{
              display: 'flex', alignItems: 'center', gap: 8, padding: '8px 4px',
              borderBottom: i < TASKS[activeKey].length - 1 ? `2px dashed #ddd` : 'none',
              cursor: 'pointer',
            }}>
            <div style={{
              width: 32, height: 32, background: PX.cream,
              border: `2px solid ${PX.night}`, display: 'flex',
              alignItems: 'center', justifyContent: 'center', fontSize: 18,
            }}>{t.ic}</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: "'PingFang SC', sans-serif", fontSize: 12, color: PX.night, fontWeight: 700 }}>{t.n}</div>
              <div style={{ fontFamily: "'Press Start 2P', monospace", fontSize: 7, color: '#888', marginTop: 3 }}>
                {t.d} · <span style={{ color: PX.darkRed }}>{t.r}</span>
              </div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <Tag color={t.p >= t.max ? PX.grassGreen : PX.gold}>
                {t.rep || `${t.p}/${t.max}`}
              </Tag>
            </div>
          </div>
        ))}
      </Card>

      {/* 学习中心入口 */}
      <div onClick={() => nav('P10.1')} className="pixel-btn" style={{
        marginTop: 12, padding: 12, cursor: 'pointer',
        background: `linear-gradient(90deg, #4CAF50, #66BB6A)`,
        border: `3px solid ${PX.night}`, boxShadow: `3px 3px 0 ${PX.night}`,
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <div style={{ fontSize: 30 }}>🎓</div>
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: "'Press Start 2P', monospace", fontSize: 10, color: PX.sunYellow }}>LEARNING HUB</div>
          <div style={{ fontFamily: "'PingFang SC', sans-serif", fontSize: 11, color: '#fff', marginTop: 3, fontWeight: 600 }}>词汇盲盒 · 跟读挑战 · 语伴匹配</div>
        </div>
        <div style={{ color: '#fff', fontFamily: "'Press Start 2P', monospace", fontSize: 14 }}>›</div>
      </div>

      {/* 付费商店入口 */}
      <div onClick={() => nav('P10.3')} className="pixel-btn" style={{
        marginTop: 10, padding: 12, cursor: 'pointer',
        background: `linear-gradient(90deg, ${PX.sunYellow}, #FFC107)`,
        border: `3px solid ${PX.night}`, boxShadow: `3px 3px 0 ${PX.night}`,
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <div style={{ fontSize: 30 }}>💎</div>
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: "'Press Start 2P', monospace", fontSize: 10, color: PX.darkRed }}>BOOST STORE</div>
          <div style={{ fontFamily: "'PingFang SC', sans-serif", fontSize: 11, color: PX.night, marginTop: 3, fontWeight: 700 }}>应援包 · 双倍卡 · 代言徽章</div>
        </div>
        <div style={{ color: PX.night, fontFamily: "'Press Start 2P', monospace", fontSize: 14 }}>›</div>
      </div>

      {/* 48 国热力榜 Top 10 */}
      <SecHead title="HEAT TOP 10" sub="48 国热力榜" action="完整榜单" onAction={() => nav('P2')}/>
      <Card>
        {['br','ar','de','fr','es','it','pt','nl','jp','en'].map((c, i) => (
          <div key={c} style={{
            display: 'flex', alignItems: 'center', gap: 8,
            padding: '6px 2px', borderBottom: i < 9 ? `1px dashed #ddd` : 'none',
          }}>
            <div style={{
              width: 24, textAlign: 'center',
              fontFamily: "'Press Start 2P', monospace", fontSize: 10,
              color: i < 3 ? PX.gold : PX.night,
            }}>{i + 1}</div>
            <PixelFlag code={c === 'it' ? 'es' : c} px={4}/>
            <div style={{ flex: 1, fontFamily: "'PingFang SC', sans-serif", fontSize: 12, fontWeight: 700 }}>
              {['巴西','阿根廷','德国','法国','西班牙','意大利','葡萄牙','荷兰','日本','英格兰'][i]}
            </div>
            <div style={{ fontFamily: "'Press Start 2P', monospace", fontSize: 8, color: PX.darkRed }}>{(52340 - i * 3800).toLocaleString()}</div>
          </div>
        ))}
        <div style={{
          marginTop: 6, background: PX.sunYellow, padding: '6px 8px',
          display: 'flex', alignItems: 'center', gap: 8,
          border: `2px solid ${PX.night}`,
        }}>
          <div style={{ fontFamily: "'Press Start 2P', monospace", fontSize: 10, color: PX.red }}>#3</div>
          <PixelFlag code="cn" px={4}/>
          <div style={{ flex: 1, fontFamily: "'PingFang SC', sans-serif", fontSize: 12, fontWeight: 700 }}>🇨🇳 我的国家</div>
          <div style={{ fontFamily: "'Press Start 2P', monospace", fontSize: 9, color: PX.darkRed }}>45,820</div>
        </div>
      </Card>

      {/* 国家专属内容 */}
      <SecHead title="MY COUNTRY" sub="🇨🇳 中国 · 专属内容"/>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
        {[
          { ic: '📻', t: '官频房', s: '中国站 · 24h 直播' },
          { ic: '🏮', t: '文化日', s: '春节特别专场' },
          { ic: '💬', t: '圈子热贴', s: '12 条新回复' },
          { ic: '🎤', t: '语言角', s: '8 人在线' },
        ].map((x, i) => (
          <Card key={i} onClick={() => toast(x.t)} style={{ padding: 8 }}>
            <div style={{ fontSize: 22 }}>{x.ic}</div>
            <div style={{ fontFamily: "'PingFang SC', sans-serif", fontSize: 11, fontWeight: 700, marginTop: 3 }}>{x.t}</div>
            <div style={{ fontFamily: "'Press Start 2P', monospace", fontSize: 6, color: '#888', marginTop: 3 }}>{x.s}</div>
          </Card>
        ))}
      </div>

      {/* 时间线 */}
      <SecHead title="TIMELINE" sub="活动进度"/>
      <Card bg={PX.night} style={{ padding: 14 }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', position: 'relative' }}>
          {['预热','小组赛','淘汰赛','决赛','结算'].map((s, i) => {
            const done = i <= 1;
            const cur = i === 1;
            return (
              <div key={i} style={{ flex: 1, textAlign: 'center', position: 'relative' }}>
                {i < 4 && <div style={{ position: 'absolute', top: 10, left: '50%', right: '-50%', height: 3, background: i < 1 ? PX.sunYellow : '#444' }}/>}
                <div className={cur ? 'live-blink' : ''} style={{
                  width: 22, height: 22, background: done ? PX.sunYellow : '#444',
                  border: `2px solid ${done ? '#fff' : '#666'}`,
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: "'Press Start 2P', monospace", fontSize: 9, color: done ? PX.night : '#999',
                  position: 'relative', zIndex: 1,
                }}>{i + 1}</div>
                <div style={{
                  fontFamily: "'PingFang SC', sans-serif", fontSize: 10, fontWeight: 700,
                  color: done ? '#fff' : '#999', marginTop: 4,
                }}>{s}</div>
              </div>
            );
          })}
        </div>
      </Card>

      {/* 奖励中心 */}
      <div onClick={() => toast('奖励中心')} className="pixel-btn" style={{
        marginTop: 12, padding: 10, cursor: 'pointer',
        background: PX.red, border: `3px solid ${PX.night}`, boxShadow: `3px 3px 0 ${PX.night}`,
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <div style={{ fontSize: 28 }}>🎖</div>
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: "'Press Start 2P', monospace", fontSize: 10, color: PX.sunYellow }}>REWARD CENTER</div>
          <div style={{ fontFamily: "'PingFang SC', sans-serif", fontSize: 11, color: '#fff', marginTop: 3, fontWeight: 600 }}>已获徽章 3 · 待领取 2</div>
        </div>
        <div className="live-blink" style={{
          width: 12, height: 12, background: PX.sunYellow, border: `2px solid #fff`,
        }}/>
      </div>

      {/* 底部像素小人挥旗 */}
      <div style={{
        marginTop: 18, display: 'flex', justifyContent: 'center', gap: 16,
        padding: 14, background: PX.grassGreen, border: `3px solid ${PX.night}`,
      }}>
        {['cn','br','ar','de','fr'].map((c, i) => (
          <div key={c} className="shirt-wave" style={{ animationDelay: `${i * 120}ms`, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2 }}>
            <PixelFlag code={c} px={3}/>
            <div style={{ fontSize: 16 }}>👤</div>
          </div>
        ))}
      </div>
    </PageShell>
  );
}

Object.assign(window, { P10Page, ALL_CODES });