---
import AdminLayout from '../../layouts/AdminLayout.astro';
import SystemControl from '../../components/admin/SystemControl';
import ResourceMonitor from '../../components/admin/ResourceMonitor';
---

<AdminLayout title="Mission Control">
  <div class="space-y-8">
    <!-- Header -->
    <div>
      <h1 class="text-4xl font-bold text-gold-500 mb-2">🔱 Valhalla Command Center</h1>
      <p class="text-gray-400">Complete God Mode overview, system metrics, and quick access to all tools</p>
    </div>

    <!-- System Metrics -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
      <ResourceMonitor client:load />
      <SystemControl client:load />
    </div>

    <!-- Quick Links Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <!-- Collections -->
      <div class="bg-god-card border border-god-border rounded-xl p-6">
        <h3 class="text-xl font-bold text-god-gold mb-4 flex items-center gap-2">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
          </svg>
          Collections
        </h3>
        <div class="space-y-3">
          <a href="/admin/collections/sites" class="block p-3 bg-god-dark rounded-lg hover:bg-god-border transition-colors">
            <div class="flex items-center gap-2">
              <span class="text-2xl">🌐</span>
              <div>
                <div class="font-semibold">Sites</div>
                <div class="text-xs text-gray-500">Website configurations</div>
              </div>
            </div>
          </a>
          <a href="/admin/collections/posts" class="block p-3 bg-god-dark rounded-lg hover:bg-god-border transition-colors">
            <div class="flex items-center gap-2">
              <span class="text-2xl">📝</span>
              <div>
                <div class="font-semibold">Posts</div>
                <div class="text-xs text-gray-500">Articles & blog content</div>
              </div>
            </div>
          </a>
          <a href="/admin/collections/pages" class="block p-3 bg-god-dark rounded-lg hover:bg-god-border transition-colors">
            <div class="flex items-center gap-2">
              <span class="text-2xl">📄</span>
              <div>
                <div class="font-semibold">Pages</div>
                <div class="text-xs text-gray-500">Static pages</div>
              </div>
            </div>
          </a>
          <a href="/admin/collections/campaign-masters" class="block p-3 bg-god-dark rounded-lg hover:bg-god-border transition-colors">
            <div class="flex items-center gap-2">
              <span class="text-2xl">🎯</span>
              <div>
                <div class="font-semibold">Campaigns</div>
                <div class="text-xs text-gray-500">Content campaigns</div>
              </div>
            </div>
          </a>
          <a href="/admin/collections/generation-jobs" class="block p-3 bg-god-dark rounded-lg hover:bg-god-border transition-colors">
            <div class="flex items-center gap-2">
              <span class="text-2xl">⚙️</span>
              <div>
                <div class="font-semibold">Jobs</div>
                <div class="text-xs text-gray-500">Generation queue</div>
              </div>
            </div>
          </a>
        </div>
      </div>

      <!-- Intelligence Library -->
      <div class="bg-god-card border border-god-border rounded-xl p-6">
        <h3 class="text-xl font-bold text-god-gold mb-4 flex items-center gap-2">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
          </svg>
          Intelligence
        </h3>
        <div class="space-y-3">
          <a href="/admin/intelligence/avatars" class="block p-3 bg-god-dark rounded-lg hover:bg-god-border transition-colors">
            <div class="flex items-center gap-2">
              <span class="text-2xl">👤</span>
              <div>
                <div class="font-semibold">Avatars</div>
                <div class="text-xs text-gray-500">AI personas</div>
              </div>
            </div>
          </a>
          <a href="/admin/intelligence/spintax-dictionaries" class="block p-3 bg-god-dark rounded-lg hover:bg-god-border transition-colors">
            <div class="flex items-center gap-2">
              <span class="text-2xl">📚</span>
              <div>
                <div class="font-semibold">Dictionaries</div>
                <div class="text-xs text-gray-500">Word variations</div>
              </div>
            </div>
          </a>
          <a href="/admin/intelligence/spintax-patterns" class="block p-3 bg-god-dark rounded-lg hover:bg-god-border transition-colors">
            <div class="flex items-center gap-2">
              <span class="text-2xl">🧩</span>
              <div>
                <div class="font-semibold">Patterns</div>
                <div class="text-xs text-gray-500">Content templates</div>
              </div>
            </div>
          </a>
          <a href="/admin/intelligence/geo" class="block p-3 bg-god-dark rounded-lg hover:bg-god-border transition-colors">
            <div class="flex items-center gap-2">
              <span class="text-2xl">🗺️</span>
              <div>
                <div class="font-semibold">Geo Intelligence</div>
                <div class="text-xs text-gray-500">Location data</div>
              </div>
            </div>
          </a>
        </div>
      </div>

      <!-- Content Factory & Tools -->
      <div class="bg-god-card border border-god-border rounded-xl p-6">
        <h3 class="text-xl font-bold text-god-gold mb-4 flex items-center gap-2">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
          </svg>
          Factory & Tools
        </h3>
        <div class="space-y-3">
          <a href="/admin/factory/pattern-analyzer" class="block p-3 bg-god-dark rounded-lg hover:bg-god-border transition-colors">
            <div class="flex items-center gap-2">
              <span class="text-2xl">🔬</span>
              <div>
                <div class="font-semibold">Pattern Analyzer</div>
                <div class="text-xs text-gray-500">Test patterns</div>
              </div>
            </div>
          </a>
          <a href="/admin/factory/job-launchpad" class="block p-3 bg-god-dark rounded-lg hover:bg-god-border transition-colors">
            <div class="flex items-center gap-2">
              <span class="text-2xl">🚀</span>
              <div>
                <div class="font-semibold">Job Launchpad</div>
                <div class="text-xs text-gray-500">Batch generation</div>
              </div>
            </div>
          </a>
          <a href="/admin/db-console" class="block p-3 bg-god-dark rounded-lg hover:bg-god-border transition-colors">
            <div class="flex items-center gap-2">
              <span class="text-2xl">🗄️</span>
              <div>
                <div class="font-semibold">DB Console</div>
                <div class="text-xs text-gray-500">SQL interface</div>
              </div>
            </div>
          </a>
          <a href="/" class="block p-3 bg-god-dark rounded-lg hover:bg-god-border transition-colors">
            <div class="flex items-center gap-2">
              <span class="text-2xl">🔱</span>
              <div>
                <div class="font-semibold">God Mode Console</div>
                <div class="text-xs text-gray-500">System diagnostics</div>
              </div>
            </div>
          </a>
          <a href="/admin/settings" class="block p-3 bg-god-dark rounded-lg hover:bg-god-border transition-colors">
            <div class="flex items-center gap-2">
              <span class="text-2xl">⚙️</span>
              <div>
                <div class="font-semibold">Settings</div>
                <div class="text-xs text-gray-500">Configuration</div>
              </div>
            </div>
          </a>
        </div>
      </div>
    </div>

    <!-- API Endpoints Reference -->
    <div class="bg-god-card border border-god-border rounded-xl p-6">
      <h3 class="text-xl font-bold text-god-gold mb-4">🔗 God Mode API Endpoints</h3>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 text-sm">
        <div>
          <h4 class="font-semibold text-gray-300 mb-2">Database</h4>
          <ul class="space-y-1 text-gray-500">
            <li>• POST /api/god/sql</li>
            <li>• POST /api/god/schema/init</li>
            <li>• GET /api/god/pool/stats</li>
            <li>• POST /api/god/mechanic/execute</li>
          </ul>
        </div>
        <div>
          <h4 class="font-semibold text-gray-300 mb-2">Data & Geo</h4>
          <ul class="space-y-1 text-gray-500">
            <li>• POST /api/god/data/ingest</li>
            <li>• POST /api/god/geo/launch-campaign</li>
            <li>• POST /api/god/shim/preview</li>
          </ul>
        </div>
        <div>
          <h4 class="font-semibold text-gray-300 mb-2">Intelligence</h4>
          <ul class="space-y-1 text-gray-500">
            <li>• POST /api/intelligence/prompts/test</li>
            <li>• POST /api/intelligence/spintax/validate</li>
          </ul>
        </div>
        <div>
          <h4 class="font-semibold text-gray-300 mb-2">System</h4>
          <ul class="space-y-1 text-gray-500">
            <li>• POST /api/god/system/config</li>
            <li>• GET /api/god/logs</li>
            <li>• GET /api/god/health</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</AdminLayout>

<style>
  .bg-god-card {
    background-color: #111111;
  }
  .border-god-border {
    border-color: #333333;
  }
  .text-god-gold {
    color: #FFD700;
  }
  .bg-god-dark {
    background-color: #0a0a0a;
  }
  .hover\:bg-god-border:hover {
    background-color: #333333;
  }
</style>
