import CONFIG from './config.js';
import { initDisableDevtool } from './devtool-control.js';

// ============= 业务参数 =============
let gamelvid = '1';            // 具体关卡等级，初始为 1
let gamelvdata = {};
// 添加缓存对象
const levelDataCache = {};
const permission = localStorage.getItem('permission');
let currentProcessedLevelData = []; // Store processed level data for secure checking

gamelvdata = sessionStorage.getItem('gamelvdata')
if (gamelvdata) {
  gamelvdata = JSON.parse(gamelvdata)
} else {
  gamelvdata = {
    gamemode: 1,
    gamelv: 1,
    gameid: 1,
    currentlv: 1,
    ismatch: false,
    matchid: { cuntry: 1, province: 1, city: 1, district: 1 },
    gameNumber: 10,
  };
}

document.addEventListener('DOMContentLoaded', function () {
  let selectGameDom = document.querySelector('.navbar-middle');
  selectGameDom.addEventListener('click', function () {
    localStorage.removeItem('levelHistory')
    window.location.href = 'welcome.html';
  })
  // Update Language Name based on gamemode
  function updateLanguageDisplay() {
    const langNameEl = document.querySelector('.lang-name');
    if (langNameEl && gamelvdata) {
      const mode = parseInt(gamelvdata.gamemode);
      let langText = '';
      const iconSrc = 'images/stat-icon-graphical.svg';
      if (mode === 1) {
        langText = '图形化';
      } else if (mode === 2) {
        langText = 'Python';
      } else if (mode === 3) {
        langText = 'C++';
      }

      langNameEl.innerHTML = `<img src="${iconSrc}" class="lang-icon" alt=""><span>${langText}</span>`;
    }
  }
  updateLanguageDisplay();

  // 初始化禁用开发者工具
  initDisableDevtool({
    ondevtoolopen: () => {
      window.location.href = localStorage.getItem('returnUrl') || '/welcome.html';
    }
  });





  // 3. 弹窗交互绑定
  function bindSharedModalEvents() {
    // 通用关闭逻辑 (增强：支持点击内部图标)
    document.addEventListener('click', (e) => {
      const closeBtn = e.target.closest('.u-dialog-close-button') || e.target.closest('.modal-close-btn') || e.target.closest('.modal-close');
      if (closeBtn) {
        const modal = closeBtn.closest('.modal-overlay');
        if (modal) modal.style.display = 'none';
      }
      if (e.target.classList.contains('modal-overlay')) {
        e.target.style.display = 'none';
      }
    });

    // 登出按钮事件
    const logoutBtn = document.getElementById('logout-button');
    if (logoutBtn) {
        logoutBtn.addEventListener('click', () => {
            ['access_token', 'refresh_token', 'player_id'].forEach(key => {
                localStorage.removeItem(key);
            });
            window.location.href = '/login.html';
        });
    }
  }

  // 执行共有逻辑初始化
  bindSharedModalEvents();

  // ============== 共有逻辑结束 ==============
  const listItemsModes = document.querySelectorAll('.level-card-actions .pill');
  // New UI doesn't have shape toggles, so we just handle the data update.

  listItemsModes.forEach((item, index) => {
    item.addEventListener('click', function () {
      if (index !== 0 && (!permission || parseInt(permission) === 0)) {
        showMessage('error', '您没有权限解锁此等级');
        return;
      }

      listItemsModes.forEach(other => other.classList.remove('pill-active'));
      this.classList.add('pill-active');

      // Update Level Card Text
      const levelInfo = {
        1: { title: "Level A <span style='font-size: 0.7em'>丝路青年</span>", sub: "编程基础，循环入门" },
        2: { title: "Level B <span style='font-size: 0.7em'>红色之旅</span>", sub: "变量入门，循环进阶，变量进阶" },
        3: { title: "Level C <span style='font-size: 0.7em'>数智时代</span>", sub: "变量进阶，单条件分支入门，双条件分支入门，复杂路线规划" },
        4: { title: "Level D <span style='font-size: 0.7em'>国宝秘境</span>", sub: "条件分支进阶，循环嵌套入门，循环嵌套进阶，变量、循环与条件综合应用" },
        5: { title: "Level E <span style='font-size: 0.7em'>雪域征途</span>", sub: "循环嵌套进阶，无参数函数入门，单参数函数入门" },
        6: { title: "Level F <span style='font-size: 0.7em'>红色之旅</span>", sub: "综合运用与项目实战" }
      };
      const lv = index + 1;
      const titleEl = document.querySelector('.level-card-head');
      const subEl = document.querySelector('.level-card-sub');
      if (levelInfo[lv]) {
        if (titleEl) titleEl.innerHTML = levelInfo[lv].title;
        if (subEl) subEl.textContent = levelInfo[lv].sub;
      }

      // Update Cover Image
      const coverEl = document.querySelector('.level-card-cover');
      if (coverEl) {
        coverEl.src = `images/level${lv}_cover.png`;
      }

      gamelvid = (index + 1).toString();
      gamelvdata.gamelv = index + 1;
      // 记住当前 Level，从关卡返回后恢复
      try {
        sessionStorage.setItem('gamelvdata', JSON.stringify(gamelvdata));
        sessionStorage.setItem('programmingLearningSelectedLevel', String(lv));
      } catch (e) {}
      console.log('当前 gamelvid:', gamelvid);

      if (levelDataCache[gamelvid]) {
        console.log('使用缓存数据:', gamelvid);
        renderGameModeItems(levelDataCache[gamelvid]);
      } else {
        fetchAndRenderGameModes();
      }
    });
  });

  // 恢复上次选中的 Level（默认 Level A）
  if (listItemsModes.length > 0) {
    let savedLv = parseInt(
      (gamelvdata && gamelvdata.gamelv) ||
      sessionStorage.getItem('programmingLearningSelectedLevel') ||
      '1',
      10
    );
    if (!isFinite(savedLv) || savedLv < 1) savedLv = 1;
    if (savedLv > listItemsModes.length) savedLv = listItemsModes.length;
    // 无权限时只能回 Level A
    if (savedLv !== 1 && (!permission || parseInt(permission) === 0)) {
      savedLv = 1;
    }
    listItemsModes[savedLv - 1].click();
  }

  /********************************************************
   * 2) Bind Level Item Click
   ********************************************************/
  addLevelItemClick();
});

