---
import AdminLayout from '../../../layouts/AdminLayout.astro';
---

<AdminLayout title="Geo Intelligence Test">
  <div class="p-8">
    <h1 class="text-3xl font-bold text-gold-500 mb-4">Geo Intelligence - Simple Test</h1>
    
    <div class="bg-titanium border border-edge-normal rounded-xl p-6 mb-6">
      <h2 class="text-xl font-semibold text-white mb-4">Page Status</h2>
      <p class="text-green-400">✅ Page is loading!</p>
      <p class="text-gray-400 mt-2">If you see this, the Astro page is working.</p>
    </div>

    <div class="bg-titanium border border-edge-normal rounded-xl p-6 mb-6">
      <h2 class="text-xl font-semibold text-white mb-4">API Test</h2>
      <button 
        onclick="testAPI()"
        class="px-4 py-2 bg-gold-500 text-black rounded font-medium hover:bg-gold-400"
      >
        Test API Endpoint
      </button>
      <div id="api-result" class="mt-4 text-gray-300"></div>
    </div>

    <div class="bg-titanium border border-edge-normal rounded-xl p-6">
      <h2 class="text-xl font-semibold text-white mb-4">Manual Data Fetch</h2>
      <div id="geo-data" class="text-gray-300">Loading...</div>
    </div>
  </div>

  <script>
    async function testAPI() {
      const result = document.getElementById('api-result');
      try {
        const token = 'jmQXoeyxWoBsB7eHzG7FmnH90f22JtaYBxXHoorhfZ-v4tT3VNEr9vvmwHqYHCDoWXHSU4DeZXApCP-Gha-YdA';
        const response = await fetch('/api/collections/geo_locations', {
          headers: { 'X-God-Token': token }
        });
        const data = await response.json();
        result.innerHTML = `<pre>${JSON.stringify(data, null, 2)}</pre>`;
      } catch (err) {
        result.innerHTML = `<span class="text-red-400">Error: ${err.message}</span>`;
      }
    }

    // Auto-test on load
    window.addEventListener('DOMContentLoaded', async () => {
      const container = document.getElementById('geo-data');
      try {
        const token = 'jmQXoeyxWoBsB7eHzG7FmnH90f22JtaYBxXHoorhfZ-v4tT3VNEr9vvmwHqYHCDoWXHSU4DeZXApCP-Gha-YdA';
        const response = await fetch('/api/collections/geo_locations', {
          headers: { 'X-God-Token': token }
        });
        const data = await response.json();
        container.innerHTML = `
          <p class="text-green-400">✅ API Connected!</p>
          <p class="mt-2">Total items: ${data.meta?.total || 0}</p>
          <p>Data count: ${data.data?.length || 0}</p>
        `;
      } catch (err) {
        container.innerHTML = `<p class="text-red-400">❌ API Error: ${err.message}</p>`;
      }
    });
  </script>
</AdminLayout>
