// Simple audio utility
function playSound(soundFile) {
    try {
        const audio = new Audio(`assets/sounds/${soundFile}`);
        audio.volume = 0.3;
        audio.play().catch(e => {}); // Silently fail if no audio
    } catch (e) {
        // Silently fail if audio not available
    }
}

export function showDamageNumber(damage, target, isPlayer = false) {
  const targetElement = isPlayer ?
    document.querySelector('.player-battle-zone') :
    document.querySelector('.enemy-battle-zone');

  if (!targetElement) return;

  const damageNumber = document.createElement('div');
  damageNumber.className = 'damage-number';
  damageNumber.textContent = damage;


  const rect = targetElement.getBoundingClientRect();
  damageNumber.style.left = `${rect.left + rect.width / 2}px`;
  damageNumber.style.top = `${rect.top + rect.height / 2}px`;

  document.body.appendChild(damageNumber);


  requestAnimationFrame(() => {
    damageNumber.classList.add('damage-number-animate');
  });


  setTimeout(() => {
    if (damageNumber.parentNode) {
      damageNumber.parentNode.removeChild(damageNumber);
    }
  }, 1000);
}

export async function renderBattle(root) {
    const app = root.app;
    const p = root.player, e = root.enemy;


  const { ENEMIES } = await import("../data/enemies.js");
  const enemyData = ENEMIES[e.id];
  const backgroundImage = enemyData?.background || null;


    const intentInfo = {
    attack: { emoji: '', text: `Will attack for ${e.intent.value} damage`, color: 'danger' },
    block: { emoji: '', text: `Will gain ${e.intent.value} block`, color: 'info' },
    debuff: { emoji: '', text: 'Will apply a debuff', color: 'warning' }
  }[e.intent.type] || { emoji: '', text: 'Unknown intent', color: 'neutral' };

    app.innerHTML = `
    <div class="battle-scene">

      <div class="battle-background">
        <div class="bg-particles"></div>
        <div class="bg-glow"></div>
      </div>

      <div class="battle-arena" ${backgroundImage ? `style="background-image: url('${backgroundImage}'); background-size: cover; background-position: center; background-repeat: no-repeat;"` : ''}>
      
      <div class="enemy-battle-zone">
        <div class="enemy-container">

          <div class="enemy-character">
            <div class="enemy-sprite">
              <div class="enemy-avatar">${getEnemyArt(e.id, ENEMIES)}</div>
              <div class="enemy-shadow"></div>
              ${e.block > 0 ? `<div class="shield-effect"><img src="assets/card-art/shield.png" alt="Shield" class="shield-effect-img"></div>` : ''}
              ${e.weak > 0 ? `<div class="debuff-effect"><img src="assets/card-art/heart_damaged.png" alt="Weak" class="debuff-effect-img"></div>` : ''}
            </div>
          </div>


          <div class="enemy-ui-panel">
            <div class="enemy-nameplate">
              <h2 class="enemy-title">${e.name}</h2>
              <div class="enemy-level">${getEnemyType(e.id)}</div>
    </div>
            <div class="enemy-health-section">
              <div class="health-bar-container">
                <div class="health-bar enemy-health">
                  <div class="health-fill" style="width: ${(e.hp / e.maxHp) * 100}%"></div>
                  <div class="health-text">${e.hp} / ${e.maxHp}</div>
                  <div class="health-glow"></div>
                </div>
              </div>
              ${e.block > 0 ? `
                <div class="status-effect block-status">
                  <img src="assets/card-art/shield.png" alt="Block" class="status-icon-img">
                  <span class="status-value">${e.block}</span>
                  <span class="status-label">Block</span>
                </div>
              ` : ''}
            </div>

            <div class="intent-panel intent-${intentInfo.color}">
              <div class="intent-header">
                <span class="intent-label">Next Action</span>
              </div>
              <div class="intent-content">
                <div class="intent-icon-large">${intentInfo.emoji}</div>
                <div class="intent-description">${intentInfo.text}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="player-battle-zone">
        <div class="player-container">

          <div class="player-character">
            <div class="player-sprite">
              <div class="player-avatar">
                <img src="assets/prime.webp" alt="Prime" class="player-avatar-img" />
              </div>
              <div class="player-shadow"></div>
              ${p.block > 0 ? `<div class="shield-effect"><img src="assets/card-art/shield.png" alt="Shield" class="shield-effect-img"></div>` : ''}
              ${p.weak > 0 ? `<div class="debuff-effect"><img src="assets/card-art/heart_damaged.png" alt="Weak" class="debuff-effect-img"></div>` : ''}
            </div>
          </div>


          <div class="player-ui-panel">
            <div class="player-nameplate">
              <h2 class="player-title">ThePrimeagen</h2>
              <div class="player-level">PLAYER</div>
            </div>

            <div class="player-health-section">
              <div class="health-bar-container">
                <div class="health-bar player-health">
                  <div class="health-fill" style="width: ${(p.hp / p.maxHp) * 100}%"></div>
                  <div class="health-text">${p.hp} / ${p.maxHp}</div>
                  <div class="health-glow"></div>
                </div>
              </div>
              ${p.block > 0 ? `
                <div class="status-effect block-status">
                  <img src="assets/card-art/shield.png" alt="Block" class="status-icon-img">
                  <span class="status-value">${p.block}</span>
                  <span class="status-label">Block</span>
                </div>
              ` : ''}
              ${p.weak > 0 ? `
                <div class="status-effect weak-status">
                  <img src="assets/card-art/heart_damaged.png" alt="Weak" class="status-icon-img">
                  <span class="status-value">${p.weak}</span>
                  <span class="status-label">Weak</span>
                </div>
              ` : ''}
            </div>

            <div class="player-energy-section">
              <div class="energy-display">
                <span class="energy-label">⚡</span>
                <div class="energy-orbs">
                  ${Array.from({ length: p.maxEnergy }, (_, i) =>
    `<div class="energy-orb ${i < p.energy ? 'active' : 'inactive'}"></div>`
  ).join('')}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      </div>

      <div class="battle-action-zone">
        <div class="hand-area">
          <div class="hand-header">
            <div class="deck-counters">
            </div>
          </div>
          
          <div class="cards-battlefield">
            ${p.hand.length === 0 ? 
              '<div class="no-cards-message">🎴 No cards in hand - End turn to draw new cards</div>' :
              p.hand.map((card, i) => {
                const canPlay = p.energy >= card.cost;
                const cardType = card.type === 'attack' ? 'attack' : card.type === 'skill' ? 'skill' : 'power';
                return `
                  <div class="battle-card ${cardType} ${!canPlay ? 'unplayable' : 'playable'}" data-play="${i}">
                    <div class="card-glow"></div>
                    <div class="card-frame">
                      <div class="card-header-row">
                        <div class="card-title">${card.name}</div>
                        <div class="card-cost-orb ${!canPlay ? 'insufficient' : ''}">${card.cost}</div>
                      </div>
                      
                      <div class="card-artwork">
                        <div class="card-art-icon">${getCardArt(card.id)}</div>
                        <div class="card-type-badge ${cardType}">${card.type}</div>
                      </div>
                      
                      <div class="card-description-box">
                        <div class="card-text">${card.text}</div>
                      </div>
                    </div>
                    ${!canPlay ? `<div class="card-disabled-overlay"><span>Need ${card.cost} energy</span></div>` : ''}
                  </div>
                `;
              }).join('')
            }
          </div>

          <div class="hand-controls">
            <button class="end-turn-btn" data-action="end">
              <span class="end-turn-text">End Turn</span>
              <span class="end-turn-hotkey">E</span>
          </button>
          </div>
        </div>


    </div>

      <div class="fight-log-panel">
        <div class="fight-log-header">
          <span class="fight-log-title">Combat Log</span>
        </div>
        <div class="fight-log-content" id="fight-log-content">
          ${root.logs.slice(-20).map(log => `<div class="log-entry">${log}</div>`).join('')}
        </div>
      </div>
    </div>
  `;

    app.querySelectorAll("[data-play]").forEach(btn => {
        btn.addEventListener("mouseenter", () => {
            if (btn.classList.contains('playable')) {
                playSound('swipe.mp3');
                root.selectedCardIndex = null;
                updateCardSelection(root);
            }
        });
        
        btn.addEventListener("click", () => {
            const index = parseInt(btn.dataset.play, 10);
            const card = p.hand[index];
            if (p.energy >= card.cost) {
                root.play(index);
                // Clear selection when card is played via mouse
                root.selectedCardIndex = null;
                updateCardSelection(root);
            }
        });
    });
    
    const endTurnBtn = app.querySelector("[data-action='end']");
    if (endTurnBtn) {

        endTurnBtn.addEventListener("click", () => {

            try {
                root.end();
            } catch (error) {
                console.error("Error ending turn:", error);
            }
        });
    }
    
    // Initialize card selection state if not exists
    if (!root.selectedCardIndex) {
        root.selectedCardIndex = null;
    }

    window.onkeydown = (e) => {
        if (e.key.toLowerCase() === "e") {
            try {
                root.end();
            } catch (error) {
                console.error("Error ending turn via keyboard:", error);
            }
        }
        
        const n = parseInt(e.key, 10);
        if (n >= 1 && n <= p.hand.length) {
            const cardIndex = n - 1;
            const card = p.hand[cardIndex];
            
            if (root.selectedCardIndex === cardIndex) {
                // Second press of same key - play the card
                if (p.energy >= card.cost) {
                    root.play(cardIndex);
                    root.selectedCardIndex = null; // Clear selection
                    updateCardSelection(root);
                }
            } else {
                // First press or different key - select the card
                root.selectedCardIndex = cardIndex;
                updateCardSelection(root);
                playSound('swipe.mp3'); // Play swipe sound on keyboard selection
            }
        }
    };

  // Auto-scroll fight log to bottom
  const logContent = document.getElementById('fight-log-content');
  if (logContent) {
    logContent.scrollTop = logContent.scrollHeight;
    }
    
    // Apply initial card selection visual state
    updateCardSelection(root);
}