/********************************************************
 * 3) 拉取数据并渲染关卡列表
 ********************************************************/
function fetchAndRenderGameModes() {
  const playerId = localStorage.getItem('player_id');
  resetLevelItems();
  const requestGamelvid = gamelvid; // Capture current ID for this request

  fetch(`${CONFIG.DataServerBaseUrl}/api/get-base-game-records/`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${localStorage.getItem('access_token')}`
    },
    body: JSON.stringify({
      "user_id": playerId,
      "gamemode": gamelvdata.gamemode,
      "gamelv": gamelvdata.gamelv,
    })
  })
    .then(response => response.json())
    .then(data => {
      // Must check if user hasn't switched away while waiting
      if (requestGamelvid !== gamelvid) {
        console.log(`忽略旧请求结果: req=${requestGamelvid}, curr=${gamelvid}`);
        return;
      }

      if (data.success) {
        // Use the captured ID (requestGamelvid) to get data
        const levelData = data.data[requestGamelvid];

        if (Array.isArray(levelData)) {
          levelDataCache[requestGamelvid] = levelData;
          console.log('缓存关卡数据:', requestGamelvid);
          renderGameModeItems(levelData);
        } else {
          console.error('无效的关卡数据格式:', levelData);
          showMessage('error', '关卡数据格式错误');
        }
      } else {
        showMessage('error', data.message);
      }
    })
    .catch(err => {
      console.error('请求出错:', err);
      // const container = document.getElementById('levels-container');
      // if (container) container.innerHTML = '<p style="text-align:center; padding: 20px;">加载关卡失败，请稍后重试。</p>';
      showMessage('error', '加载关卡失败，请稍后重试');
    })
    .finally(() => {
      // if (loadingEl) loadingEl.style.display = 'none';
      // if (levelsContainer) levelsContainer.style.display = ''; // Restore original display (grid/flex)
    });
}

function renderGameModeItems(data) {
  let trialLevelCount = 3;
  const playerId = localStorage.getItem('player_id');

  const fetchTrialLevels = async () => {
    if (!playerId || (permission && parseInt(permission) !== 0)) {
      return;
    }
    try {
      const response = await fetch(`${CONFIG.DataServerBaseUrl}/api/get-user-trial-levels/`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${localStorage.getItem('access_token')}`
        },
        body: JSON.stringify({ user_id: playerId })
      });
      const result = await response.json();
      if (result.success && result.data) {
        trialLevelCount = Math.floor(result.data.trial_level_count / 10);
        console.log('用户试用关卡数量:', trialLevelCount);
        localStorage.setItem('trial_count', result.data.trial_level_count);
        processItemsWithTrialCount();
      } else {
        console.error('获取试用关卡数量失败:', result.message);
      }
    } catch (error) {
      console.error('请求试用关卡数量出错:', error);
    }
  };

  const processItemsWithTrialCount = () => {
    const items = data.map((item, index) => {
      if (!permission || parseInt(permission) === 0) {
        item.islock = index >= trialLevelCount;
      }
      if (!CONFIG.lvlock_normal_learn) {
        item.islock = false;
      }
      return item;
    });

    currentProcessedLevelData = items;
    renderItems(items);
  };

  const renderItems = (items) => {
    // Target the new list items in .levels-row
    const listItems = document.querySelectorAll('.levels-row .level-item');

    listItems.forEach((li, index) => {
      if (index < items.length) {
        const itemData = items[index];

        // Update data-gamelv-id
        li.dataset.gamelvId = itemData.gameid;

        // Elements
        const btn = li.querySelector('.level-btn');
        const imgEl = li.querySelector('.level-bg');
        const numEl = li.querySelector('.level-number');
        const titleEl = li.querySelector('.level-title');

        // Update Text
        if (numEl) numEl.textContent = itemData.islock ? '' : (itemData.titleNumber || (index + 1));
        if (titleEl) {
          const text = itemData.titleText || '';
          // Add promotion badge for specific levels ONLY if unlocked
          if (!itemData.islock && (parseInt(itemData.gameid) === 29 || parseInt(itemData.gameid) === 30)) {
            titleEl.innerHTML = `<div>${text}</div><div style="margin-top: 5px;"><span class="promotion-badge">晋升关卡</span></div>`;
          } else {
            titleEl.textContent = text;
          }
        }

        // Update Lock State and Image
        if (itemData.islock) {
          if (btn) {
            btn.classList.add('locked');
            btn.classList.remove('unlocked');
          }
          if (imgEl) {
            imgEl.src = 'images/level_btn_locked.png';
            imgEl.alt = 'Locked';
          }
          // Add custom tooltip logic if needed (borrowed from old code)
          addLockedTooltip(li, itemData.titleText);
        } else {
          if (btn) {
            btn.classList.remove('locked');
            btn.classList.add('unlocked');
          }
          if (imgEl) {
            imgEl.src = 'images/level_btn_unlocked.svg';
            imgEl.alt = itemData.titleText || 'Level';
          }
          removeLockedTooltip(li);
        }


        // 5. 进度条逻辑
        const shapeGray = li.querySelector('.u-grey-5');
        const shapeProgress = li.querySelector('.u-gradient');
        if (shapeGray && shapeProgress) {
          const total = itemData.total || 0;
          const finish = itemData.finish || 0;
          if (total > 0 && !itemData.islock) {
            shapeGray.style.display = 'block';
            const ratio = total > 0 ? (finish / total) : 0;
            const progressWidth = (ratio * 100).toFixed(0) + '%';
            shapeProgress.style.width = progressWidth;
            let gradient;
            if (ratio < 0.3) gradient = 'linear-gradient(to right, #ff6474, #e01c4c)';
            else if (ratio < 1) gradient = 'linear-gradient(to right, #fcc75a, #ee6622)';
            else gradient = 'linear-gradient(to right, #00ff00, #009245)';
            shapeProgress.style.backgroundImage = gradient;
            shapeProgress.setAttribute('title', `${finish}/${total}`);
          } else {
            shapeGray.style.display = 'none';
          }
        }

        li.style.display = 'flex'; // Use flex as per new CSS? .level-item is flex column
      } else {
        li.style.display = 'none';
      }
    });
  };

  if (!permission || parseInt(permission) === 0) {
    fetchTrialLevels();
  } else {
    processItemsWithTrialCount();
  }
}

