// Cookie Banner Functionality
let cookieBannerElement = null;

function createCookieBanner() {
  const cookieBanner = document.createElement('div');
  cookieBanner.id = 'cookie-banner';
  cookieBanner.className = 'fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 shadow-2xl z-50 transform translate-y-0 transition-transform duration-500';
  
  cookieBanner.innerHTML = `
    <div class="container mx-auto px-4 py-6">
      <div class="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-4">
        <!-- Cookie Text -->
        <div class="flex-1">
          <div class="flex items-start space-x-3">
            <div class="flex-shrink-0 mt-1">
              <i class="fas fa-cookie-bite text-2xl text-[var(--accent-color)]"></i>
            </div>
            <div>
              <h3 class="font-bold text-[var(--navy-color)] font-[var(--font-family-heading)] mb-2">
                Wir verwenden Cookies
              </h3>
              <p class="text-[var(--gray-text-color)] text-sm font-[var(--font-family-body)] leading-relaxed">
                Diese Website verwendet Cookies, um Ihnen die bestmögliche Nutzererfahrung zu bieten. 
                Durch die weitere Nutzung der Website stimmen Sie der Verwendung von Cookies zu. 
                <a href="/cookies" class="text-[var(--aqua-color)] hover:underline font-medium">
                  Mehr erfahren
                </a>
              </p>
            </div>
          </div>
        </div>
        
        <!-- Cookie Buttons -->
        <div class="flex flex-col sm:flex-row gap-3 w-full lg:w-auto">
          <button 
            id="cookie-settings" 
            class="px-6 py-2 border border-gray-300 text-[var(--gray-text-color)] hover:bg-gray-50 rounded-lg transition-colors duration-200 font-medium text-sm font-[var(--font-family-body)]"
          >
            <i class="fas fa-cog mr-2"></i>
            Einstellungen
          </button>
          <button 
            id="cookie-decline" 
            class="px-6 py-2 border border-[var(--navy-color)] text-[var(--navy-color)] hover:bg-[var(--navy-color)] hover:text-white rounded-lg transition-colors duration-200 font-medium text-sm font-[var(--font-family-body)]"
          >
            <i class="fas fa-times mr-2"></i>
            Ablehnen
          </button>
          <button 
            id="cookie-accept" 
            class="px-8 py-2 bg-[var(--accent-color)] text-white hover:bg-yellow-600 rounded-lg transition-colors duration-200 font-bold text-sm font-[var(--font-family-body)]"
          >
            <i class="fas fa-check mr-2"></i>
            Alle akzeptieren
          </button>
        </div>
      </div>
    </div>
  `;
  
  return cookieBanner;
}

function showCookieBanner() {
  if (!cookieBannerElement) {
    cookieBannerElement = createCookieBanner();
    document.body.appendChild(cookieBannerElement);
    
    // Add event listeners
    document.getElementById('cookie-accept').addEventListener('click', acceptAllCookies);
    document.getElementById('cookie-decline').addEventListener('click', declineAllCookies);
    document.getElementById('cookie-settings').addEventListener('click', showCookieSettings);
  }
  
  // Show banner with animation
  setTimeout(() => {
    cookieBannerElement.classList.remove('translate-y-full');
  }, 100);
}

function hideCookieBanner() {
  if (cookieBannerElement) {
    cookieBannerElement.classList.add('translate-y-full');
    setTimeout(() => {
      if (cookieBannerElement && cookieBannerElement.parentNode) {
        cookieBannerElement.parentNode.removeChild(cookieBannerElement);
        cookieBannerElement = null;
      }
    }, 500);
  }
}

function acceptAllCookies() {
  localStorage.setItem('cookies-accepted', 'true');
  localStorage.setItem('cookies-necessary', 'true');
  localStorage.setItem('cookies-analytics', 'true');
  localStorage.setItem('cookies-marketing', 'true');
  
  // Enable all cookie types here
  console.log('All cookies accepted');
  
  hideCookieBanner();
}

function declineAllCookies() {
  localStorage.setItem('cookies-accepted', 'false');
  localStorage.setItem('cookies-necessary', 'true'); // Always true
  localStorage.setItem('cookies-analytics', 'false');
  localStorage.setItem('cookies-marketing', 'false');
  
  // Disable non-essential cookies here
  console.log('Non-essential cookies declined');
  
  hideCookieBanner();
}

