/* =============================================
   skins.js — 皮肤库
   英雄列表：/api/champions → LCU champion-summary.json
   英雄头像：/api/heroicon?id= → LCU hero json → skins[0].tilePath
   皮肤数据：/api/hero?id= → LCU hero json
   图片代理：/api/img?path=
============================================= */

const ROLES = [
  { key: '',          label: '全部', icon: '🌐' },
  { key: 'fighter',  label: '战士', icon: '⚔️' },
  { key: 'assassin', label: '刺客', icon: '🗡️' },
  { key: 'mage',     label: '法师', icon: '🔮' },
  { key: 'marksman', label: '射手', icon: '🏹' },
  { key: 'support',  label: '辅助', icon: '💙' },
  { key: 'tank',     label: '坦克', icon: '🛡️' },
];

let _champions = [];
let _curRole   = '';
let _curQuery  = '';

// ── 英雄列表页 ────────────────────────────────
async function renderSkinLib() {
  const page = document.getElementById('page-skins');
  resetLazyObserver();
  if (!APP.summonerId) {
    page.innerHTML = '<div class="placeholder-page"><p>请先启动 LOL 客户端</p></div>';
    return;
  }
  page.innerHTML = `
    <div class="skins-toolbar">
      <div class="role-tabs" id="roleTabs">
        ${ROLES.map(r => `
          <div class="role-tab ${r.key === _curRole ? 'active' : ''}"
               data-role="${r.key}" onclick="filterRole('${r.key}')">
            <span class="role-tab-icon">${r.icon ?? ''}</span><span>${r.label}</span>
          </div>`).join('')}
      </div>
      <div class="champ-search-box">
        <span class="champ-count" id="champCount"></span>
        <input class="search-input" id="champSearch" placeholder="搜索英雄..."
               value="${esc(_curQuery)}" oninput="filterSearch(this.value)">
      </div>
    </div>
    <div class="champ-grid-card">
      <div class="champ-grid-scroll">
        <div id="champGrid" class="champ-grid"><div class="loading-spin">加载英雄</div></div>
      </div>
    </div>`;
  if (_champions.length === 0) await loadChampions();
  else applyFilter();
}

async function loadChampions() {
  const cached = Cache.get('champions_lcu');
  if (cached && cached.length > 0) {
    _champions = cached;
    applyFilter();
    return;
  }
  try {
    // 腾讯接口返回 { hero: [...] }
    // 字段：heroId / name / title / alias / keywords / roles[]
    const data = await API.get('champions');
    const list = Array.isArray(data) ? data : (data.hero || []);
    _champions = list.filter(c => (c.id || c.heroId) && parseInt(c.id || c.heroId) > 0);
    Cache.set('champions_lcu', _champions);
    applyFilter();
  } catch(e) {
    console.error('[loadChampions]', e);
    const g = document.getElementById('champGrid');
    if (g) g.innerHTML = '<div class="placeholder-page"><p>加载失败</p></div>';
  }
}

function filterRole(role) {
  _curRole = role;
  document.querySelectorAll('.role-tab').forEach(el =>
    el.classList.toggle('active', el.dataset.role === role));
  applyFilter();
}
function filterSearch(q) { _curQuery = q.trim().toLowerCase(); applyFilter(); }

// 模糊搜索：中文名 / 英文名alias / 拼音缩写keywords
function champMatch(c, q) {
  if (!q) return true;
  const name     = (c.name     || '').toLowerCase();
  const alias    = (c.alias    || '').toLowerCase();
  const keywords = (c.keywords || '').toLowerCase(); // 腾讯接口：拼音全拼+缩写，如 "yasuo,ys,ysjh,疾风剑豪"
  const title    = (c.title    || '').toLowerCase(); // 小名，如 "不败之地"
  return name.includes(q) || alias.includes(q) || keywords.includes(q) || title.includes(q);
}