export async function renderMap(root) {
    const { CARDS } = await import("../data/cards.js");
    const { ENEMIES } = await import("../data/enemies.js");
    const m = root.map;
    const currentId = root.nodeId;

  const currentNode = m.nodes.find(n => n.id === currentId);
  const nextIds = currentNode ? currentNode.next : [];

    const getNodeEmoji = (kind) => {
        const emojis = {
      start: '<img src="assets/card-art/staff.png" alt="Start" class="node-icon-img">',
      battle: '<img src="assets/card-art/crossed_swords.png" alt="Battle" class="node-icon-img">',
      elite: '<img src="assets/card-art/crown.png" alt="Battle" class="node-icon-img">',
      boss: '<img src="assets/card-art/skull.png" alt="Boss" class="node-icon-img">',
      rest: '<img src="assets/card-art/potion_heal.png" alt="Rest" class="node-icon-img">',
      shop: '<img src="assets/card-art/diamond.png" alt="Shop" class="node-icon-img">',
      event: '<img src="assets/card-art/crystal_cluster.png" alt="Event" class="node-icon-img">'
        };
        return emojis[kind] || '❓';
    };

    const getNodeDescription = (node) => {
    switch (node.kind) {
            case 'start':
        return '<strong>Starting Point</strong>\nBegin your journey up ThePrimeagen Spire';
            case 'battle':
                const enemy = ENEMIES[node.enemy];
        return `<strong>Battle</strong>\nFight: ${enemy?.name || 'Unknown Enemy'}\nHP: ${enemy?.maxHp || '?'}`;
            case 'elite':
                const elite = ENEMIES[node.enemy];
        return `<strong>Elite Battle</strong>\nFight: ${elite?.name || 'Unknown Elite'}\nHP: ${elite?.maxHp || '?'}\nTough enemy with better rewards`;
            case 'boss':
                const boss = ENEMIES[node.enemy];
        return `<strong>Boss Battle</strong>\nFight: ${boss?.name || 'Unknown Boss'}\nHP: ${boss?.maxHp || '?'}\nFinal challenge of the act`;
            case 'rest':
        return '<strong>Rest Site</strong>\nHeal up to 30% max HP\nor upgrade a card';
            case 'shop':
        return '<strong>Shop</strong>\nSpend your hard-earned gold';
            case 'event':
        return '<strong>Random Event</strong>\nBirthday-themed encounter\nUnknown outcome\nPotential rewards or challenges';
            default:
        return '<strong>Unknown</strong>\nMysterious node';
        }
    };

    const getNodeTooltipData = (node) => {
        const description = getNodeDescription(node);
        let avatarPath = null;
        
        if (['battle', 'elite', 'boss'].includes(node.kind) && node.enemy) {
            const enemy = ENEMIES[node.enemy];
            if (enemy?.avatar) {
                avatarPath = enemy.avatar;
            }
        }
        
        return { description, avatarPath };
    };

    root.app.innerHTML = `
    <div class="map-screen">
      <div class="map-header-section">
        <div class="game-logo">
          <svg width="600" height="240" viewBox="0 0 600 240" xmlns="http://www.w3.org/2000/svg">
            <defs>

              <linearGradient id="textGradient" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" style="stop-color:#ffd700;stop-opacity:1" />
                <stop offset="100%" style="stop-color:#ff8c00;stop-opacity:1" />
              </linearGradient>

              <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
                <feGaussianBlur stdDeviation="2" result="coloredBlur"/>
                <feMerge>
                  <feMergeNode in="coloredBlur"/>
                  <feMergeNode in="SourceGraphic"/>
                </feMerge>
              </filter>

              <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
                <feGaussianBlur in="SourceAlpha" stdDeviation="1"/>
                <feOffset dx="1" dy="1" result="offsetblur"/>
                <feComponentTransfer>
                  <feFuncA type="linear" slope="0.3"/>
                </feComponentTransfer>
                <feMerge>
                  <feMergeNode/>
                  <feMergeNode in="SourceGraphic"/>
                </feMerge>
              </filter>
            </defs>

            <text x="300" y="80" text-anchor="middle" font-family="'Kreon', serif" font-size="55" font-weight="700" fill="url(#textGradient)" filter="url(#glow)">
              ThePrimeagen
            </text>

            <text x="300" y="170" text-anchor="middle" font-family="'Kreon', serif" font-size="85" font-weight="700" fill="url(#textGradient)" filter="url(#shadow) url(#glow)">
              Spire
            </text>
          </svg>
        </div>
      </div>
      
      <div class="player-status">
        <div class="status-item">
          <img src="assets/card-art/heart.png" alt="Health" class="status-icon-img">
          <div class="hp-bar player-hp" style="width: 80px;">
            <div class="hp-fill" style="width: ${(root.player.hp / root.player.maxHp) * 100}%"></div>
            <span class="hp-text">${root.player.hp}/${root.player.maxHp}</span>
          </div>
        </div>
        <div class="status-item">
          <img src="assets/card-art/bag_of_gold.png" alt="Gold" class="status-icon-img">
          <span class="status-value">${root.player.gold || 0}</span>
        </div>
        <div class="status-item">
          <img src="assets/card-art/book.png" alt="Deck" class="status-icon-img">
          <span class="status-value">${root.player.deck.length} cards</span>
        </div>
        ${root.relicStates.length > 0 ? `
        <div class="status-item relics-status">
          <img src="assets/card-art/runestone.png" alt="Relics" class="status-icon-img">
          <div class="relics-inline">
            ${root.relicStates.map(r => `
              <div class="relic-inline" title="${getRelicText(r.id)}">
                ${getRelicEmoji(r.id)}
              </div>
            `).join('')}
          </div>
        </div>
        ` : ''}
        <button class="btn-reset-status" data-reset>
          Start New Run
        </button>
      </div>


      <div class="main-content">
        <div class="map-section">

          <div class="welcome-panel">
            <div class="birthday-message">
              <h2>Happy Birthday Prime!</h2>
              <p>With coffee in hand and code on your side,<br>
ThePrimeagen Spire’s a treacherous ride.  <br>
Gremlins await and errors conspire,  <br>
But cake lies ahead at the top of the Spire. </p>
            </div>
            
            <div class="map-instructions">
              <h3>How to Navigate the Spire</h3>
              <ul>
                <li><strong>Click a node</strong> to climb the way</li>
                <li><strong>Choose your battles</strong> night or day</li>
                <li><strong>Rest at fires</strong>, heal or train</li>
                <li><strong>Each new card</strong> will grow your gain. </li>
                <li><strong>At the summit</strong> face the fight</li>
                <li><strong>Defeat the boss</strong>, win the night</li>
              </ul>
              
              <div class="birthday-wish">
                <p><em>May your code be bug-free and your coffee stay hot,  
May this birthday bring joy in each moment you’ve got.  </em></p>
              </div>
            </div>
          </div>
          
          <div class="spire-map">

          <div class="map-legend-overlay">
            <div class="legend-title">Legend</div>
            <div class="legend-item"><img src="assets/card-art/potion_heal.png" alt="Rest" class="legend-icon-img"> Rest</div>
            <div class="legend-item"><img src="assets/card-art/crossed_swords.png" alt="Battle" class="legend-icon-img"> Enemy</div>
            <div class="legend-item"><img src="assets/card-art/crown.png" alt="Battle" class="legend-icon-img"> Elite</div>
            <div class="legend-item"><img src="assets/card-art/skull.png" alt="Battle" class="legend-icon-img"> Boss</div>
            <div class="legend-item"><img src="assets/card-art/crystal_cluster.png" alt="Event" class="legend-icon-img"> Events</div>
            <div class="legend-item"><img src="assets/card-art/diamond.png" alt="Shop" class="legend-icon-img"> Shop</div>
          </div>
          <svg class="spire-paths" viewBox="0 0 1000 800" preserveAspectRatio="xMidYMid meet">

            ${(() => {

              const nodePositions = {
                'n1': { x: 500, y: 720 },  // Start at bottom center - moved up slightly
                'n2': { x: 350, y: 650 },  // Battle - left branch - moved right and up
                'n3': { x: 650, y: 650 },  // Event - right branch - moved left and up
                'n4': { x: 500, y: 540 },  // Battle - converge - moved up slightly
                'n5': { x: 350, y: 400 },  // Rest - left
                'n6': { x: 650, y: 400 },  // Shop - right
                'n7': { x: 500, y: 300 },  // Battle - converge
                'n8': { x: 500, y: 130 },  // Elite
                'n9': { x: 500, y: 70 },   // Rest
                'n10': { x: 500, y: 20 }   // Boss at top
              };
              
              return m.nodes.map(node => {
                if (!node.next || node.next.length === 0) return '';
                
                return node.next.map(nextId => {
                  const fromPos = nodePositions[node.id];
                  const toPos = nodePositions[nextId];
                  if (!fromPos || !toPos) return '';
                  
                  const isActivePath = (node.id === currentId && nextIds.includes(nextId)) || 
                                     (parseInt(nextId.replace('n', '')) <= parseInt(currentId.replace('n', '')));
                  
                  return `<line x1="${fromPos.x}" y1="${fromPos.y}" x2="${toPos.x}" y2="${toPos.y}" 
                               class="spire-path ${isActivePath ? 'active' : ''}" 
                               stroke="${isActivePath ? '#8B7355' : '#4A3A2A'}" 
                               stroke-width="2" 
                               stroke-dasharray="8,4"
                               opacity="${isActivePath ? '1' : '0.6'}"/>`;
                }).join('');
              }).join('');
            })()}
          </svg>
          
          <div class="spire-nodes">
            ${(() => {

              const nodePositions = {
                'n1': { x: 500, y: 720 },
        'n2': { x: 360, y: 650 },
        'n3': { x: 630, y: 650 },
                'n4': { x: 500, y: 540 },
        'n5': { x: 360, y: 400 },
        'n6': { x: 630, y: 400 },
                'n7': { x: 500, y: 300 },
                'n8': { x: 500, y: 210 },
                'n9': { x: 500, y: 120 },
                'n10': { x: 500, y: 40 }
              };
              
              return m.nodes.map(n => {
                const isNext = nextIds.includes(n.id);
                const isCurrent = n.id === currentId;
        const isCompleted = root.completedNodes.includes(n.id);
                const locked = (!isNext && !isCurrent && !isCompleted);
                
                const pos = nodePositions[n.id];
                if (!pos) return '';

                const leftPercent = (pos.x / 1000) * 100;
                const topPercent = (pos.y / 800) * 100;
                const tooltipData = getNodeTooltipData(n);

                return `
                  <div class="spire-node ${isCurrent ? 'current' : ''} ${isNext ? 'available' : ''} ${isCompleted ? 'completed' : ''} ${locked ? 'locked' : ''}" 
                       style="left: ${leftPercent}%; top: ${topPercent}%; transform: translate(-50%, -50%);"
                       data-node="${isNext ? n.id : ''}"
                       data-tooltip="${tooltipData.description.replace(/\n/g, '<br>')}"
                       data-avatar="${tooltipData.avatarPath || ''}"
                       onmouseenter="showTooltip(event)" 
                       onmouseleave="hideTooltip()">
                    <div class="node-background ${n.kind}"></div>
                    <div class="node-content">
                      <div class="node-icon">${getNodeEmoji(n.kind)}</div>
                    </div>
                    ${isCurrent ? '<div class="current-indicator">★</div>' : ''}
                  </div>
                `;
              }).join('');
            })()}
          </div>
        </div>
      </div>

      <div class="deck-stack-container">
        <div class="deck-stack-header">
          <span class="deck-count">Your deck</span>
        </div>
        <div class="deck-stack" data-tooltip="Hover to view deck">
          ${Object.entries(
            root.player.deck.reduce((acc, cardId) => {
              acc[cardId] = (acc[cardId] || 0) + 1;
              return acc;
            }, {})
    ).map(([cardId, count], index) => {
            const card = CARDS[cardId];
            if (!card) return '';
            
            const cardType = card.type === 'attack' ? 'attack' : card.type === 'skill' ? 'skill' : 'power';
            
            return `
              <div class="deck-stack-card ${cardType}" style="--card-index: ${index}">
                  <div class="card-frame">
                    <div class="card-header-row">
                      <div class="card-title">${card.name}</div>
                      <div class="card-cost-orb">${card.cost}</div>
                    </div>
                    <div class="card-art">${getCardArt(cardId)}</div>
                  <div class="card-description-box">
                    <div class="card-text">${card.text}</div>
                  </div>
                    ${count > 1 ? `<div class="card-count-badge">×${count}</div>` : ''}
                </div>
              </div>
            `;
          }).join('')}
        </div>
        </div>
    </div>
      <div id="custom-tooltip" class="custom-tooltip"></div>

    </div>
  `;

    root.app.querySelectorAll("[data-node]").forEach(el => {
        if (!el.dataset.node) return;
        el.addEventListener("click", () => root.go(el.dataset.node));
    });

  window.showTooltip = function (event) {
        const tooltip = document.getElementById('custom-tooltip');
        const node = event.target.closest('.spire-node');
        const content = node.dataset.tooltip;
        const avatarPath = node.dataset.avatar;
        
        let tooltipHTML = '';
        if (avatarPath) {
            tooltipHTML = `
                <div class="tooltip-with-avatar">
                    <div class="tooltip-avatar">
                        <img src="${avatarPath}" alt="Enemy Avatar" class="tooltip-avatar-img" 
                             onerror="this.style.display='none';">
                    </div>
                    <div class="tooltip-content">${content}</div>
                </div>
            `;
        } else {
            tooltipHTML = content;
        }
        
        tooltip.innerHTML = tooltipHTML;
        tooltip.style.display = 'block';
        

        const rect = node.getBoundingClientRect();
        tooltip.style.left = (rect.right + 15) + 'px';
        tooltip.style.top = (rect.top + rect.height / 2 - tooltip.offsetHeight / 2) + 'px';
        

        const tooltipRect = tooltip.getBoundingClientRect();
        if (tooltipRect.right > window.innerWidth) {
            tooltip.style.left = (rect.left - tooltip.offsetWidth - 15) + 'px';
        }
        if (tooltipRect.top < 0) {
            tooltip.style.top = '10px';
        }
        if (tooltipRect.bottom > window.innerHeight) {
            tooltip.style.top = (window.innerHeight - tooltip.offsetHeight - 10) + 'px';
        }
    };

  window.hideTooltip = function () {
        const tooltip = document.getElementById('custom-tooltip');
        tooltip.style.display = 'none';
    };


    const resetBtn = root.app.querySelector("[data-reset]");
        resetBtn.addEventListener("click", () => {
                    root.clearSave();
                    root.reset();
        });
}

