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

<AdminLayout title="Sites & Deployments">
  <div class="space-y-8">
    <div>
      <h1 class="text-4xl font-bold text-gold-500 mb-2">🚀 Sites & Deployments</h1>
      <p class="text-gray-400">Manage site deployments and monitor deployment status</p>
    </div>

    <!-- Quick Stats -->
    <div class="grid grid-cols-4 gap-4">
      <div class="bg-titanium border border-edge-normal rounded-xl p-6">
        <div class="text-sm text-gray-400 mb-1">Total Sites</div>
        <div class="text-3xl font-bold text-gold-500">0</div>
      </div>
      <div class="bg-titanium border border-edge-normal rounded-xl p-6">
        <div class="text-sm text-gray-400 mb-1">Live</div>
        <div class="text-3xl font-bold text-green-400">0</div>
      </div>
      <div class="bg-titanium border border-edge-normal rounded-xl p-6">
        <div class="text-sm text-gray-400 mb-1">Deploying</div>
        <div class="text-3xl font-bold text-blue-400">0</div>
      </div>
      <div class="bg-titanium border border-edge-normal rounded-xl p-6">
        <div class="text-sm text-gray-400 mb-1">Failed</div>
        <div class="text-3xl font-bold text-red-400">0</div>
      </div>
    </div>

    <!-- Deployments Table -->
    <div class="bg-titanium border border-edge-normal rounded-xl overflow-hidden">
      <div class="p-6 border-b border-edge-subtle flex items-center justify-between">
        <h2 class="text-xl font-bold text-gold-500">Recent Deployments</h2>
        <a href="/admin/sites/jumpstart" class="px-4 py-2 bg-gold-500 hover:bg-gold-600 text-obsidian font-semibold rounded-lg transition-all">
          New Deployment
        </a>
      </div>
      
      <div class="overflow-x-auto">
        <table class="w-full">
          <thead class="bg-obsidian border-b border-edge-subtle">
            <tr>
              <th class="px-6 py-4 text-left text-sm font-semibold text-gray-300">Site</th>
              <th class="px-6 py-4 text-left text-sm font-semibold text-gray-300">Domain</th>
              <th class="px-6 py-4 text-left text-sm font-semibold text-gray-300">Status</th>
              <th class="px-6 py-4 text-left text-sm font-semibold text-gray-300">Last Deploy</th>
              <th class="px-6 py-4 text-left text-sm font-semibold text-gray-300">Health</th>
              <th class="px-6 py-4 text-left text-sm font-semibold text-gray-300">Actions</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-edge-subtle">
            <tr>
              <td colspan="6" class="px-6 py-12 text-center text-gray-500">
                <div class="text-4xl mb-2">🌐</div>
                <p>No deployments yet. Use Jumpstart to deploy your first site.</p>
                <a href="/admin/sites/jumpstart" class="inline-block mt-4 px-6 py-2 bg-gold-500 hover:bg-gold-600 text-obsidian font-semibold rounded-lg transition-all">
                  Launch Jumpstart
                </a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- Deployment Services -->
    <div class="bg-titanium border border-edge-normal rounded-xl p-6">
      <h2 class="text-2xl font-bold text-gold-500 mb-6">🔧 Deployment Services</h2>
      <div class="grid grid-cols-3 gap-4">
        <div class="bg-obsidian rounded-lg p-4 border border-edge-subtle">
          <div class="flex items-center gap-3 mb-3">
            <div class="text-2xl">☁️</div>
            <h3 class="font-semibold text-gold-500">Coolify</h3>
          </div>
          <div class="flex items-center gap-2">
            <div class="w-2 h-2 rounded-full bg-green-400"></div>
            <span class="text-sm text-green-400">Connected</span>
          </div>
        </div>
        
        <div class="bg-obsidian rounded-lg p-4 border border-edge-subtle">
          <div class="flex items-center gap-3 mb-3">
            <div class="text-2xl">🔌</div>
            <h3 class="font-semibold text-gold-500">DNS Provider</h3>
          </div>
          <div class="flex items-center gap-2">
            <div class="w-2 h-2 rounded-full bg-yellow-400"></div>
            <span class="text-sm text-yellow-400">Not Configured</span>
          </div>
        </div>
        
        <div class="bg-obsidian rounded-lg p-4 border border-edge-subtle">
          <div class="flex items-center gap-3 mb-3">
            <div class="text-2xl">🔒</div>
            <h3 class="font-semibold text-gold-500">SSL Certificates</h3>
          </div>
          <div class="flex items-center gap-2">
            <div class="w-2 h-2 rounded-full bg-green-400"></div>
            <span class="text-sm text-green-400">Auto-Provision</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Implementation Note -->
    <div class="bg-blue-500/10 border border-blue-500/30 rounded-xl p-6">
      <div class="flex items-start gap-4">
        <div class="text-2xl">ℹ️</div>
        <div>
          <h3 class="font-semibold text-blue-400 mb-2">Database & API Connection Required</h3>
          <p class="text-sm text-gray-400 mb-3">
            This page will fetch deployment data from the <code class="px-2 py-1 bg-obsidian rounded text-gold-500">sites</code> table
            and deployment history from a <code class="px-2 py-1 bg-obsidian rounded text-gold-500">deployments</code> table.
          </p>
          <p class="text-sm text-gray-400">
            <strong>API Endpoints:</strong>
          </p>
          <ul class="text-sm text-gray-400 space-y-1 list-disc list-inside mt-2">
            <li><code class="px-2 py-1 bg-obsidian rounded text-gold-500">GET /api/sites</code></li>
            <li><code class="px-2 py-1 bg-obsidian rounded text-gold-500">GET /api/deployments</code></li>
            <li><code class="px-2 py-1 bg-obsidian rounded text-gold-500">POST /api/deployments/trigger</code></li>
            <li><code class="px-2 py-1 bg-obsidian rounded text-gold-500">GET /api/deployments/:id/status</code></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</AdminLayout>

<script>
  async function loadDeployments() {
    try {
      const response = await fetch('/api/deployments');
      if (response.ok) {
        const data = await response.json();
        // Update UI with real deployment data
      }
    } catch (err) {
      console.log('Deployments API not yet implemented');
    }
  }
  
  loadDeployments();
</script>