function applyFilter() {
  let list = _champions;
  if (_curRole) {
    list = list.filter(c =>
      Array.isArray(c.roles) &&
      c.roles.some(r => r.toLowerCase() === _curRole)
    );
  }
  if (_curQuery) {
    list = list.filter(c => champMatch(c, _curQuery));
  }
  const countEl = document.getElementById('champCount');
  if (countEl) countEl.innerHTML = `共有 <span class="champ-count-num">${list.length}</span> 名英雄`;
  renderChampGrid(list);
}

function renderChampGrid(list) {
  const grid = document.getElementById('champGrid');
  if (!grid) return;
  if (list.length === 0) {
    grid.innerHTML = '<div class="placeholder-page" style="height:200px"><p>没有找到英雄</p></div>';
    return;
  }
  grid.innerHTML = list.map(c => {
    const cid = c.id || c.heroId;
    // 有缓存直接写 src，避免切换职业时破图
    const cached = Cache.get('tile_' + cid);
    const imgAttr = cached
      ? `src="${esc(API.img(cached))}"`
      : `data-champid="${cid}"`;
    return `
      <div class="champ-card" onclick="openChampSkins(${cid},'${esc(c.name)}','${esc(c.alias||'')}')">
        <div class="champ-img-wrap">
          <img ${imgAttr} alt="${esc(c.name)}"
               onerror="this.onerror=null;this.style.background='#1a2d4a'">
        </div>
        <div class="champ-name">${esc(c.name)}</div>
      </div>`;
  }).join('');
  // 只对还没加载的发请求
  const pending = Array.from(grid.querySelectorAll('img[data-champid]'));
  if (pending.length > 0) loadAllChampIcons(grid);
}

// 分批并发加载所有英雄头像
function loadAllChampIcons(grid) {
  const imgs  = Array.from(grid.querySelectorAll('img[data-champid]'));
  const BATCH = 8;
  let i = 0;
  function next() {
    const batch = imgs.slice(i, i + BATCH);
    if (!batch.length) return;
    i += BATCH;
    batch.forEach(el => loadOneIcon(el, el.dataset.champid));
    if (i < imgs.length) setTimeout(next, 80);
  }
  next();
}

async function loadOneIcon(el, id) {
  try {
    let tp = Cache.get('tile_' + id);
    if (!tp) {
      // 优先从已缓存的 hero json 取
      const hero = Cache.get('hero_' + id);
      if (hero && hero.skins && hero.skins[0]) {
        tp = hero.skins[0].tilePath;
      } else {
        const data = await API.get('heroicon', { id });
        if (data && data.skins && data.skins[0]) {
          tp = data.skins[0].tilePath;
          // 顺便把 hero json 也缓存了，打开皮肤时不用再请求
          Cache.set('hero_' + id, data);
        }
      }
      if (tp) Cache.set('tile_' + id, tp);
    }
    if (tp && el.isConnected) {
      el.src = API.img(tp);
      el.style.minHeight = '';
      el.style.background = '';
    }
  } catch(e) { /* 静默失败 */ }
}

// ── 皮肤详情 ─────────────────────────────────
let _skins = [], _curChampId = 0, _curChampName = '', _curChampAlias = '';
let _activeSkinIdx = 0, _activeChromaIdx = -1, _thumbOffset = 0;

async function openChampSkins(champId, champName, champAlias) {
  const page = document.getElementById('page-skins');
  page.innerHTML = '<div class="loading-spin">加载皮肤</div>';

  // 先确定 alias：优先用传入的，其次从缓存的 hero 里取
  let hero = Cache.get('hero_' + champId);
  const alias = champAlias || (hero && hero.alias) || '';

  // 并发：英雄皮肤数据 + xc炫彩数据（直接读本地 xc/xc.txt，不依赖后端新接口）
  const [heroResult, xcResult] = await Promise.allSettled([
    hero ? Promise.resolve(hero) : API.get('hero', { id: champId }),
    _loadXcData(alias),
  ]);

  if (heroResult.status === 'rejected') {
    page.innerHTML = '<div class="placeholder-page"><p>加载皮肤失败</p></div>';
    return;
  }
  hero = heroResult.value;
  Cache.set('hero_' + champId, hero);

  // alias 再补一次 hero.alias（应对自动跳转时 champAlias 为空的情况）
  const finalAlias = alias || hero.alias || '';
  const xcData = xcResult.status === 'fulfilled' ? xcResult.value : [];

  // 若首次 alias 为空导致 xcData 为空，用 hero.alias 补一次
  const xcDataFinal = (xcData.length === 0 && finalAlias && finalAlias !== alias)
    ? await _loadXcData(finalAlias)
    : xcData;

  _skins           = buildSkinList(hero, finalAlias, xcDataFinal);
  _curChampId      = champId;
  _curChampName    = champName;
  _curChampAlias   = finalAlias;
  _activeSkinIdx   = 0;
  _activeChromaIdx = -1;
  _thumbOffset     = 0;
  renderSkinDetail(page);
}

