'use strict';

// === INVENTORY / HUD OVERLAY ===

function renderInventoryOverlay(container, state) {
  container.innerHTML = '';
  container.style.background = 'rgba(0,0,0,0.85)';

  const title = document.createElement('div');
  title.className = 'menu-title';
  title.textContent = 'INVENTORY';
  title.style.fontSize = '24px';
  container.appendChild(title);

  // Weapons
  const weaponsDiv = document.createElement('div');
  weaponsDiv.style.cssText = 'font-family: monospace; font-size: 12px; color: #CCC; margin: 8px 0; max-width: 400px;';
  weaponsDiv.innerHTML = '<div style="color:#FFD700; margin-bottom:4px;">WEAPONS</div>';
  if (state.player.weapons.length === 0) {
    weaponsDiv.innerHTML += '<div style="color:#666;">No weapons</div>';
  } else {
    for (const w of state.player.weapons) {
      const isActive = w === state.player.activeWeapon;
      const line = document.createElement('div');
      line.style.cssText = `color: ${isActive ? '#FFD700' : '#AAA'}; padding: 2px 0;`;
      line.textContent = `${isActive ? '> ' : '  '}${w.name} (DMG:${w.damage})`;
      weaponsDiv.appendChild(line);
    }
  }
  container.appendChild(weaponsDiv);

  // Items
  const itemsDiv = document.createElement('div');
  itemsDiv.style.cssText = 'font-family: monospace; font-size: 12px; color: #CCC; margin: 8px 0; max-width: 400px;';
  itemsDiv.innerHTML = '<div style="color:#FFD700; margin-bottom:4px;">ITEMS</div>';
  if (state.player.items.length === 0) {
    itemsDiv.innerHTML += '<div style="color:#666;">No items</div>';
  } else {
    for (const item of state.player.items) {
      const def = ITEMS.find(i => i.id === item.id);
      const line = document.createElement('div');
      line.style.cssText = 'color: #90EE90; padding: 2px 0;';
      line.textContent = `${def ? def.name : item.id}${(item.count || 1) > 1 ? ` x${item.count}` : ''}`;
      itemsDiv.appendChild(line);
    }
  }
  container.appendChild(itemsDiv);

  // Resources
  const resourcesDiv = document.createElement('div');
  resourcesDiv.style.cssText = 'font-family: monospace; font-size: 12px; color: #CCC; margin: 8px 0; max-width: 400px;';
  resourcesDiv.innerHTML = `
    <div style="color:#FFD700; margin-bottom:4px;">RESOURCES</div>
    <div>Arrows: ${state.player.arrows}</div>
    <div>Bombs: ${state.player.bombs}</div>
    <div>Keys: ${state.player.keys}</div>
  `;
  container.appendChild(resourcesDiv);

  // Stats
  const statsDiv = document.createElement('div');
  statsDiv.style.cssText = 'font-family: monospace; font-size: 11px; color: #888; margin-top: 10px; max-width: 400px; text-align: center;';
  statsDiv.textContent = `Dungeons: ${state.dungeonsCompleted}  Rooms: ${state.roomsCleared}  Enemies: ${state.enemiesDefeated}`;
  container.appendChild(statsDiv);

  // Controls hint
  const hint = document.createElement('div');
  hint.style.cssText = 'font-family: monospace; font-size: 11px; color: #666; margin-top: 10px; text-align: center;';
  hint.textContent = 'X: Switch Weapon  R: Use Potion  I/Escape: Close';
  container.appendChild(hint);
}

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