/* ============================================================
   ROOY · 07a 成就分类（铺开）
   ───────────────────────────────────────────────────────────
   需求：07 成就墙每个分组标题加 › ，点进来把「这一类的全部成就」
   铺开。不做专门 hero、不做列表排版——直接复用墙上同一套 MedalCard
   2-col 网格，只是从 featured 少数扩成全量（cap 3/8 · moment 4/16 ·
   extreme 0/4）。同一模板按 cat 参数化。

   NavBar(kicker 成就 · title 分类名) + 一行 meta（分类语 · 已解锁 x/y）
   + MedalGrid 全量卡片。accent / glyph / 卡态全部沿用墙, 不新造视觉.
   ============================================================ */

const ACH_CATEGORIES = {
  cap: {
    name: '能力成就', tag: '关卡通关', kind: 'cap', earned: 3, total: 8,
    items: [
      { n: '平行式',   d: '基础站位与平行下滑', w: '4 月 10 日', e: true },
      { n: '刃滑 I',   d: '掌握基础立刃感觉',   w: '4 月 18 日', e: true },
      { n: '刃滑 II',  d: '稳定 40° 立刃下滑',  w: '4 月 22 日', e: true },
      { n: '短弯节奏', d: '高频小幅度转弯',     w: '下一步',     locked: true },
      { n: '卡宾弧',   d: '完整卡宾转弯轨迹',   w: '锁定中',     locked: true },
      { n: '高速卡宾', d: '高速下的卡宾控制',   w: '锁定中',     locked: true },
      { n: '蘑菇道',   d: '起伏地形连续过弯',   w: '锁定中',     locked: true },
      { n: '全地形',   d: '各类雪况自如切换',   w: '锁定中',     locked: true },
    ],
  },
  moment: {
    name: '瞬间成就', tag: 'ROOY 见证的「第一次」', kind: 'moment', earned: 4, total: 16,
    items: [
      { n: '首破 40°',    d: '立刃稳定滑完一整趟', w: '刚刚解锁', e: true, hi: true, justUnlocked: true },
      { n: '生涯 100 km', d: '累计垂降突破百公里', w: '4 月 22 日', e: true },
      { n: '十连弯',      d: '首次连续 10 弯不失衡', w: '4 月 15 日', e: true },
      { n: '破晓首滑',    d: '当日缆车第一班',     w: '4 月 11 日', e: true },
      { n: '生涯 250 km', d: '累计垂降 250 km',    w: '锁定中', locked: true },
      { n: '日出第一道',  d: '日照金山前开板',     w: '锁定中', locked: true },
      { n: '夜场一小时',  d: '夜灯下连滑 1 小时',   w: '锁定中', locked: true },
      { n: '全天候',      d: '恶劣天气完成一次滑行', w: '锁定中', locked: true },
      { n: '早鸟三连',    d: '连续三天赶首班缆车',   w: '锁定中', locked: true },
      { n: '单日 20 km',  d: '单日垂降突破 20 km',   w: '锁定中', locked: true },
      { n: '极速瞬间',    d: '单趟峰值破 80 km/h',   w: '锁定中', locked: true },
      { n: '初见粉雪',    d: '首次粉雪道下滑',       w: '锁定中', locked: true },
      { n: '林间穿行',    d: '首次完成树林线路',     w: '锁定中', locked: true },
      { n: '腾空一秒',    d: '首次滞空满 1 秒',       w: '锁定中', locked: true },
      { n: '雪场巡礼',    d: '解锁 5 个不同雪场',     w: '锁定中', locked: true },
      { n: '整季全勤',    d: '一个雪季滑满 30 天',   w: '锁定中', locked: true },
    ],
  },
  extreme: {
    name: '极限挑战', tag: '少数高难度任务', kind: 'extreme', earned: 0, total: 4,
    items: [
      { n: '高级雪道', d: '黑道（专家级）首滑完成', w: '下一步', locked: true },
      { n: '破百公里', d: '单趟峰值突破 100 km/h',  w: '锁定中', locked: true },
      { n: '陡坡速降', d: '45° 以上陡坡完整速降',   w: '锁定中', locked: true },
      { n: '大跳台',   d: '完成一次大跳台落地',     w: '锁定中', locked: true },
    ],
  },
};

function AchievementCategoryScreen({ onNav, cat = 'cap' }) {
  const C = ACH_CATEGORIES[cat] || ACH_CATEGORIES.cap;
  const items = C.items.map((it) => ({ ...it, kind: C.kind }));

  return (
    <div style={{
      height: '100%', display: 'flex', flexDirection: 'column',
      background: R.bg, position: 'relative', color: R.ink, ...T.subhead,
    }}>
      <StatusBar/>

      <NavBar onBack={() => onNav && onNav('back')} kicker="成就" title={C.name}/>

      <div style={{ flex: 1, overflowY: 'auto', position: 'relative', zIndex: 1, paddingBottom: 36 }}>

        {/* 一行 meta —— 不是 hero, 只给分类语 + 已解锁比例 */}
        <div style={{ padding: '2px 22px 16px' }}>
          <p style={{ ...T.subhead, color: R.ink2 }}>
            {C.tag} · 已解锁 <span style={{ color: R.ink, fontWeight: 600 }}>{C.earned}</span>
            <span style={{ color: R.ink3 }}> / {C.total}</span>
          </p>
        </div>

        {/* 墙上同一套卡片, 全量铺开 */}
        <MedalGrid items={items}/>

      </div>
    </div>
  );
}

/* cat-bound wrappers —— phone() / ROUTES 只传 onNav, cat 靠这里固化. */
function AchievementCategoryCap(p)     { return <AchievementCategoryScreen {...p} cat="cap"/>; }
function AchievementCategoryMoment(p)  { return <AchievementCategoryScreen {...p} cat="moment"/>; }
function AchievementCategoryExtreme(p) { return <AchievementCategoryScreen {...p} cat="extreme"/>; }

Object.assign(window, {
  AchievementCategoryScreen,
  AchievementCategoryCap, AchievementCategoryMoment, AchievementCategoryExtreme,
  ACH_CATEGORIES,
});