console.log("Hello world!"); // BowsersFuryWeather.js - Module Core
export class BowsersFuryWeather {
  constructor(config = {}) {
    this.containerId = config.containerId || 'fury-container';
    this.furyActive = false;
    this.timer = null;
    this.initCanvas();
  }

  // Set up the visual container
  initCanvas() {
    this.container = document.getElementById(this.containerId);
    if (!this.container) {
      this.container = document.createElement('div');
      this.container.id = this.containerId;
      document.body.appendChild(this.container);
    }
    this.applyStyles({
      width: '100%',
      height: '300px',
      position: 'relative',
      overflow: 'hidden',
      background: 'linear-gradient(to bottom, #87CEEB, #E0F6FF)',
      transition: 'all 3s ease-in-out',
      fontFamily: 'sans-serif',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center'
    }, this.container);
    
    this.container.innerHTML = `<div id="weather-status" style="font-size: 24px; font-weight: bold; color: #333;">Calm Weather...</div>`;
  }

  // Update logic based on weather input
  updateWeather(weatherCondition) {
    const condition = weatherCondition.toLowerCase();
    const statusText = document.getElementById('weather-status');

    if (condition.includes('storm') || condition.includes('thunderstorm') || condition.includes('heavy rain')) {
      statusText.innerText = "The sky is darkening...";
      // Trigger Fury mode after a short dramatic delay
      clearTimeout(this.timer);
      this.timer = setTimeout(() => this.triggerFury(), 2000);
    } else {
      statusText.innerText = `Current Weather: ${weatherCondition}`;
      this.calmFury();
    }
  }

  // Activate Fury Mode (The Storm Awakens)
  triggerFury() {
    if (this.furyActive) return;
    this.furyActive = true;
    
    // Transform background to dark Bowser's Fury aesthetic
    this.applyStyles({
      background: 'linear-gradient(to bottom, #050014, #2a0808)',
      boxShadow: 'inset 0 0 100px rgba(255, 0, 0, 0.6)'
    }, this.container);

    const statusText = document.getElementById('weather-status');
    statusText.style.color = '#ff3333';
    statusText.innerHTML = `⚠️ FURY MODE ACTIVE! <br><span style="font-size: 14px; color: #ffaa00;">Fury Bowser has awakened due to the storm!</span>`;
    
    this.spawnFuryEffects();
  }

  // Return to normal
  calmFury() {
    if (!this.furyActive) return;
    this.furyActive = false;
    clearTimeout(this.timer);

    this.applyStyles({
      background: 'linear-gradient(to bottom, #87CEEB, #E0F6FF)',
      boxShadow: 'none'
    }, this.container);

    const statusText = document.getElementById('weather-status');
    statusText.style.color = '#333';
    
    // Remove ash/fire elements
    const elements = this.container.querySelectorAll('.fury-particle');
    elements.forEach(el => el.remove());
  }

  // Helper to spawn visual ash/fire particles
  spawnFuryEffects() {
    for (let i = 0; i < 20; i++) {
      const particle = document.createElement('div');
      particle.className = 'fury-particle';
      this.applyStyles({
        position: 'absolute',
        width: `${Math.random() * 6 + 4}px`,
        height: `${Math.random() * 6 + 4}px`,
        background: Math.random() > 0.5 ? '#ff4500' : '#ffcc00',
        bottom: '0px',
        left: `${Math.random() * 100}%`,
        opacity: Math.random(),
        borderRadius: '50%',
        animation: `furyRise ${Math.random() * 3 + 2}s infinite linear`
      }, particle);
      this.container.appendChild(particle);
    }
    this.injectAnimationStyles();
  }

  applyStyles(styles, element) {
    Object.assign(element.style, styles);
  }

  injectAnimationStyles() {
    if (document.getElementById('fury-styles')) return;
    const style = document.createElement('style');
    style.id = 'fury-styles';
    style.innerHTML = `
      @keyframes furyRise {
        0% { transform: translateY(0) scale(1); opacity: 0.8; }
        100% { transform: translateY(-250px) scale(0); opacity: 0; }
      }
    `;
    document.head.appendChild(style);
  }
}

// --- JSFIDDLE IMPLEMENTATION & DEMO ---
// Instantiating the module inside your script
const BowserWeatherApp = new BowsersFuryWeather({ containerId: 'fury-box' });

// Simulated Weather Controls for Testing in JSFiddle
document.getElementById('btn-clear').addEventListener('click', () => BowserWeatherApp.updateWeather('Sunny'));
document.getElementById('btn-storm').addEventListener('click', () => BowserWeatherApp.updateWeather('Heavy Thunderstorm'));