---
import BaseLayout from '@/layouts/BaseLayout.astro';

export const prerender = false;

const ADMIN_PASSWORD = import.meta.env.ADMIN_PASSWORD || 'Coolm@n1234mo';
---

<BaseLayout title="Admin - Consent Logs" description="จัดการบันทึกความยินยอมคุกกี้">
  <div class="min-h-screen bg-gray-50">
    <header class="bg-white shadow">
      <div class="container-custom py-6">
        <h1 class="text-3xl font-bold text-secondary-900">Admin Dashboard - Consent Logs</h1>
        <p class="text-secondary-700 mt-2">จัดการบันทึกความยินยอมคุกกี้</p>
      </div>
    </header>

    <main class="container-custom py-8">
      <div id="login-section" class="max-w-md mx-auto">
        <div class="bg-white rounded-lg shadow-md p-8">
          <h2 class="text-2xl font-bold mb-6 text-center text-secondary-900">เข้าสู่ระบบ Admin</h2>
          <form id="login-form" class="space-y-4">
            <div>
              <label for="password" class="block text-sm font-medium text-secondary-700 mb-2">รหัสผ่าน</label>
              <input type="password" id="password" name="password" required
                class="w-full px-4 py-2 border border-secondary-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
                placeholder="กรอกรหัสผ่าน" />
            </div>
            <button type="submit"
              class="w-full btn-primary py-3">
              เข้าสู่ระบบ
            </button>
            <p id="login-error" class="text-red-600 text-sm mt-4 hidden"></p>
          </form>
        </div>
      </div>

      <div id="dashboard-section" class="hidden">
        <div class="grid md:grid-cols-4 gap-6 mb-8">
          <div class="bg-white rounded-lg shadow-md p-6">
            <h3 class="text-sm font-medium text-secondary-600 mb-2">Total Consents</h3>
            <p id="stat-total" class="text-3xl font-bold text-secondary-900">0</p>
          </div>
          <div class="bg-white rounded-lg shadow-md p-6">
            <h3 class="text-sm font-medium text-secondary-600 mb-2">Accepted Analytics</h3>
            <p id="stat-analytics" class="text-3xl font-bold text-green-600">0</p>
          </div>
          <div class="bg-white rounded-lg shadow-md p-6">
            <h3 class="text-sm font-medium text-secondary-600 mb-2">Rejected Analytics</h3>
            <p id="stat-rejected" class="text-3xl font-bold text-red-600">0</p>
          </div>
          <div class="bg-white rounded-lg shadow-md p-6">
            <h3 class="text-sm font-medium text-secondary-600 mb-2">Acceptance Rate</h3>
            <p id="stat-rate" class="text-3xl font-bold text-accent-orange">0%</p>
          </div>
        </div>

        <div class="flex flex-wrap gap-4 mb-6">
          <button id="refresh-btn" class="bg-primary-500 text-white px-6 py-2 rounded-lg font-bold hover:bg-primary-600 transition">🔄 รีเฟรช</button>
          <button id="export-btn" class="bg-green-500 text-white px-6 py-2 rounded-lg font-bold hover:bg-green-600 transition">📥 Export CSV</button>
          <button id="logout-btn" class="bg-gray-500 text-white px-6 py-2 rounded-lg font-bold hover:bg-gray-600 transition">🚪 ออกจากระบบ</button>
        </div>

        <div class="bg-white rounded-lg shadow-md overflow-hidden">
          <div class="px-6 py-4 border-b border-secondary-200">
            <h2 class="text-xl font-bold text-secondary-900">บันทึกความยินยอม (100 ล่าสุด)</h2>
          </div>
          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-secondary-200">
              <thead class="bg-gray-50">
                <tr>
                  <th class="px-6 py-3 text-left text-xs font-medium text-secondary-500 uppercase">วันที่/เวลา</th>
                  <th class="px-6 py-3 text-left text-xs font-medium text-secondary-500 uppercase">Session ID</th>
                  <th class="px-6 py-3 text-left text-xs font-medium text-secondary-500 uppercase">Essential</th>
                  <th class="px-6 py-3 text-left text-xs font-medium text-secondary-500 uppercase">Analytics</th>
                  <th class="px-6 py-3 text-left text-xs font-medium text-secondary-500 uppercase">Marketing</th>
                  <th class="px-6 py-3 text-left text-xs font-medium text-secondary-500 uppercase">Policy Version</th>
                  <th class="px-6 py-3 text-left text-xs font-medium text-secondary-500 uppercase">Actions</th>
                </tr>
              </thead>
              <tbody id="logs-table-body" class="bg-white divide-y divide-secondary-200">
                <tr><td colspan="7" class="px-6 py-4 text-center text-secondary-500">กำลังโหลด...</td></tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </main>
  </div>

  <script>
    const ADMIN_PASSWORD = 'Coolm@n1234mo';

    function checkAuth() {
      const session = sessionStorage.getItem('admin-logged-in');
      if (session === 'true') {
        showDashboard();
      }
    }

    function showDashboard() {
      document.getElementById('login-section').classList.add('hidden');
      document.getElementById('dashboard-section').classList.remove('hidden');
      loadConsentLogs();
    }

    function showLogin() {
      document.getElementById('login-section').classList.remove('hidden');
      document.getElementById('dashboard-section').classList.add('hidden');
    }

    async function loadConsentLogs() {
      try {
        const response = await fetch('/api/consent');
        const data = await response.json();
        const logs = data.logs || [];
        const tbody = document.getElementById('logs-table-body');

        if (logs.length === 0) {
          tbody.innerHTML = '<tr><td colspan="7" class="px-6 py-4 text-center text-secondary-500">ยังไม่มีการบันทึกความยินยอม</td></tr>';
          updateStats([]);
          return;
        }

        tbody.innerHTML = logs.map(log => `
          <tr class="hover:bg-gray-50">
            <td class="px-6 py-4 whitespace-nowrap text-sm">${new Date(log.timestamp).toLocaleString('th-TH')}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-mono">${log.sessionId.substring(0, 8)}...</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm"><span class="px-2 py-1 text-xs font-semibold rounded-full ${log.essential ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}">${log.essential ? '✓' : '✗'}</span></td>
            <td class="px-6 py-4 whitespace-nowrap text-sm"><span class="px-2 py-1 text-xs font-semibold rounded-full ${log.analytics ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}">${log.analytics ? '✓' : '✗'}</span></td>
            <td class="px-6 py-4 whitespace-nowrap text-sm"><span class="px-2 py-1 text-xs font-semibold rounded-full ${log.marketing ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}">${log.marketing ? '✓' : '✗'}</span></td>
            <td class="px-6 py-4 whitespace-nowrap text-sm">${log.policyVersion}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm"><button onclick="window.deleteConsent('${log.sessionId}')" class="text-red-600 hover:text-red-900 font-medium">ลบ</button></td>
          </tr>
        `).join('');

        updateStats(logs);
      } catch (error) {
        console.error('Error loading logs:', error);
      }
    }

    function updateStats(logs) {
      const total = logs.length;
      const analytics = logs.filter(l => l.analytics).length;
      const rejected = total - analytics;
      const rate = total > 0 ? ((analytics / total) * 100).toFixed(1) : '0';

      document.getElementById('stat-total').textContent = total.toString();
      document.getElementById('stat-analytics').textContent = analytics.toString();
      document.getElementById('stat-rejected').textContent = rejected.toString();
      document.getElementById('stat-rate').textContent = `${rate}%`;
    }

    document.addEventListener('DOMContentLoaded', () => {
      checkAuth();

      document.getElementById('login-form').addEventListener('submit', (e) => {
        e.preventDefault();
        const password = (document.getElementById('password') as HTMLInputElement).value;
        if (password === ADMIN_PASSWORD) {
          sessionStorage.setItem('admin-logged-in', 'true');
          showDashboard();
        } else {
          const error = document.getElementById('login-error');
          if (error) {
            error.textContent = 'รหัสผ่านไม่ถูกต้อง';
            error.classList.remove('hidden');
          }
        }
      });

      document.getElementById('refresh-btn')?.addEventListener('click', loadConsentLogs);
      document.getElementById('export-btn')?.addEventListener('click', exportToCSV);
      document.getElementById('logout-btn')?.addEventListener('click', () => {
        sessionStorage.removeItem('admin-logged-in');
        showLogin();
      });
    });

    async function exportToCSV() {
      try {
        const response = await fetch('/api/consent');
        const data = await response.json();
        const logs = data.logs || [];

        if (logs.length === 0) {
          alert('ไม่มีข้อมูลให้ export');
          return;
        }

        const headers = ['วันที่/เวลา', 'Session ID', 'Essential', 'Analytics', 'Marketing', 'Policy Version', 'IP Hash', 'User Agent'];
        const csvRows = [headers.join(',')];

        for (const log of logs) {
          const row = [
            new Date(log.timestamp).toLocaleString('th-TH'),
            log.sessionId,
            log.essential ? 'Yes' : 'No',
            log.analytics ? 'Yes' : 'No',
            log.marketing ? 'Yes' : 'No',
            log.policyVersion,
            log.ipHash || '',
            (log.userAgent || '').replace(/,/g, ';')
          ];
          csvRows.push(row.join(','));
        }

        const csvContent = '\ufeff' + csvRows.join('\n');
        const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
        const url = URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.download = `consent-logs-${new Date().toISOString().split('T')[0]}.csv`;
        link.click();
        URL.revokeObjectURL(url);
      } catch (error) {
        console.error('Export error:', error);
        alert('เกิดข้อผิดพลาดในการ export');
      }
    }

    window.deleteConsent = async function(sessionId: string) {
      if (!confirm('คุณแน่ใจหรือไม่ที่จะลบบันทึกนี้?')) return;
      try {
        const response = await fetch(`/api/consent/${sessionId}`, { method: 'DELETE' });
        if (response.ok) {
          alert('ลบบันทึกเรียบร้อยแล้ว');
          loadConsentLogs();
        } else {
          alert('เกิดข้อผิดพลาดในการลบ');
        }
      } catch (error) {
        alert('เกิดข้อผิดพลาดในการลบ');
      }
    };
  </script>
</BaseLayout>