---
// Cookie Consent Banner Component
// Displays on first visit, allows users to accept/reject cookie categories
---

<div
  id="cookie-consent-banner"
  class="fixed bottom-0 left-0 right-0 z-50 bg-white border-t-2 border-primary-600 shadow-2xl p-6 md:p-8 transform translate-y-full transition-transform duration-300 ease-in-out"
  role="region"
  aria-labelledby="consent-title"
  aria-describedby="consent-description"
>
  <div class="container mx-auto max-w-7xl">
    <div class="flex flex-col lg:flex-row gap-6 items-start lg:items-center justify-between">
      <!-- Consent Content -->
      <div class="flex-1">
        <h2 id="consent-title" class="text-xl md:text-2xl font-bold text-secondary-900 mb-3">
          เรายึดถือความเป็นส่วนตัวของคุณ
        </h2>
        <p id="consent-description" class="text-base md:text-lg text-secondary-700 leading-relaxed mb-4">
          เราใช้คุกกี้เพื่อปรับปรุงประสบการณ์การใช้งาน วิเคราะห์การเข้าใช้งาน และแสดงเนื้อหาที่ตรงใจคุณ 
          คุณสามารถเลือกยอมรับหรือปฏิเสธคุกกี้ที่ไม่จำเป็นได้
        </p>
        
        <!-- Cookie Categories -->
        <div class="space-y-3 mt-4">
          <!-- Essential Cookies (Always On) -->
          <div class="flex items-center gap-3 bg-secondary-50 p-3 rounded-lg">
            <input
              type="checkbox"
              id="consent-essential"
              checked
              disabled
              class="w-5 h-5 accent-primary-600 rounded"
            />
            <label for="consent-essential" class="flex-1 cursor-pointer">
              <span class="font-semibold text-secondary-900">คุกกี้จำเป็น</span>
              <span class="text-sm text-secondary-600 block">ใช้สำหรับการทำงานของเว็บไซต์ ไม่สามารถปิดได้</span>
            </label>
            <span class="text-xs px-2 py-1 bg-primary-600 text-white rounded">จำเป็น</span>
          </div>
          
          <!-- Analytics Cookies -->
          <div class="flex items-center gap-3 bg-secondary-50 p-3 rounded-lg">
            <input
              type="checkbox"
              id="consent-analytics"
              class="w-5 h-5 accent-primary-600 rounded consent-checkbox"
            />
            <label for="consent-analytics" class="flex-1 cursor-pointer">
              <span class="font-semibold text-secondary-900">คุกกี้วิเคราะห์ข้อมูล</span>
              <span class="text-sm text-secondary-600 block">ช่วยให้เราเข้าใจพฤติกรรมการใช้งาน</span>
            </label>
          </div>
          
          <!-- Marketing Cookies -->
          <div class="flex items-center gap-3 bg-secondary-50 p-3 rounded-lg">
            <input
              type="checkbox"
              id="consent-marketing"
              class="w-5 h-5 accent-primary-600 rounded consent-checkbox"
            />
            <label for="consent-marketing" class="flex-1 cursor-pointer">
              <span class="font-semibold text-secondary-900">คุกกี้การตลาด</span>
              <span class="text-sm text-secondary-600 block">ใช้สำหรับแสดงโฆษณาที่เกี่ยวข้อง</span>
            </label>
          </div>
        </div>
      </div>
      
      <!-- Action Buttons -->
      <div class="flex flex-col sm:flex-row gap-3 flex-shrink-0">
        <button
          id="consent-reject"
          class="bg-secondary-800 hover:bg-secondary-900 text-white px-6 py-3 rounded-lg font-semibold transition-colors"
        >
          ปฏิเสธทั้งหมด
        </button>
        <button
          id="consent-accept"
          class="bg-primary-600 hover:bg-primary-700 text-white px-6 py-3 rounded-lg font-semibold transition-colors"
        >
          ยอมรับทั้งหมด
        </button>
      </div>
    </div>
    
    <!-- Privacy Policy Link -->
    <div class="mt-6 pt-6 border-t border-secondary-200 text-center">
      <p class="text-sm text-secondary-600">
        การใช้งานคุกกี้ของเราเป็นไปตาม 
        <a href="/privacy-policy" class="text-primary-600 hover:underline font-medium">นโยบายความเป็นส่วนตัว</a>
        และ 
        <a href="/terms-and-conditions" class="text-primary-600 hover:underline font-medium">ข้อกำหนดการใช้งาน</a>
      </p>
    </div>
  </div>