export function renderReward(root, choices) {
    root.app.innerHTML = `
    <div class="reward-screen">
      <h1>Choose a Card</h1>
      <div class="reward-cards-container">
        ${choices.map((c, idx) => {
    const cardType = c.type === 'attack' ? 'attack' : c.type === 'skill' ? 'skill' : 'power';
    return `
            <div class="reward-card-wrapper" data-pick="${idx}">
              <div class="battle-card ${cardType} reward-card">
                <div class="card-glow"></div>
                <div class="card-frame">
                  <div class="card-header-row">
                    <div class="card-title">${c.name}</div>
                    <div class="card-cost-orb">${c.cost}</div>
    </div>
                  
                  <div class="card-artwork">
                    <div class="card-art-icon">${getCardArt(c.id)}</div>
                    <div class="card-type-badge ${cardType}">${c.type}</div>
                  </div>
                  
                  <div class="card-description-box">
                    <div class="card-text">${c.text}</div>
                  </div>
                  
                  <div class="card-select-hint">Click to select</div>
                </div>
              </div>
            </div>
          `;
  }).join("")}
      </div>
      <div class="reward-actions">
        <button class="btn secondary skip-btn" data-skip>Skip Reward</button>
      </div>
    </div>
  `;
    root.app.querySelectorAll("[data-pick]").forEach(btn => {
        btn.addEventListener("click", () => {
            const idx = parseInt(btn.dataset.pick, 10);
            root.takeReward(idx);
        });
    });
    root.app.querySelector("[data-skip]").addEventListener("click", () => root.skipReward());
}

