'use client'

import { Settings, Save, Building2, Globe, Shield, Bell, Palette, FileText } from 'lucide-react'

export default function SystemSettings() {
  const settingsSections = [
    {
      id: 'general',
      title: 'إعدادات عامة',
      icon: Settings,
      settings: [
        { label: 'اسم النظام', type: 'text', value: 'Z.CRM', key: 'system_name' },
        { label: 'اسم الشركة', type: 'text', value: 'شركتي', key: 'company_name' },
        { label: 'اللغة الافتراضية', type: 'select', value: 'ar', options: [{ value: 'ar', label: 'العربية' }, { value: 'en', label: 'English' }], key: 'default_language' },
        { label: 'المنطقة الزمنية', type: 'select', value: 'Asia/Riyadh', options: [{ value: 'Asia/Riyadh', label: 'الرياض (GMT+3)' }, { value: 'Asia/Dubai', label: 'دبي (GMT+4)' }], key: 'timezone' },
        { label: 'تنسيق التاريخ', type: 'select', value: 'DD/MM/YYYY', options: [{ value: 'DD/MM/YYYY', label: 'DD/MM/YYYY' }, { value: 'MM/DD/YYYY', label: 'MM/DD/YYYY' }], key: 'date_format' }
      ]
    },
    {
      id: 'security',
      title: 'إعدادات الأمان',
      icon: Shield,
      settings: [
        { label: 'الحد الأدنى لطول كلمة المرور', type: 'number', value: '8', key: 'min_password_length' },
        { label: 'مدة الجلسة (دقيقة)', type: 'number', value: '60', key: 'session_timeout' },
        { label: 'عدد محاولات تسجيل الدخول الفاشلة', type: 'number', value: '5', key: 'max_login_attempts' },
        { label: 'مدة قفل الحساب (دقيقة)', type: 'number', value: '30', key: 'account_lockout_duration' },
        { label: 'تفعيل المصادقة الثنائية', type: 'checkbox', value: false, key: 'enable_2fa' },
        { label: 'إجبار تغيير كلمة المرور كل (يوم)', type: 'number', value: '90', key: 'password_expiry_days' }
      ]
    },
    {
      id: 'notifications',
      title: 'إعدادات الإشعارات',
      icon: Bell,
      settings: [
        { label: 'تفعيل إشعارات البريد', type: 'checkbox', value: true, key: 'enable_email_notifications' },
        { label: 'تفعيل إشعارات النظام', type: 'checkbox', value: true, key: 'enable_system_notifications' },
        { label: 'إشعارات النسخ الاحتياطي', type: 'checkbox', value: true, key: 'backup_notifications' },
        { label: 'إشعارات الأخطاء', type: 'checkbox', value: true, key: 'error_notifications' },
        { label: 'البريد الإلكتروني للمدير', type: 'email', value: 'admin@example.com', key: 'admin_email' }
      ]
    },
    {
      id: 'appearance',
      title: 'المظهر والواجهة',
      icon: Palette,
      settings: [
        { label: 'الوضع الليلي', type: 'checkbox', value: false, key: 'dark_mode' },
        { label: 'اللون الأساسي', type: 'color', value: '#0ea5e9', key: 'primary_color' },
        { label: 'خط العناوين', type: 'text', value: 'Cairo', key: 'heading_font' },
        { label: 'خط المحتوى', type: 'text', value: 'Readex Pro', key: 'body_font' }
      ]
    },
    {
      id: 'files',
      title: 'إعدادات الملفات',
      icon: FileText,
      settings: [
        { label: 'الحد الأقصى لحجم الملف (MB)', type: 'number', value: '10', key: 'max_file_size' },
        { label: 'أنواع الملفات المسموح بها', type: 'text', value: 'pdf,doc,docx,xls,xlsx,jpg,png', key: 'allowed_file_types' },
        { label: 'مسار التخزين', type: 'text', value: '/uploads', key: 'storage_path' }
      ]
    }
  ]

  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-6">
        {settingsSections.map((section) => {
          const Icon = section.icon
          return (
            <div key={section.id} className="bg-white rounded-xl shadow-md border border-gray-100 overflow-hidden">
              <div className="p-6 border-b border-gray-200 bg-gradient-to-r from-gray-50 to-white">
                <h2 className="text-xl font-bold text-gray-900 flex items-center gap-3">
                  <div className="bg-blue-100 p-2 rounded-lg">
                    <Icon className="h-6 w-6 text-blue-600" />
                  </div>
                  {section.title}
                </h2>
              </div>

              <div className="p-6 space-y-4">
                {section.settings.map((setting) => (
                  <div key={setting.key} className="grid grid-cols-1 md:grid-cols-3 gap-4 items-center py-3 border-b border-gray-100 last:border-0">
                    <label className="font-semibold text-gray-900">{setting.label}</label>
                    
                    <div className="md:col-span-2">
                      {setting.type === 'text' && (
                        <input
                          type="text"
                          defaultValue={setting.value as string}
                          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        />
                      )}
                      
                      {setting.type === 'email' && (
                        <input
                          type="email"
                          defaultValue={setting.value as string}
                          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        />
                      )}
                      
                      {setting.type === 'number' && (
                        <input
                          type="number"
                          defaultValue={setting.value as string}
                          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        />
                      )}
                      
                      {setting.type === 'select' && 'options' in setting && setting.options && (
                        <select
                          defaultValue={setting.value as string}
                          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        >
                          {setting.options.map((option) => (
                            <option key={option.value} value={option.value}>
                              {option.label}
                            </option>
                          ))}
                        </select>
                      )}
                      
                      {setting.type === 'checkbox' && (
                        <label className="flex items-center gap-2 cursor-pointer">
                          <input
                            type="checkbox"
                            defaultChecked={setting.value as boolean}
                            className="w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
                          />
                          <span className="text-sm text-gray-600">تفعيل</span>
                        </label>
                      )}
                      
                      {setting.type === 'color' && (
                        <div className="flex items-center gap-3">
                          <input
                            type="color"
                            defaultValue={setting.value as string}
                            className="w-16 h-10 border border-gray-300 rounded cursor-pointer"
                          />
                          <input
                            type="text"
                            defaultValue={setting.value as string}
                            className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                          />
                        </div>
                      )}
                    </div>
                  </div>
                ))}
              </div>

              <div className="p-6 border-t border-gray-200 bg-gray-50">
                <button className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-semibold flex items-center gap-2">
                  <Save className="h-5 w-5" />
                  حفظ التغييرات
                </button>
              </div>
            </div>
          )
        })}
      </div>
    </div>
  )
}

