/* =============================================
   home.js — 主页
============================================= */

// 腾讯LOL新闻数据（真实链接，2026-07-28抓取）
const NEWS_DATA = [
  { title: '自然之力玩法概览',               date: '2026-07-27', tag: '新闻', url: 'https://lol.qq.com/news/detail.shtml?docid=2940470082043515446' },
  { title: '【云顶之弈】莲华温泉 不朽厄斐琉斯（暂译）局内预览', date: '2026-07-27', tag: '视频', url: 'https://lol.qq.com/v/v2/detail.shtml?docid=6022405071576176903' },
  { title: '【云顶之弈】职场精英 小小亚托克斯（暂译）局内预览', date: '2026-07-27', tag: '视频', url: 'https://lol.qq.com/v/v2/detail.shtml?docid=10899500935834176517' },
  { title: '《双城之战》音乐秀祖安狂欢主题周上线，双人同行限时8折', date: '2026-07-24', tag: '新闻', url: 'https://lol.qq.com/news/detail.shtml?docid=7166884178362213593' },
  { title: '璀璨臻彩召唤活动上新',            date: '2026-07-24', tag: '公告', url: 'https://lol.qq.com/news/detail.shtml?docid=7177124231319241414' },
  { title: '网鱼海斗挑战赛报名开启，一人到店即可参与，赢每城奖金奖品！', date: '2026-07-21', tag: '新闻', url: 'https://lol.qq.com/news/detail.shtml?docid=18361178770552446235' },
  { title: '五问星神全球总冠军——AUR Huanmie！', date: '2026-07-17', tag: '新闻', url: 'https://lol.qq.com/news/detail.shtml?docid=15315623112213019510' },
  { title: '海斗大赛宝典已上线',               date: '2026-07-17', tag: '公告', url: 'https://lol.qq.com/news/detail.shtml?docid=3648675094364817556' },
  { title: '英雄联盟活动及模式上线公告',        date: '2026-07-16', tag: '公告', url: 'https://lol.qq.com/news/detail.shtml?docid=7073977129233350758' },
  { title: '【英雄联盟】T1：2025全球总决赛冠军 官方皮肤宣传片', date: '2026-07-16', tag: '视频', url: 'https://lol.qq.com/v/v2/detail.shtml?docid=10465297417770123157' },
  { title: '2025 T1冠军皮肤即将上线',          date: '2026-07-15', tag: '公告', url: 'https://lol.qq.com/news/detail.shtml?docid=2371950277838654440' },
  { title: '7月16日凌晨1点停机版本更新公告',   date: '2026-07-15', tag: '公告', url: 'https://lol.qq.com/gicp/news/410/37091415.html' },
];