</div>

<script>
  interface ConsentPreferences {
    essential: boolean;
    analytics: boolean;
    marketing: boolean;
    timestamp: string;
    policyVersion: string;
  }

  const POLICY_VERSION = '1.0.0';
  const CONSENT_STORAGE_KEY = 'consent-preferences';
  const CONSENT_LOG_API = '/api/consent';

  function generateSessionId(): string {
    return 'ses_' + Math.random().toString(36).substring(2, 15) + 
           Math.random().toString(36).substring(2, 15);
  }

  function getStoredConsent(): ConsentPreferences | null {
    const stored = localStorage.getItem(CONSENT_STORAGE_KEY);
    return stored ? JSON.parse(stored) : null;
  }

  async function saveConsent(consent: ConsentPreferences) {
    localStorage.setItem(CONSENT_STORAGE_KEY, JSON.stringify(consent));
    
    try {
      const sessionId = sessionStorage.getItem('consent_session_id') || generateSessionId();
      sessionStorage.setItem('consent_session_id', sessionId);
      
      await fetch(CONSENT_LOG_API, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          sessionId,
          consent,
          policyVersion: POLICY_VERSION,
        }),
      });
    } catch (error) {
      console.error('Failed to log consent:', error);
    }
  }

  function showBanner() {
    const banner = document.getElementById('cookie-consent-banner')!;
    banner.classList.remove('translate-y-full');
  }

  function hideBanner() {
    const banner = document.getElementById('cookie-consent-banner')!;
    banner.classList.add('translate-y-full');
  }

  function initConsent() {
    const stored = getStoredConsent();
    
    if (stored) {
      const analyticsCheckbox = document.getElementById('consent-analytics') as HTMLInputElement;
      const marketingCheckbox = document.getElementById('consent-marketing') as HTMLInputElement;
      
      if (analyticsCheckbox) analyticsCheckbox.checked = stored.analytics;
      if (marketingCheckbox) marketingCheckbox.checked = stored.marketing;
      
      loadConsentedScripts(stored);
      return;
    }
    
    setTimeout(showBanner, 500);
  }

  function loadConsentedScripts(consent: ConsentPreferences) {
    if (consent.analytics && import.meta.env.PUBLIC_UMAMI_WEBSITE_ID) {
      const umamiScript = document.createElement('script');
      umamiScript.defer = true;
      umamiScript.src = 'https://analytics.moreminimore.com/script.js';
      umamiScript.setAttribute('data-website-id', import.meta.env.PUBLIC_UMAMI_WEBSITE_ID);
      document.head.appendChild(umamiScript);
    }
  }

  function handleAccept() {
    const analytics = (document.getElementById('consent-analytics') as HTMLInputElement)?.checked ?? false;
    const marketing = (document.getElementById('consent-marketing') as HTMLInputElement)?.checked ?? false;
    
    const consent: ConsentPreferences = {
      essential: true,
      analytics: analytics || true,
      marketing: marketing || true,
      timestamp: new Date().toISOString(),
      policyVersion: POLICY_VERSION,
    };
    
    saveConsent(consent);
    loadConsentedScripts(consent);
    hideBanner();
  }

  function handleReject() {
    const consent: ConsentPreferences = {
      essential: true,
      analytics: false,
      marketing: false,
      timestamp: new Date().toISOString(),
      policyVersion: POLICY_VERSION,
    };
    
    saveConsent(consent);
    hideBanner();
  }

  document.addEventListener('DOMContentLoaded', () => {
    initConsent();
    
    document.getElementById('consent-accept')?.addEventListener('click', handleAccept);
    document.getElementById('consent-reject')?.addEventListener('click', handleReject);
  });

  declare global {
    interface Window {
      openConsentPreferences: () => void;
    }
  }

  window.openConsentPreferences = () => {
    showBanner();
  };
</script>