// 从内置 XC_DATA 读取指定英雄的炫彩条目（不依赖任何网络/文件接口）
// 从 XC_DATA 读取指定英雄的炫彩数据
// 返回 Map<skinIdBase, [{file, name, color}, ...]>
// skinIdBase = 皮肤ID末尾3位，精确对应 xcdata.js 里的 skinId
function _loadXcData(alias) {
  if (!alias || typeof XC_DATA === 'undefined') return Promise.resolve(new Map());
  const key = Object.keys(XC_DATA).find(k => k.toLowerCase() === alias.toLowerCase());
  if (!key) return Promise.resolve(new Map());

  const list = XC_DATA[key]; // 数组格式 [{skinId, chromas:[]}]
  const result = new Map();

  if (Array.isArray(list)) {
    // 新格式：[{ skinId, chromas: [{file, name, color}] }]
    list.forEach(entry => {
      if (entry.skinId != null && Array.isArray(entry.chromas)) {
        result.set(entry.skinId, entry.chromas);
      }
    });
  }
  return Promise.resolve(result);
}

function buildSkinList(hero, alias, xcMap) {
  const skins   = hero.skins || [];
  const result  = [];
  const hallIdx = [];

  skins.forEach((s, i) => {
    // LCU 原生炫彩
    const chromas = (s.chromas || []).map(ch => ({
      id:         ch.id,
      name:       ch.name || '',
      chromaPath: ch.chromaPath || '',
      color:      (ch.colors && ch.colors[0]) || '#999999',
      isXc:       false,
    }));

    // 注入 xc 本地炫彩：用皮肤ID末尾3位精确匹配 xcMap 的 key
    // 默认皮肤（isBase 或 id末尾=0）跳过
    const base = s.id % 1000;
    if (chromas.length === 0 && xcMap.size > 0 && !s.isBase && base !== 0) {
      const xcChromas = xcMap.get(base);
      if (xcChromas && xcChromas.length > 0) {
        xcChromas.forEach((xc, idx) => {
          // 从文件名提取炫彩ID，如 Viego994.png → 994
          const xcId = parseInt((xc.file || '').replace(/[^0-9]/g, '')) || 0;
          chromas.push({
            id:         xcId,
            name:       xc.name  || `炫彩${idx + 1}`,
            chromaPath: '',
            xcFile:     xc.file  || '',
            color:      xc.color || '#999999',
            isXc:       true,
          });
        });
      }
    }

    result.push({
      id:          s.id,
      name:        s.name || '',
      splashPath:  s.splashPath  || '',
      tilePath:    s.tilePath   || '',
      description: s.description || '',
      shortBio:    hero.shortBio || '',
      isBase:      s.isBase || false,
      hasChroma:   chromas.length > 0,
      chromas,
    });
    if ((s.name || '').includes('殿堂传奇')) hallIdx.push(i);
  });

  hallIdx.forEach(i => {
    const qi    = skins[i];
    const tiers = qi?.questSkinInfo?.tiers;
    if (!tiers || tiers.length < 2) return;
    const t    = tiers[1];
    const immortalName = t.name || `联盟不朽 ${hero.name || _curChampName || ''}`.trim();

    // 联盟不朽皮肤的 xc 炫彩注入
    const immortalChromas = [];
    if (xcMap.size > 0 && t.id) {
      const base = t.id % 1000;
      const xcChromas = xcMap.get(base);
      if (xcChromas && xcChromas.length > 0) {
        xcChromas.forEach((xc, idx) => {
          const xcId = parseInt((xc.file || '').replace(/[^0-9]/g, '')) || 0;
          immortalChromas.push({
            id:         xcId,
            name:       xc.name  || `炫彩${idx + 1}`,
            chromaPath: '',
            xcFile:     xc.file  || '',
            color:      xc.color || '#999999',
            isXc:       true,
          });
        });
      }
    }

    result.push({
      id:          t.id || qi.id,
      name:        immortalName,
      splashPath:  t.splashPath  || '',
      tilePath:    t.tilePath   || '',
      description: t.description || '',
      shortBio:    hero.shortBio || '',
      isBase:      false,
      hasChroma:   immortalChromas.length > 0,
      chromas:     immortalChromas,
    });
  });

  return result;
}

