---
import '../styles/global.css';

interface Props {
  title: string;
  description?: string;
  image?: string;
  canonicalURL?: string;
}

const { title, description = '', image = '/images/logo.png', canonicalURL = Astro.url } = Astro.props;

const siteName = 'Website Name';
const siteUrl = 'https://example.com';
---

<!doctype html>
<html lang="th">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="generator" content={Astro.generator} />
    
    <!-- SEO Meta Tags -->
    <title>{title} | {siteName}</title>
    <meta name="title" content={`${title} | ${siteName}`} />
    <meta name="description" content={description} />
    <link rel="canonical" href={canonicalURL} />
    
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content={canonicalURL} />
    <meta property="og:title" content={`${title} | ${siteName}`} />
    <meta property="og:description" content={description} />
    <meta property="og:image" content={new URL(image, siteUrl)} />
    
    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image" />
    <meta property="twitter:url" content={canonicalURL} />
    <meta property="twitter:title" content={`${title} | ${siteName}`} />
    <meta property="twitter:description" content={description} />
    <meta property="twitter:image" content={new URL(image, siteUrl)} />
    
    <!-- Favicon -->
    <link rel="icon" type="image/png" href="/favicon.ico" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    
    <!-- Preconnect -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  </head>
  
  <body id="body" class="flex flex-col min-h-screen">
    <div id="page-wrapper">
      <header id="header">
        <slot name="header" />
      </header>
      
      <main id="main-content" class="flex-grow">
        <slot />
      </main>
      
      <footer id="footer">
        <slot name="footer" />
      </footer>
      
      <!-- Cookie Consent Banner -->
      <div id="cookie-consent-banner" class="fixed bottom-0 left-0 right-0 z-50 bg-secondary-900 text-white p-6 shadow-2xl transform translate-y-full transition-transform duration-500">
        <div id="cookie-consent-container" class="container-custom max-w-6xl">
          <div id="cookie-consent-content" class="flex flex-col md:flex-row items-center justify-between gap-6">
            <div id="cookie-consent-text" class="flex-1">
              <h3 id="cookie-consent-title" class="text-xl font-bold mb-2">เราใช้คุกกี้เพื่อประสบการณ์ที่ดีที่สุด</h3>
              <p id="cookie-consent-description" class="text-secondary-300 text-base">
                เว็บไซต์ของเราใช้คุกกี้เพื่อเพิ่มประสิทธิภาพการใช้งาน คุณสามารถยอมรับหรือปฏิเสธได้
              </p>
            </div>
            <div id="cookie-consent-buttons" class="flex flex-wrap gap-4">
              <button id="cookie-reject-btn" class="btn-secondary px-6 py-3 text-sm">
                ปฏิเสธทั้งหมด
              </button>
              <button id="cookie-accept-btn" class="btn-primary px-6 py-3 text-sm">
                ยอมรับทั้งหมด
              </button>
              <button id="cookie-settings-btn" class="btn-outline px-6 py-3 text-sm">
                ตั้งค่า
              </button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- Cookie Preferences Modal -->
      <div id="cookie-preferences-modal" class="fixed inset-0 z-50 hidden bg-black/50">
        <div id="cookie-modal-content" class="flex items-center justify-center min-h-screen p-4">
          <div id="cookie-modal-box" class="bg-white rounded-2xl shadow-2xl max-w-lg w-full p-6">
            <div id="cookie-modal-header" class="flex justify-between items-center mb-4">
              <h2 id="cookie-modal-title" class="text-xl font-bold">ตั้งค่าคุกกี้</h2>
              <button id="cookie-modal-close" class="text-gray-500 hover:text-gray-700">
                <span id="cookie-close-icon">✕</span>
              </button>
            </div>
            <div id="cookie-modal-body">
              <div id="cookie-necessary" class="mb-4">
                <div class="flex items-center justify-between">
                  <div>
                    <h3 class="font-medium">คุกกี้ที่จำเป็น</h3>
                    <p class="text-sm text-gray-600">จำเป็นสำหรับการทำงานของเว็บไซต์</p>
                  </div>
                  <input type="checkbox" checked disabled class="w-5 h-5" />
                </div>
              </div>
              <div id="cookie-analytics" class="mb-4">
                <div class="flex items-center justify-between">
                  <div>
                    <h3 class="font-medium">คุกกี้วิเคราะห์</h3>
                    <p class="text-sm text-gray-600">ช่วยให้เราเข้าใจผู้ใช้งาน</p>
                  </div>
                  <input type="checkbox" id="cookie-analytics-checkbox" class="w-5 h-5" />
                </div>
              </div>
              <div id="cookie-marketing" class="mb-4">
                <div class="flex items-center justify-between">
                  <div>
                    <h3 class="font-medium">คุกกี้การตลาด</h3>
                    <p class="text-sm text-gray-600">ใช้สำหรับโฆษณา</p>
                  </div>
                  <input type="checkbox" id="cookie-marketing-checkbox" class="w-5 h-5" />
                </div>
              </div>
            </div>
            <div id="cookie-modal-footer" class="flex justify-end gap-4 mt-6">
              <button id="cookie-save-btn" class="btn-primary px-6 py-3">บันทึก</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <script>
      // Cookie Consent Logic
      const banner = document.getElementById('cookie-consent-banner');
      const acceptBtn = document.getElementById('cookie-accept-btn');
      const rejectBtn = document.getElementById('cookie-reject-btn');
      const settingsBtn = document.getElementById('cookie-settings-btn');
      const modal = document.getElementById('cookie-preferences-modal');
      const closeModal = document.getElementById('cookie-modal-close');
      const saveBtn = document.getElementById('cookie-save-btn');
      
      function showBanner() {
        banner?.classList.remove('translate-y-full');
      }
      
      function hideBanner() {
        banner?.classList.add('translate-y-full');
      }
      
      acceptBtn?.addEventListener('click', () => {
        localStorage.setItem('cookie-consent', 'accepted');
        hideBanner();
      });
      
      rejectBtn?.addEventListener('click', () => {
        localStorage.setItem('cookie-consent', 'rejected');
        hideBanner();
      });
      
      settingsBtn?.addEventListener('click', () => {
        modal?.classList.remove('hidden');
      });
      
      closeModal?.addEventListener('click', () => {
        modal?.classList.add('hidden');
      });
      
      saveBtn?.addEventListener('click', () => {
        const analytics = (document.getElementById('cookie-analytics-checkbox') as HTMLInputElement)?.checked;
        const marketing = (document.getElementById('cookie-marketing-checkbox') as HTMLInputElement)?.checked;
        localStorage.setItem('cookie-consent', JSON.stringify({ analytics, marketing }));
        modal?.classList.add('hidden');
        hideBanner();
      });
      
      // Check consent on load
      const consent = localStorage.getItem('cookie-consent');
      if (!consent) {
        showBanner();
      }
    </script>
  </body>
</html>
