'use strict';

// === TITLE SCREEN ===

function renderTitleScreen(container) {
  container.innerHTML = '';
  container.style.background = 'linear-gradient(180deg, #1a0a00 0%, #2d1810 50%, #1a0a00 100%)';

  const title = document.createElement('div');
  title.className = 'menu-title';
  title.textContent = 'ZELDA DUNGEON QUEST';
  title.style.fontSize = '28px';
  container.appendChild(title);

  const subtitle = document.createElement('div');
  subtitle.className = 'menu-subtitle';
  subtitle.textContent = '100 Dungeons  \u00B7  22 Enemies  \u00B7  12 Weapons';
  container.appendChild(subtitle);

  // Decorative sword
  const swordDiv = document.createElement('div');
  swordDiv.style.cssText = 'margin: 10px 0 20px; font-size: 24px; color: #C0C0C0;';
  swordDiv.textContent = '\u2694';
  container.appendChild(swordDiv);

  // Menu buttons
  const buttonsContainer = document.createElement('div');
  buttonsContainer.style.cssText = 'display: flex; flex-direction: column; align-items: center; gap: 6px;';

  const startBtn = createMenuButton('Start Adventure', 0);
  startBtn.addEventListener('click', () => { switchScreen(SCREEN_DUNGEON_SELECT); });
  buttonsContainer.appendChild(startBtn);

  const controlsBtn = createMenuButton('Controls', 1);
  const controlsDiv = document.createElement('div');
  controlsDiv.style.cssText = 'display: none; font-family: monospace; font-size: 11px; color: #AAA; background: rgba(0,0,0,0.7); border: 1px solid #555; padding: 10px 14px; margin: 8px 0; max-width: 360px; text-align: left; line-height: 1.6;';
  controlsDiv.innerHTML = `
    <span style="color:#FFD700">Movement:</span> Arrow Keys / WASD<br>
    <span style="color:#FFD700">Attack:</span> Space / Z<br>
    <span style="color:#FFD700">Interact:</span> E / Enter<br>
    <span style="color:#FFD700">Switch Weapon:</span> X<br>
    <span style="color:#FFD700">Use Potion:</span> R<br>
    <span style="color:#FFD700">Place Bomb:</span> B<br>
    <span style="color:#FFD700">Menu/Inventory:</span> I<br>
    <span style="color:#FFD700">Back:</span> Escape / Q<br>
    <span style="color:#FFD700">Debug:</span> F1 (overlay) F2 (skip) F3 (god) F4 (spawn)
  `;
  controlsBtn.addEventListener('click', () => {
    controlsDiv.style.display = controlsDiv.style.display === 'none' ? 'block' : 'none';
  });
  buttonsContainer.appendChild(controlsBtn);
  buttonsContainer.appendChild(controlsDiv);

  container.appendChild(buttonsContainer);

  // Save info
  const summary = getSaveSummary();
  const lastDungeon = saveData.completedDungeons.length > 0
    ? saveData.completedDungeons[saveData.completedDungeons.length - 1] + 1
    : 0;
  if (summary.dungeonsCompleted > 0) {
    const saveInfo = document.createElement('div');
    saveInfo.className = 'menu-subtitle';
    saveInfo.style.marginTop = '15px';
    saveInfo.style.fontSize = '12px';
    saveInfo.textContent = `Progress: ${summary.dungeonsCompleted}/100 dungeons  \u00B7  ${summary.enemiesDefeated} enemies slain`;
    container.appendChild(saveInfo);

    const resumeBtn = createMenuButton('Resume', 2);
    if (lastDungeon < DUNGEONS.length) {
      resumeBtn.addEventListener('click', () => {
        gameState.currentDungeon = lastDungeon;
        gameState.currentRoomIdx = 0;
        gameState.dungeonRooms = generateDungeon(DUNGEONS[lastDungeon]);
        resetPlayer();
        // Restore saved weapons
        for (const wName of saveData.weapons) {
          const wDef = WEAPONS.find(w => w.name === wName);
          if (wDef && !gameState.player.weapons.find(w => w.name === wName)) {
            gameState.player.weapons.push({ ...wDef });
          }
        }
        if (gameState.player.weapons.length > 0 && !gameState.player.activeWeapon) {
          gameState.player.activeWeapon = gameState.player.weapons[0];
        }
        switchScreen(SCREEN_PLAYING);
      });
      container.appendChild(resumeBtn);
    }
  }

  // Keyboard navigation for title screen
  let selectedIndex = 0;
  const allButtons = [startBtn];
  if (summary.dungeonsCompleted > 0 && lastDungeon < DUNGEONS.length) allButtons.unshift(
    document.querySelector('.menu-button[data-index="2"]')
  );

  container.addEventListener('keydown', (e) => {
    if (e.code === 'ArrowDown' || e.code === 'KeyS') {
      e.preventDefault();
      allButtons[selectedIndex].classList.remove('selected');
      selectedIndex = (selectedIndex + 1) % allButtons.length;
      allButtons[selectedIndex].classList.add('selected');
    }
    if (e.code === 'ArrowUp' || e.code === 'KeyW') {
      e.preventDefault();
      allButtons[selectedIndex].classList.remove('selected');
      selectedIndex = (selectedIndex - 1 + allButtons.length) % allButtons.length;
      allButtons[selectedIndex].classList.add('selected');
    }
    if (e.code === 'Enter' || e.code === 'Space') {
      e.preventDefault();
      allButtons[selectedIndex].click();
    }
  });

  allButtons[0].classList.add('selected');
}

function createMenuButton(text, index) {
  const btn = document.createElement('button');
  btn.className = 'menu-button';
  btn.textContent = text;
  btn.dataset.index = index;
  return btn;
}

if (typeof module !== 'undefined' && module.exports) {
  module.exports = { renderTitleScreen, createMenuButton };
}