function renderSkinDetail(page) {
  const tileCached = Cache.get('tile_' + _curChampId);
  const iconSrc = tileCached ? API.img(tileCached)
    : (_skins[0] && _skins[0].tilePath ? API.img(_skins[0].tilePath) : '');
  page.innerHTML = `
    <div class="sp-info-bar">
      <div class="sp-info-left">
        <img class="sp-info-avatar" src="${esc(iconSrc)}" alt="${esc(_curChampName)}" onerror="this.onerror=null;this.style.background='#e8eaed'">
        <span class="sp-info-name">${esc(_curChampName)}</span>
        <span class="sp-info-sub">共 ${_skins.length} 个皮肤</span>
      </div>
      <div class="sp-info-right">
        <div class="sp-back-btn" onclick="renderSkinLib()">
          <svg viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>返回
        </div>
      </div>
    </div>
    <div class="sp-canvas" id="spCanvas">
      <img class="sp-bg-img" id="spBgImg" src="" alt="">
      <div style="position:absolute;bottom:0;left:0;right:0;z-index:8;
                  background:linear-gradient(to top,rgba(0,0,0,0.92) 0%,rgba(0,0,0,0.5) 55%,transparent 100%);
                  padding:80px 22px 18px;">
        <div style="font-size:24px;font-weight:700;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,0.7);margin-bottom:6px;" id="spSkinName"></div>
        <div style="font-size:12px;color:rgba(255,255,255,0.75);line-height:1.7;max-width:60%;word-break:break-all;" id="spSkinDesc"></div>
        <div style="display:flex;gap:10px;margin-top:14px;">
          <button onclick="equipCurrentSkin()" class="sp-btn-apply">应用皮肤</button>
          <button onclick="setWallpaper()" class="sp-btn-career">设置为生涯壁纸</button>
        </div>
      </div>
    </div>
    <!-- 炫彩面板：fixed定位，JS计算坐标 -->
    <div id="spChromaWrap" style="display:none;position:fixed;z-index:9999;flex-direction:column;align-items:flex-end;gap:6px;">
      <div id="spChromaRow" style="display:flex;gap:6px;background:rgba(0,0,0,0.5);padding:6px 10px;border-radius:20px;backdrop-filter:blur(6px);"></div>
      <div id="spChromaCard" style="display:none;width:242px;background:rgba(255,255,255,0.08);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.15);border-radius:14px;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,0.3);">
        <img id="spChromaCardImg" style="width:242px;height:242px;object-fit:cover;display:block;" src="" alt="">
        <div id="spChromaCardName" style="font-size:12px;color:rgba(255,255,255,0.9);padding:7px 10px;text-align:center;background:rgba(0,0,0,0.25);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:31px;line-height:17px;"></div>
      </div>
    </div>
    <div class="sp-skin-grid-wrap">
      <div class="sp-skin-grid-inner">
        <div class="sp-skin-grid" id="spSkinGrid"></div>
      </div>
    </div>
    <div style="min-height:14px;flex-shrink:0;width:100%;"></div>`;
  updateSplash();
  renderSkinGrid();
}