export function renderRest(root) {
    root.app.innerHTML = `
    <div class="rest-screen">
      <div class="rest-header">
        <h1>Rest and Recover</h1>
        <p>Take a moment to restore your strength</p>
      </div>
      
      <div class="rest-options">
        <button class="rest-option" data-act="heal">
          <div class="rest-icon">
            <img src="assets/card-art/heart.png" alt="Heal" class="rest-icon-img">
          </div>
          <div class="rest-content">
            <h3>Rest and Heal</h3>
            <p>Restore 20% of your maximum health</p>
          </div>
        </button>
        
        <button class="rest-option" data-act="upgrade">
          <div class="rest-icon">
            <img src="assets/card-art/scroll.png" alt="Upgrade" class="rest-icon-img">
          </div>
          <div class="rest-content">
            <h3>Upgrade a Card</h3>
            <p>Permanently improve one of your cards</p>
          </div>
        </button>
      </div>
    </div>
  `;
    root.app.querySelector("[data-act='heal']").addEventListener("click", () => {
        const heal = Math.floor(root.player.maxHp * 0.2);
        root.player.hp = Math.min(root.player.maxHp, root.player.hp + heal);
        root.log(`Rested: +${heal} HP`);
        root.afterNode();
    });
    root.app.querySelector("[data-act='upgrade']").addEventListener("click", () => {
        renderUpgrade(root);
    });
}

export function renderUpgrade(root) {
    import("../data/cards.js").then(({ CARDS }) => {
        const upgradableCards = root.player.deck
            .map((cardId, index) => ({ cardId, index }))
      .filter(({ cardId }) => {
        const card = CARDS[cardId];

        return card?.upgrades && !cardId.endsWith('+');
      })
            .slice(0, 3); // Show max 3 options
        
        if (upgradableCards.length === 0) {
            root.log("No cards can be upgraded.");
            root.afterNode();
            return;
        }

        root.app.innerHTML = `
        <div class="upgrade-screen">
          <div class="upgrade-header">
        <h1>⬆️ Upgrade a Card</h1>
            <p>Select a card from your deck to permanently improve it</p>
          </div>
          
          <div class="upgrade-options">
          ${upgradableCards.map(({ cardId, index }) => {
            const card = CARDS[cardId];
            const upgradedCard = CARDS[card.upgrades];

      if (!upgradedCard) {
        return ''; // Skip if no upgrade found
      }

            return `
                <div class="upgrade-option" data-upgrade="${index}">
                  <div class="upgrade-preview">
                    <div class="upgrade-action-header">
                      <h3>🔧 Upgrade ${card.name}</h3>
                      <p>Click to permanently improve this card</p>
                    </div>
                    
                    <div class="upgrade-comparison">
                      <div class="upgrade-card-container">
                        <div class="upgrade-card-label">Current</div>
                        <div class="battle-card ${card.type} playable upgrade-card-before">
                          <div class="card-glow"></div>
                          <div class="card-frame">
                            <div class="card-header-row">
                              <div class="card-title">${card.name}</div>
                              <div class="card-cost-orb">${card.cost}</div>
                            </div>
                            
                            <div class="card-artwork">
                              <div class="card-art-icon">${getCardArt(card.id)}</div>
                              <div class="card-type-badge ${card.type}">${card.type}</div>
                            </div>
                            
                            <div class="card-description-box">
                              <div class="card-text">${card.text}</div>
                            </div>
                          </div>
                        </div>
                      </div>
                      
                      <div class="upgrade-card-container">
                        <div class="upgrade-card-label">Upgraded</div>
                        <div class="battle-card ${upgradedCard.type} playable upgrade-card-after">
                          <div class="card-glow"></div>
                          <div class="card-frame">
                            <div class="card-header-row">
                              <div class="card-title">${upgradedCard.name}</div>
                              <div class="card-cost-orb">${upgradedCard.cost}</div>
                            </div>
                            
                            <div class="card-artwork">
                              <div class="card-art-icon">${getCardArt(upgradedCard.id)}</div>
                              <div class="card-type-badge ${upgradedCard.type}">${upgradedCard.type}</div>
                            </div>
                            
                            <div class="card-description-box">
                              <div class="card-text">${upgradedCard.text}</div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
            `;
          }).join("")}
        </div>
          
          <div class="upgrade-actions">
            <button class="upgrade-skip" data-skip>Skip Upgrade</button>
          </div>
        </div>
      `;

        root.app.querySelectorAll("[data-upgrade]").forEach(btn => {
            btn.addEventListener("click", () => {
                const deckIndex = parseInt(btn.dataset.upgrade, 10);
                const oldCardId = root.player.deck[deckIndex];
                const newCardId = CARDS[oldCardId].upgrades;
                root.player.deck[deckIndex] = newCardId;
                root.log(`Upgraded ${CARDS[oldCardId].name} → ${CARDS[newCardId].name}`);
        root.afterNode();
            });
        });
        root.app.querySelector("[data-skip]").addEventListener("click", () => root.afterNode());
    });
}

