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

<AdminLayout title="System Logs">
  <div class="space-y-8">
    <div>
      <h1 class="text-4xl font-bold text-gold-500 mb-2">📋 System Logs</h1>
      <p class="text-gray-400">Real-time system activity and event monitoring</p>
    </div>

    <!-- Filters -->
    <div class="bg-titanium border border-edge-normal rounded-xl p-6">
      <div class="grid grid-cols-4 gap-4">
        <select class="bg-obsidian border border-edge-subtle rounded-lg px-4 py-2 text-white">
          <option>All Levels</option>
          <option>Info</option>
          <option>Warning</option>
          <option>Error</option>
        </select>
        <select class="bg-obsidian border border-edge-subtle rounded-lg px-4 py-2 text-white">
          <option>All Sources</option>
          <option>API</option>
          <option>Worker</option>
          <option>Database</option>
        </select>
        <input type="datetime-local" class="bg-obsidian border border-edge-subtle rounded-lg px-4 py-2 text-white" />
        <button class="px-4 py-2 bg-gold-500 hover:bg-gold-600 text-obsidian font-semibold rounded-lg transition-all">
          Apply Filters
        </button>
      </div>
    </div>

    <!-- Log Stream -->
    <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">Live Log Stream</h2>
        <div class="flex items-center gap-2">
          <div class="w-2 h-2 rounded-full bg-green-400 animate-pulse"></div>
          <span class="text-sm text-green-400">Live</span>
        </div>
      </div>
      
      <div id="logContainer" class="bg-obsidian p-6 font-mono text-sm max-h-[600px] overflow-y-auto">
        <div class="space-y-2">
          <div class="text-gray-500">[2025-12-15 02:00:00] INFO: System initialized</div>
          <div class="text-blue-400">[2025-12-15 02:00:05] INFO: Database connected</div>
          <div class="text-green-400">[2025-12-15 02:00:10] INFO: Worker started</div>
          <div class="text-gray-500">[2025-12-15 02:00:15] INFO: Redis connection established</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">API Integration Required</h3>
          <p class="text-sm text-gray-400 mb-3">
            This page requires a logging API endpoint to stream real-time logs. Logs can be stored in:
          </p>
          <ul class="text-sm text-gray-400 space-y-1 list-disc list-inside">
            <li>Database table: <code class="px-2 py-1 bg-obsidian rounded text-gold-500">system_logs</code></li>
            <li>File-based logging (Winston, Pino)</li>
            <li>External service (Datadog, Logstash)</li>
          </ul>
          <p class="text-sm text-gray-400 mt-3">
            <strong>API Endpoint:</strong> <code class="px-2 py-1 bg-obsidian rounded text-gold-500">GET /api/logs?level=&source=&after=</code>
          </p>
        </div>
      </div>
    </div>
  </div>
</AdminLayout>

<script>
  // Placeholder for WebSocket log streaming
  function connectLogStream() {
    // Will connect to WebSocket for real-time logs
    console.log('Log streaming placeholder');
  }
  
  connectLogStream();
</script>
