---
// CookieBanner.astro - Simple cookie consent banner (Accept/Reject only)
---

<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-2xl font-bold text-gray-900 dark:text-white mb-3">
      เราใช้คุกกี้
    </h2>
    
    <!-- Description -->
    <p class="text-base text-gray-600 dark:text-gray-300 mb-6">
      เว็บไซต์ของเราใช้คุกกี้เพื่อปรับปรุงประสบการณ์การใช้งานและวิเคราะห์การใช้งานเว็บไซต์ 
      การกดปุ่ม "ยอมรับทั้งหมด" แสดงว่าคุณยินยอมให้เราใช้คุกกี้ตาม 
      <a href="/privacy-policy" class="text-secondary hover:underline font-medium">นโยบายความเป็นส่วนตัว</a>
    </p>
    
    <!-- Buttons -->
    <div class="flex flex-col sm:flex-row gap-4">
      <button 
        id="accept-all"
        class="bg-secondary text-white px-8 py-3 rounded-lg font-semibold text-base hover:bg-secondary-hover transition shadow-md"
      >
        ยอมรับทั้งหมด
      </button>
      <button 
        id="reject-all"
        class="bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-white px-8 py-3 rounded-lg font-semibold text-base hover:bg-gray-300 dark:hover:bg-gray-600 transition"
      >
        ปฏิเสธ
      </button>
    </div>
    
    <!-- Additional Info -->
    <p class="text-sm text-gray-500 dark:text-gray-400 mt-4">
      คุณสามารถเปลี่ยนแปลงการตั้งค่าคุกกี้ได้ตลอดเวลาโดยคลิกปุ่ม "ตั้งค่าคุกกี้" ในส่วนท้ายของเว็บไซต์
    </p>
  </div>
</div>

<script>
  const banner = document.getElementById('cookie-banner');
  const acceptBtn = document.getElementById('accept-all');
  const rejectBtn = document.getElementById('reject-all');
  
  // Check if consent already given
  const existingConsent = localStorage.getItem('consent-preferences');
  if (!existingConsent) {
    // Show banner after 1 second
    setTimeout(() => {
      banner.classList.remove('translate-y-full');
    }, 1000);
  }
  
  // Accept all
  acceptBtn.addEventListener('click', () => {
    const consent = {
      essential: true,
      analytics: true,
      marketing: true,
      timestamp: new Date().toISOString(),
      policyVersion: '1.0'
    };
    
    localStorage.setItem('consent-preferences', JSON.stringify(consent));
    banner.classList.add('translate-y-full');
    
    // Log consent to database
    logConsent(consent);
    
    // Reload page to enable analytics
    setTimeout(() => window.location.reload(), 500);
  });
  
  // Reject all
  rejectBtn.addEventListener('click', () => {
    const consent = {
      essential: true,
      analytics: false,
      marketing: false,
      timestamp: new Date().toISOString(),
      policyVersion: '1.0'
    };
    
    localStorage.setItem('consent-preferences', JSON.stringify(consent));
    banner.classList.add('translate-y-full');
    
    // Log consent to database
    logConsent(consent);
  });
  
  // Log consent to database
  async function logConsent(consent) {
    try {
      const sessionId = crypto.randomUUID();
      await fetch('/api/consent', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          sessionId,
          ...consent,
          locale: 'th'
        })
      });
    } catch (error) {
      console.error('Failed to log consent:', error);
    }
  }
</script>
