'use client'

import { Mail, Send, Save, TestTube } from 'lucide-react'

export default function EmailSettings() {
  return (
    <div>
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-gray-900 mb-2">إعدادات البريد الإلكتروني</h1>
        <p className="text-gray-600">تكوين خادم SMTP وإعدادات البريد</p>
      </div>

      <div 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-blue-50 to-white">
          <h2 className="text-xl font-bold text-gray-900 flex items-center gap-3">
            <Mail className="h-6 w-6 text-blue-600" />
            إعدادات SMTP
          </h2>
        </div>

        <div className="p-6 space-y-6">
          <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">خادم SMTP</label>
              <input
                type="text"
                placeholder="smtp.gmail.com"
                className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
              />
            </div>

            <div>
              <label className="block text-sm font-semibold text-gray-700 mb-2">المنفذ</label>
              <input
                type="number"
                placeholder="587"
                defaultValue="587"
                className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
              />
            </div>

            <div>
              <label className="block text-sm font-semibold text-gray-700 mb-2">اسم المستخدم</label>
              <input
                type="email"
                placeholder="noreply@example.com"
                className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
              />
            </div>

            <div>
              <label className="block text-sm font-semibold text-gray-700 mb-2">كلمة المرور</label>
              <input
                type="password"
                placeholder="••••••••"
                className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
              />
            </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">
                <option value="tls">TLS</option>
                <option value="ssl">SSL</option>
                <option value="none">بدون تشفير</option>
              </select>
            </div>

            <div>
              <label className="block text-sm font-semibold text-gray-700 mb-2">اسم المرسل</label>
              <input
                type="text"
                placeholder="Z.CRM System"
                defaultValue="Z.CRM System"
                className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
              />
            </div>
          </div>

          <div className="flex items-center gap-2">
            <input
              type="checkbox"
              id="enableEmail"
              defaultChecked
              className="w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
            />
            <label htmlFor="enableEmail" className="text-sm font-medium text-gray-700">
              تفعيل إرسال البريد الإلكتروني
            </label>
          </div>

          <div className="pt-4 flex gap-3">
            <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>
            <button className="px-6 py-3 border-2 border-green-600 text-green-600 rounded-lg hover:bg-green-50 transition-colors font-semibold flex items-center gap-2">
              <TestTube className="h-5 w-5" />
              اختبار الاتصال
            </button>
          </div>
        </div>
      </div>

      <div className="mt-8 bg-white rounded-xl shadow-md p-6 border border-gray-100">
        <h2 className="text-xl font-bold text-gray-900 mb-4">قوالب البريد</h2>
        <div className="space-y-3">
          {[
            { name: 'رسالة الترحيب', desc: 'يتم إرسالها عند إنشاء مستخدم جديد' },
            { name: 'إعادة تعيين كلمة المرور', desc: 'يتم إرسالها عند طلب إعادة التعيين' },
            { name: 'إشعار النسخ الاحتياطي', desc: 'يتم إرسالها بعد كل نسخة احتياطية' }
          ].map((template, index) => (
            <div key={index} className="flex items-center justify-between p-4 border border-gray-200 rounded-lg hover:bg-gray-50">
              <div>
                <h3 className="font-semibold text-gray-900">{template.name}</h3>
                <p className="text-sm text-gray-600">{template.desc}</p>
              </div>
              <button className="px-4 py-2 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors font-medium">
                تعديل
              </button>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