function showCookieSettings() {
  // Create and show cookie settings modal
  const modal = document.createElement('div');
  modal.id = 'cookie-settings-modal';
  modal.className = 'fixed inset-0 bg-black bg-opacity-50 z-[60] flex items-center justify-center p-4';
  
  modal.innerHTML = `
    <div class="bg-white rounded-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
      <div class="p-8">
        <div class="flex items-center justify-between mb-6">
          <h2 class="text-2xl font-bold text-[var(--navy-color)] font-[var(--font-family-heading)]">
            Cookie-Einstellungen
          </h2>
          <button id="close-cookie-settings" class="text-gray-400 hover:text-gray-600">
            <i class="fas fa-times text-xl"></i>
          </button>
        </div>
        
        <div class="space-y-6">
          <!-- Necessary Cookies -->
          <div class="border-b border-gray-200 pb-4">
            <div class="flex items-center justify-between mb-2">
              <h3 class="font-bold text-[var(--navy-color)] font-[var(--font-family-heading)]">
                Notwendige Cookies
              </h3>
              <div class="flex items-center">
                <input type="checkbox" id="cookies-necessary" checked disabled class="sr-only">
                <div class="w-12 h-6 bg-[var(--accent-color)] rounded-full relative">
                  <div class="absolute right-1 top-1 w-4 h-4 bg-white rounded-full"></div>
                </div>
              </div>
            </div>
            <p class="text-[var(--gray-text-color)] text-sm font-[var(--font-family-body)]">
              Diese Cookies sind für die ordnungsgemäße Funktion der Website erforderlich und können nicht deaktiviert werden.
            </p>
          </div>
          
          <!-- Analytics Cookies -->
          <div class="border-b border-gray-200 pb-4">
            <div class="flex items-center justify-between mb-2">
              <h3 class="font-bold text-[var(--navy-color)] font-[var(--font-family-heading)]">
                Analyse-Cookies
              </h3>
              <div class="flex items-center">
                <input type="checkbox" id="cookies-analytics" class="sr-only cookie-toggle">
                <div class="w-12 h-6 bg-gray-300 rounded-full relative cursor-pointer cookie-switch" data-target="cookies-analytics">
                  <div class="absolute left-1 top-1 w-4 h-4 bg-white rounded-full transition-transform duration-200 cookie-slider"></div>
                </div>
              </div>
            </div>
            <p class="text-[var(--gray-text-color)] text-sm font-[var(--font-family-body)]">
              Diese Cookies helfen uns, die Website-Nutzung zu verstehen und zu verbessern.
            </p>
          </div>
          
          <!-- Marketing Cookies -->
          <div class="pb-4">
            <div class="flex items-center justify-between mb-2">
              <h3 class="font-bold text-[var(--navy-color)] font-[var(--font-family-heading)]">
                Marketing-Cookies
              </h3>
              <div class="flex items-center">
                <input type="checkbox" id="cookies-marketing" class="sr-only cookie-toggle">
                <div class="w-12 h-6 bg-gray-300 rounded-full relative cursor-pointer cookie-switch" data-target="cookies-marketing">
                  <div class="absolute left-1 top-1 w-4 h-4 bg-white rounded-full transition-transform duration-200 cookie-slider"></div>
                </div>
              </div>
            </div>
            <p class="text-[var(--gray-text-color)] text-sm font-[var(--font-family-body)]">
              Diese Cookies ermöglichen es uns, Ihnen relevante Werbung und personalisierte Inhalte anzuzeigen.
            </p>
          </div>
        </div>
        
        <div class="flex flex-col sm:flex-row gap-3 mt-8">
          <button 
            id="save-cookie-settings" 
            class="flex-1 px-6 py-3 bg-[var(--accent-color)] text-white hover:bg-yellow-600 rounded-lg transition-colors duration-200 font-bold font-[var(--font-family-body)]"
          >
            Einstellungen speichern
          </button>
          <button 
            id="accept-all-modal" 
            class="flex-1 px-6 py-3 border border-[var(--navy-color)] text-[var(--navy-color)] hover:bg-[var(--navy-color)] hover:text-white rounded-lg transition-colors duration-200 font-medium font-[var(--font-family-body)]"
          >
            Alle akzeptieren
          </button>
        </div>
      </div>
    </div>
  `;
  
  document.body.appendChild(modal);
  
  // Add event listeners for modal
  document.getElementById('close-cookie-settings').addEventListener('click', closeCookieSettings);
  document.getElementById('save-cookie-settings').addEventListener('click', saveCookieSettings);
  document.getElementById('accept-all-modal').addEventListener('click', acceptAllFromModal);
  
  // Add toggle functionality
  const switches = document.querySelectorAll('.cookie-switch');
  switches.forEach(switchEl => {
    switchEl.addEventListener('click', toggleCookieSwitch);
  });
  
  // Load current settings
  loadCurrentCookieSettings();
}