export function renderShop(root) {
    import("../data/cards.js").then(({ CARDS, CARD_POOL }) => {
        import("../data/relics.js").then(({ RELICS, START_RELIC_CHOICES }) => {

      const availableCards = CARD_POOL.filter(cardId => {

        const ownedCount = root.player.deck.filter(deckCardId => deckCardId === cardId).length;

        return ownedCount < 3;
      });

      const cardsToShow = availableCards.length >= 3 ? availableCards : CARD_POOL;
      const shopCards = shuffle(cardsToShow.slice()).slice(0, 3).map(id => CARDS[id]);
      const ownedRelicIds = root.relicStates.map(r => r.id);
      const availableRelics = START_RELIC_CHOICES.filter(id => !ownedRelicIds.includes(id));
            const shopRelic = availableRelics.length > 0 ? RELICS[availableRelics[0]] : null;
            
            root.app.innerHTML = `
            <div class="shop-screen">
              <div class="shop-header">
                <h1>Merchant's Shop</h1>
                <p>Spend your hard-earned gold on powerful upgrades</p>
                <div class="player-gold">
                  <img src="assets/card-art/bag_of_gold.png" alt="Gold" class="gold-icon">
                  <span class="gold-amount">${root.player.gold || 100}</span>
              </div>
            </div>
              
              <div class="shop-inventory">
                <div class="shop-section">
                  <div class="shop-section-header">
                    <h2>Cards for Sale</h2>
                    <p>50 gold each</p>
                  </div>
                  <div class="shop-cards">
                    ${shopCards.map((card, idx) => {
        const cardType = card.type === 'attack' ? 'attack' : card.type === 'skill' ? 'skill' : 'power';
        const canAfford = (root.player.gold || 100) >= 50;
        const ownedCount = root.player.deck.filter(deckCardId => deckCardId === card.id).length;
        return `
                        <div class="shop-card-container">
                          <div class="battle-card ${cardType} ${canAfford ? 'playable' : 'unplayable'} shop-card" data-buy-card="${idx}">
                            <div class="card-glow"></div>
                            <div class="card-frame">
                              <div class="card-header-row">
                                <div class="card-title">${card.name}</div>
                                <div class="card-cost-orb">${card.cost}</div>
                              </div>
                              
                              <div class="card-artwork">
                                <div class="card-art-icon">${getCardArt(card.id)}</div>
                                <div class="card-type-badge ${cardType}">${card.type}</div>
                              </div>
                              
                              <div class="card-description-box">
                                <div class="card-text">${card.text}</div>
                              </div>
                            </div>
                            <div class="shop-card-price">
                              <img src="assets/card-art/bag_of_gold.png" alt="Gold" class="price-icon">
                              <span>50</span>
                            </div>
                            ${ownedCount > 0 ? `<div class="card-owned-indicator">Owned: ${ownedCount}</div>` : ''}
                            ${!canAfford ? `<div class="card-disabled-overlay"><span>Need 50 gold</span></div>` : ''}
                          </div>
                        </div>
                      `;
      }).join("")}
                  </div>
                </div>
                
            ${shopRelic ? `
                <div class="shop-section">
                  <div class="shop-section-header">
                    <h2>Mystical Relic</h2>
                    <p>100 gold</p>
                  </div>
                  <div class="shop-relics">
                    <div class="shop-relic-container">
                      <div class="shop-relic ${(root.player.gold || 100) >= 100 ? 'affordable' : 'unaffordable'}" data-buy-relic>
                        <div class="relic-icon">${getRelicEmoji(shopRelic.id)}</div>
                        <div class="relic-info">
                          <h3>${shopRelic.name}</h3>
                          <p>${shopRelic.text}</p>
                        </div>
                        <div class="shop-relic-price">
                          <img src="assets/card-art/bag_of_gold.png" alt="Gold" class="price-icon">
                          <span>100</span>
                        </div>
                        ${(root.player.gold || 100) < 100 ? `<div class="relic-disabled-overlay"><span>Need 100 gold</span></div>` : ''}
                      </div>
                    </div>
                  </div>
            </div>
            ` : ''}
              </div>
              
              <div class="shop-actions">
                <button class="shop-leave-btn" data-leave>
                  <img src="assets/card-art/exit.png" alt="Leave" class="leave-icon">
                  <span>Leave Shop</span>
                </button>
              </div>
            </div>
          `;

            if (!root.player.gold) root.player.gold = 100;

            root.app.querySelectorAll("[data-buy-card]").forEach(btn => {
                btn.addEventListener("click", () => {
                    const idx = parseInt(btn.dataset.buyCard, 10);
                    const card = shopCards[idx];
                    if (root.player.gold >= 50) {
                        root.player.gold -= 50;
                        root.player.deck.push(card.id);
                        root.log(`Bought ${card.name} for 50 gold.`);
                        btn.disabled = true;
                        btn.textContent = "SOLD";
                        
                        // Update gold display
                        const goldDisplay = root.app.querySelector('.gold-amount');
                        if (goldDisplay) {
                            goldDisplay.textContent = root.player.gold;
                        }
                        
                        // Update affordability of remaining items
                        updateShopAffordability(root);
                    } else {
                        root.log("Not enough gold!");
                    }
                });
            });


            if (shopRelic) {
                root.app.querySelector("[data-buy-relic]").addEventListener("click", () => {
                    if (root.player.gold >= 100) {
                        root.player.gold -= 100;
                        root.log(`Bought ${shopRelic.name} for 100 gold.`);

                        import("../engine/battle.js").then(({ attachRelics }) => {

              const currentRelicIds = root.relicStates.map(r => r.id);
              const newRelicIds = [...currentRelicIds, shopRelic.id];
              attachRelics(root, newRelicIds);
                        });
                        root.app.querySelector("[data-buy-relic]").disabled = true;
                        root.app.querySelector("[data-buy-relic]").textContent = "SOLD";
                        
                        // Update gold display
                        const goldDisplay = root.app.querySelector('.gold-amount');
                        if (goldDisplay) {
                            goldDisplay.textContent = root.player.gold;
                        }
                        
                        // Update affordability of remaining items
                        updateShopAffordability(root);
                    } else {
                        root.log("Not enough gold!");
                    }
                });
            }

            root.app.querySelector("[data-leave]").addEventListener("click", () => root.afterNode());
        });
    });
}

function updateCardSelection(root) {
    // Remove selection from all cards
    root.app.querySelectorAll('.battle-card').forEach(card => {
        card.classList.remove('card-selected');
    });
    
    // Add selection to currently selected card
    if (root.selectedCardIndex !== null) {
        const selectedCard = root.app.querySelector(`[data-play="${root.selectedCardIndex}"]`);
        if (selectedCard) {
            selectedCard.classList.add('card-selected');
        }
    }
}

