---
// ConsentModal.astro - Simple consent preferences modal
---

<div 
  id="consent-modal" 
  class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4"
>
  <div class="bg-white dark:bg-gray-800 rounded-xl shadow-2xl max-w-lg w-full max-h-[90vh] overflow-y-auto">
    <div class="p-6 border-b border-gray-200 dark:border-gray-700">
      <div class="flex justify-between items-center">
        <h2 class="text-2xl font-bold text-gray-900 dark:text-white">การตั้งค่าคุกกี้</h2>
        <button id="close-modal" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-white transition">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
        </button>
      </div>
    </div>
    
    <div class="p-6">
      <p class="text-base text-gray-600 dark:text-gray-300 mb-6">เราใช้คุกกี้เพื่อปรับปรุงประสบการณ์การใช้งานของคุณ การยอมรับการใช้งานคุกกี้จะช่วยให้เราพัฒนาเว็บไซต์ให้ดีขึ้น</p>
      
      <div class="mb-6 p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
        <div class="flex items-center gap-3">
          <input type="checkbox" checked disabled class="w-5 h-5 rounded border-gray-300 text-secondary focus:ring-secondary" />
          <div class="flex-1">
            <h3 class="font-semibold text-gray-900 dark:text-white text-base">คุกกี้ที่จำเป็น</h3>
            <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">จำเป็นสำหรับการทำงานของเว็บไซต์ ไม่สามารถปิดใช้งานได้</p>
          </div>
        </div>
      </div>
      
      <div class="mb-6 p-4 border border-gray-200 dark:border-gray-700 rounded-lg">
        <div class="flex items-center gap-3">
          <input type="checkbox" id="modal-analytics" class="w-5 h-5 rounded border-gray-300 text-secondary focus:ring-secondary" />
          <div class="flex-1">
            <h3 class="font-semibold text-gray-900 dark:text-white text-base">คุกกี้วิเคราะห์ข้อมูล</h3>
            <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">ช่วยเราเข้าใจว่าผู้เยี่ยมชมใช้งานเว็บไซต์ (Umami Analytics)</p>
          </div>
        </div>
      </div>
      
      <div class="flex gap-3 mt-6">
        <button id="save-preferences" class="bg-secondary text-white px-6 py-3 rounded-lg font-semibold text-base hover:bg-secondary-hover transition flex-1">บันทึกการตั้งค่า</button>
      </div>
      
      <div class="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
        <p class="text-sm text-blue-800 dark:text-blue-300"><strong>หมายเหตุ:</strong> คุณสามารถเพิกถอนความยินยอมได้ตลอดเวลาโดยคลิกปุ่ม "ตั้งค่าคุกกี้" ในส่วนท้ายของเว็บไซต์</p>
      </div>
    </div>
  </div>
</div>

<script>
  const modal = document.getElementById('consent-modal');
  const closeBtn = document.getElementById('close-modal');
  const saveBtn = document.getElementById('save-preferences');
  const analyticsCheckbox = document.getElementById('modal-analytics');
  
  (window as any).openConsentModal = () => { modal.classList.remove('hidden'); };
  closeBtn.addEventListener('click', () => { modal.classList.add('hidden'); });
  modal.addEventListener('click', (e) => { if (e.target === modal) modal.classList.add('hidden'); });
  
  saveBtn.addEventListener('click', () => {
    const consent = { essential: true, analytics: analyticsCheckbox.checked, marketing: false, timestamp: new Date().toISOString(), policyVersion: '1.0' };
    localStorage.setItem('consent-preferences', JSON.stringify(consent));
    modal.classList.add('hidden');
    logConsent(consent);
    setTimeout(() => window.location.reload(), 500);
  });
  
  async function logConsent(consent: any) {
    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>
