import { Activity, AlertCircle, CheckCircle, Cpu, Database, HardDrive, Server } from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Progress } from '@/components/ui/progress';

interface SystemMetric {
  name: string;
  value: number;
  max: number;
  unit: string;
  status: 'healthy' | 'warning' | 'critical';
  icon: React.ElementType;
}

interface ServiceStatus {
  name: string;
  status: 'operational' | 'degraded' | 'down';
  uptime: number;
  lastCheck: string;
}

export default function SystemHealth() {
  const metrics: SystemMetric[] = [
    {
      name: 'CPU Kullanımı',
      value: 45,
      max: 100,
      unit: '%',
      status: 'healthy',
      icon: Cpu,
    },
    {
      name: 'Bellek Kullanımı',
      value: 62,
      max: 100,
      unit: '%',
      status: 'healthy',
      icon: HardDrive,
    },
    {
      name: 'Disk Kullanımı',
      value: 78,
      max: 100,
      unit: '%',
      status: 'warning',
      icon: Database,
    },
    {
      name: 'Aktif Bağlantılar',
      value: 234,
      max: 1000,
      unit: '',
      status: 'healthy',
      icon: Activity,
    },
  ];

  const services: ServiceStatus[] = [
    {
      name: 'Web Sunucusu',
      status: 'operational',
      uptime: 99.98,
      lastCheck: '2026-01-15T14:30:00Z',
    },
    {
      name: 'Veritabanı',
      status: 'operational',
      uptime: 99.95,
      lastCheck: '2026-01-15T14:30:00Z',
    },
    {
      name: 'API Gateway',
      status: 'operational',
      uptime: 99.99,
      lastCheck: '2026-01-15T14:30:00Z',
    },
    {
      name: 'Edge Functions',
      status: 'operational',
      uptime: 99.92,
      lastCheck: '2026-01-15T14:30:00Z',
    },
    {
      name: 'Storage',
      status: 'operational',
      uptime: 99.97,
      lastCheck: '2026-01-15T14:30:00Z',
    },
    {
      name: 'Email Service',
      status: 'operational',
      uptime: 99.89,
      lastCheck: '2026-01-15T14:30:00Z',
    },
  ];

  const getStatusColor = (status: string) => {
    switch (status) {
      case 'healthy':
      case 'operational':
        return 'bg-green-500/10 text-green-500';
      case 'warning':
      case 'degraded':
        return 'bg-yellow-500/10 text-yellow-500';
      case 'critical':
      case 'down':
        return 'bg-red-500/10 text-red-500';
      default:
        return 'bg-gray-500/10 text-gray-500';
    }
  };

  const getStatusIcon = (status: string) => {
    switch (status) {
      case 'healthy':
      case 'operational':
        return <CheckCircle className="h-4 w-4 text-green-500" />;
      case 'warning':
      case 'degraded':
        return <AlertCircle className="h-4 w-4 text-yellow-500" />;
      case 'critical':
      case 'down':
        return <AlertCircle className="h-4 w-4 text-red-500" />;
      default:
        return null;
    }
  };

  const getProgressColor = (status: string) => {
    switch (status) {
      case 'healthy':
        return 'bg-green-500';
      case 'warning':
        return 'bg-yellow-500';
      case 'critical':
        return 'bg-red-500';
      default:
        return 'bg-primary';
    }
  };

  return (
    <div className="p-6 space-y-6">
      {/* Header */}
      <div>
        <h1 className="text-3xl font-bold">Sistem Sağlığı</h1>
        <p className="text-muted-foreground mt-1">
          Sistem kaynaklarını ve servis durumlarını izleyin
        </p>
      </div>

      {/* Overall Status */}
      <Card>
        <CardHeader>
          <div className="flex items-center justify-between">
            <div>
              <CardTitle>Genel Durum</CardTitle>
              <CardDescription>Tüm sistemler çalışıyor</CardDescription>
            </div>
            <Badge className="bg-green-500/10 text-green-500">
              <CheckCircle className="h-4 w-4 mr-1" />
              Sağlıklı
            </Badge>
          </div>
        </CardHeader>
      </Card>

      {/* System Metrics */}
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        {metrics.map((metric) => {
          const Icon = metric.icon;
          return (
            <Card key={metric.name}>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">{metric.name}</CardTitle>
                <Icon className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">
                  {metric.value}
                  {metric.unit}
                </div>
                <Progress
                  value={(metric.value / metric.max) * 100}
                  className={`mt-2 [&>div]:${getProgressColor(metric.status)}`}
                />
                <div className="flex items-center justify-between mt-2">
                  <Badge className={getStatusColor(metric.status)} variant="outline">
                    {metric.status === 'healthy' && 'Sağlıklı'}
                    {metric.status === 'warning' && 'Uyarı'}
                    {metric.status === 'critical' && 'Kritik'}
                  </Badge>
                  <span className="text-xs text-muted-foreground">
                    / {metric.max}
                    {metric.unit}
                  </span>
                </div>
              </CardContent>
            </Card>
          );
        })}
      </div>

      {/* Services Status */}
      <Card>
        <CardHeader>
          <CardTitle>Servis Durumları</CardTitle>
          <CardDescription>Tüm servislerin anlık durumu</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {services.map((service) => (
              <div
                key={service.name}
                className="flex items-center justify-between p-4 border rounded-lg"
              >
                <div className="flex items-center gap-3">
                  {getStatusIcon(service.status)}
                  <div>
                    <h3 className="font-semibold">{service.name}</h3>
                    <p className="text-sm text-muted-foreground">
                      Son kontrol: {new Date(service.lastCheck).toLocaleString('tr-TR')}
                    </p>
                  </div>
                </div>
                <div className="flex items-center gap-4">
                  <div className="text-right">
                    <p className="text-sm font-medium">Uptime</p>
                    <p className="text-sm text-muted-foreground">{service.uptime}%</p>
                  </div>
                  <Badge className={getStatusColor(service.status)}>
                    {service.status === 'operational' && 'Çalışıyor'}
                    {service.status === 'degraded' && 'Yavaş'}
                    {service.status === 'down' && 'Çalışmıyor'}
                  </Badge>
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

      {/* Recent Incidents */}
      <Card>
        <CardHeader>
          <CardTitle>Son Olaylar</CardTitle>
          <CardDescription>Son 24 saatteki sistem olayları</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <div className="flex items-start gap-3 p-4 border rounded-lg">
              <CheckCircle className="h-5 w-5 text-green-500 mt-0.5" />
              <div className="flex-1">
                <h4 className="font-semibold">Sistem Güncellemesi Tamamlandı</h4>
                <p className="text-sm text-muted-foreground">
                  Tüm servisler başarıyla güncellendi ve yeniden başlatıldı.
                </p>
                <p className="text-xs text-muted-foreground mt-1">
                  15 Ocak 2026, 10:30
                </p>
              </div>
            </div>
            <div className="flex items-start gap-3 p-4 border rounded-lg">
              <AlertCircle className="h-5 w-5 text-yellow-500 mt-0.5" />
              <div className="flex-1">
                <h4 className="font-semibold">Yüksek CPU Kullanımı Tespit Edildi</h4>
                <p className="text-sm text-muted-foreground">
                  CPU kullanımı %85'e ulaştı. Otomatik ölçeklendirme devreye girdi.
                </p>
                <p className="text-xs text-muted-foreground mt-1">
                  14 Ocak 2026, 18:45
                </p>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