function updateShopAffordability(root) {
    // Update card affordability
    root.app.querySelectorAll("[data-buy-card]").forEach(btn => {
        if (!btn.disabled) {
            const cardContainer = btn.closest('.shop-card-container');
            const overlay = cardContainer.querySelector('.card-disabled-overlay');
            
            if (root.player.gold < 50) {
                btn.classList.remove('playable');
                btn.classList.add('unplayable');
                if (!overlay) {
                    const newOverlay = document.createElement('div');
                    newOverlay.className = 'card-disabled-overlay';
                    newOverlay.innerHTML = '<span>Need 50 gold</span>';
                    cardContainer.appendChild(newOverlay);
                }
            } else {
                btn.classList.remove('unplayable');
                btn.classList.add('playable');
                if (overlay) {
                    overlay.remove();
                }
            }
        }
    });
    
    // Update relic affordability
    const relicBtn = root.app.querySelector("[data-buy-relic]");
    if (relicBtn && !relicBtn.disabled) {
        const relicContainer = relicBtn.closest('.shop-relic-container');
        const overlay = relicContainer.querySelector('.relic-disabled-overlay');
        
        if (root.player.gold < 100) {
            relicBtn.classList.remove('affordable');
            relicBtn.classList.add('unaffordable');
            if (!overlay) {
                const newOverlay = document.createElement('div');
                newOverlay.className = 'relic-disabled-overlay';
                newOverlay.innerHTML = '<span>Need 100 gold</span>';
                relicContainer.appendChild(newOverlay);
            }
        } else {
            relicBtn.classList.remove('unaffordable');
            relicBtn.classList.add('affordable');
            if (overlay) {
                overlay.remove();
            }
        }
    }
}

function shuffle(array) {
    for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
    }
    return array;
}

function getRelicEmoji(relicId) {
  const relicArt = {
    mech_kb: '<img src="assets/skill-art/Monk_29.png" alt="Kinesis" class="relic-skill-art">',
    standing_desk: '<img src="assets/skill-art/Monk_30.png" alt="Motions" class="relic-skill-art">',
    prime_hat: '<img src="assets/skill-art/Monk_31.png" alt="VS Code" class="relic-skill-art">',
    coffee_thermos: '<img src="assets/skill-art/Monk_32.png" alt="Coffee Thermos" class="relic-skill-art">',
    cpp_compiler: '<img src="assets/skill-art/Monk_33.png" alt="CPP Compiler" class="relic-skill-art">',
    chat_mod_sword: '<img src="assets/skill-art/Monk_34.png" alt="Chat Mod Sword" class="relic-skill-art">'
  };
  return relicArt[relicId] || '💎';
}

function getRelicName(relicId) {
    const names = {
    mech_kb: 'Kinesis',
    standing_desk: 'Motions',
    prime_hat: 'VS Code',
        coffee_thermos: 'Coffee Thermos',
        cpp_compiler: 'C++ Compiler',
        chat_mod_sword: 'Chat Mod Sword'
    };
    return names[relicId] || relicId;
}

function getRelicText(relicId) {
    const texts = {
        mech_kb: '+1 card draw each turn.',
        standing_desk: '+10 Max HP.',
        prime_hat: '-10% damage taken.',
        coffee_thermos: 'Start each fight with Coffee Rush.',
        cpp_compiler: 'First attack each turn deals double.',
        chat_mod_sword: 'Start fights with 1 Weak on all enemies.'
    };
    return texts[relicId] || 'Unknown relic';
}

function getCardArt(cardId) {

    const artMappings = {

        strike: 'Monk_1.png',
        'strike+': 'Monk_2.png',
        
        defend: 'Monk_3.png',
        'defend+': 'Monk_4.png',
        
        coffee_rush: 'Monk_5.png', // Energy boost
        'coffee_rush+': 'Monk_6.png', // Upgraded energy
        macro: 'Monk_7.png', // Replay magic
        refactor: 'Monk_8.png', // Refactoring tool
        type_safety: 'Monk_9.png', // Protection
        chat_ban: 'Monk_10.png', // Ban/restriction
        
        segfault: 'Monk_11.png', // Powerful attack
        null_pointer: 'Monk_12.png', // Precise strike
        recursion: 'Monk_13.png', // Repetition
        merge_conflict: 'Monk_14.png', // Dual attack
        hotfix: 'Monk_15.png', // Emergency fix
        production_deploy: 'Monk_16.png', // High risk/reward
        
        gc: 'Monk_17.png', // Cleanup
        async_await: 'Monk_18.png', // Time manipulation
        stack_overflow: 'Monk_19.png', // Knowledge overflow
        infinite_vim: 'Monk_20.png', // Infinite power
        debug_print: 'Monk_21.png', // Information
        git_commit: 'Monk_22.png', // Recording
        memory_leak: 'Monk_23.png', // Draining effect
        code_review: 'Monk_24.png', // Investigation
        pair_programming: 'Monk_25.png', // Cooperation
        rubber_duck: 'Monk_26.png', // Helpful companion
        unit_test: 'Monk_27.png', // Testing/verification
        
        sugar_crash: 'Monk_28.png' // Negative effect
    };
    
    const imagePath = artMappings[cardId];
    if (imagePath) {
        return `<img src="assets/skill-art/${imagePath}" alt="${cardId}" class="card-art-image" onerror="this.style.display='none'; this.nextElementSibling.style.display='inline';">
                <span class="card-art-fallback" style="display: none;">${getCardArtFallback(cardId)}</span>`;
    }
    
    return getCardArtFallback(cardId);
}

function getCardArtFallback(cardId) {
    const fallbacks = {
        strike: '👊', defend: '🛡️', coffee_rush: '☕', macro: '🔄',
        refactor: '⚡', type_safety: '🔒', chat_ban: '🚫', segfault: '💥',
        gc: '🗑️', async_await: '⏳', stack_overflow: '📚', infinite_vim: '♾️',
        debug_print: '🐛', null_pointer: '❌', recursion: '🔁', git_commit: '📝',
        memory_leak: '🕳️', code_review: '👀', pair_programming: '👥', hotfix: '🚨',
        rubber_duck: '🦆', merge_conflict: '⚔️', unit_test: '✅', production_deploy: '🚀',
        sugar_crash: '🍰'
    };
    return fallbacks[cardId] || '🃏';
}

function getEnemyArt(enemyId, ENEMIES = null) {

  const enemyData = ENEMIES?.[enemyId];
  const avatarPath = enemyData?.avatar || `assets/avatars/${enemyId}.png`;
    return `<img src="${avatarPath}" alt="${enemyId}" class="enemy-avatar-img" onerror="this.style.display='none'; this.nextElementSibling.style.display='inline';">
            <span class="enemy-fallback-emoji" style="display: none;">${getEnemyFallbackEmoji(enemyId)}</span>`;
}

function getEnemyFallbackEmoji(enemyId) {
    const arts = {
        chat_gremlin: '👹',
        type_checker: '🤖',
        js_blob: '🟢',
        infinite_loop: '🌀',
        merge_conflict_enemy: '⚔️',
        bug_404: '❌',
        elite_ts_demon: '😈',
        elite_refactor: '🐉',
        boss_birthday_bug: '🎂👾'
    };
    return arts[enemyId] || '👾';
}

function getEnemyType(enemyId) {
    if (enemyId.includes('boss_')) return 'BOSS';
    if (enemyId.includes('elite_')) return 'ELITE';
    return 'ENEMY';
}

