'use client'

import { useState } from 'react'
import {
  Database,
  Download,
  Upload,
  RefreshCw,
  Calendar,
  Clock,
  HardDrive,
  CheckCircle,
  AlertTriangle,
  Play,
  Settings
} from 'lucide-react'

export default function DatabaseBackup() {
  const [isBackingUp, setIsBackingUp] = useState(false)

  // Mock backup history
  const backups = [
    {
      id: '1',
      filename: 'z_crm_backup_2024-01-06_14-30.sql',
      size: '45.2 MB',
      date: '2024-01-06 14:30:00',
      type: 'auto',
      status: 'success'
    },
    {
      id: '2',
      filename: 'z_crm_backup_2024-01-05_14-30.sql',
      size: '44.8 MB',
      date: '2024-01-05 14:30:00',
      type: 'auto',
      status: 'success'
    },
    {
      id: '3',
      filename: 'z_crm_backup_2024-01-04_10-15.sql',
      size: '43.5 MB',
      date: '2024-01-04 10:15:00',
      type: 'manual',
      status: 'success'
    }
  ]

  const handleBackup = () => {
    setIsBackingUp(true)
    // Simulate backup process
    setTimeout(() => {
      setIsBackingUp(false)
      alert('تم إنشاء النسخة الاحتياطية بنجاح!')
    }, 3000)
  }

  return (
    <div>
      {/* Header */}
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-gray-900 mb-2">النسخ الاحتياطي واستعادة البيانات</h1>
        <p className="text-gray-600">إدارة النسخ الاحتياطية للبيانات واستعادتها</p>
      </div>

      {/* Quick Actions */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <button
          onClick={handleBackup}
          disabled={isBackingUp}
          className="bg-gradient-to-br from-blue-500 to-blue-600 text-white p-6 rounded-xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1 disabled:opacity-50 disabled:cursor-not-allowed"
        >
          {isBackingUp ? (
            <>
              <RefreshCw className="h-8 w-8 mb-3 animate-spin" />
              <h3 className="text-lg font-bold mb-2">جاري النسخ...</h3>
              <p className="text-sm text-blue-100">يرجى الانتظار</p>
            </>
          ) : (
            <>
              <Database className="h-8 w-8 mb-3" />
              <h3 className="text-lg font-bold mb-2">نسخ احتياطي فوري</h3>
              <p className="text-sm text-blue-100">إنشاء نسخة احتياطية الآن</p>
            </>
          )}
        </button>

        <button className="bg-gradient-to-br from-green-500 to-green-600 text-white p-6 rounded-xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1">
          <Upload className="h-8 w-8 mb-3" />
          <h3 className="text-lg font-bold mb-2">استعادة من ملف</h3>
          <p className="text-sm text-green-100">رفع واستعادة نسخة احتياطية</p>
        </button>

        <button className="bg-gradient-to-br from-purple-500 to-purple-600 text-white p-6 rounded-xl shadow-lg hover:shadow-xl transition-all transform hover:-translate-y-1">
          <Settings className="h-8 w-8 mb-3" />
          <h3 className="text-lg font-bold mb-2">إعدادات النسخ</h3>
          <p className="text-sm text-purple-100">جدولة وتكوين</p>
        </button>
      </div>

      {/* Status Cards */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
        {[
          {
            label: 'آخر نسخة احتياطية',
            value: 'منذ ساعتين',
            icon: Clock,
            color: 'bg-blue-500'
          },
          {
            label: 'إجمالي النسخ',
            value: '156',
            icon: Database,
            color: 'bg-green-500'
          },
          {
            label: 'المساحة المستخدمة',
            value: '6.8 GB',
            icon: HardDrive,
            color: 'bg-purple-500'
          },
          {
            label: 'معدل النجاح',
            value: '99.5%',
            icon: CheckCircle,
            color: 'bg-teal-500'
          }
        ].map((stat, index) => {
          const Icon = stat.icon
          return (
            <div key={index} className="bg-white rounded-xl shadow-md p-6 border border-gray-100">
              <div className={`${stat.color} w-12 h-12 rounded-lg flex items-center justify-center mb-3`}>
                <Icon className="h-6 w-6 text-white" />
              </div>
              <h3 className="text-2xl font-bold text-gray-900 mb-1">{stat.value}</h3>
              <p className="text-sm text-gray-600">{stat.label}</p>
            </div>
          )
        })}
      </div>

      {/* Backup Schedule */}
      <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-4 flex items-center gap-2">
          <Calendar className="h-6 w-6 text-blue-500" />
          جدولة النسخ الاحتياطي التلقائي
        </h2>
        
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label className="block text-sm font-semibold text-gray-700 mb-2">تكرار النسخ</label>
            <select className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
              <option value="daily">يومياً</option>
              <option value="weekly">أسبوعياً</option>
              <option value="monthly">شهرياً</option>
            </select>
          </div>

          <div>
            <label className="block text-sm font-semibold text-gray-700 mb-2">وقت التنفيذ</label>
            <input
              type="time"
              defaultValue="02:00"
              className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            />
          </div>

          <div>
            <label className="block text-sm font-semibold text-gray-700 mb-2">الاحتفاظ بالنسخ</label>
            <select className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
              <option value="7">7 أيام</option>
              <option value="14">14 يوم</option>
              <option value="30">30 يوم</option>
              <option value="90">90 يوم</option>
            </select>
          </div>

          <div>
            <label className="block text-sm font-semibold text-gray-700 mb-2">موقع التخزين</label>
            <select className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
              <option value="local">محلي (Local Storage)</option>
              <option value="s3">Amazon S3</option>
              <option value="drive">Google Drive</option>
            </select>
          </div>
        </div>

        <div className="mt-6 flex items-center gap-3">
          <input
            type="checkbox"
            id="autoBackup"
            defaultChecked
            className="w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
          />
          <label htmlFor="autoBackup" className="text-sm font-medium text-gray-700">
            تفعيل النسخ الاحتياطي التلقائي
          </label>
        </div>

        <button className="mt-6 px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-semibold">
          حفظ الإعدادات
        </button>
      </div>

      {/* Backup History */}
      <div className="bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden">
        <div className="p-6 border-b border-gray-200">
          <div className="flex items-center justify-between">
            <h2 className="text-xl font-bold text-gray-900">سجل النسخ الاحتياطية</h2>
            <div className="flex gap-2">
              <button className="px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors">
                تصفية
              </button>
              <button className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors">
                تصدير السجل
              </button>
            </div>
          </div>
        </div>

        <div className="overflow-x-auto">
          <table className="w-full">
            <thead className="bg-gray-50 border-b border-gray-200">
              <tr>
                <th className="px-6 py-4 text-right text-sm font-semibold text-gray-900">اسم الملف</th>
                <th className="px-6 py-4 text-right text-sm font-semibold text-gray-900">الحجم</th>
                <th className="px-6 py-4 text-right text-sm font-semibold text-gray-900">التاريخ</th>
                <th className="px-6 py-4 text-right text-sm font-semibold text-gray-900">النوع</th>
                <th className="px-6 py-4 text-right text-sm font-semibold text-gray-900">الحالة</th>
                <th className="px-6 py-4 text-right text-sm font-semibold text-gray-900">الإجراءات</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-200">
              {backups.map((backup) => (
                <tr key={backup.id} className="hover:bg-gray-50 transition-colors">
                  <td className="px-6 py-4">
                    <div className="flex items-center gap-2">
                      <Database className="h-5 w-5 text-blue-500" />
                      <span className="font-medium text-gray-900 text-sm">{backup.filename}</span>
                    </div>
                  </td>
                  <td className="px-6 py-4">
                    <span className="text-sm text-gray-700">{backup.size}</span>
                  </td>
                  <td className="px-6 py-4">
                    <div className="flex items-center gap-2">
                      <Clock className="h-4 w-4 text-gray-400" />
                      <span className="text-sm text-gray-700">{backup.date}</span>
                    </div>
                  </td>
                  <td className="px-6 py-4">
                    {backup.type === 'auto' ? (
                      <span className="inline-flex items-center gap-1 px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm font-medium">
                        <RefreshCw className="h-3 w-3" />
                        تلقائي
                      </span>
                    ) : (
                      <span className="inline-flex items-center gap-1 px-3 py-1 bg-purple-100 text-purple-800 rounded-full text-sm font-medium">
                        <Play className="h-3 w-3" />
                        يدوي
                      </span>
                    )}
                  </td>
                  <td className="px-6 py-4">
                    {backup.status === 'success' ? (
                      <span className="inline-flex items-center gap-1 px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm font-medium">
                        <CheckCircle className="h-3 w-3" />
                        نجح
                      </span>
                    ) : (
                      <span className="inline-flex items-center gap-1 px-3 py-1 bg-red-100 text-red-800 rounded-full text-sm font-medium">
                        <AlertTriangle className="h-3 w-3" />
                        فشل
                      </span>
                    )}
                  </td>
                  <td className="px-6 py-4">
                    <div className="flex items-center gap-2">
                      <button className="p-2 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors" title="تحميل">
                        <Download className="h-4 w-4" />
                      </button>
                      <button className="p-2 text-green-600 hover:bg-green-50 rounded-lg transition-colors" title="استعادة">
                        <RefreshCw className="h-4 w-4" />
                      </button>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {/* Warning */}
        <div className="p-6 border-t border-gray-200 bg-yellow-50">
          <div className="flex items-start gap-3">
            <AlertTriangle className="h-5 w-5 text-yellow-600 flex-shrink-0 mt-0.5" />
            <div>
              <h4 className="text-sm font-bold text-yellow-900 mb-1">⚠️ تحذير هام</h4>
              <p className="text-sm text-yellow-800">
                استعادة النسخة الاحتياطية ستحل محل جميع البيانات الحالية. تأكد من إنشاء نسخة احتياطية قبل الاستعادة.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

