---
// God Mode Monitoring Dashboard
// Real-time pool health, SEO compliance, and database stats
import AdminLayout from '@/layouts/AdminLayout.astro';
import { getPoolStats, getDatabaseStats, getVacuumCandidates } from '@/lib/shim/pool';
import { getArticlesCountByStatus } from '@/lib/shim/articles';
import { getSitesCountByStatus } from '@/lib/shim/sites';
import ShimMonitor from '@/components/shim/ShimMonitor';
import HealthDash from '@/components/shim/HealthDash';

// Server-side stats (instant load)
const poolStats = getPoolStats();
const dbStats = await getDatabaseStats();
const vacuumCandidates = await getVacuumCandidates();
const articleCounts = await getArticlesCountByStatus();
const siteCounts = await getSitesCountByStatus();

const totalArticles = Object.values(articleCounts).reduce((a, b) => a + b, 0);
const publishedArticles = articleCounts['published'] || 0;
const needsReview = (articleCounts['qc'] || 0) + (articleCounts['processing'] || 0);

const activeSites = siteCounts['active'] || 0;
const totalSites = Object.values(siteCounts).reduce((a, b) => a + b, 0);
---

<AdminLayout title="God Mode - System Dashboard">
  <div class="space-y-6">
    
    <!-- Header -->
    <div class="flex justify-between items-center">
      <div>
        <h1 class="text-3xl font-bold text-white flex items-center gap-3">
          ⚡ God Mode Dashboard
          <span class={`px-3 py-1 rounded-full text-xs font-medium ${
            poolStats.status === 'healthy' 
              ? 'bg-green-500/20 text-green-400 border border-green-500/30' 
              : poolStats.status === 'warning'
              ? 'bg-yellow-500/20 text-yellow-400 border border-yellow-500/30'
              : 'bg-red-500/20 text-red-400 border border-red-500/30'
          }`}>
            {poolStats.status.toUpperCase()}
          </span>
        </h1>
        <p class="text-slate-400 mt-1">
          Direct PostgreSQL monitoring and SEO compliance
        </p>
      </div>
      <div class="flex gap-2">
        <a href="/shim/sites" class="px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg">
          View Sites →
        </a>
      </div>
    </div>

    <!-- Key Metrics Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
      
      <!-- Pool Utilization -->
      <div class="p-6 bg-slate-800 rounded-lg border border-slate-700">
        <div class="flex items-center justify-between mb-3">
          <h3 class="text-slate-400 text-sm font-medium">Pool Utilization</h3>
          <span class={`text-2xl ${
            poolStats.utilizationPercent > 90 ? 'text-red-400' :
            poolStats.utilizationPercent > 70 ? 'text-yellow-400' :
            'text-green-400'
          }`}>
            {poolStats.utilizationPercent}%
          </span>
        </div>
        <div class="space-y-2">
          <div class="flex justify-between text-xs text-slate-500">
            <span>Active: {poolStats.totalCount - poolStats.idleCount}</span>
            <span>Idle: {poolStats.idleCount}</span>
          </div>
          <div class="h-2 bg-slate-900 rounded-full overflow-hidden">
            <div 
              class={`h-full transition-all ${
                poolStats.utilizationPercent > 90 ? 'bg-red-500' :
                poolStats.utilizationPercent > 70 ? 'bg-yellow-500' :
                'bg-green-500'
              }`}
              style={`width: ${poolStats.utilizationPercent}%`}
            ></div>
          </div>
          <p class="text-xs text-slate-500 mt-2">
            {poolStats.totalCount}/{poolStats.maxConnections} connections
            {poolStats.waitingCount > 0 && <span class="text-red-400"> • {poolStats.waitingCount} waiting</span>}
          </p>
        </div>
      </div>

      <!-- Database Size -->
      <div class="p-6 bg-slate-800 rounded-lg border border-slate-700">
        <h3 class="text-slate-400 text-sm font-medium mb-3">Database Size</h3>
        <div class="text-3xl font-bold text-white mb-2">
          {dbStats.databaseSize}
        </div>
        <p class="text-xs text-slate-500">
          {dbStats.tableStats.length} tables monitored
        </p>
      </div>

      <!-- SEO Compliance -->
      <div class="p-6 bg-slate-800 rounded-lg border border-slate-700">
        <h3 class="text-slate-400 text-sm font-medium mb-3">SEO Compliance</h3>
        <div class="text-3xl font-bold text-white mb-2">
          {publishedArticles > 0 ? '100%' : 'N/A'}
        </div>
        <p class="text-xs text-slate-500">
          {publishedArticles} published articles
        </p>
        <p class="text-xs text-green-400 mt-1">
          ✓ All enforced with metadata
        </p>
      </div>

      <!-- Content Pipeline -->
      <div class="p-6 bg-slate-800 rounded-lg border border-slate-700">
        <h3 class="text-slate-400 text-sm font-medium mb-3">Content Pipeline</h3>
        <div class="text-3xl font-bold text-white mb-2">
          {totalArticles}
        </div>
        <p class="text-xs text-slate-500">
          {needsReview} in review • {publishedArticles} published
        </p>
      </div>

    </div>

    <!-- Pool Status Alert -->
    {poolStats.status !== 'healthy' && (
      <div class={`p-4 rounded-lg border ${
        poolStats.status === 'critical' 
          ? 'bg-red-900/20 border-red-700'
          : 'bg-yellow-900/20 border-yellow-700'
      }`}>
        <div class="flex items-start gap-3">
          <span class="text-2xl">{poolStats.status === 'critical' ? '🚨' : '⚠️'}</span>
          <div>
            <h3 class={`font-semibold ${
              poolStats.status === 'critical' ? 'text-red-400' : 'text-yellow-400'
            }`}>
              {poolStats.status === 'critical' ? 'CRITICAL' : 'WARNING'}: Connection Pool Pressure
            </h3>
            <p class={`text-sm mt-1 ${
              poolStats.status === 'critical' ? 'text-red-300' : 'text-yellow-300'
            }`}>
              {poolStats.message}
            </p>
            <div class="mt-3 flex gap-2">
              <button class="px-3 py-1 bg-slate-700 hover:bg-slate-600 rounded text-white text-xs">
                View Logs
              </button>
              <button class="px-3 py-1 bg-slate-700 hover:bg-slate-600 rounded text-white text-xs">
                Emergency Drain
              </button>
            </div>
          </div>
        </div>
      </div>
    )}

    <!-- VACUUM Recommendations -->
    {vacuumCandidates.length > 0 && vacuumCandidates[0].deadPercent > 20 && (
      <div class="p-4 bg-purple-900/20 border border-purple-700 rounded-lg">
        <div class="flex items-start gap-3">
          <span class="text-2xl">🧹</span>
          <div class="flex-1">
            <h3 class="font-semibold text-purple-400">VACUUM Recommended</h3>
            <p class="text-sm text-purple-300 mt-1">
              {vacuumCandidates.length} table(s) have significant dead tuples. Consider running VACUUM to reclaim storage.
            </p>
            <div class="mt-3 space-y-1">
              {vacuumCandidates.slice(0, 3).map(table => (
                <div class="flex justify-between text-xs text-purple-200">
                  <span>{table.table}</span>
                  <span>{table.deadPercent.toFixed(1)}% dead ({table.deadTuples.toLocaleString()} tuples)</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    )}

    <!-- System Health Monitor (RAM/CPU/Locks) -->
    <div class="bg-slate-800 rounded-lg border border-slate-700">
      <div class="p-4 border-b border-slate-700">
        <h2 class="text-white font-semibold text-lg">🔋 System Health Monitor</h2>
        <p class="text-slate-400 text-sm mt-1">Real-time RAM, CPU, and database lock monitoring (2s refresh)</p>
      </div>
      <div class="p-6">
        <HealthDash client:load />
      </div>
    </div>

    <!-- Two-Column Layout -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
      
      <!-- Left Column: Live Stats -->
      <div class="space-y-6">
        
        <!-- Real-Time Monitor Component -->
        <div class="bg-slate-800 rounded-lg border border-slate-700">
          <div class="p-4 border-b border-slate-700">
            <h3 class="text-white font-semibold">Live Monitoring</h3>
            <p class="text-slate-400 text-sm mt-1">Auto-refreshes every 5 seconds</p>
          </div>
          <div class="p-4">
            <ShimMonitor client:load />
          </div>
        </div>

        <!-- Sites Status -->
        <div class="bg-slate-800 rounded-lg border border-slate-700 p-6">
          <h3 class="text-white font-semibold mb-4">Sites Overview</h3>
          <div class="space-y-3">
            <div class="flex justify-between items-center">
              <span class="text-slate-400">Total Sites</span>
              <span class="text-white font-bold text-xl">{totalSites}</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-slate-400">Active</span>
              <span class="text-green-400 font-semibold">{activeSites}</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-slate-400">Pending</span>
              <span class="text-yellow-400 font-semibold">{siteCounts['pending'] || 0}</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-slate-400">Inactive</span>
              <span class="text-gray-400 font-semibold">{siteCounts['inactive'] || 0}</span>
            </div>
          </div>
          <a href="/shim/sites" class="mt-4 block w-full py-2 bg-blue-600 hover:bg-blue-500 text-white text-center rounded-lg transition">
            Manage Sites →
          </a>
        </div>

      </div>

      <!-- Right Column: Database Stats -->
      <div class="space-y-6">
        
        <!-- Top Tables -->
        <div class="bg-slate-800 rounded-lg border border-slate-700">
          <div class="p-4 border-b border-slate-700">
            <h3 class="text-white font-semibold">Largest Tables</h3>
          </div>
          <div class="divide-y divide-slate-700">
            {dbStats.tableStats.slice(0, 10).map(table => (
              <div class="p-3 flex justify-between items-center hover:bg-slate-700/50 transition">
                <div>
                  <div class="text-sm font-medium text-white">{table.table.split('.')[1] || table.table}</div>
                  <div class="text-xs text-slate-500">{table.rowCount.toLocaleString()} rows</div>
                </div>
                <div class="text-sm text-slate-300 font-mono">{table.tableSize}</div>
              </div>
            ))}
          </div>
        </div>

        <!-- Article Status Breakdown -->
        <div class="bg-slate-800 rounded-lg border border-slate-700 p-6">
          <h3 class="text-white font-semibold mb-4">Article Pipeline</h3>
          <div class="space-y-3">
            {Object.entries(articleCounts).map(([status, count]) => (
              <div class="flex justify-between items-center">
                <div class="flex items-center gap-2">
                  <span class={`w-2 h-2 rounded-full ${
                    status === 'published' ? 'bg-green-500' :
                    status === 'approved' ? 'bg-blue-500' :
                    status === 'qc' ? 'bg-purple-500' :
                    status === 'processing' ? 'bg-yellow-500' :
                    'bg-gray-500'
                  }`}></span>
                  <span class="text-slate-400 capitalize">{status}</span>
                </div>
                <span class="text-white font-semibold">{count}</span>
              </div>
            ))}
          </div>
        </div>

      </div>

    </div>

    <!-- Info Box -->
    <div class="p-4 bg-blue-900/20 border border-blue-700 rounded-lg">
      <h3 class="text-blue-300 font-semibold mb-2">🔱 God Mode Features Active</h3>
      <ul class="text-blue-200 text-sm space-y-1">
        <li>✅ <strong>Direct PostgreSQL Access</strong> - Bypassing CMS for maximum speed</li>
        <li>✅ <strong>Zod Validation</strong> - All data validated before SQL execution</li>
        <li>✅ <strong>SEO Enforcement</strong> - Cannot publish without metadata</li>
        <li>✅ <strong>Connection Monitoring</strong> - Real-time pool health tracking</li>
        <li>✅ <strong>System Health Monitor</strong> - RAM/CPU/locks with emergency controls</li>
        <li>✅ <strong>Auto VACUUM Detection</strong> - Prevents performance degradation</li>
      </ul>
    </div>

  </div>
</AdminLayout>
