---
// CookieBanner.astro - Simple cookie consent banner with Tailwind CSS
---

<div 
  id="cookie-banner" 
  class="fixed bottom-0 left-0 right-0 z-50 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 shadow-lg transform translate-y-full transition-transform duration-300"
>
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
    <!-- Title -->
    <h2 class="text-lg font-bold text-gray-900 dark:text-white mb-2">
      เราใช้คุกกี้
    </h2>
    
    <!-- Description -->
    <p class="text-base text-gray-600 dark:text-gray-300 mb-4">
      เราใช้คุกกี้เพื่อปรับปรุงประสบการณ์การใช้งานของคุณ และวิเคราะห์การใช้งานเว็บไซต์
    </p>
    
    <!-- Checkboxes -->
    <div class="space-y-3 mb-6">
      <!-- Essential -->
      <label class="flex items-start gap-3 p-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700">
        <input 
          type="checkbox" 
          name="consent-essential" 
          checked 
          disabled 
          class="mt-1 w-5 h-5 rounded border-gray-300 text-secondary focus:ring-secondary"
        />
        <div class="flex-1">
          <span class="block font-semibold text-gray-900 dark:text-white text-base">
            คุกกี้ที่จำเป็น
          </span>
          <span class="block text-sm text-gray-600 dark:text-gray-400 mt-1">
            จำเป็นสำหรับการทำงานของเว็บไซต์ ไม่สามารถปิดใช้งานได้
          </span>
        </div>
      </label>
      
      <!-- Analytics -->
      <label class="flex items-start gap-3 p-3 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition cursor-pointer">
        <input 
          type="checkbox" 
          name="consent-analytics" 
          id="banner-analytics"
          class="mt-1 w-5 h-5 rounded border-gray-300 text-secondary focus:ring-secondary"
        />
        <div class="flex-1">
          <span class="block font-semibold text-gray-900 dark:text-white text-base">
            คุกกี้วิเคราะห์ข้อมูล
          </span>
          <span class="block text-sm text-gray-600 dark:text-gray-400 mt-1">
            ช่วยเราเข้าใจว่าผู้เยี่ยมชมใช้งานเว็บไซต์ (Umami Analytics)
          </span>
        </div>
      </label>
      
      <!-- Marketing -->
      <label class="flex items-start gap-3 p-3 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition cursor-pointer">
        <input 
          type="checkbox" 
          name="consent-marketing" 
          id="banner-marketing"
          class="mt-1 w-5 h-5 rounded border-gray-300 text-secondary focus:ring-secondary"
        />
        <div class="flex-1">
          <span class="block font-semibold text-gray-900 dark:text-white text-base">
            คุกกี้การตลาด
          </span>
          <span class="block text-sm text-gray-600 dark:text-gray-400 mt-1">
            ใช้สำหรับติดตามและแสดงโฆษณาที่ตรงกับความสนใจของคุณ
          </span>
        </div>
      </label>
    </div>
    
    <!-- Buttons -->
    <div class="flex flex-col sm:flex-row gap-3">
      <button 
        id="btn-accept-all"
        class="flex-1 px-6 py-3 bg-secondary hover:bg-secondary-hover text-white rounded-lg font-medium text-base transition focus:outline-none focus:ring-2 focus:ring-secondary focus:ring-offset-2"
      >
        ยอมรับทั้งหมด
      </button>
      <button 
        id="btn-reject-all"
        class="flex-1 px-6 py-3 bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-white rounded-lg font-medium text-base transition hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2"
      >
        ปฏิเสธ
      </button>
      <button 
        id="btn-customize"
        class="flex-1 px-6 py-3 bg-primary hover:bg-primary-hover text-white rounded-lg font-medium text-base transition focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
      >
        ปรับแต่ง
      </button>
    </div>
  </div>
</div>

<!-- Consent Modal -->
<div 
  id="consent-modal" 
  class="fixed inset-0 z-50 hidden"
  aria-labelledby="modal-title" 
  role="dialog" 
  aria-modal="true"
