'use strict';

// === DUNGEON SELECT SCREEN ===

function renderDungeonSelect(container, save, onSelected) {
  container.innerHTML = '';
  container.style.background = 'linear-gradient(180deg, #0a0a1a 0%, #1a1a2d 50%, #0a0a1a 100%)';

  const title = document.createElement('div');
  title.className = 'menu-title';
  title.textContent = 'SELECT DUNGEON';
  container.appendChild(title);

  // Filter tabs
  const filterContainer = document.createElement('div');
  filterContainer.className = 'filter-tabs';
  filterContainer.style.pointerEvents = 'auto';

  const themeNames = ['All', ...Object.keys(THEMES)];
  let activeFilter = 'all';

  for (const theme of themeNames) {
    const tab = document.createElement('button');
    tab.className = 'filter-tab' + (theme === 'All' ? ' active' : '');
    tab.textContent = theme === 'All' ? 'All' : theme;
    tab.dataset.theme = theme === 'All' ? 'all' : theme.toLowerCase();
    tab.addEventListener('click', () => {
      filterContainer.querySelectorAll('.filter-tab').forEach(t => t.classList.remove('active'));
      tab.classList.add('active');
      activeFilter = tab.dataset.theme;
      renderGrid(activeFilter);
    });
    filterContainer.appendChild(tab);
  }
  container.appendChild(filterContainer);

  // Dungeon grid
  const grid = document.createElement('div');
  grid.className = 'dungeon-grid';
  grid.id = 'dungeon-grid';

  function renderGrid(filter) {
    grid.innerHTML = '';
    const filtered = filter === 'all'
      ? DUNGEONS.map((d, i) => ({ ...d, idx: i }))
      : DUNGEONS.map((d, i) => ({ ...d, idx: i })).filter(d => d.theme === filter);

    for (const dungeon of filtered) {
      const cell = document.createElement('div');
      cell.className = 'dungeon-cell';
      const themeData = THEMES[dungeon.theme];
      cell.style.background = themeData ? themeData.cellColor || '#333' : '#333';
      cell.style.color = themeData ? themeData.cellTextColor || '#FFF' : '#FFF';
      cell.textContent = dungeon.idx + 1;
      cell.dataset.idx = dungeon.idx;

      const unlocked = isDungeonUnlocked(dungeon.idx);
      const completed = isDungeonCompleted(dungeon.idx);

      if (!unlocked) cell.classList.add('locked');
      if (completed) cell.classList.add('completed');

      if (unlocked) {
        cell.addEventListener('click', () => {
          grid.querySelectorAll('.dungeon-cell').forEach(c => c.classList.remove('selected'));
          cell.classList.add('selected');
          showInfoPanel(dungeon);
        });
        cell.addEventListener('dblclick', () => {
          if (unlocked) onSelected(dungeon.idx);
        });
      }

      grid.appendChild(cell);
    }
  }
  renderGrid('all');
  container.appendChild(grid);

  // Info panel
  const infoPanel = document.createElement('div');
  infoPanel.className = 'info-panel';
  infoPanel.id = 'info-panel';
  infoPanel.style.display = 'none';
  container.appendChild(infoPanel);

  function showInfoPanel(dungeon) {
    infoPanel.style.display = 'block';
    const themeData = THEMES[dungeon.theme] || {};
    infoPanel.innerHTML = `
      <div class="name">${dungeon.name}</div>
      <div class="theme">Theme: ${dungeon.theme}</div>
      <div class="difficulty">Difficulty: ${'★'.repeat(dungeon.difficulty)}${'☆'.repeat(10 - dungeon.difficulty)}</div>
      <div class="rooms">Rooms: ${dungeon.roomCount}</div>
      ${dungeon.requiredWeapon ? `<div style="color:#FF6347">Requires: ${dungeon.requiredWeapon}</div>` : ''}
      <div style="margin-top:4px; color:#AAA">${dungeon.description || ''}</div>
      <div style="margin-top:6px; color:#888">Double-click to enter</div>
    `;
  }

  // Enter button
  const enterBtn = document.createElement('button');
  enterBtn.className = 'menu-button';
  enterBtn.textContent = 'Enter Dungeon';
  enterBtn.id = 'enter-btn';
  enterBtn.style.marginTop = '10px';
  enterBtn.style.display = 'none';
  enterBtn.addEventListener('click', () => {
    const selected = grid.querySelector('.dungeon-cell.selected');
    if (selected && !selected.classList.contains('locked')) {
      onSelected(parseInt(selected.dataset.idx));
    }
  });
  container.appendChild(enterBtn);

  // Back button
  const backBtn = document.createElement('button');
  backBtn.className = 'menu-button';
  backBtn.textContent = 'Back';
  backBtn.style.marginTop = '6px';
  backBtn.addEventListener('click', () => { switchScreen(SCREEN_TITLE); });
  container.appendChild(backBtn);

  // Listen for cell selection to show enter button
  const origRenderGrid = renderGrid;
  grid.addEventListener('click', () => {
    const selected = grid.querySelector('.dungeon-cell.selected');
    enterBtn.style.display = selected && !selected.classList.contains('locked') ? 'block' : 'none';
  });

  // Keyboard navigation
  let selectedCell = null;
  container.addEventListener('keydown', (e) => {
    const cells = [...grid.querySelectorAll('.dungeon-cell:not(.locked)')];
    if (!cells.length) return;

    if (!selectedCell) {
      selectedCell = cells[0];
      selectedCell.classList.add('selected');
      const idx = parseInt(selectedCell.dataset.idx);
      showInfoPanel(DUNGEONS[idx]);
      enterBtn.style.display = 'block';
      return;
    }

    const idx = cells.indexOf(selectedCell);

    if (e.code === 'ArrowRight' || e.code === 'KeyD') {
      e.preventDefault();
      selectedCell.classList.remove('selected');
      selectedCell = cells[Math.min(idx + 1, cells.length - 1)];
      selectedCell.classList.add('selected');
      const i = parseInt(selectedCell.dataset.idx);
      showInfoPanel(DUNGEONS[i]);
    }
    if (e.code === 'ArrowLeft' || e.code === 'KeyA') {
      e.preventDefault();
      selectedCell.classList.remove('selected');
      selectedCell = cells[Math.max(idx - 1, 0)];
      selectedCell.classList.add('selected');
      const i = parseInt(selectedCell.dataset.idx);
      showInfoPanel(DUNGEONS[i]);
    }
    if (e.code === 'ArrowDown' || e.code === 'KeyS') {
      e.preventDefault();
      selectedCell.classList.remove('selected');
      selectedCell = cells[Math.min(idx + 10, cells.length - 1)];
      selectedCell.classList.add('selected');
      const i = parseInt(selectedCell.dataset.idx);
      showInfoPanel(DUNGEONS[i]);
    }
    if (e.code === 'ArrowUp' || e.code === 'KeyW') {
      e.preventDefault();
      selectedCell.classList.remove('selected');
      selectedCell = cells[Math.max(idx - 10, 0)];
      selectedCell.classList.add('selected');
      const i = parseInt(selectedCell.dataset.idx);
      showInfoPanel(DUNGEONS[i]);
    }
    if (e.code === 'Enter' || e.code === 'Space') {
      e.preventDefault();
      if (selectedCell && !selectedCell.classList.contains('locked')) {
        onSelected(parseInt(selectedCell.dataset.idx));
      }
    }
    if (e.code === 'Escape' || e.code === 'KeyQ') {
      e.preventDefault();
      switchScreen(SCREEN_TITLE);
    }
  });
}

if (typeof module !== 'undefined' && module.exports) {
  module.exports = { renderDungeonSelect };
}