function updateSplash() {
  const skin = _skins[_activeSkinIdx];
  if (!skin) return;
  const bg = document.getElementById('spBgImg');
  if (bg && skin.splashPath) {
    bg.style.opacity = '0';
    const newSrc = API.img(skin.splashPath);
    setTimeout(() => {
      bg.src = newSrc;
      bg.onload  = () => { bg.style.opacity = '1'; };
      bg.onerror = () => { bg.style.opacity = '1'; };
    }, 200);
  }
  const nameEl = document.getElementById('spSkinName');
  const descEl = document.getElementById('spSkinDesc');
  if (nameEl) nameEl.textContent = skin.name;
  if (descEl) descEl.textContent = skin.description || skin.shortBio || '';

  const chromaWrap = document.getElementById('spChromaWrap');
  const chromaRow  = document.getElementById('spChromaRow');
  if (!chromaWrap || !chromaRow) return;

  if (skin.hasChroma && skin.chromas.length > 0) {
    const wrap   = document.getElementById('spChromaWrap');
    const row    = document.getElementById('spChromaRow');
    const canvas = document.getElementById('spCanvas');

    // fixed 定位到 canvas 右上角
    const rect = canvas.getBoundingClientRect();
    wrap.style.top   = (rect.top + 12) + 'px';
    wrap.style.right = (window.innerWidth - rect.right + 12) + 'px';

    // 先重置到右边屏幕外，再 display:flex
    wrap.style.transform  = 'translateX(60px)';
    wrap.style.opacity    = '0';
    wrap.style.transition = 'none';
    wrap.style.display    = 'flex';

    row.innerHTML = skin.chromas.map((ch, ci) => {
      // xc 炫彩用 color 字段显示圆点颜色，LCU 原生炫彩也用 color
      const dotStyle = ch.isXc
        ? `background:${esc(ch.color)};border-color:rgba(255,255,255,0.5);`
        : `background:${esc(ch.color)};`;
      return `
      <span onclick="selectChroma(${_activeSkinIdx},${ci})"
            onmouseenter="hoverChroma(${_activeSkinIdx},${ci})"
            onmouseleave="leaveChroma(${ci})"
            title="${esc(ch.name)}"
            style="width:20px;height:20px;border-radius:50%;${dotStyle}
                   cursor:pointer;border:2px solid rgba(255,255,255,0.3);
                   display:inline-block;flex-shrink:0;
                   box-shadow:0 1px 4px rgba(0,0,0,0.5);">
      </span>`;
    }).join('');

    // 预填炫彩内容
    const cardImg  = document.getElementById('spChromaCardImg');
    const cardName = document.getElementById('spChromaCardName');
    const card     = document.getElementById('spChromaCard');
    const firstCh  = skin.chromas[0];
    if (cardImg && firstCh) {
      cardImg.src = firstCh.isXc && firstCh.xcFile
        ? `xc/${encodeURIComponent(firstCh.xcFile)}`
        : (firstCh.chromaPath ? API.img(firstCh.chromaPath) : '');
    }
    if (cardName) cardName.textContent = firstCh?.name || '';
    if (card) card.style.display = 'none';
    _activeChromaIdx = -1;

    // 两帧后触发从右边弹入动画
    requestAnimationFrame(() => requestAnimationFrame(() => {
      wrap.style.transition = 'transform 0.45s cubic-bezier(.34,1.56,.64,1), opacity 0.3s ease';
      wrap.style.transform  = 'translateX(0)';
      wrap.style.opacity    = '1';
    }));
  } else {
    const wrap = document.getElementById('spChromaWrap');
    // 向右滑出
    wrap.style.transition = 'transform 0.25s ease, opacity 0.2s ease';
    wrap.style.transform  = 'translateX(60px)';
    wrap.style.opacity    = '0';
    setTimeout(() => { wrap.style.display = 'none'; }, 260);
    _activeChromaIdx = -1;
  }
}

// showChromaCard、chromaWrapEnter、chromaWrapLeave 已废弃，炫彩改用hover事件直接处理

