import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card';
import { Button } from './ui/button';
import { Badge } from './ui/badge';
import { Progress } from './ui/progress';
import { 
  Activity, 
  Shield, 
  Database, 
  Zap, 
  CheckCircle, 
  AlertTriangle, 
  XCircle,
  TrendingUp,
  Users,
  BarChart3,
  Clock,
  Wifi,
  Server,
  CreditCard,
  FileCheck,
  Bot,
  RefreshCw,
  Eye,
  Settings
} from 'lucide-react';
import { useState, useEffect } from 'react';
import { formatNaira } from '../utils/currency';

export interface SystemHealthDashboardProps {
  className?: string;
}

interface SystemMetrics {
  uptime: string;
  responseTime: number;
  activeUsers: number;
  transactionsToday: number;
  errorRate: number;
  systemLoad: number;
}

interface ServiceStatus {
  id: string;
  name: string;
  status: 'operational' | 'degraded' | 'down';
  uptime: number;
  responseTime: number;
  icon: any;
  description: string;
  lastCheck: string;
}

interface RecentActivity {
  id: string;
  type: 'transaction' | 'kyc' | 'automation' | 'alert';
  message: string;
  timestamp: string;
  status: 'success' | 'warning' | 'error';
}

export function SystemHealthDashboard({ className }: SystemHealthDashboardProps) {
  const [isLoading, setIsLoading] = useState(false);
  const [lastUpdated, setLastUpdated] = useState(new Date());

  // Mock system metrics - in production this would come from your monitoring service
  const [systemMetrics, setSystemMetrics] = useState<SystemMetrics>({
    uptime: '99.9%',
    responseTime: 145,
    activeUsers: 1247,
    transactionsToday: 8562,
    errorRate: 0.02,
    systemLoad: 67
  });

  const [services, setServices] = useState<ServiceStatus[]>([
    {
      id: 'banking',
      name: 'Banking Service',
      status: 'operational',
      uptime: 99.95,
      responseTime: 120,
      icon: CreditCard,
      description: 'Paystack & Flutterwave Integration',
      lastCheck: '2 min ago'
    },
    {
      id: 'kyc',
      name: 'KYC Service',
      status: 'operational',
      uptime: 99.87,
      responseTime: 340,
      icon: FileCheck,
      description: 'Prembly & YouVerify Integration',
      lastCheck: '1 min ago'
    },
    {
      id: 'automation',
      name: 'Automation Engine',
      status: 'operational',
      uptime: 99.92,
      responseTime: 89,
      icon: Bot,
      description: 'SMS, Email & Notification Automation',
      lastCheck: '30 sec ago'
    },
    {
      id: 'reporting',
      name: 'Reporting Service',
      status: 'degraded',
      uptime: 98.45,
      responseTime: 567,
      icon: BarChart3,
      description: 'Analytics & Report Generation',
      lastCheck: '45 sec ago'
    },
    {
      id: 'database',
      name: 'Database',
      status: 'operational',
      uptime: 99.99,
      responseTime: 12,
      icon: Database,
      description: 'Supabase PostgreSQL',
      lastCheck: '15 sec ago'
    },
    {
      id: 'api',
      name: 'API Gateway',
      status: 'operational',
      uptime: 99.94,
      responseTime: 76,
      icon: Server,
      description: 'Core API & Authentication',
      lastCheck: '20 sec ago'
    }
  ]);

  const [recentActivity, setRecentActivity] = useState<RecentActivity[]>([
    {
      id: '1',
      type: 'transaction',
      message: '₦50,000 payout processed successfully for Adaora Okafor',
      timestamp: '2 minutes ago',
      status: 'success'
    },
    {
      id: '2',
      type: 'kyc',
      message: 'BVN verification completed for new member Chidi Eze',
      timestamp: '5 minutes ago',
      status: 'success'
    },
    {
      id: '3',
      type: 'automation',
      message: 'Daily payment reminders sent to 847 members',
      timestamp: '1 hour ago',
      status: 'success'
    },
    {
      id: '4',
      type: 'alert',
      message: 'High response time detected in Reporting Service',
      timestamp: '2 hours ago',
      status: 'warning'
    },
    {
      id: '5',
      type: 'transaction',
      message: 'Failed transaction retry successful - ₦2,500',
      timestamp: '3 hours ago',
      status: 'success'
    }
  ]);

  const handleRefreshMetrics = async () => {
    setIsLoading(true);
    
    // Simulate API call to refresh metrics
    await new Promise(resolve => setTimeout(resolve, 1000));
    
    // Update with new mock data
    setSystemMetrics(prev => ({
      ...prev,
      responseTime: Math.floor(Math.random() * 100) + 100,
      activeUsers: Math.floor(Math.random() * 500) + 1000,
      systemLoad: Math.floor(Math.random() * 30) + 50
    }));
    
    setLastUpdated(new Date());
    setIsLoading(false);
  };

  const getStatusColor = (status: ServiceStatus['status']) => {
    switch (status) {
      case 'operational': return 'text-secondary';
      case 'degraded': return 'text-warning';
      case 'down': return 'text-destructive';
      default: return 'text-muted-foreground';
    }
  };

  const getStatusBadgeColor = (status: ServiceStatus['status']) => {
    switch (status) {
      case 'operational': return 'bg-secondary text-white';
      case 'degraded': return 'bg-warning text-white';
      case 'down': return 'bg-destructive text-white';
      default: return 'bg-muted';
    }
  };

  const getActivityIcon = (type: RecentActivity['type']) => {
    switch (type) {
      case 'transaction': return CreditCard;
      case 'kyc': return Shield;
      case 'automation': return Bot;
      case 'alert': return AlertTriangle;
      default: return Activity;
    }
  };

  const getActivityStatusColor = (status: RecentActivity['status']) => {
    switch (status) {
      case 'success': return 'text-secondary';
      case 'warning': return 'text-warning';
      case 'error': return 'text-destructive';
      default: return 'text-muted-foreground';
    }
  };

  const operationalServices = services.filter(s => s.status === 'operational').length;
  const totalServices = services.length;
  const overallHealth = Math.round((operationalServices / totalServices) * 100);

  return (
    <div className={`space-y-6 ${className}`}>
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-2xl font-bold">System Health & Analytics</h2>
          <p className="text-muted-foreground">Real-time monitoring of Enamel Wallets infrastructure</p>
        </div>
        <div className="flex items-center gap-2">
          <p className="text-sm text-muted-foreground">
            Last updated: {lastUpdated.toLocaleTimeString()}
          </p>
          <Button 
            variant="outline" 
            size="sm" 
            onClick={handleRefreshMetrics}
            disabled={isLoading}
          >
            <RefreshCw className={`w-4 h-4 ${isLoading ? 'animate-spin' : ''}`} />
          </Button>
        </div>
      </div>

      {/* System Overview Cards */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center gap-2">
              <Activity className="w-5 h-5 text-secondary" />
              <div>
                <p className="text-sm text-muted-foreground">System Health</p>
                <p className="text-2xl font-bold text-secondary">{overallHealth}%</p>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-4">
            <div className="flex items-center gap-2">
              <Clock className="w-5 h-5 text-primary" />
              <div>
                <p className="text-sm text-muted-foreground">Response Time</p>
                <p className="text-2xl font-bold">{systemMetrics.responseTime}ms</p>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-4">
            <div className="flex items-center gap-2">
              <Users className="w-5 h-5 text-accent" />
              <div>
                <p className="text-sm text-muted-foreground">Active Users</p>
                <p className="text-2xl font-bold">{systemMetrics.activeUsers.toLocaleString()}</p>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-4">
            <div className="flex items-center gap-2">
              <TrendingUp className="w-5 h-5 text-secondary" />
              <div>
                <p className="text-sm text-muted-foreground">Transactions Today</p>
                <p className="text-2xl font-bold">{systemMetrics.transactionsToday.toLocaleString()}</p>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Service Status Grid */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Server className="w-5 h-5" />
            Service Status Monitor
          </CardTitle>
          <CardDescription>
            Real-time status of all critical system components and integrations
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {services.map((service) => {
              const StatusIcon = service.status === 'operational' 
                ? CheckCircle 
                : service.status === 'degraded' 
                  ? AlertTriangle 
                  : XCircle;

              return (
                <div key={service.id} className="p-4 border rounded-lg">
                  <div className="flex items-start justify-between mb-3">
                    <div className="flex items-center gap-3">
                      <div className="w-10 h-10 rounded-full bg-muted flex items-center justify-center">
                        <service.icon className="w-5 h-5 text-foreground" />
                      </div>
                      <div>
                        <h3 className="font-semibold">{service.name}</h3>
                        <p className="text-sm text-muted-foreground">{service.description}</p>
                      </div>
                    </div>
                    <StatusIcon className={`w-5 h-5 ${getStatusColor(service.status)}`} />
                  </div>

                  <div className="space-y-2">
                    <div className="flex justify-between text-sm">
                      <span className="text-muted-foreground">Status:</span>
                      <Badge className={getStatusBadgeColor(service.status)}>
                        {service.status}
                      </Badge>
                    </div>
                    <div className="flex justify-between text-sm">
                      <span className="text-muted-foreground">Uptime:</span>
                      <span className="font-medium">{service.uptime}%</span>
                    </div>
                    <div className="flex justify-between text-sm">
                      <span className="text-muted-foreground">Response:</span>
                      <span className="font-medium">{service.responseTime}ms</span>
                    </div>
                    <div className="flex justify-between text-sm">
                      <span className="text-muted-foreground">Last Check:</span>
                      <span className="font-medium">{service.lastCheck}</span>
                    </div>
                  </div>

                  <Progress 
                    value={service.uptime} 
                    className="mt-3 h-2"
                  />
                </div>
              );
            })}
          </div>
        </CardContent>
      </Card>

      {/* System Metrics and Recent Activity */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* System Load & Performance */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <BarChart3 className="w-5 h-5" />
              Performance Metrics
            </CardTitle>
            <CardDescription>
              Current system performance and resource utilization
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <div className="flex justify-between text-sm">
                <span className="text-muted-foreground">System Load</span>
                <span className="font-medium">{systemMetrics.systemLoad}%</span>
              </div>
              <Progress value={systemMetrics.systemLoad} className="h-2" />
            </div>

            <div className="space-y-2">
              <div className="flex justify-between text-sm">
                <span className="text-muted-foreground">Error Rate</span>
                <span className="font-medium">{systemMetrics.errorRate}%</span>
              </div>
              <Progress value={systemMetrics.errorRate} className="h-2" />
            </div>

            <div className="space-y-2">
              <div className="flex justify-between text-sm">
                <span className="text-muted-foreground">Uptime</span>
                <span className="font-medium text-secondary">{systemMetrics.uptime}</span>
              </div>
              <Progress value={99.9} className="h-2" />
            </div>

            <div className="grid grid-cols-2 gap-4 pt-4">
              <div className="text-center">
                <p className="text-2xl font-bold text-secondary">{formatNaira(2547832)}</p>
                <p className="text-sm text-muted-foreground">Total Volume Today</p>
              </div>
              <div className="text-center">
                <p className="text-2xl font-bold text-primary">{systemMetrics.transactionsToday}</p>
                <p className="text-sm text-muted-foreground">Transactions</p>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Recent Activity */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Activity className="w-5 h-5" />
              Recent System Activity
            </CardTitle>
            <CardDescription>
              Latest system events and automated processes
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              {recentActivity.map((activity) => {
                const ActivityIcon = getActivityIcon(activity.type);
                
                return (
                  <div key={activity.id} className="flex items-start gap-3 p-3 rounded-lg bg-muted/30">
                    <div className={`w-8 h-8 rounded-full bg-background flex items-center justify-center ${getActivityStatusColor(activity.status)}`}>
                      <ActivityIcon className="w-4 h-4" />
                    </div>
                    <div className="flex-1 min-w-0">
                      <p className="text-sm font-medium leading-tight">
                        {activity.message}
                      </p>
                      <p className="text-xs text-muted-foreground mt-1">
                        {activity.timestamp}
                      </p>
                    </div>
                    <Badge 
                      variant="outline" 
                      className={`text-xs ${getActivityStatusColor(activity.status)}`}
                    >
                      {activity.status}
                    </Badge>
                  </div>
                );
              })}
            </div>

            <div className="flex gap-2 mt-4">
              <Button variant="outline" size="sm" className="flex-1">
                <Eye className="w-4 h-4 mr-2" />
                View All Logs
              </Button>
              <Button variant="outline" size="sm" className="flex-1">
                <Settings className="w-4 h-4 mr-2" />
                Configure Alerts
              </Button>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Quick Actions */}
      <Card>
        <CardHeader>
          <CardTitle>System Management</CardTitle>
          <CardDescription>
            Quick actions for system administration and monitoring
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
            <Button variant="outline" className="h-auto p-4 flex flex-col gap-2">
              <BarChart3 className="w-6 h-6" />
              <span className="text-sm">Advanced Reports</span>
            </Button>
            <Button variant="outline" className="h-auto p-4 flex flex-col gap-2">
              <Shield className="w-6 h-6" />
              <span className="text-sm">Security Audit</span>
            </Button>
            <Button variant="outline" className="h-auto p-4 flex flex-col gap-2">
              <Database className="w-6 h-6" />
              <span className="text-sm">Database Backup</span>
            </Button>
            <Button variant="outline" className="h-auto p-4 flex flex-col gap-2">
              <Settings className="w-6 h-6" />
              <span className="text-sm">System Config</span>
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}