/********************************************************
 * 4) Click Event
 ********************************************************/
function addLevelItemClick() {
  const levelsContainer = document.getElementById('levels-container');
  if (!levelsContainer) return;

  let startX = 0;
  let startY = 0;

  levelsContainer.addEventListener('mousedown', function (event) {
    startX = event.clientX;
    startY = event.clientY;
  });

  levelsContainer.addEventListener('click', function (event) {
    const diffX = Math.abs(event.clientX - startX);
    const diffY = Math.abs(event.clientY - startY);
    // 如果移动超过5px，认为是拖拽选择操作，不触发点击
    if (diffX > 5 || diffY > 5) {
      return;
    }

    const li = event.target.closest('.level-item');
    if (!li) return;

    const gameid = li.dataset.gamelvId;
    console.log('你点击了关卡 gamelv-id:', gameid);

    const allListItems = document.querySelectorAll('.levels-row .level-item');
    const index = Array.from(allListItems).indexOf(li);

    if (!currentProcessedLevelData || !currentProcessedLevelData[index]) {
      console.log('关卡数据尚未加载，阻止点击');
      return;
    }

    const isLockedInMemory = currentProcessedLevelData[index].islock;

    if (isLockedInMemory) {
      console.log('此关卡已锁定，无法进入。');
      if ((permission && parseInt(permission) !== 0)) {
        showMessage('error', '请先完成前面的关卡');
      } else {
        showMessage('error', '仅向权益用户开放');
      }
      return;
    }

    // Checking for promotion levels
    if (gameid === '29' || gameid === '30') {
      showPromotionDialog(gameid);
      return;
    }

    enterGame(gameid);
  });
}