export function renderRelicSelection(root) {
    import("../data/relics.js").then(({ RELICS, START_RELIC_CHOICES }) => {
        const relicChoices = START_RELIC_CHOICES.slice(0, 3); // Show first 3 relics
        
        root.app.innerHTML = `
        <div class="game-screen relic-select">
          <div class="game-header">
            <div class="game-logo relic-title-logo">
              <svg width="600" height="240" viewBox="0 0 600 240" xmlns="http://www.w3.org/2000/svg">
                <defs>
    
                  <linearGradient id="textGradient" x1="0%" y1="0%" x2="0%" y2="100%">
                    <stop offset="0%" style="stop-color:#ffd700;stop-opacity:1" />
                    <stop offset="100%" style="stop-color:#ff8c00;stop-opacity:1" />
                  </linearGradient>
    
                  <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
                    <feGaussianBlur stdDeviation="2" result="coloredBlur"/>
                    <feMerge>
                      <feMergeNode in="coloredBlur"/>
                      <feMergeNode in="SourceGraphic"/>
                    </feMerge>
                  </filter>
    
                  <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
                    <feGaussianBlur in="SourceAlpha" stdDeviation="1"/>
                    <feOffset dx="1" dy="1" result="offsetblur"/>
                    <feComponentTransfer>
                      <feFuncA type="linear" slope="0.3"/>
                    </feComponentTransfer>
                    <feMerge>
                      <feMergeNode/>
                      <feMergeNode in="SourceGraphic"/>
                    </feMerge>
                  </filter>
                </defs>

                <text x="300" y="80" text-anchor="middle" font-family="'Kreon', serif" font-size="55" font-weight="700" fill="url(#textGradient)" filter="url(#glow)">
                  ThePrimeagen
                </text>
    
                <text x="300" y="170" text-anchor="middle" font-family="'Kreon', serif" font-size="85" font-weight="700" fill="url(#textGradient)" filter="url(#shadow) url(#glow)">
                  Spire
                </text>
              </svg>
            </div>
            <h1>Choose a Starting Relic</h1>
            <p>Select one of the following relics to begin your run.</p>
          </div>
          
          <div class="relic-options">
            ${relicChoices.map(relicId => {
              const relic = RELICS[relicId];
              return `
                <div class="relic-option" data-relic="${relicId}">
                  <div class="relic-portrait">
                    <div class="relic-icon">${getRelicEmoji(relicId)}</div>
                  </div>
                  <div class="relic-info">
                    <div class="relic-name">${relic.name}</div>
                    <div class="relic-description">${relic.text}</div>
                  </div>
                </div>
              `;
            }).join("")}
          </div>
          
        </div>
        `;

        root.app.querySelectorAll("[data-relic]").forEach(btn => {
            btn.addEventListener("click", () => {
                const relicId = btn.dataset.relic;
                root.selectStartingRelic(relicId);
            });
        });
    });
}

export function renderEvent(root) {
    const events = [
        {
      title: "Birthday Cake",
            text: "You find a delicious birthday cake! But it looks suspicious...",
      artwork: "assets/card-art/bread.png",
            choices: [
                {
          text: "Eat the whole cake (+15 HP, gain Sugar Crash curse)",
          icon: "assets/card-art/apple.png",
          risk: "high",
                    effect: () => {
                        root.player.hp = Math.min(root.player.maxHp, root.player.hp + 15);
                        root.player.deck.push("sugar_crash");
                        root.log("Ate cake: +15 HP, added Sugar Crash curse");
                    }
                },
                {
                    text: "Take a small bite (+8 HP)",
          icon: "assets/card-art/heart.png",
          risk: "low",
                    effect: () => {
                        root.player.hp = Math.min(root.player.maxHp, root.player.hp + 8);
                        root.log("Small bite: +8 HP");
                    }
                },
                {
                    text: "Leave it alone (gain 25 gold)",
          icon: "assets/card-art/bag_of_gold.png",
          risk: "none",
                    effect: () => {
                        root.player.gold += 25;
                        root.log("Resisted temptation: +25 gold");
                    }
                }
            ]
        },
        {
      title: "Birthday Present",
            text: "A mysterious gift box sits before you. What could be inside?",
      artwork: "assets/card-art/chest_closed.png",
            choices: [
                {
                    text: "Open it eagerly (Random card or lose 10 HP)",
          icon: "assets/card-art/key.png",
          risk: "high",
                    effect: () => {
                        if (Math.random() < 0.7) {
                            import("../data/cards.js").then(({ CARDS, CARD_POOL }) => {
                                const randomCard = CARD_POOL[Math.floor(Math.random() * CARD_POOL.length)];
                                root.player.deck.push(randomCard);
                                root.log(`Found ${CARDS[randomCard].name}!`);
                            });
                        } else {
                            root.player.hp = Math.max(1, root.player.hp - 10);
                            root.log("It was a trap! -10 HP");
                        }
                    }
                },
                {
                    text: "Open it carefully (+5 Max HP)",
          icon: "assets/card-art/potion_heal.png",
          risk: "low",
                    effect: () => {
                        root.player.maxHp += 5;
                        root.player.hp += 5;
                        root.log("Careful approach: +5 Max HP");
                    }
                },
                {
                    text: "Don't touch it (gain 30 gold)",
          icon: "assets/card-art/bag_of_gold.png",
          risk: "none",
                    effect: () => {
                        root.player.gold += 30;
                        root.log("Played it safe: +30 gold");
                    }
                }
            ]
        },
        {
      title: "Birthday Balloons",
            text: "Colorful balloons float by. One has a note attached: 'Pop me for a surprise!'",
      artwork: "assets/card-art/feather.png",
            choices: [
                {
          text: "Pop the balloon (Remove a random basic card from deck)",
          icon: "assets/card-art/scroll.png",
          risk: "medium",
                    effect: () => {
                        const basicCards = root.player.deck.filter(id => id === "strike" || id === "defend");
                        if (basicCards.length > 0) {
                            const toRemove = basicCards[0];
                            const index = root.player.deck.indexOf(toRemove);
                            root.player.deck.splice(index, 1);
                            root.log(`Removed ${toRemove} from deck`);
                        } else {
                            root.log("No basic cards to remove");
                        }
                    }
                },
                {
                    text: "Collect the balloons (+1 Energy next 3 fights)",
          icon: "assets/card-art/magic_sphere.png",
          risk: "low",
                    effect: () => {
                        root.flags.bonusEnergyFights = 3;
                        root.log("Collected balloons: +1 Energy next 3 fights");
                    }
                },
                {
                    text: "Ignore them (heal 12 HP)",
          icon: "assets/card-art/heart.png",
          risk: "none",
                    effect: () => {
                        root.player.hp = Math.min(root.player.maxHp, root.player.hp + 12);
                        root.log("Focused on rest: +12 HP");
                    }
                }
            ]
        }
    ];

    const event = events[Math.floor(Math.random() * events.length)];
    
    root.app.innerHTML = `
    <div class="event-screen">
      <div class="event-header">
        <h1>${event.title}</h1>
        <p>A birthday adventure awaits your decision</p>
        <div class="player-status-inline">
          <div class="status-item">
            <img src="assets/card-art/heart.png" alt="Health" class="status-icon-img">
            <span>${root.player.hp}/${root.player.maxHp} HP</span>
          </div>
          <div class="status-item">
            <img src="assets/card-art/bag_of_gold.png" alt="Gold" class="status-icon-img">
            <span>${root.player.gold || 0} Gold</span>
          </div>
        </div>
      </div>

      <div class="event-content">
        <div class="event-story">
          <div class="event-artwork">
            <img src="${event.artwork}" alt="Event" class="event-artwork-img">
          </div>
          <div class="event-description">
      <p>${event.text}</p>
    </div>
        </div>

        <div class="event-choices">
          <h3>Choose your action:</h3>
          <div class="choices-grid">
      ${event.choices.map((choice, idx) => `
              <div class="event-choice ${choice.risk}-risk" data-choice="${idx}">
                <div class="choice-icon">
                  <img src="${choice.icon}" alt="Choice" class="choice-icon-img">
                </div>
                <div class="choice-content">
                  <div class="choice-text">${choice.text}</div>
                  <div class="choice-risk-badge ${choice.risk}">
                    ${choice.risk === 'high' ? 'High Risk' : choice.risk === 'medium' ? 'Medium Risk' : choice.risk === 'low' ? 'Low Risk' : 'Safe'}
                  </div>
                </div>
              </div>
      `).join("")}
          </div>
        </div>
      </div>
    </div>
  `;

    root.app.querySelectorAll("[data-choice]").forEach(btn => {
        btn.addEventListener("click", () => {
            const idx = parseInt(btn.dataset.choice, 10);
            event.choices[idx].effect();
            root.afterNode();
        });
    });
}

