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

<AdminLayout title="Sub-Station Status">
  <div class="space-y-8">
    <div>
      <h1 class="text-4xl font-bold text-gold-500 mb-2">🎛️ Sub-Station Status</h1>
      <p class="text-gray-400">Monitor all system sub-stations and services</p>
    </div>

    <!-- Status Overview -->
    <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-6">
          <div class="flex items-center gap-3">
            <div class="text-3xl">🧠</div>
            <h3 class="text-xl font-bold text-gold-500">Intelligence Station</h3>
          </div>
          <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">
          <div class="bg-obsidian rounded-lg p-3 border border-edge-subtle">
            <div class="flex items-center justify-between mb-2">
              <span class="text-sm text-gray-400">Avatar Engine</span>
              <div class="flex items-center gap-2">
                <div class="w-2 h-2 rounded-full bg-green-400"></div>
                <span class="text-xs text-green-400">Online</span>
              </div>
            </div>
            <div class="text-xs text-gray-500">12 avatars loaded</div>
          </div>
          
          <div class="bg-obsidian rounded-lg p-3 border border-edge-subtle">
            <div class="flex items-center justify-between mb-2">
              <span class="text-sm text-gray-400">Geo Intelligence</span>
              <div class="flex items-center gap-2">
                <div class="w-2 h-2 rounded-full bg-green-400"></div>
                <span class="text-xs text-green-400">Online</span>
              </div>
            </div>
            <div class="text-xs text-gray-500">5,234 locations indexed</div>
          </div>
          
          <div class="bg-obsidian rounded-lg p-3 border border-edge-subtle">
            <div class="flex items-center justify-between mb-2">
              <span class="text-sm text-gray-400">Pattern Analyzer</span>
              <div class="flex items-center gap-2">
                <div class="w-2 h-2 rounded-full bg-green-400"></div>
                <span class="text-xs text-green-400">Online</span>
              </div>
            </div>
            <div class="text-xs text-gray-500">28 active patterns</div>
          </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-6">
          <div class="flex items-center gap-3">
            <div class="text-3xl">⚡</div>
            <h3 class="text-xl font-bold text-gold-500">Production Station</h3>
          </div>
          <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">
          <div class="bg-obsidian rounded-lg p-3 border border-edge-subtle">
            <div class="flex items-center justify-between mb-2">
              <span class="text-sm text-gray-400">Content Generator</span>
              <div class="flex items-center gap-2">
                <div class="w-2 h-2 rounded-full bg-green-400"></div>
                <span class="text-xs text-green-400">Online</span>
              </div>
            </div>
            <div class="text-xs text-gray-500">Worker idle, ready</div>
          </div>
          
          <div class="bg-obsidian rounded-lg p-3 border border-edge-subtle">
            <div class="flex items-center justify-between mb-2">
              <span class="text-sm text-gray-400">BullMQ Worker</span>
              <div class="flex items-center gap-2">
                <div class="w-2 h-2 rounded-full bg-green-400"></div>
                <span class="text-xs text-green-400">Online</span>
              </div>
            </div>
            <div class="text-xs text-gray-500">0 jobs in queue</div>
          </div>
          
          <div class="bg-obsidian rounded-lg p-3 border border-edge-subtle">
            <div class="flex items-center justify-between mb-2">
              <span class="text-sm text-gray-400">Spintax Engine</span>
              <div class="flex items-center gap-2">
                <div class="w-2 h-2 rounded-full bg-green-400"></div>
                <span class="text-xs text-green-400">Online</span>
              </div>
            </div>
            <div class="text-xs text-gray-500">Ready for processing</div>
          </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-6">
          <div class="flex items-center gap-3">
            <div class="text-3xl">🔌</div>
            <h3 class="text-xl font-bold text-gold-500">WordPress Ignition</h3>
          </div>
          <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">
          <div class="bg-obsidian rounded-lg p-3 border border-edge-subtle">
            <div class="flex items-center justify-between mb-2">
              <span class="text-sm text-gray-400">WP Connection</span>
              <div class="flex items-center gap-2">
                <div class="w-2 h-2 rounded-full bg-green-400"></div>
                <span class="text-xs text-green-400">Ready</span>
              </div>
            </div>
            <div class="text-xs text-gray-500">Not configured</div>
          </div>
          
          <div class="bg-obsidian rounded-lg p-3 border border-edge-subtle">
            <div class="flex items-center justify-between mb-2">
              <span class="text-sm text-gray-400">Sync Engine</span>
              <div class="flex items-center gap-2">
                <div class="w-2 h-2 rounded-full bg-gray-500"></div>
                <span class="text-xs text-gray-500">Idle</span>
              </div>
            </div>
            <div class="text-xs text-gray-500">No active syncs</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Core Services -->
    <div class="bg-titanium border border-edge-normal rounded-xl p-6">
      <h2 class="text-2xl font-bold text-gold-500 mb-6">🔧 Core Services</h2>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="bg-obsidian rounded-lg p-4 border border-edge-subtle">
          <div class="text-sm text-gray-400 mb-2">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-2">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-2">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 class="bg-obsidian rounded-lg p-4 border border-edge-subtle">
          <div class="text-sm text-gray-400 mb-2">Astro Server</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">Running</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">Real-Time Status API Required</h3>
          <p class="text-sm text-gray-400 mb-3">
            This page requires health check endpoints for each service.
          </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/health/intelligence</code></li>
            <li><code class="px-2 py-1 bg-obsidian rounded text-gold-500">GET /api/health/production</code></li>
            <li><code class="px-2 py-1 bg-obsidian rounded text-gold-500">GET /api/health/wordpress</code></li>
            <li><code class="px-2 py-1 bg-obsidian rounded text-gold-500">GET /api/health/core</code></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</AdminLayout>

<script>
  // Placeholder for health check polling
  async function pollHealthStatus() {
    // Will poll health endpoints every 5 seconds
    console.log('Health check polling placeholder');
  }
  
  setInterval(pollHealthStatus, 5000);
</script>