async function renderHome() {
  const page = document.getElementById('page-home');
  page.innerHTML = '<div class="loading-spin">加载中</div>';

  let summoner = null, gameflow = null, ranked = null, wallet = null;
  await Promise.allSettled([
    API.get('summoner').then(d => summoner = d),
    API.get('gameflow').then(d => gameflow = d),
    API.get('ranked'  ).then(d => ranked   = d),
    API.get('wallet'  ).then(d => wallet   = d),
  ]);

  const name  = summoner?.gameName || summoner?.displayName || summoner?.internalName || '---';
  const level = summoner?.summonerLevel ?? '--';
  const icon  = summoner?.profileIconId ?? 29;
  const phase = typeof gameflow === 'string' ? gameflow : (gameflow?.phase ?? '未知');

  // ranked 结构：queueMap.RANKED_SOLO_5x5
  let rankStr = '未定级';
  const soloQ = ranked?.queueMap?.['RANKED_SOLO_5x5'];
  if (soloQ && soloQ.tier && soloQ.tier !== '' && soloQ.tier !== 'NONE') {
    rankStr = `${soloQ.tier} ${soloQ.division !== 'NA' ? soloQ.division : ''}  ${soloQ.leaguePoints} LP`.trim();
  }

  // wallet 字段：RP / lol_blue_essence / lol_orange_essence / lol_mythic_essence
  const be = wallet?.lol_blue_essence   ?? 'N/A';
  const rp = wallet?.RP                 ?? 'N/A';
  const oe = wallet?.lol_orange_essence ?? 0;
  const me = wallet?.lol_mythic_essence ?? 0;
  const iconUrl = API.img(`/lol-game-data/assets/v1/profile-icons/${icon}.jpg`);

  page.innerHTML = `
    <div class="home-grid">

      <!-- 欢迎横幅（全宽） -->
      <div class="welcome-banner">
        <div>
          <div class="welcome-title">
            <img src="${esc(iconUrl)}" onerror="this.style.display='none'"
                 style="width:40px;height:40px;border-radius:50%;border:2px solid rgba(255,255,255,.5)">
            👋 欢迎回来，${esc(name)}
          </div>
          <div class="welcome-sub">等级 ${level} &nbsp;|&nbsp; 当前状态：${esc(phase)}</div>
        </div>
        <div class="welcome-actions">
          <button class="btn btn-white" onclick="navigate('skins')">🎨 浏览皮肤库</button>
        </div>
      </div>

      <!-- 左列：召唤师信息 + 快捷功能 -->
      <div style="display:flex;flex-direction:column;gap:16px;">
        <div class="card account-card">
          <div class="card-title">👤 召唤师信息</div>
          <div class="account-row"><span class="account-label">召唤师名称</span><span class="account-value blue">${esc(name)}</span></div>
          <div class="account-row"><span class="account-label">游戏等级</span><span class="account-value">${level}</span></div>
          <div class="account-row"><span class="account-label">当前段位</span><span class="account-value">${esc(rankStr)}</span></div>
          <div class="account-row"><span class="account-label">蓝色精粹</span><span class="account-value">${be}</span></div>
          <div class="account-row"><span class="account-label">橙色精粹</span><span class="account-value">${oe}</span></div>
          <div class="account-row"><span class="account-label">神话精粹</span><span class="account-value">${me}</span></div>
          <div class="account-row"><span class="account-label">点券 (RP)</span><span class="account-value">${rp}</span></div>
        </div>
        <!-- 快捷功能 -->
        <div class="card">
          <div class="card-title">⚡ 快捷功能</div>
          <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px">
            <button class="btn btn-outline" style="justify-content:center;padding:14px 0" onclick="navigate('skins')">🎨 皮肤库</button>
            <button class="btn btn-outline" style="justify-content:center;padding:14px 0" onclick="navigate('tools')">🔧 工具箱</button>
            <button class="btn btn-outline" style="justify-content:center;padding:14px 0" onclick="navigate('settings')">⚙️ 设置</button>
            <button class="btn btn-outline" style="justify-content:center;padding:14px 0" onclick="refreshHome()">🔄 刷新状态</button>
          </div>
        </div>
      </div>

      <!-- 右列：使用指南 + 新闻资讯 -->
      <div style="display:flex;flex-direction:column;gap:16px;">
        <!-- 使用指南 -->
        <div class="card guide-card">
          <div class="guide-header">
            <div class="card-title" style="margin:0">
              <svg viewBox="0 0 24 24" width="15" height="15" style="fill:#fa8c16;margin-right:4px;vertical-align:-2px"><path d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></svg>
              使用指南
            </div>
            <a class="news-more" href="https://docs.mzeas.com/Mseed%20.html" target="_blank">其他问题 &gt;</a>
          </div>
          <div class="guide-list">
            <div class="guide-item">
              <span class="guide-num">1</span>
              <span class="guide-text">请确保杀毒软件已关闭（火绒除外）</span>
              <a class="guide-link" href="https://docs.mzeas.com/Mseed%20.html?disable_builtin_antivirus.html" target="_blank">&gt; 如何关闭系统自带杀毒?</a>
            </div>
            <div class="guide-item">
              <span class="guide-num">2</span>
              <span class="guide-text">加入熊猫官方QQ群</span>
              <a class="guide-link" href="https://qm.qq.com/q/PtkCYb5Uo6" target="_blank">&gt; 加入我们QQ群</a>
            </div>
            <div class="guide-item">
              <span class="guide-num">3</span>
              <span class="guide-text">熊猫官方网站</span>
              <a class="guide-link" href="http://www.lolxm.cn/" target="_blank">&gt; 打开熊猫网站</a>
            </div>
          </div>
          <div class="guide-disclaimer">
            本软件未经 Riot Games 认可，也不代表 Riot Games 或任何官方参与制作或管理
            Riot Games 产品的人的观点或意见。Riot Games 及其所有相关产物均为 Riot
            Games，Inc 的商标或注册商标。
          </div>
        </div>
        <div class="card news-card" style="flex:1;">
          <div class="news-header">
            <div class="card-title" style="margin:0">
              <svg viewBox="0 0 24 24" width="16" height="16" style="fill:#fa8c16;margin-right:4px;vertical-align:-2px"><path d="M20 3H4v10c0 2.21 1.79 4 4 4h6c2.21 0 4-1.79 4-4v-3h2c1.11 0 2-.89 2-2V5c0-1.11-.89-2-2-2zm0 5h-2V5h2v3zM4 19h16v2H4z"/></svg>
              新闻资讯
            </div>
            <a class="news-more" href="https://lol.qq.com/news/index.shtml" target="_blank">更多新闻 &gt;</a>
          </div>
          <div class="news-list-scroll">
            ${NEWS_DATA.map(n => {
              const tagColor = n.tag === '视频' ? '#fa8c16' : n.tag === '公告' ? '#52c41a' : '#1677ff';
              return `
              <div class="news-item" onclick="window.open('${esc(n.url)}')">
                <span class="news-tag" style="border-color:${tagColor};color:${tagColor};">${n.tag}</span>
                <span class="news-title">${esc(n.title)}</span>
                <span class="news-date">${n.date}</span>
              </div>`;
            }).join('')}
          </div>
        </div>
      </div>

    </div>`;
}

function refreshHome() { renderHome(); showToast('状态已刷新', 'ok'); }