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

<AdminLayout title="Command Station">
  <div class="space-y-8">
    <!-- Header -->
    <div>
      <h1 class="text-4xl font-bold text-gold-500 mb-2">🎛️ Command Station</h1>
      <p class="text-gray-400">Unified control center for all God Mode operations</p>
    </div>

    <!-- Status Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <!-- Intelligence Station -->
      <div class="bg-titanium border border-edge-normal rounded-xl p-6">
        <div class="flex items-center justify-between mb-4">
          <h3 class="text-xl font-bold text-gold-500">🧠 Intelligence Station</h3>
          <span class="px-3 py-1 bg-green-500/20 text-green-400 rounded-full text-sm font-semibold">ACTIVE</span>
        </div>
        <div class="space-y-3 text-sm">
          <div class="flex justify-between">
            <span class="text-gray-400">Avatars</span>
            <a href="/admin/intelligence/avatars" class="text-blue-400 hover:text-blue-300">Manage →</a>
          </div>
          <div class="flex justify-between">
            <span class="text-gray-400">Geo Intelligence</span>
            <a href="/admin/collections/geo-intelligence" class="text-blue-400 hover:text-blue-300">View →</a>
          </div>
          <div class="flex justify-between">
            <span class="text-gray-400">Patterns</span>
            <a href="/admin/collections/cartesian-patterns" class="text-blue-400 hover:text-blue-300">Edit →</a>
          </div>
        </div>
      </div>

      <!-- Production Station -->
      <div class="bg-titanium border border-edge-normal rounded-xl p-6">
        <div class="flex items-center justify-between mb-4">
          <h3 class="text-xl font-bold text-gold-500">⚡ Production Station</h3>
          <span class="px-3 py-1 bg-green-500/20 text-green-400 rounded-full text-sm font-semibold">ACTIVE</span>
        </div>
        <div class="space-y-3 text-sm">
          <div class="flex justify-between">
            <span class="text-gray-400">Content Generator</span>
            <a href="/admin/content-generator" class="text-blue-400 hover:text-blue-300">Launch →</a>
          </div>
          <div class="flex justify-between">
            <span class="text-gray-400">Generation Queue</span>
            <a href="/admin/collections/generation-jobs" class="text-blue-400 hover:text-blue-300">Monitor →</a>
          </div>
          <div class="flex justify-between">
            <span class="text-gray-400">Factory</span>
            <a href="/admin/factory" class="text-blue-400 hover:text-blue-300">Open →</a>
          </div>
        </div>
      </div>

      <!-- WordPress Ignition -->
      <div class="bg-titanium border border-edge-normal rounded-xl p-6">
        <div class="flex items-center justify-between mb-4">
          <h3 class="text-xl font-bold text-gold-500">🔌 WordPress Ignition</h3>
          <span class="px-3 py-1 bg-yellow-500/20 text-yellow-400 rounded-full text-sm font-semibold">STANDBY</span>
        </div>
        <div class="space-y-3 text-sm">
          <div class="flex justify-between">
            <span class="text-gray-400">WP Connection</span>
            <span class="text-green-400">Ready</span>
          </div>
          <div class="flex justify-between">
            <span class="text-gray-400">Sync Status</span>
            <span class="text-gray-500">Idle</span>
          </div>
          <div class="flex justify-between">
            <span class="text-gray-400">Actions</span>
            <button class="text-blue-400 hover:text-blue-300">Configure →</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Quick Actions -->
    <div class="bg-titanium border border-edge-normal rounded-xl p-6">
      <h2 class="text-2xl font-bold text-gold-500 mb-6">⚡ Quick Actions</h2>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <a href="/admin/content-generator" class="bg-obsidian border border-edge-subtle rounded-lg p-4 hover:border-gold-500 transition-all text-center">
          <div class="text-3xl mb-2">🎯</div>
          <div class="text-sm font-semibold text-gray-300">New Campaign</div>
        </a>
        <a href="/admin/factory" class="bg-obsidian border border-edge-subtle rounded-lg p-4 hover:border-gold-500 transition-all text-center">
          <div class="text-3xl mb-2">🏭</div>
          <div class="text-sm font-semibold text-gray-300">Content Factory</div>
        </a>
        <a href="/admin/sites" class="bg-obsidian border border-edge-subtle rounded-lg p-4 hover:border-gold-500 transition-all text-center">
          <div class="text-3xl mb-2">🌐</div>
          <div class="text-sm font-semibold text-gray-300">Sites</div>
        </a>
        <a href="/admin/db-console" class="bg-obsidian border border-edge-subtle rounded-lg p-4 hover:border-gold-500 transition-all text-center">
          <div class="text-3xl mb-2">💾</div>
          <div class="text-sm font-semibold text-gray-300">DB Console</div>
        </a>
      </div>
    </div>

    <!-- System Health -->
    <div class="bg-titanium border border-edge-normal rounded-xl p-6">
      <h2 class="text-2xl font-bold text-gold-500 mb-6">🏥 System Health</h2>
      <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
        <div class="bg-obsidian rounded-lg p-4 border border-edge-subtle">
          <div class="text-sm text-gray-400 mb-1">Core API</div>
          <div class="flex items-center gap-2">
            <div class="w-2 h-2 rounded-full bg-green-400"></div>
            <span class="text-green-400 font-semibold">Online</span>
          </div>
        </div>
        <div class="bg-obsidian rounded-lg p-4 border border-edge-subtle">
          <div class="text-sm text-gray-400 mb-1">Database</div>
          <div class="flex items-center gap-2">
            <div class="w-2 h-2 rounded-full bg-green-400"></div>
            <span class="text-green-400 font-semibold">Connected</span>
          </div>
        </div>
        <div class="bg-obsidian rounded-lg p-4 border border-edge-subtle">
          <div class="text-sm text-gray-400 mb-1">Redis Queue</div>
          <div class="flex items-center gap-2">
            <div class="w-2 h-2 rounded-full bg-green-400"></div>
            <span class="text-green-400 font-semibold">Active</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</AdminLayout>