---
// SSR Demo Page: Direct PostgreSQL query in Astro frontmatter
import AdminLayout from '@/layouts/AdminLayout.astro';
import { getSites } from '@/lib/shim/sites';
import SitesList from '@/components/shim/SitesList';

// This runs on the SERVER before HTML is sent
// No API call - direct database access
const { data: sites, total } = await getSites({ limit: 100 });
---

<AdminLayout title="Sites - Direct DB Shim">
  <div class="space-y-6">
    
    <!-- Header -->
    <div class="flex justify-between items-center">
      <div>
        <h1 class="text-3xl font-bold text-white flex items-center gap-3">
          🗄️ Sites (Direct PostgreSQL)
        </h1>
        <p class="text-slate-400 mt-1">
          Loaded {sites.length} of {total} sites via SSR (no API calls)
        </p>
      </div>
      <div class="flex gap-2">
        <a href="/admin/sites" class="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white rounded-lg">
          ← Back to Admin
        </a>
      </div>
    </div>

    <!-- SSR Sites List (Rendered on server) -->
    <div class="space-y-3">
      <h2 class="text-xl font-semibold text-white border-b border-slate-700 pb-2">
        Server-Side Rendered List
      </h2>
      {sites.length === 0 ? (
        <div class="p-8 bg-slate-800 rounded-lg text-center text-slate-400">
          No sites found. Create your first site in the Admin panel.
        </div>
      ) : (
        sites.map(site => (
          <div class="p-4 bg-slate-800 rounded-lg border border-slate-700 hover:border-slate-600 transition">
            <div class="flex justify-between items-start">
              <div>
                <h3 class="text-white font-semibold text-lg">{site.domain}</h3>
                <p class="text-slate-400 text-sm mt-1">{site.site_url || 'No URL set'}</p>
                <p class="text-slate-500 text-xs mt-2">
                  Created: {new Date(site.created_at).toLocaleDateString()}
                </p>
              </div>
              <span class={`px-3 py-1 rounded-full text-xs font-medium ${
                site.status === 'active' 
                  ? 'bg-green-500/20 text-green-400 border border-green-500/30' 
                  : site.status === 'pending'
                  ? 'bg-yellow-500/20 text-yellow-400 border border-yellow-500/30'
                  : 'bg-gray-500/20 text-gray-400 border border-gray-500/30'
              }`}>
                {site.status}
              </span>
            </div>
          </div>
        ))
      )}
    </div>

    <!-- Client-Side React Component (Uses API) -->
    <div class="mt-8 space-y-3">
      <h2 class="text-xl font-semibold text-white border-b border-slate-700 pb-2">
        Client-Side React Component (with mutations)
      </h2>
      <SitesList client:only="react" />
    </div>

    <!-- Info Box -->
    <div class="mt-6 p-4 bg-blue-900/20 border border-blue-700 rounded-lg">
      <h3 class="text-blue-300 font-semibold mb-2">🔍 How This Works</h3>
      <ul class="text-blue-200 text-sm space-y-1">
        <li>✅ <strong>Top section:</strong> SSR - Query ran on server before HTML sent (instant load)</li>
        <li>✅ <strong>Bottom section:</strong> React component using <code>/api/shim/sites/list</code></li>
        <li>✅ <strong>Security:</strong> Database credentials never exposed to browser</li>
        <li>✅ <strong>Performance:</strong> SSR = ~10ms, API = ~50ms (includes HTTP overhead)</li>
      </ul>
    </div>
  </div>
</AdminLayout>
