// Video control variables
let backgroundVideo;
let muteToggleButton;
let muteIcon;
let audioIndicator;
let audioStatus;
let playToggleButton;
let playIcon;
let playStatus;
let audioPromptBtns;
let audioCTABtns;

// Audio control functions
function enableAudio() {
  if (backgroundVideo) {
    backgroundVideo.muted = false;
    muteIcon.className = 'fas fa-volume-up text-lg transition-all duration-300';
    muteToggleButton.title = 'Mute Audio';
    audioIndicator.style.opacity = '1';
    audioStatus.textContent = '🔊 Audio On';
    audioStatus.className = 'bg-green-600/80 text-white px-2 py-1 rounded text-xs font-bold';
  }
}

function disableAudio() {
  if (backgroundVideo) {
    backgroundVideo.muted = true;
    muteIcon.className = 'fas fa-volume-mute text-lg transition-all duration-300';
    muteToggleButton.title = 'Enable Audio';
    audioIndicator.style.opacity = '0';
    audioStatus.textContent = '🔇 Muted';
    audioStatus.className = 'bg-red-600/80 text-white px-2 py-1 rounded text-xs font-bold';
  }
}

function toggleMute() {
  if (backgroundVideo) {
    if (backgroundVideo.muted) {
      enableAudio();
    } else {
      disableAudio();
    }
  }
}

// Play/Pause control functions
function playVideo() {
  if (backgroundVideo) {
    backgroundVideo.play().then(() => {
      playIcon.className = 'fas fa-pause text-lg transition-all duration-300';
      playToggleButton.title = 'Pause Video';
      playStatus.textContent = '🎬 Playing';
      playStatus.className = 'bg-green-600/80 text-white px-2 py-1 rounded text-xs font-bold';
    }).catch((error) => {
      console.log('Play failed:', error);
    });
  }
}

function pauseVideo() {
  if (backgroundVideo) {
    backgroundVideo.pause();
    playIcon.className = 'fas fa-play text-lg transition-all duration-300';
    playToggleButton.title = 'Play Video';
    playStatus.textContent = '⏸️ Paused';
    playStatus.className = 'bg-orange-600/80 text-white px-2 py-1 rounded text-xs font-bold';
  }
}

function togglePlayPause() {
  if (backgroundVideo) {
    if (backgroundVideo.paused) {
      playVideo();
    } else {
      pauseVideo();
    }
  }
}

// Additional button handlers
function handleAudioPromptClick() {
  enableAudio();
  
  // Add visual feedback
  const btn = event.target.closest('button');
  if (btn) {
    btn.innerHTML = '<i class="fas fa-check mr-2"></i>Audio Enabled!';
    btn.className = 'bg-gradient-to-r from-green-600 to-blue-600 text-white font-bold px-6 py-3 rounded-full transition-all duration-300';
    setTimeout(() => {
      btn.innerHTML = '<i class="fas fa-volume-up mr-2"></i>Enable Audio';
      btn.className = 'audio-prompt-btn bg-gradient-to-r from-green-500 to-blue-500 hover:from-green-400 hover:to-blue-400 text-white font-bold px-6 py-3 rounded-full transition-all duration-300 transform hover:scale-105';
    }, 2000);
  }
}

function handleAudioCTAClick() {
  enableAudio();
  
  // Add visual feedback
  const btn = event.target.closest('button');
  if (btn) {
    const originalContent = btn.innerHTML;
    btn.innerHTML = '<i class="fas fa-check mr-2"></i>Audio Enabled!';
    btn.className = 'inline-flex items-center bg-green-500/30 text-white font-semibold px-4 py-2 rounded-lg transition-all duration-300';
    setTimeout(() => {
      btn.innerHTML = originalContent;
      btn.className = 'inline-flex items-center bg-white/20 hover:bg-white/30 text-white font-semibold px-4 py-2 rounded-lg transition-all duration-300 audio-cta-btn';
    }, 2000);
  }
}

