'use client'

import { Activity, Server, Database, Cpu, HardDrive, Wifi, CheckCircle, AlertTriangle, TrendingUp } from 'lucide-react'

export default function SystemHealth() {
  const services = [
    { name: 'خادم التطبيق', status: 'operational', uptime: '99.98%', responseTime: '45ms', icon: Server },
    { name: 'قاعدة البيانات', status: 'operational', uptime: '99.99%', responseTime: '12ms', icon: Database },
    { name: 'خدمة البريد', status: 'operational', uptime: '99.95%', responseTime: '250ms', icon: Wifi },
    { name: 'النسخ الاحتياطي', status: 'operational', uptime: '100%', responseTime: 'N/A', icon: HardDrive }
  ]

  const resources = [
    { label: 'استخدام المعالج', value: 45, max: 100, unit: '%', color: 'blue', icon: Cpu },
    { name: 'استخدام الذاكرة', value: 6.2, max: 16, unit: 'GB', color: 'green', icon: Server },
    { label: 'مساحة القرص', value: 125, max: 500, unit: 'GB', color: 'purple', icon: HardDrive },
    { label: 'حركة الشبكة', value: 2.4, max: 10, unit: 'Mbps', color: 'orange', icon: Wifi }
  ]

  return (
    <div>
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-gray-900 mb-2">صحة النظام</h1>
        <p className="text-gray-600">مراقبة أداء وحالة مكونات النظام</p>
      </div>

      <div className="bg-gradient-to-r from-green-500 to-teal-500 text-white rounded-xl shadow-lg p-8 mb-8">
        <div className="flex items-center justify-between">
          <div>
            <div className="flex items-center gap-3 mb-2">
              <CheckCircle className="h-8 w-8" />
              <h2 className="text-3xl font-bold">النظام يعمل بشكل طبيعي</h2>
            </div>
            <p className="text-green-100 text-lg">جميع الخدمات تعمل بكفاءة عالية</p>
          </div>
          <div className="text-center">
            <div className="text-5xl font-bold mb-1">99.9%</div>
            <p className="text-green-100">معدل التوفر</p>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
        {services.map((service, index) => {
          const Icon = service.icon
          return (
            <div key={index} className="bg-white rounded-xl shadow-md p-6 border border-gray-100">
              <div className="flex items-center justify-between mb-4">
                <div className="flex items-center gap-3">
                  <div className="bg-green-100 p-3 rounded-lg">
                    <Icon className="h-6 w-6 text-green-600" />
                  </div>
                  <div>
                    <h3 className="font-bold text-gray-900">{service.name}</h3>
                    <p className="text-sm text-gray-600">Service Status</p>
                  </div>
                </div>
                <span className="flex items-center gap-2 px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm font-medium">
                  <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
                  يعمل
                </span>
              </div>
              <div className="grid grid-cols-2 gap-4 mt-4">
                <div>
                  <p className="text-sm text-gray-600 mb-1">معدل التوفر</p>
                  <p className="text-2xl font-bold text-gray-900">{service.uptime}</p>
                </div>
                <div>
                  <p className="text-sm text-gray-600 mb-1">وقت الاستجابة</p>
                  <p className="text-2xl font-bold text-gray-900">{service.responseTime}</p>
                </div>
              </div>
            </div>
          )
        })}
      </div>

      <div className="bg-white rounded-xl shadow-md p-6 mb-8 border border-gray-100">
        <h2 className="text-xl font-bold text-gray-900 mb-6">استخدام الموارد</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {resources.map((resource, index) => {
            const Icon = resource.icon
            const percentage = ((resource.value / resource.max) * 100).toFixed(1)
            return (
              <div key={index}>
                <div className="flex items-center justify-between mb-2">
                  <div className="flex items-center gap-2">
                    <Icon className="h-5 w-5 text-gray-600" />
                    <span className="font-semibold text-gray-900">{resource.label || resource.name}</span>
                  </div>
                  <span className="text-sm font-bold text-gray-900">
                    {resource.value} / {resource.max} {resource.unit}
                  </span>
                </div>
                <div className="w-full h-3 bg-gray-200 rounded-full overflow-hidden">
                  <div
                    className={`h-full bg-${resource.color}-500 transition-all duration-300`}
                    style={{ width: `${percentage}%` }}
                  ></div>
                </div>
                <p className="text-xs text-gray-600 mt-1">{percentage}% مستخدم</p>
              </div>
            )
          })}
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <div className="bg-white rounded-xl shadow-md p-6 border border-gray-100">
          <h2 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2">
            <TrendingUp className="h-6 w-6 text-blue-500" />
            أداء النظام (24 ساعة)
          </h2>
          <div className="space-y-4">
            <div className="flex items-center justify-between p-3 bg-blue-50 rounded-lg">
              <span className="text-sm font-medium text-gray-900">متوسط وقت الاستجابة</span>
              <span className="text-sm font-bold text-blue-600">52ms</span>
            </div>
            <div className="flex items-center justify-between p-3 bg-green-50 rounded-lg">
              <span className="text-sm font-medium text-gray-900">إجمالي الطلبات</span>
              <span className="text-sm font-bold text-green-600">145,234</span>
            </div>
            <div className="flex items-center justify-between p-3 bg-purple-50 rounded-lg">
              <span className="text-sm font-medium text-gray-900">الطلبات الناجحة</span>
              <span className="text-sm font-bold text-purple-600">99.8%</span>
            </div>
            <div className="flex items-center justify-between p-3 bg-red-50 rounded-lg">
              <span className="text-sm font-medium text-gray-900">الأخطاء</span>
              <span className="text-sm font-bold text-red-600">234</span>
            </div>
          </div>
        </div>

        <div className="bg-white rounded-xl shadow-md p-6 border border-gray-100">
          <h2 className="text-xl font-bold text-gray-900 mb-4 flex items-center gap-2">
            <Activity className="h-6 w-6 text-orange-500" />
            أحداث حديثة
          </h2>
          <div className="space-y-3">
            {[
              { time: 'منذ 5 دقائق', event: 'نسخة احتياطية تلقائية مكتملة', type: 'success' },
              { time: 'منذ 15 دقيقة', event: 'إعادة تشغيل خدمة البريد', type: 'warning' },
              { time: 'منذ ساعة', event: 'تنظيف ملفات مؤقتة', type: 'info' },
              { time: 'منذ ساعتين', event: 'تحديث شهادة SSL', type: 'success' }
            ].map((event, index) => (
              <div key={index} className="flex items-start gap-3 p-3 hover:bg-gray-50 rounded-lg transition-colors">
                <div className={`w-2 h-2 rounded-full mt-2 ${
                  event.type === 'success' ? 'bg-green-500' :
                  event.type === 'warning' ? 'bg-yellow-500' :
                  'bg-blue-500'
                }`}></div>
                <div className="flex-1">
                  <p className="text-sm font-medium text-gray-900">{event.event}</p>
                  <p className="text-xs text-gray-600 mt-1">{event.time}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}

