export class PresentationLoader {
  constructor() {
    this.overlay = null;
  }

  show() {
    if (this.overlay) this.hide();

    this.overlay = document.createElement('div');
    this.overlay.className = 'pres-loader-overlay';
    this.overlay.innerHTML = this._buildHTML();
    document.body.appendChild(this.overlay);

    // Force reflow then fade in
    requestAnimationFrame(() => {
      requestAnimationFrame(() => {
        this.overlay.classList.add('visible');
      });
    });
  }

  hide() {
    if (!this.overlay) return;
    this.overlay.classList.remove('visible');
    
    const el = this.overlay;
    setTimeout(() => el.remove(), 700);
    this.overlay = null;
  }

  _buildHTML() {
    const buildSlide = (delay) => `
      <div class="pres-slide-group" style="animation-delay: ${delay}s;">
        <div class="pres-slide-box" style="animation-delay: ${delay}s;"></div>
        
        <!-- Scattered Parts -->
        <div class="pres-part part-title" style="--tx: -150px; --ty: -180px; --rot: -25deg; animation-delay: ${delay}s;"></div>
        <div class="pres-part part-image" style="--tx: 180px; --ty: -120px; --rot: 15deg; animation-delay: ${delay}s;"></div>
        
        <div class="pres-part part-line line-1" style="--tx: -180px; --ty: 120px; --rot: 40deg; animation-delay: ${delay}s;"></div>
        <div class="pres-part part-line line-2" style="--tx: 160px; --ty: 150px; --rot: -10deg; animation-delay: ${delay}s;"></div>
        <div class="pres-part part-line line-3" style="--tx: 60px; --ty: -160px; --rot: 60deg; animation-delay: ${delay}s;"></div>
        
        <div class="pres-part part-circle" style="--tx: -100px; --ty: 160px; --rot: 0deg; animation-delay: ${delay}s;"></div>
        <div class="pres-part part-square" style="--tx: 120px; --ty: 140px; --rot: 45deg; animation-delay: ${delay}s;"></div>
      </div>
    `;

    return `
      <div class="pres-ambient-glow"></div>

      <!-- Top Status Text -->
      <div class="pres-status-text-container">
        <div class="pres-status-text">Generiere Präsentation...</div>
      </div>

      <!-- 3D Stage for Slides -->
      <div class="pres-stage-3d">
        ${buildSlide('0')}
        ${buildSlide('1.5')}
        ${buildSlide('3.0')}
      </div>
      
      <!-- Bottom Status Bar -->
      <div class="pres-status-bar">
        <div class="pres-phase-dots">
          <div class="pres-phase-dot active"></div>
          <div class="pres-phase-dot active"></div>
          <div class="pres-phase-dot active"></div>
        </div>
        <div class="pres-phase-label">FOLIEN ERSTELLEN</div>
      </div>
    `;
  }
}

export const presentationLoader = new PresentationLoader();