// Initialize video controls
function init() {
  // Get video and control elements
  backgroundVideo = document.getElementById('backgroundVideo');
  muteToggleButton = document.getElementById('muteToggle');
  muteIcon = document.getElementById('muteIcon');
  audioIndicator = document.getElementById('audioIndicator');
  audioStatus = document.getElementById('audioStatus');
  playToggleButton = document.getElementById('playToggle');
  playIcon = document.getElementById('playIcon');
  playStatus = document.getElementById('playStatus');
  audioPromptBtns = document.querySelectorAll('.audio-prompt-btn');
  audioCTABtns = document.querySelectorAll('.audio-cta-btn');
  
  // Add event listeners
  if (muteToggleButton) {
    muteToggleButton.addEventListener('click', toggleMute);
  }
  
  if (playToggleButton) {
    playToggleButton.addEventListener('click', togglePlayPause);
  }
  
  // Add listeners for audio prompt buttons
  audioPromptBtns.forEach(btn => {
    btn.addEventListener('click', handleAudioPromptClick);
  });
  
  // Add listeners for audio CTA buttons
  audioCTABtns.forEach(btn => {
    btn.addEventListener('click', handleAudioCTAClick);
  });
  
  // Set initial state
  if (backgroundVideo) {
    // Ensure video plays automatically and is muted initially
    backgroundVideo.muted = true;
    backgroundVideo.play().then(() => {
      // Video started playing successfully
      playIcon.className = 'fas fa-pause text-lg transition-all duration-300';
      playToggleButton.title = 'Pause Video';
      playStatus.textContent = '🎬 Playing';
      playStatus.className = 'bg-green-600/80 text-white px-2 py-1 rounded text-xs font-bold';
    }).catch((error) => {
      console.log('Auto-play failed:', error);
      // If autoplay fails, show play button
      playIcon.className = 'fas fa-play text-lg transition-all duration-300';
      playToggleButton.title = 'Play Video';
      playStatus.textContent = '▶️ Click to Play';
      playStatus.className = 'bg-orange-600/80 text-white px-2 py-1 rounded text-xs font-bold';
    });
    
    // Handle video events
    backgroundVideo.addEventListener('play', () => {
      playIcon.className = 'fas fa-pause text-lg transition-all duration-300';
      playToggleButton.title = 'Pause Video';
      playStatus.textContent = '🎬 Playing';
      playStatus.className = 'bg-green-600/80 text-white px-2 py-1 rounded text-xs font-bold';
    });
    
    backgroundVideo.addEventListener('pause', () => {
      playIcon.className = 'fas fa-play text-lg transition-all duration-300';
      playToggleButton.title = 'Play Video';
      playStatus.textContent = '⏸️ Paused';
      playStatus.className = 'bg-orange-600/80 text-white px-2 py-1 rounded text-xs font-bold';
    });
    
    // Handle video loading
    backgroundVideo.addEventListener('loadeddata', () => {
      console.log('Video loaded successfully');
    });
    
    // Handle video errors
    backgroundVideo.addEventListener('error', (e) => {
      console.log('Video error:', e);
    });
  }
  
  // Initial audio indicator state (hidden when muted)
  if (audioIndicator) {
    audioIndicator.style.opacity = '0';
  }
  
  // Set initial audio status
  if (audioStatus) {
    audioStatus.textContent = '🔇 Muted';
    audioStatus.className = 'bg-red-600/80 text-white px-2 py-1 rounded text-xs font-bold';
  }
}

// Cleanup function
function teardown() {
  if (muteToggleButton) {
    muteToggleButton.removeEventListener('click', toggleMute);
  }
  
  if (playToggleButton) {
    playToggleButton.removeEventListener('click', togglePlayPause);
  }
  
  // Remove listeners for audio prompt buttons
  if (audioPromptBtns) {
    audioPromptBtns.forEach(btn => {
      btn.removeEventListener('click', handleAudioPromptClick);
    });
  }
  
  // Remove listeners for audio CTA buttons
  if (audioCTABtns) {
    audioCTABtns.forEach(btn => {
      btn.removeEventListener('click', handleAudioCTAClick);
    });
  }
  
  // Reset variables
  backgroundVideo = null;
  muteToggleButton = null;
  muteIcon = null;
  audioIndicator = null;
  audioStatus = null;
  playToggleButton = null;
  playIcon = null;
  playStatus = null;
  audioPromptBtns = null;
  audioCTABtns = null;
}

// Export functions
export { init, teardown };