'use client'

import { Clock, Play, Pause, Settings } from 'lucide-react'

export default function ScheduledJobs() {
  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="space-y-4">
        {[
          { name: 'نسخ احتياطي تلقائي', schedule: 'يومياً الساعة 2:00 صباحاً', status: 'active', lastRun: '2024-01-06 02:00', nextRun: '2024-01-07 02:00' },
          { name: 'تنظيف الملفات المؤقتة', schedule: 'أسبوعياً يوم الأحد', status: 'active', lastRun: '2024-01-01 03:00', nextRun: '2024-01-08 03:00' },
          { name: 'إرسال تقارير الأداء', schedule: 'شهرياً في اليوم الأول', status: 'paused', lastRun: '2024-01-01 08:00', nextRun: '2024-02-01 08:00' }
        ].map((job, index) => (
          <div key={index} className="bg-white rounded-xl shadow-md p-6 border border-gray-100">
            <div className="flex items-start justify-between mb-4">
              <div className="flex items-center gap-3">
                <div className="bg-blue-100 p-3 rounded-lg">
                  <Clock className="h-6 w-6 text-blue-600" />
                </div>
                <div>
                  <h3 className="font-bold text-gray-900">{job.name}</h3>
                  <p className="text-sm text-gray-600">{job.schedule}</p>
                </div>
              </div>
              <div className="flex gap-2">
                {job.status === 'active' ? (
                  <button className="p-2 text-orange-600 hover:bg-orange-50 rounded-lg">
                    <Pause className="h-4 w-4" />
                  </button>
                ) : (
                  <button className="p-2 text-green-600 hover:bg-green-50 rounded-lg">
                    <Play className="h-4 w-4" />
                  </button>
                )}
                <button className="p-2 text-blue-600 hover:bg-blue-50 rounded-lg">
                  <Settings className="h-4 w-4" />
                </button>
              </div>
            </div>

            <div className="grid grid-cols-2 gap-4">
              <div className="p-3 bg-gray-50 rounded-lg">
                <p className="text-xs text-gray-600 mb-1">آخر تشغيل</p>
                <p className="text-sm font-semibold text-gray-900">{job.lastRun}</p>
              </div>
              <div className="p-3 bg-gray-50 rounded-lg">
                <p className="text-xs text-gray-600 mb-1">التشغيل القادم</p>
                <p className="text-sm font-semibold text-gray-900">{job.nextRun}</p>
              </div>
            </div>

            <div className="mt-4">
              {job.status === 'active' ? (
                <span className="inline-flex items-center gap-1 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"></div>
                  نشط
                </span>
              ) : (
                <span className="inline-flex items-center gap-1 px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm font-medium">
                  <div className="w-2 h-2 bg-gray-500 rounded-full"></div>
                  متوقف
                </span>
              )}
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}

