/**
 * Admin System Health Page
 * Monitor system health and status
 */

import { useState, useEffect } from 'react';
import { Activity, Database, Server, Zap, CheckCircle, XCircle, Loader2 } from 'lucide-react';
import { Card } from '../../components/ui/card';
import Badge from '../../components/ui/badge/Badge';

interface HealthStatus {
  component: string;
  status: 'healthy' | 'degraded' | 'down';
  message: string;
  responseTime?: number;
  lastChecked: string;
}

export default function AdminSystemHealthPage() {
  const [healthData, setHealthData] = useState<HealthStatus[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    loadHealthData();
    const interval = setInterval(loadHealthData, 30000); // Refresh every 30s
    return () => clearInterval(interval);
  }, []);

  const loadHealthData = async () => {
    // Mock data - replace with API call
    setHealthData([
      {
        component: 'API Server',
        status: 'healthy',
        message: 'All systems operational',
        responseTime: 45,
        lastChecked: new Date().toISOString(),
      },
      {
        component: 'Database',
        status: 'healthy',
        message: 'Connection pool healthy',
        responseTime: 12,
        lastChecked: new Date().toISOString(),
      },
      {
        component: 'Background Jobs',
        status: 'healthy',
        message: '5 workers active',
        lastChecked: new Date().toISOString(),
      },
      {
        component: 'Redis Cache',
        status: 'healthy',
        message: 'Cache hit rate: 94%',
        responseTime: 2,
        lastChecked: new Date().toISOString(),
      },
    ]);
    setLoading(false);
  };

  const getStatusIcon = (status: string) => {
    switch (status) {
      case 'healthy':
        return <CheckCircle className="w-5 h-5 text-green-600" />;
      case 'degraded':
        return <Activity className="w-5 h-5 text-yellow-600" />;
      case 'down':
        return <XCircle className="w-5 h-5 text-red-600" />;
      default:
        return <Activity className="w-5 h-5 text-gray-600" />;
    }
  };

  const getStatusColor = (status: string) => {
    switch (status) {
      case 'healthy':
        return 'success' as const;
      case 'degraded':
        return 'warning' as const;
      case 'down':
        return 'error' as const;
      default:
        return 'default' as const;
    }
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <Loader2 className="w-8 h-8 animate-spin text-blue-600" />
      </div>
    );
  }

  const allHealthy = healthData.every(item => item.status === 'healthy');

  return (
    <div className="p-6">
      <div className="mb-6">
        <h1 className="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
          <Activity className="w-6 h-6" />
          System Health
        </h1>
        <p className="text-gray-600 dark:text-gray-400 mt-1">
          Monitor system health and status
        </p>
      </div>

      <div className="mb-6">
        <Card className="p-6">
          <div className="flex items-center gap-4">
            {allHealthy ? (
              <CheckCircle className="w-12 h-12 text-green-600" />
            ) : (
              <XCircle className="w-12 h-12 text-red-600" />
            )}
            <div>
              <h2 className="text-2xl font-bold text-gray-900 dark:text-white">
                {allHealthy ? 'All Systems Operational' : 'System Issues Detected'}
              </h2>
              <p className="text-gray-600 dark:text-gray-400">
                Last updated: {new Date().toLocaleString()}
              </p>
            </div>
          </div>
        </Card>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {healthData.map((item) => (
          <Card key={item.component} className="p-6">
            <div className="flex items-start justify-between mb-4">
              <div className="flex items-center gap-3">
                {getStatusIcon(item.status)}
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
                  {item.component}
                </h3>
              </div>
              <Badge variant="light" color={getStatusColor(item.status)}>
                {item.status}
              </Badge>
            </div>
            
            <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">{item.message}</p>
            
            {item.responseTime && (
              <div className="text-sm text-gray-500">
                Response time: {item.responseTime}ms
              </div>
            )}
            
            <div className="text-xs text-gray-400 mt-2">
              Last checked: {new Date(item.lastChecked).toLocaleString()}
            </div>
          </Card>
        ))}
      </div>
    </div>
  );
}