function hoverChroma(skinIdx, ci) {
  const ch = _skins[skinIdx]?.chromas?.[ci];
  if (!ch) return;

  // 圆点放大高亮（只是视觉，不改变 _activeChromaIdx）
  const dots = document.querySelectorAll('#spChromaRow span');
  dots.forEach((el, i) => {
    el.style.transform   = i === ci ? 'scale(1.35)' : 'scale(1)';
    el.style.borderColor = i === ci ? '#fff' : 'rgba(255,255,255,0.3)';
    el.style.transition  = 'transform .15s, border-color .15s';
  });

  // 更新卡片内容
  const card = document.getElementById('spChromaCard');
  const img  = document.getElementById('spChromaCardImg');
  const name = document.getElementById('spChromaCardName');
  if (img) {
    img.src = ch.isXc && ch.xcFile
      ? `xc/${encodeURIComponent(ch.xcFile)}`
      : (ch.chromaPath ? API.img(ch.chromaPath) : '');
  }
  if (name) name.textContent = ch.name || '';

  // 显示卡片
  if (card && card.style.display === 'none') {
    card.style.transition = 'none';
    card.style.transform  = 'translateY(-10px) scale(0.88)';
    card.style.opacity    = '0';
    card.style.display    = 'block';
    requestAnimationFrame(() => requestAnimationFrame(() => {
      card.style.transition = 'transform 0.32s cubic-bezier(.34,1.56,.64,1), opacity 0.22s ease';
      card.style.transform  = 'translateY(0) scale(1)';
      card.style.opacity    = '1';
    }));
  } else if (card) {
    card.style.transform = 'translateY(0) scale(1)';
    card.style.opacity   = '1';
  }
}

function leaveChroma(ci) {
  // 还原圆点样式
  const dots = document.querySelectorAll('#spChromaRow span');
  dots.forEach((el, i) => {
    // 如果有选中的炫彩，保持选中态高亮
    const isActive = _activeChromaIdx >= 0 && i === _activeChromaIdx;
    el.style.transform   = isActive ? 'scale(1.2)' : 'scale(1)';
    el.style.borderColor = isActive ? '#fff' : 'rgba(255,255,255,0.3)';
  });

  // 如果没有选中任何炫彩，隐藏卡片
  if (_activeChromaIdx < 0) {
    const card = document.getElementById('spChromaCard');
    if (card) {
      card.style.transition = 'transform 0.2s ease, opacity 0.18s ease';
      card.style.transform  = 'translateY(-8px) scale(0.92)';
      card.style.opacity    = '0';
      setTimeout(() => { if (card.style.opacity === '0') card.style.display = 'none'; }, 200);
    }
  }
}

function selectChroma(skinIdx, ci) {
  const ch = _skins[skinIdx]?.chromas?.[ci];
  if (!ch) return;

  // 点击同一个已选中的 → 取消选中
  if (_activeChromaIdx === ci) {
    _activeChromaIdx = -1;
    const dots = document.querySelectorAll('#spChromaRow span');
    dots.forEach(el => { el.style.borderColor = 'rgba(255,255,255,0.3)'; el.style.transform = 'scale(1)'; });
    return;
  }

  // 选中新的炫彩
  _activeChromaIdx = ci;
  hoverChroma(skinIdx, ci);
}

// renderThumbs、scrollThumbToActive、slideThumb 已废弃，皮肤详情改用网格布局

// 鼠标拖拽滑动
function initThumbDrag(track) {
  let startX = 0, startOffset = 0, dragging = false;

  track.addEventListener('mousedown', e => {
    dragging  = true;
    startX    = e.clientX;
    startOffset = _thumbOffset;
    track.classList.add('dragging');
    e.preventDefault();
  });

  // 绑定在 track 容器上而非 document，避免全局泄漏
  const onMove = e => {
    if (!dragging) return;
    const scroll    = document.getElementById('spThumbScroll');
    const maxOffset = Math.max(0, track.scrollWidth - (scroll?.offsetWidth || 0));
    _thumbOffset = Math.max(0, Math.min(startOffset - (e.clientX - startX), maxOffset));
    track.style.transform = `translateX(-${_thumbOffset}px)`;
  };
  const onUp = () => {
    if (dragging) { dragging = false; track.classList.remove('dragging'); }
  };

  document.addEventListener('mousemove', onMove);
  document.addEventListener('mouseup',   onUp);

  // 皮肤详情页销毁时自动解绑
  track._cleanDrag = () => {
    document.removeEventListener('mousemove', onMove);
    document.removeEventListener('mouseup',   onUp);
  };
}