function toggleCookieSwitch(event) {
  const switchEl = event.currentTarget;
  const targetId = switchEl.getAttribute('data-target');
  const checkbox = document.getElementById(targetId);
  const slider = switchEl.querySelector('.cookie-slider');
  
  const isChecked = checkbox.checked;
  checkbox.checked = !isChecked;
  
  if (checkbox.checked) {
    switchEl.classList.remove('bg-gray-300');
    switchEl.classList.add('bg-[var(--accent-color)]');
    slider.classList.remove('translate-x-0');
    slider.classList.add('translate-x-6');
  } else {
    switchEl.classList.remove('bg-[var(--accent-color)]');
    switchEl.classList.add('bg-gray-300');
    slider.classList.remove('translate-x-6');
    slider.classList.add('translate-x-0');
  }
}

function loadCurrentCookieSettings() {
  const analytics = localStorage.getItem('cookies-analytics') === 'true';
  const marketing = localStorage.getItem('cookies-marketing') === 'true';
  
  updateSwitchState('cookies-analytics', analytics);
  updateSwitchState('cookies-marketing', marketing);
}

function updateSwitchState(targetId, isEnabled) {
  const checkbox = document.getElementById(targetId);
  const switchEl = document.querySelector(`[data-target="${targetId}"]`);
  const slider = switchEl.querySelector('.cookie-slider');
  
  checkbox.checked = isEnabled;
  
  if (isEnabled) {
    switchEl.classList.remove('bg-gray-300');
    switchEl.classList.add('bg-[var(--accent-color)]');
    slider.classList.remove('translate-x-0');
    slider.classList.add('translate-x-6');
  } else {
    switchEl.classList.remove('bg-[var(--accent-color)]');
    switchEl.classList.add('bg-gray-300');
    slider.classList.remove('translate-x-6');
    slider.classList.add('translate-x-0');
  }
}

function closeCookieSettings() {
  const modal = document.getElementById('cookie-settings-modal');
  if (modal) {
    modal.remove();
  }
}

function saveCookieSettings() {
  const analytics = document.getElementById('cookies-analytics').checked;
  const marketing = document.getElementById('cookies-marketing').checked;
  
  localStorage.setItem('cookies-accepted', 'true');
  localStorage.setItem('cookies-necessary', 'true');
  localStorage.setItem('cookies-analytics', analytics.toString());
  localStorage.setItem('cookies-marketing', marketing.toString());
  
  console.log('Cookie settings saved:', { analytics, marketing });
  
  closeCookieSettings();
  hideCookieBanner();
}

function acceptAllFromModal() {
  acceptAllCookies();
  closeCookieSettings();
}

function checkCookieConsent() {
  const cookiesAccepted = localStorage.getItem('cookies-accepted');
  
  if (cookiesAccepted === null) {
    // Show banner after a short delay
    setTimeout(showCookieBanner, 1000);
  }
}

// Export functions for the website system
function init() {
  checkCookieConsent();
}

function teardown() {
  if (cookieBannerElement) {
    hideCookieBanner();
  }
  
  const modal = document.getElementById('cookie-settings-modal');
  if (modal) {
    modal.remove();
  }
}

// Make functions available globally if needed
window.showCookieBanner = showCookieBanner;
window.hideCookieBanner = hideCookieBanner;

export { init, teardown };