function enterGame(gameid) {
  let gamelvdata = sessionStorage.getItem('gamelvdata');
  if (gamelvdata) {
    gamelvdata = JSON.parse(gamelvdata);
  } else {
    gamelvdata = {
      gamemode: 1,
      gamelv: 1,
      gameid: 1,
      currentlv: 1,
      ismatch: false,
      matchid: { cuntry: 1, province: 1, city: 1, district: 1 },
      gameNumber: 10,
    };
  }

  gamelvdata.gamelv = parseInt(gamelvid);
  gamelvdata.gameid = parseInt(gameid);
  sessionStorage.setItem('gamelvdata', JSON.stringify(gamelvdata));
  sessionStorage.setItem('lastpage', 'programming-learning.html');
  localStorage.setItem('platformMode', 'normal');
  window.location.href = 'editor.html';
}

// ========== Permissions & Modals UI Logic ==========

function initPermissionControl() {
  const permission = localStorage.getItem('permission');
  const vipBadge = document.querySelector('.navbar-link-vip');
  if (vipBadge) {
    if (permission && parseInt(permission) !== 0) {
      vipBadge.style.display = 'inline-flex';
    } else {
      vipBadge.style.display = 'none';
    }
  }
}

window.addEventListener('DOMContentLoaded', () => {
  initPermissionControl();
  setQRCodeImage();
  initializePermissionCode();
  initPromotionDialog();

  // Close buttons for new simple modals
  document.querySelectorAll('.modal-close').forEach(btn => {
    btn.addEventListener('click', (e) => {
      const modal = e.target.closest('.modal-overlay');
      if (modal) modal.style.display = 'none';
    });
  });

  const activationLink = document.querySelector('a[href="#carousel_ac25"]');
  const activationModal = document.getElementById('carousel_ac25');
  if (activationLink && activationModal) {
    activationLink.addEventListener('click', (e) => {
      e.preventDefault();
      activationModal.style.display = 'flex';
    });
  }

  const tryUseBtn = document.getElementById('tryuse');
  if (tryUseBtn) {
    tryUseBtn.addEventListener('click', (e) => {
      e.preventDefault();
      if (activationModal) activationModal.style.display = 'none';
    });
  }
});

