/* =============================================
   tools.js — 工具箱页面
============================================= */

// 工具开关状态
const _toolsState = {
  infiniteZoom: false,
  bloodPatch:   false,
  autoAccept:   false,
  createRoom:   false,
};

// 段位选项
const RANK_TIERS = ['未设置','铁牌','铜牌','银牌','金牌','铂金','翡翠','钻石','大师','宗师','最强王者'];
const RANK_DIVS  = ['未设置','I','II','III','IV'];

// 游戏模式选项
const GAME_MODES = ['未设置','匹配模式','排位单双','排位灵活','极地大乱斗','斗魂竞技场','云顶之弈'];

function renderTools() {
  const page = document.getElementById('page-tools');

  const tierOpts = RANK_TIERS.map(t => `<option value="${t}">${t}</option>`).join('');
  const divOpts  = RANK_DIVS.map(d  => `<option value="${d}">${d}</option>`).join('');
  const modeOpts = GAME_MODES.map(m => `<option value="${m}">${m}</option>`).join('');

  page.innerHTML = `
    <div class="tools-wrap">

      <!-- 主布局：左边4个卡片2列 + 右边段位卡片 -->
      <div class="tools-main-grid">

        <!-- 左侧：4个功能卡片 -->
        <div class="tools-left">
          <div class="tools-grid">

            <!-- 无限视距 -->
            <div class="tools-card">
              <div class="tools-card-icon" style="background:#e8f4ff;">
                <span style="font-size:32px;line-height:1;">🧍</span>
              </div>
              <div class="tools-card-info">
                <div class="tools-card-title">无限视距</div>
                <div class="tools-card-desc">游戏中鼠标滚轮上下</div>
              </div>
              <div class="tools-toggle ${_toolsState.infiniteZoom ? 'on' : ''}"
                   id="toggle-infiniteZoom" onclick="toggleTool('infiniteZoom')">
                <span class="tools-toggle-dot"></span>
              </div>
            </div>

            <!-- 血液补丁 -->
            <div class="tools-card">
              <div class="tools-card-icon" style="background:#fff1f0;">
                <span style="font-size:32px;line-height:1;">🐷</span>
              </div>
              <div class="tools-card-info">
                <div class="tools-card-title">血液补丁</div>
                <div class="tools-card-desc">红色流血特效，增强视觉效果</div>
              </div>
              <div class="tools-toggle ${_toolsState.bloodPatch ? 'on' : ''}"
                   id="toggle-bloodPatch" onclick="toggleTool('bloodPatch')">
                <span class="tools-toggle-dot"></span>
              </div>
            </div>

            <!-- 自动接受对局 -->
            <div class="tools-card">
              <div class="tools-card-icon" style="background:#e6f4ff;">
                <span style="font-size:32px;line-height:1;">🎮</span>
              </div>
              <div class="tools-card-info">
                <div class="tools-card-title">自动接受对局</div>
                <div class="tools-card-desc">自动帮您接受对局匹配或其他模式</div>
              </div>
              <div class="tools-toggle ${_toolsState.autoAccept ? 'on' : ''}"
                   id="toggle-autoAccept" onclick="toggleTool('autoAccept')">
                <span class="tools-toggle-dot"></span>
              </div>
            </div>

            <!-- 创建 5v5 房间 -->
            <div class="tools-card">
              <div class="tools-card-icon" style="background:#fffbe6;">
                <span style="font-size:32px;line-height:1;">🏆</span>
              </div>
              <div class="tools-card-info">
                <div class="tools-card-title">创建 5v5 房间</div>
                <div class="tools-card-desc">只能添加人机玩家训练技术</div>
              </div>
              <div class="tools-toggle ${_toolsState.createRoom ? 'on' : ''}"
                   id="toggle-createRoom" onclick="toggleTool('createRoom')">
                <span class="tools-toggle-dot"></span>
              </div>
            </div>

          </div>
        </div>

        <!-- 右侧：段位修改卡片，和左侧等高 -->
        <div class="tools-rank-card">
          <div class="tools-rank-title">
            <span style="font-size:22px;">🔮</span>
            段位修改
          </div>
          <div class="tools-rank-body">
            <div class="tools-rank-field">
              <label class="tools-rank-label">游戏模式</label>
              <div class="tools-select-wrap">
                <select id="rankMode" class="tools-select" onchange="onRankChange()">
                  ${modeOpts}
                </select>
                <span class="tools-select-arrow">▾</span>
              </div>
            </div>
            <div class="tools-rank-field">
              <label class="tools-rank-label">段位</label>
              <div class="tools-select-wrap">
                <select id="rankTier" class="tools-select" onchange="onRankChange()">
                  ${tierOpts}
                </select>
                <span class="tools-select-arrow">▾</span>
              </div>
            </div>
            <div class="tools-rank-field">
              <label class="tools-rank-label">等级</label>
              <div class="tools-select-wrap">
                <select id="rankDiv" class="tools-select" onchange="onRankChange()">
                  ${divOpts}
                </select>
                <span class="tools-select-arrow">▾</span>
              </div>
            </div>
          </div>
        </div>

      </div><!-- /.tools-main-grid -->

      <!-- 底部提示文字 -->
      <div class="tools-footer-tip">
        ⚠ 如果想要更多的功能请反馈要添加的功能哦！
      </div>

    </div><!-- /.tools-wrap -->
  `;
}

async function toggleTool(key) {
  _toolsState[key] = !_toolsState[key];
  const el = document.getElementById('toggle-' + key);
  if (el) el.classList.toggle('on', _toolsState[key]);

  const onMsgs = {
    infiniteZoom: '✓ 无限视距已开启',
    bloodPatch:   '✓ 血液补丁已开启',
    autoAccept:   '✓ 自动接受对局已开启',
    createRoom:   '✓ 5v5训练营创建成功',
  };
  const offMsgs = {
    infiniteZoom: '无限视距已关闭',
    bloodPatch:   '血液补丁已关闭',
    autoAccept:   '自动接受对局已关闭',
    createRoom:   '房间已解散',
  };

  try {
    await fetch('/api/setTool?key=' + key + '&val=' + (_toolsState[key] ? '1' : '0'));
    showToast(_toolsState[key] ? onMsgs[key] : offMsgs[key], _toolsState[key] ? 'ok' : 'err');
  } catch(e) {
    showToast('操作失败，请检查连接', 'err');
    // 回滚状态
    _toolsState[key] = !_toolsState[key];
    if (el) el.classList.toggle('on', _toolsState[key]);
  }
}

async function onRankChange() {
  const mode = encodeURIComponent(document.getElementById('rankMode')?.value || '');
  const tier = encodeURIComponent(document.getElementById('rankTier')?.value || '');
  const div  = encodeURIComponent(document.getElementById('rankDiv')?.value  || '');
  try {
    await fetch('/api/setRank?mode=' + mode + '&tier=' + tier + '&div=' + div);
  } catch(e) { /* 静默失败 */ }
}