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

<div 
  id="consent-modal-standalone" 
  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 consent-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 
        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 consent-modal-panel"
      >
        <!-- 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="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>
          </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="consent-analytics" 
              id="standalone-analytics"
              class="mt-1 w-5 h-5 rounded border-gray-300 text-secondary focus:ring-secondary consent-checkbox"
            />
            <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="standalone-marketing"
              class="mt-1 w-5 h-5 rounded border-gray-300 text-secondary focus:ring-secondary consent-checkbox"
            />
            <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="consent-modal-save"
            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="consent-modal-close"
            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>
  const CONSENT_KEY = 'consent-preferences';
  
  const modal = document.getElementById('consent-modal-standalone');
  const backdrop = modal?.querySelector('.consent-modal-backdrop');
  const panel = modal?.querySelector('.consent-modal-panel');
  
  const analyticsCheckbox = document.getElementById('standalone-analytics') as HTMLInputElement;
  const marketingCheckbox = document.getElementById('standalone-marketing') as HTMLInputElement;
  
  const btnSave = document.getElementById('consent-modal-save');
  const btnClose = document.getElementById('consent-modal-close');
  
  // Open modal function (expose globally)
  (window as any).openConsentModal = function() {
    modal?.classList.remove('hidden');
    // Sync with existing preferences
    const existing = localStorage.getItem(CONSENT_KEY);
    if (existing) {
      try {
        const prefs = JSON.parse(existing);
        if (analyticsCheckbox) analyticsCheckbox.checked = prefs.analytics || false;
        if (marketingCheckbox) marketingCheckbox.checked = prefs.marketing || false;
      } catch (e) {
        // ignore parse errors
      }
    }
  };
  
  // Close modal function
  function closeModal() {
    modal?.classList.add('hidden');
  }
  
  // Save preferences
  async function savePreferences() {
    const consentData = {
      essential: true,
      analytics: analyticsCheckbox?.checked || false,
      marketing: marketingCheckbox?.checked || false,
      timestamp: new Date().toISOString()
    };
    
    localStorage.setItem(CONSENT_KEY, JSON.stringify(consentData));
    
    try {
      await fetch('/api/consent', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          sessionId: crypto.randomUUID(),
          essential: consentData.essential,
          analytics: consentData.analytics,
          marketing: consentData.marketing,
          policyVersion: '1.0',
          locale: 'th'
        })
      });
    } catch (error) {
      console.error('Failed to save consent:', error);
    }
    
    closeModal();
    
    // Dispatch event for other components to listen
    window.dispatchEvent(new CustomEvent('consent-updated', { detail: consentData }));
  }
  
  // Event listeners
  btnSave?.addEventListener('click', savePreferences);
  btnClose?.addEventListener('click', closeModal);
  backdrop?.addEventListener('click', closeModal);
  
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape' && !modal?.classList.contains('hidden')) {
      closeModal();
    }
  });
</script>