>
  <!-- Backdrop -->
  <div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity" id="modal-backdrop"></div>
  
  <!-- Modal Panel -->
  <div class="fixed inset-0 z-10 overflow-y-auto">
    <div class="flex min-h-full items-center justify-center p-4">
      <div 
        id="modal-panel"
        class="relative transform overflow-hidden rounded-xl bg-white dark:bg-gray-800 shadow-2xl transition-all max-w-lg w-full max-h-[90vh] overflow-y-auto"
      >
        <!-- Header -->
        <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
          <h3 id="modal-title" class="text-xl font-bold text-gray-900 dark:text-white">
            การตั้งค่าคุกกี้
          </h3>
          <p class="text-base text-gray-600 dark:text-gray-300 mt-2">
            จัดการการตั้งค่าคุกกี้ของคุณที่นี่
          </p>
        </div>
        
        <!-- Body -->
        <div class="px-6 py-4 space-y-4">
          <!-- Essential -->
          <div class="flex items-start gap-3 p-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700">
            <input 
              type="checkbox" 
              name="modal-essential" 
              checked 
              disabled 
              class="mt-1 w-5 h-5 rounded border-gray-300 text-secondary focus:ring-secondary"
            />
            <div class="flex-1">
              <span class="block font-semibold text-gray-900 dark:text-white text-base">
                คุกกี้ที่จำเป็น
              </span>
              <span class="block text-sm text-gray-600 dark:text-gray-400 mt-1">
                จำเป็นสำหรับการทำงานของเว็บไซต์ ไม่สามารถปิดใช้งานได้
              </span>
            </div>
          </div>
          
          <!-- Analytics -->
          <label class="flex items-start gap-3 p-3 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition cursor-pointer">
            <input 
              type="checkbox" 
              name="modal-analytics" 
              id="modal-analytics"
              class="mt-1 w-5 h-5 rounded border-gray-300 text-secondary focus:ring-secondary"
            />
            <div class="flex-1">
              <span class="block font-semibold text-gray-900 dark:text-white text-base">
                คุกกี้วิเคราะห์ข้อมูล
              </span>
              <span class="block text-sm text-gray-600 dark:text-gray-400 mt-1">
                ช่วยเราเข้าใจว่าผู้เยี่ยมชมใช้งานเว็บไซต์ (Umami Analytics)
              </span>
            </div>
          </label>
          
          <!-- Marketing -->
          <label class="flex items-start gap-3 p-3 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition cursor-pointer">
            <input 
              type="checkbox" 
              name="modal-marketing" 
              id="modal-marketing"
              class="mt-1 w-5 h-5 rounded border-gray-300 text-secondary focus:ring-secondary"
            />
            <div class="flex-1">
              <span class="block font-semibold text-gray-900 dark:text-white text-base">
                คุกกี้การตลาด
              </span>
              <span class="block text-sm text-gray-600 dark:text-gray-400 mt-1">
                ใช้สำหรับติดตามและแสดงโฆษณาที่ตรงกับความสนใจของคุณ
              </span>
            </div>
          </label>
        </div>
        
        <!-- Footer -->
        <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex gap-3">
          <button 
            id="btn-save-preferences"
            class="flex-1 px-6 py-3 bg-secondary hover:bg-secondary-hover text-white rounded-lg font-medium text-base transition focus:outline-none focus:ring-2 focus:ring-secondary focus:ring-offset-2"
          >
            บันทึกการตั้งค่า
          </button>
          <button 
            id="btn-close-modal"
            class="flex-1 px-6 py-3 bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-white rounded-lg font-medium text-base transition hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2"
          >
            ปิด
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  // Consent Manager
  const CONSENT_KEY = 'consent-preferences';
  
  // Get elements
  const banner = document.getElementById('cookie-banner');
  const modal = document.getElementById('consent-modal');
  const modalBackdrop = document.getElementById('modal-backdrop');
  const modalPanel = document.getElementById('modal-panel');
  
  // Banner checkboxes
  const bannerAnalytics = document.getElementById('banner-analytics') as HTMLInputElement;
  const bannerMarketing = document.getElementById('banner-marketing') as HTMLInputElement;
  
  // Modal checkboxes
  const modalAnalytics = document.getElementById('modal-analytics') as HTMLInputElement;
  const modalMarketing = document.getElementById('modal-marketing') as HTMLInputElement;
  
  // Buttons
  const btnAcceptAll = document.getElementById('btn-accept-all');
  const btnRejectAll = document.getElementById('btn-reject-all');
  const btnCustomize = document.getElementById('btn-customize');
  const btnSavePreferences = document.getElementById('btn-save-preferences');
  const btnCloseModal = document.getElementById('btn-close-modal');
  
  // Save consent to localStorage and POST to API
  async function saveConsent(preferences: { essential: boolean; analytics: boolean; marketing: boolean }) {
    const consentData = {
      ...preferences,
      timestamp: new Date().toISOString()
    };
    
    // Save to localStorage
    localStorage.setItem(CONSENT_KEY, JSON.stringify(consentData));
    
    // POST to API
    try {
      await fetch('/api/consent', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          sessionId: crypto.randomUUID(),
          essential: preferences.essential,
          analytics: preferences.analytics,
          marketing: preferences.marketing,
          policyVersion: '1.0',
          locale: 'th'
        })
      });
    } catch (error) {
      console.error('Failed to save consent:', error);
    }
    
    // Hide banner
    hideBanner();
  }
  
  // Show banner
  function showBanner() {
    banner?.classList.remove('translate-y-full');
  }
  
  // Hide banner
  function hideBanner() {
    banner?.classList.add('translate-y-full');
  }
  
  // Show modal
  function showModal() {
    modal?.classList.remove('hidden');
    // Sync checkbox states from banner
    if (modalAnalytics) modalAnalytics.checked = bannerAnalytics?.checked || false;
    if (modalMarketing) modalMarketing.checked = bannerMarketing?.checked || false;
  }
  
  // Hide modal
  function hideModal() {
    modal?.classList.add('hidden');
  }
  
  // Check if consent already exists
  function hasConsent(): boolean {
    return localStorage.getItem(CONSENT_KEY) !== null;
  }
  
  // Initialize
  function init() {
    if (!hasConsent()) {
      showBanner();
    }
  }
  
  // Event Listeners
  btnAcceptAll?.addEventListener('click', () => {
    saveConsent({
      essential: true,
      analytics: true,
      marketing: true
    });
  });
  
  btnRejectAll?.addEventListener('click', () => {
    saveConsent({
      essential: true,
      analytics: false,
      marketing: false
    });
  });
  
  btnCustomize?.addEventListener('click', () => {
    showModal();
  });
  
  btnSavePreferences?.addEventListener('click', () => {
    saveConsent({
      essential: true,
      analytics: modalAnalytics?.checked || false,
      marketing: modalMarketing?.checked || false
    });
    hideModal();
  });
  
  btnCloseModal?.addEventListener('click', () => {
    hideModal();
  });
  
  modalBackdrop?.addEventListener('click', () => {
    hideModal();
  });
  
  // Close modal on escape key
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape' && !modal?.classList.contains('hidden')) {
      hideModal();
    }
  });
  
  // Run init on DOM ready
  init();
</script>
