visuals.js

import { animationClasses, POPUP_COLORS } from './constants.js';

/**
 * VisualEngine
 * Handles all DOM manipulation, canvas-like element spawning,
 * CSS animations, and SVG chart generation.
 * Follows the Single Responsibility Principle (SRP) for rendering.
 */
export class VisualEngine {
  constructor() {
    this.app = document.getElementById('app');
    this.starfield = document.getElementById('starfield');
    this.progressBar = document.getElementById('progression-bar');
  }

  /**
   * Updates the top progression bar.
   * @param {number} percentage - 0 to 100 representing fill.
   */
  updateProgress(percentage) {
    this.progressBar.style.width = `${percentage}%`;
  }

  /**
   * Reflows the DOM to re-trigger the CSS pulse animation.
   */
  triggerBackgroundPulse() {
    document.body.classList.remove('bg-pulse');
    // Trigger reflow to restart CSS animation
    void document.body.offsetWidth; 
    document.body.classList.add('bg-pulse');
  }

  /**
   * Generates the 3D falling starfield background on initialization.
   */
  createBackgroundStars() {
    const numStars = 100;
    for (let i = 0; i < numStars; i++) {
      const star = document.createElement('div');
      star.className = 'star';
      star.style.left = `${Math.random() * 100}vw`;
      star.style.top = `${Math.random() * 100}vh`;
      const size = Math.random() * 3 + 1;
      star.style.width = `${size}px`;
      star.style.height = `${size}px`;
      const duration = Math.random() * 5 + 3; 
      const delay = Math.random() * -10; 
      star.style.animationDuration = `${duration}s`;
      star.style.animationDelay = `${delay}s`;
      
      const colorChance = Math.random();
      if (colorChance > 0.9) {
        star.style.background = '#ff007f';
        star.style.boxShadow = '0 0 10px #ff007f, 0 0 20px #ff007f';
      } else if (colorChance > 0.8) {
        star.style.background = '#00ffff';
        star.style.boxShadow = '0 0 10px #00ffff, 0 0 20px #00ffff';
      }
      this.starfield.appendChild(star);
    }
  }

  spawnElement(displayEmoji, displayText, touchCoords = null) {
    const el = document.createElement('div');
    const randomAnimClass = animationClasses[Math.floor(Math.random() * animationClasses.length)];
    el.className = `spawned-element ${randomAnimClass}`;
    
    el.innerHTML = `
      <div style="display: flex; flex-direction: column; align-items: center; text-align: center;">
        <div style="font-size: 1.2em">${displayEmoji}</div>
        ${displayText ? `<div class="spawn-text">${displayText}</div>` : ''}
      </div>
    `;
    
    if (touchCoords) {
      el.style.left = `${touchCoords.x}px`;
      el.style.top = `${touchCoords.y}px`;
    } else {
      const randomX = 10 + Math.random() * 80; 
      const randomY = 10 + Math.random() * 80;
      el.style.left = `${randomX}vw`;
      el.style.top = `${randomY}vh`;
    }
    
    const sizeMultiplier = 3 + Math.random() * 5; 
    el.style.fontSize = `${sizeMultiplier}rem`;

    el.style.color = POPUP_COLORS[Math.floor(Math.random() * POPUP_COLORS.length)];
    
    this.app.appendChild(el);
    setTimeout(() => el.remove(), 2500);
  }

  spawnMouseTrailStar(x, y) {
    const star = document.createElement('div');
    star.className = 'mouse-star';
    star.style.left = `${x}px`;
    star.style.top = `${y}px`;
    
    const size = 5 + Math.random() * 15;
    star.style.width = `${size}px`;
    star.style.height = `${size}px`;
    
    const colors = ['#ff007f', '#00ffff', '#ffea00', '#ffffff'];
    star.style.background = colors[Math.floor(Math.random() * colors.length)];
    star.style.boxShadow = `0 0 10px ${star.style.background}, 0 0 20px ${star.style.background}`;
    
    document.body.appendChild(star);
    setTimeout(() => star.remove(), 800);
  }

  triggerStarburstShower() {
    const colors = ['#ff007f', '#00ffff', '#ffea00', '#aa00ff'];
    const showerContainer = document.createElement('div');
    showerContainer.className = 'reward-container'; 
    document.body.appendChild(showerContainer);
    for(let i=0; i<80; i++) {
      const star = document.createElement('div');
      star.textContent = '⭐';
      star.className = 'shower-star';
      star.style.color = colors[Math.floor(Math.random() * colors.length)];
      star.style.filter = `drop-shadow(0 0 10px ${star.style.color})`;
      const angle = (Math.random() * Math.PI) - (Math.PI / 2); 
      const power = 30 + Math.random() * 50; 
      star.style.setProperty('--tx', `${Math.sin(angle) * power}vw`);
      star.style.setProperty('--ty', `-${Math.cos(angle) * power}vh`);
      showerContainer.appendChild(star);
    }
    setTimeout(() => showerContainer.remove(), 4000);
  }

  triggerConstellation() {
    const svgNS = "http://www.w3.org/2000/svg";
    const svg = document.createElementNS(svgNS, "svg");
    svg.setAttribute("class", "constellation-svg");
    svg.setAttribute("viewBox", "0 0 100 100");
    const path = document.createElementNS(svgNS, "path");
    path.setAttribute("d", "M30 35 Q30 30 35 30 Q40 30 40 35 M60 35 Q60 30 65 30 Q70 30 70 35 M30 60 Q50 80 70 60");
    path.setAttribute("class", "constellation-path");
    svg.appendChild(path);
    const points = [[30,35], [35,30], [40,35], [60,35], [65,30], [70,35], [30,60], [50,70], [70,60]];
    points.forEach(p => {
      const circle = document.createElementNS(svgNS, "circle");
      circle.setAttribute("cx", p[0]);
      circle.setAttribute("cy", p[1]);
      circle.setAttribute("r", 2);
      circle.setAttribute("class", "constellation-star");
      circle.style.animationDelay = `${p[0] * 0.02}s`;
      svg.appendChild(circle);
    });
    const constContainer = document.createElement('div');
    constContainer.className = 'reward-container';
    constContainer.appendChild(svg);
    document.body.appendChild(constContainer);
    setTimeout(() => constContainer.remove(), 5000);
  }

  triggerAlphabetChart(alphabetDict) {
    const chartContainer = document.createElement('div');
    chartContainer.id = 'alphabet-chart';
    
    const title = document.createElement('h2');
    title.textContent = "Capital Letters!";
    chartContainer.appendChild(title);

    const grid = document.createElement('div');
    grid.className = 'chart-grid';

    // Build exactly 26 cells
    const letters = Object.keys(alphabetDict);
    const cells = [];
    
    letters.forEach((letter, index) => {
      const cell = document.createElement('div');
      cell.className = 'chart-cell';
      cell.style.animationDelay = `${index * 0.05}s`; // Staggered pop in
      
      // Use the first dictionary item as the representative for the chart
      const item = alphabetDict[letter][0];

      cell.innerHTML = `
        <div class="cell-letter">${letter}</div>
        <div class="cell-emoji">${item.e}</div>
      `;
      cells.push(cell);
      grid.appendChild(cell);
    });

    chartContainer.appendChild(grid);
    document.body.appendChild(chartContainer);

    // Trigger visual fade in
    requestAnimationFrame(() => {
      chartContainer.classList.add('show-chart');
    });

    return {
      container: chartContainer,
      cells: cells,
      title: title
    };
  }
}