export function renderWin(root) {
  const finalStats = {
    totalTurns: root.turnCount || 0,
    cardsPlayed: root.cardsPlayedCount || 0,
    finalHP: root.player.hp,
    maxHP: root.player.maxHp,
    finalGold: root.player.gold || 0,
    deckSize: root.player.deck.length,
    relicsCollected: root.relicStates.length
  };

    root.app.innerHTML = `
    <div class="victory-screen">
      <div class="victory-header">
        <div class="victory-crown">
          <img src="assets/card-art/crown.png" alt="Victory Crown" class="crown-img">
        </div>
        <h1>VICTORY ACHIEVED!</h1>
        <h2>ThePrimeagen Spire Has Been Conquered!</h2>
        <p>ThePrimeagen's birthday celebration can continue in peace!</p>
      </div>

      <div class="victory-content">
        <div class="victory-artwork">
          <div class="victory-scene">
            <img src="assets/card-art/trophy.png" alt="Trophy" class="victory-trophy">
            <div class="victory-glow"></div>
          </div>
        </div>

        <div class="victory-stats">
          <h3>Final Statistics</h3>
          <div class="stats-grid">
            <div class="stat-item">
              <img src="assets/card-art/heart.png" alt="Health" class="stat-icon">
              <div class="stat-info">
                <span class="stat-label">Final Health</span>
                <span class="stat-value">${finalStats.finalHP}/${finalStats.maxHP}</span>
              </div>
            </div>
            <div class="stat-item">
              <img src="assets/card-art/bag_of_gold.png" alt="Gold" class="stat-icon">
              <div class="stat-info">
                <span class="stat-label">Gold Remaining</span>
                <span class="stat-value">${finalStats.finalGold}</span>
              </div>
            </div>
            <div class="stat-item">
              <img src="assets/card-art/book.png" alt="Deck" class="stat-icon">
              <div class="stat-info">
                <span class="stat-label">Final Deck Size</span>
                <span class="stat-value">${finalStats.deckSize} cards</span>
              </div>
            </div>
            <div class="stat-item">
              <img src="assets/card-art/runestone.png" alt="Relics" class="stat-icon">
              <div class="stat-info">
                <span class="stat-label">Relics Collected</span>
                <span class="stat-value">${finalStats.relicsCollected}</span>
              </div>
            </div>
          </div>
        </div>

        <div class="victory-relics">
          <h3>Relics Mastered</h3>
          <div class="relics-showcase">
            ${root.relicStates.length > 0 ?
      root.relicStates.map(r => `
                <div class="relic-showcase-item" title="${getRelicText(r.id)}">
                  <div class="relic-showcase-icon">${getRelicEmoji(r.id)}</div>
                  <div class="relic-showcase-name">${getRelicName(r.id)}</div>
                </div>
              `).join('') :
      '<div class="no-relics">No relics collected this run</div>'
    }
          </div>
        </div>

        <div class="victory-message">
          <div class="birthday-celebration">
            <h3>Birthday Celebration Complete!</h3>
            <p>Thanks to your heroic efforts in your old age. ThePrimeagen's boomer years shall continue!</p>
            <p class="victory-quote">"Happy Birthday Prime! Hope you have a good one!"</p>
          </div>
        </div>
      </div>

      <div class="victory-actions">
        <button class="victory-btn primary" data-replay>
          <img src="assets/card-art/scroll.png" alt="New Run" class="btn-icon">
          <span>Start New Adventure</span>
        </button>
      </div>
    </div>
  `;
    root.app.querySelector("[data-replay]").addEventListener("click", () => root.reset());
}

export function renderLose(root) {
  const finalStats = {
    totalTurns: root.turnCount || 0,
    cardsPlayed: root.cardsPlayedCount || 0,
    finalHP: 0, // Player is defeated
    maxHP: root.player.maxHp,
    finalGold: root.player.gold || 0,
    deckSize: root.player.deck.length,
    relicsCollected: root.relicStates.length,
    nodeId: root.nodeId || 'unknown'
  };

    root.app.innerHTML = `
    <div class="defeat-screen">
      <div class="defeat-header">
        <h1>You Failed!</h1>
        <h2>The Spire Claims Another Developer</h2>
        <p>It seems age has slowed the CPU upstairs…  
Better luck on the next run!</p>
      </div>

        <div class="defeat-stats">
          <h3>Final Debug Report</h3>
          <div class="stats-grid">
            <div class="stat-item">
              <div class="stat-info">
                <div class="stat-label">Turns Survived</div>
                <div class="stat-value">${finalStats.totalTurns}</div>
              </div>
            </div>
            <div class="stat-item">
              <div class="stat-info">
                <div class="stat-label">Cards Played</div>
                <div class="stat-value">${finalStats.cardsPlayed}</div>
              </div>
            </div>
            <div class="stat-item">
              <div class="stat-info">
                <div class="stat-label">HP Lost</div>
                <div class="stat-value">${finalStats.maxHP}/${finalStats.maxHP}</div>
              </div>
            </div>
            <div class="stat-item">
              <div class="stat-info">
                <div class="stat-label">Gold Earned</div>
                <div class="stat-value">${finalStats.finalGold}</div>
              </div>
            </div>
            <div class="stat-item">
              <div class="stat-info">
                <div class="stat-label">Deck Size</div>
                <div class="stat-value">${finalStats.deckSize} cards</div>
              </div>
            </div>
            <div class="stat-item">
              <div class="stat-info">
                <div class="stat-label">Relics Found</div>
                <div class="stat-value">${finalStats.relicsCollected}</div>
              </div>
            </div>
          </div>
        </div>

        ${root.relicStates.length > 0 ? `
        <div class="defeat-relics">
          <h3>Tools Collected</h3>
          <div class="relics-showcase">
            ${root.relicStates.map(relic => `
              <div class="relic-showcase-item">
                <div class="relic-showcase-icon">${getRelicEmoji(relic.id)}</div>
                <div class="relic-showcase-name">${relic.id.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}</div>
              </div>
            `).join('')}
          </div>
        </div>
        ` : `
        <div class="defeat-relics">
          <div class="no-relics">No relics were collected during this run.</div>
        </div>
        `}

        <div class="defeat-message">
          <div class="debug-session">
            <h3>Post-Mortem Analysis</h3>
            <div class="defeat-quote">
              "Debugging is twice as hard as writing the code in the first place.<br/>
              Therefore, if you write the code as cleverly as possible,<br/>
              you are, by definition, not smart enough to debug it."<br/>
              <em>- Brian Kernighan</em>
            </div>
          </div>
        </div>

        <div class="defeat-actions">
          <button class="defeat-btn primary-btn" data-replay>
            <span class="btn-icon">🔄</span>
            <span>Try Again</span>
          </button>
          <button class="defeat-btn secondary-btn" data-menu>
            <span class="btn-icon">🏠</span>
            <span>Main Menu</span>
          </button>
        </div>
      </div>
    </div>
    `;


  root.app.querySelector("[data-replay]").addEventListener("click", () => {
    root.reset();
  });

  root.app.querySelector("[data-menu]").addEventListener("click", () => {
    root.reset();
  });
}