document.getElementById('logout-button').addEventListener('click', () => {
  ['access_token', 'refresh_token', 'player_id'].forEach(key => {
    localStorage.removeItem(key);
  });
  window.location.href = '/login.html';
});

function showMessage(type, message) {
  let toastContainer = document.getElementById('toast-container');
  if (!toastContainer) {
    toastContainer = document.createElement('div');
    toastContainer.id = 'toast-container';
    // Add basic toast styles since we lost nicepage
    toastContainer.style.position = 'fixed';
    toastContainer.style.top = '20px';
    toastContainer.style.left = '50%';
    toastContainer.style.transform = 'translateX(-50%)';
    toastContainer.style.zIndex = '9999';
    document.body.appendChild(toastContainer);
  }

  const toast = document.createElement('div');
  toast.classList.add('toast', type);
  toast.textContent = message;
  // Basic Toast Style
  toast.style.background = type === 'error' ? '#ff4757' : '#2ed573';
  // toast.style.color = 'white';
  // toast.style.padding = '10px 20px';
  // toast.style.borderRadius = '5px';
  // toast.style.marginBottom = '10px';
  // toast.style.boxShadow = '0 2px 5px rgba(0,0,0,0.2)';

  toastContainer.appendChild(toast);

  setTimeout(() => {
    toast.remove();
  }, 3000);
}

function showPromotionDialog(gameid) {
  const dialog = document.getElementById('promotion-dialog');
  if (dialog) {
    dialog.style.display = 'flex';
    dialog.dataset.currentGameId = gameid;
  }
}

function hidePromotionDialog(enterLevel = false) {
  const dialog = document.getElementById('promotion-dialog');
  if (dialog) {
    const gameid = dialog.dataset.currentGameId;
    dialog.style.display = 'none';
    if (enterLevel && gameid) {
      enterGame(gameid);
    }
  }
}

function initPromotionDialog() {
  const closeButton = document.querySelector('.u-btn-promotion-close');
  if (closeButton) {
    closeButton.addEventListener('click', function () {
      hidePromotionDialog(true);
    });
  }

  const closeIcon = document.querySelector('.u-icon-promotion-close');
  if (closeIcon) {
    closeIcon.addEventListener('click', function () {
      hidePromotionDialog(false);
    });
  }
}

function setQRCodeImage() {
  const qrcodeUrl = sessionStorage.getItem('qrcode_url');
  // Target the new modal structure
  const qrcodeElement = document.querySelector('#carousel_ac25 .modal-qr');
  if (qrcodeElement) {
    if (qrcodeElement.tagName === 'IMG') {
      qrcodeElement.src = qrcodeUrl || '../images/modal-activate-qr.png';
    } else {
      qrcodeElement.style.backgroundImage = `url("${qrcodeUrl || '../images/modal-activate-qr.png'}")`;
    }
  }
}

const initializePermissionCode = () => {
  const permissionCodeSendButton = document.getElementById('permissionCodeSendButton');
  const closeModal = document.getElementById('closeNoPermissionModal');

  if (!permissionCodeSendButton) return;

  permissionCodeSendButton.addEventListener('click', async (e) => {
    e.preventDefault();
    const permissionCode = document.getElementById('permissionCode').value.trim();
    const username = localStorage.getItem('username');
    permissionCodeSendButton.disabled = true;

    try {
      const result = await api.redeemActivationCode(permissionCode, username);
      if (result.success) {
        showMessage('success', '您已激活账号，即将刷新页面');
        const user_permission = result.user_permission;
        localStorage.setItem('permission', user_permission);
        if (closeModal) closeModal.click();
        document.getElementById('permissionCode').value = "";
        window.location.reload();
      } else {
        showMessage('error', result.message);
      }
    } catch (error) {
      console.error('Error activating account:', error);
      showMessage('error', '服务器错误，请稍后再试');
    } finally {
      permissionCodeSendButton.disabled = false;
    }
  });
};