function scrollThumbToActive() {} // 已废弃
function slideThumb() {} // 已废弃

function selectSkin(idx) {
  _activeSkinIdx = idx; _activeChromaIdx = -1;
  updateSplash();
  document.querySelectorAll('#spSkinGrid .sp-thumb').forEach((el, i) =>
    el.classList.toggle('active', i === idx));
  const active = document.querySelector('#spSkinGrid .sp-thumb.active');
  if (active) active.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}
function prevSkin() { if (_skins.length) selectSkin((_activeSkinIdx - 1 + _skins.length) % _skins.length); }
function nextSkin() { if (_skins.length) selectSkin((_activeSkinIdx + 1) % _skins.length); }

async function equipCurrentSkin() {
  const skin = _skins[_activeSkinIdx];
  if (!skin) return;

  if (skin.isBase || _activeSkinIdx === 0) {
    showToast(`应用："${skin.name}" 默认皮肤失败！`, 'err');
    return;
  }

  let applyId   = skin.id;
  let applyName = skin.name;

  if (_activeChromaIdx >= 0 && skin.chromas[_activeChromaIdx]) {
    const ch = skin.chromas[_activeChromaIdx];
    applyName = ch.name || skin.name;
    // xc 炫彩和 LCU 原生炫彩都直接用 ch.id 传给后端
    // xc 炫彩的 ch.id 就是文件名数字（如 Viego994.png → 994）
    applyId = ch.id;
  }

  _chromaLocked = false;
  const card = document.getElementById('spChromaCard');
  if (card) card.style.display = 'none';

  showLoadingToast('正在应用皮肤...');
  try {
    await API.get('applySkin', { skinId: applyId, heroId: _curChampId, alias: _curChampAlias });
    hideLoadingToast();
    showToast(`已应用皮肤：${applyName}`, 'ok');
  } catch(e) {
    hideLoadingToast();
    showToast('请在英雄选择阶段使用此功能', 'err');
  }
}

async function setWallpaper() {
  const skin = _skins[_activeSkinIdx];
  if (!skin) return;
  try {
    await API.get('setCareerBg', { skinId: skin.id, heroId: _curChampId, alias: _curChampAlias });
    showToast('✓ 生涯壁纸已更新', 'ok');
  } catch(e) { showToast('设置壁纸失败', 'err'); }
}

// chromaWrapEnter/Leave 已废弃
let _chromaLocked = false;

// ── 皮肤图标网格（替代横向滑动条）────────────
function renderSkinGrid() {
  const grid = document.getElementById('spSkinGrid');
  if (!grid) return;
  grid.innerHTML = _skins.map((skin, idx) => {
    let corner = '';
    if (skin.hasChroma && skin.chromas.length > 0)
      corner = `<div class="sp-thumb-corner"><span>${skin.chromas.length}</span></div>`;
    else if (skin.name.includes('联盟不朽'))
      corner = `<div class="sp-thumb-quest"><span>不朽</span></div>`;
    return `
      <div class="sp-thumb ${idx === _activeSkinIdx ? 'active' : ''}"
           data-idx="${idx}" onclick="selectSkin(${idx})">
        <div class="sp-thumb-img-wrap">
          <img data-src="${esc(skin.tilePath ? API.img(skin.tilePath) : '')}"
               alt="${esc(skin.name)}"
               onerror="this.onerror=null;this.style.background='#e8eaed'">
          ${corner}
        </div>
        <div class="sp-thumb-name">${esc(skin.name)}</div>
      </div>`;
  }).join('');
  observeLazy(grid);
}