const api = {
  async redeemActivationCode(code, username) {
    const response = await fetch(`${CONFIG.DataServerBaseUrl}/api/redeem_activation_code/`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      credentials: 'include',
      body: JSON.stringify({ code, username })
    });
    return await response.json();
  }
};

// Tooltip logic adapted for new UI
function addLockedTooltip(listItem, titleText) {
  removeLockedTooltip(listItem);
  const imageElement = listItem.querySelector('.level-bg'); // Target the image
  if (!imageElement || !titleText) return;

  const tooltip = document.createElement('div');
  tooltip.className = 'locked-tooltip'; // Make sure this class is defined in CSS or add inline styles
  tooltip.textContent = titleText;
  tooltip.style.position = 'fixed';
  tooltip.style.background = 'rgba(0,0,0,0.8)';
  tooltip.style.color = 'white';
  tooltip.style.padding = '5px 10px';
  tooltip.style.borderRadius = '4px';
  tooltip.style.pointerEvents = 'none';
  tooltip.style.fontSize = '12px';
  tooltip.style.zIndex = '10000';
  tooltip.style.display = 'none';

  document.body.appendChild(tooltip);

  const mouseEnterHandler = () => {
    const rect = listItem.getBoundingClientRect(); // Tooltip relative to ITEM, not just image
    tooltip.style.left = (rect.left + rect.width / 2) + 'px';
    tooltip.style.top = (rect.top - 30) + 'px';
    tooltip.style.transform = 'translateX(-50%)';
    tooltip.style.display = 'block';
  };

  const mouseLeaveHandler = () => {
    tooltip.style.display = 'none';
  };

  listItem.addEventListener('mouseenter', mouseEnterHandler);
  listItem.addEventListener('mouseleave', mouseLeaveHandler);

  listItem._tooltipHandlers = {
    mouseEnter: mouseEnterHandler,
    mouseLeave: mouseLeaveHandler,
    tooltip: tooltip
  };
}

function removeLockedTooltip(listItem) {
  if (!listItem || !listItem._tooltipHandlers) return;
  const handlers = listItem._tooltipHandlers;
  listItem.removeEventListener('mouseenter', handlers.mouseEnter);
  listItem.removeEventListener('mouseleave', handlers.mouseLeave);
  if (handlers.tooltip && handlers.tooltip.parentNode) {
    handlers.tooltip.parentNode.removeChild(handlers.tooltip);
  }
  delete listItem._tooltipHandlers;
}

// Helper to reset items to skeleton state
function resetLevelItems() {
  // 必须清空缓存的当前关卡数据，防止在数据未加载完成时，用户点击使用了上一个Level的数据判断
  currentProcessedLevelData = [];

  const listItems = document.querySelectorAll('.levels-row .level-item');
  listItems.forEach(li => {
    // 1. 重置为显示状态，因为我们要显示Skeleton
    li.style.display = 'flex';

    // 2. 也是最重要的，重置为包含 "locked" 样式
    const btn = li.querySelector('.level-btn');
    if (btn) {
      btn.classList.add('locked');
      btn.classList.remove('unlocked');
    }

    // 3. 重置图标
    const imgEl = li.querySelector('.level-bg');
    if (imgEl) {
      imgEl.src = 'images/level_btn_locked.png';
    }

    // 4. 清空数字
    const numEl = li.querySelector('.level-number');
    if (numEl) numEl.textContent = '';

    // 5. 清空标题
    const titleEl = li.querySelector('.level-title');
    if (titleEl) titleEl.textContent = '';

    // 6. 隐藏进度条
    const shapeGray = li.querySelector('.u-grey-5');
    if (shapeGray) shapeGray.style.display = 'none';
  });
}