'use client';

import { useState } from 'react';
import AdminShell from '../components/AdminShell';

const initialUsers = [
  { id: 'U-001', name: 'سارة المطيري', phone: '0501234567', email: 'sara@example.com', city: 'الرياض', company: 'شركة النقل الذهبي', plan: 'شهري', status: 'نشط', statusColor: '#059669', statusBg: '#DCFCE7', joinDate: '1 مارس 2026', trips: 48, avatar: 'https://readdy.ai/api/search-image?query=young%20Saudi%20female%20student%20portrait%20smiling%20white%20background%20realistic%20photo%20high%20quality%20close%20up%20face%20natural%20lighting%20hijab&width=80&height=80&seq=usr-01&orientation=squarish' },
  { id: 'U-002', name: 'نورة العتيبي', phone: '0509876543', email: 'noura@example.com', city: 'جدة', company: 'مجموعة الفجر للنقل', plan: 'فصلي', status: 'نشط', statusColor: '#059669', statusBg: '#DCFCE7', joinDate: '15 فبراير 2026', trips: 62, avatar: 'https://readdy.ai/api/search-image?query=young%20Saudi%20female%20student%20portrait%20smiling%20white%20background%20realistic%20photo%20high%20quality%20close%20up%20face%20natural%20lighting%20hijab%20blue&width=80&height=80&seq=usr-02&orientation=squarish' },
  { id: 'U-003', name: 'ريم الشمري', phone: '0551122334', email: 'reem@example.com', city: 'الدمام', company: 'شركة الأمانة للنقل', plan: 'شهري', status: 'نشط', statusColor: '#059669', statusBg: '#DCFCE7', joinDate: '5 مارس 2026', trips: 31, avatar: 'https://readdy.ai/api/search-image?query=young%20Saudi%20female%20student%20portrait%20smiling%20white%20background%20realistic%20photo%20high%20quality%20close%20up%20face%20natural%20lighting%20hijab%20green&width=80&height=80&seq=usr-03&orientation=squarish' },
  { id: 'U-004', name: 'هند القحطاني', phone: '0566778899', email: 'hind@example.com', city: 'مكة', company: 'نقل الخليج المتحدة', plan: 'شهري', status: 'منتهي', statusColor: '#EF4444', statusBg: '#FEE2E2', joinDate: '1 يناير 2026', trips: 90, avatar: 'https://readdy.ai/api/search-image?query=young%20Saudi%20female%20student%20portrait%20smiling%20white%20background%20realistic%20photo%20high%20quality%20close%20up%20face%20natural%20lighting%20hijab%20pink&width=80&height=80&seq=usr-04&orientation=squarish' },
  { id: 'U-005', name: 'لمى الدوسري', phone: '0544332211', email: 'lama@example.com', city: 'الرياض', company: 'شركة النقل الذهبي', plan: 'سنوي', status: 'نشط', statusColor: '#059669', statusBg: '#DCFCE7', joinDate: '1 يناير 2026', trips: 115, avatar: 'https://readdy.ai/api/search-image?query=young%20Saudi%20female%20student%20portrait%20smiling%20white%20background%20realistic%20photo%20high%20quality%20close%20up%20face%20natural%20lighting%20hijab%20yellow&width=80&height=80&seq=usr-05&orientation=squarish' },
  { id: 'U-006', name: 'منى الزهراني', phone: '0533445566', email: 'mona@example.com', city: 'جدة', company: 'مجموعة الفجر للنقل', plan: 'شهري', status: 'نشط', statusColor: '#059669', statusBg: '#DCFCE7', joinDate: '10 مارس 2026', trips: 22, avatar: 'https://readdy.ai/api/search-image?query=young%20Saudi%20female%20student%20portrait%20smiling%20white%20background%20realistic%20photo%20high%20quality%20close%20up%20face%20natural%20lighting%20hijab%20purple&width=80&height=80&seq=usr-06&orientation=squarish' },
  { id: 'U-007', name: 'دانة الحربي', phone: '0522334455', email: 'dana@example.com', city: 'الرياض', company: 'شركة النقل الذهبي', plan: 'شهري', status: 'معلق', statusColor: '#D97706', statusBg: '#FEF3C7', joinDate: '20 فبراير 2026', trips: 14, avatar: 'https://readdy.ai/api/search-image?query=young%20Saudi%20female%20student%20portrait%20smiling%20white%20background%20realistic%20photo%20high%20quality%20close%20up%20face%20natural%20lighting%20hijab%20orange&width=80&height=80&seq=usr-07&orientation=squarish' },
  { id: 'U-008', name: 'غدير العمري', phone: '0511223344', email: 'ghadir@example.com', city: 'المدينة', company: 'شركة الرواد للتنقل', plan: 'سنوي', status: 'نشط', statusColor: '#059669', statusBg: '#DCFCE7', joinDate: '1 يناير 2026', trips: 130, avatar: 'https://readdy.ai/api/search-image?query=young%20Saudi%20female%20student%20portrait%20smiling%20white%20background%20realistic%20photo%20high%20quality%20close%20up%20face%20natural%20lighting%20hijab%20red&width=80&height=80&seq=usr-08&orientation=squarish' },
];

const emptyForm = { name: '', phone: '', email: '', city: '', company: '', plan: 'شهري', status: 'نشط' };

const statusMap: Record<string, { color: string; bg: string }> = {
  'نشط': { color: '#059669', bg: '#DCFCE7' },
  'منتهي': { color: '#EF4444', bg: '#FEE2E2' },
  'معلق': { color: '#D97706', bg: '#FEF3C7' },
};

export default function AdminUsersPage() {
  const [users, setUsers] = useState(initialUsers);
  const [search, setSearch] = useState('');
  const [statusFilter, setStatusFilter] = useState('الكل');
  const [selected, setSelected] = useState<typeof initialUsers[0] | null>(null);
  const [showAdd, setShowAdd] = useState(false);
  const [form, setForm] = useState(emptyForm);
  const [success, setSuccess] = useState(false);

  const filtered = users.filter(u => {
    const matchSearch = u.name.includes(search) || u.phone.includes(search) || u.email.includes(search);
    const matchStatus = statusFilter === 'الكل' || u.status === statusFilter;
    return matchSearch && matchStatus;
  });

  function handleAdd() {
    if (!form.name || !form.phone || !form.email || !form.city) return;
    const newId = `U-${String(users.length + 1).padStart(3, '0')}`;
    const sc = statusMap[form.status] || statusMap['نشط'];
    setUsers(prev => [...prev, {
      id: newId,
      name: form.name,
      phone: form.phone,
      email: form.email,
      city: form.city,
      company: form.company || '—',
      plan: form.plan,
      status: form.status,
      statusColor: sc.color,
      statusBg: sc.bg,
      joinDate: new Date().toLocaleDateString('ar-SA'),
      trips: 0,
      avatar: 'https://readdy.ai/api/search-image?query=young%20Saudi%20female%20student%20portrait%20smiling%20white%20background%20realistic%20photo%20high%20quality%20close%20up%20face%20natural%20lighting%20hijab%20new%20user&width=80&height=80&seq=usr-new-' + newId + '&orientation=squarish',
    }]);
    setSuccess(true);
    setTimeout(() => { setSuccess(false); setShowAdd(false); setForm(emptyForm); }, 1500);
  }

  return (
    <AdminShell title="إدارة المستخدمين" subtitle={`${users.length} مستخدم مسجل`}>
      {/* Summary */}
      <div className="grid grid-cols-4 gap-4 mb-6">
        {[
          { label: 'إجمالي المستخدمين', value: users.length, icon: 'ri-group-fill', color: '#7C3AED', bg: '#EDE9FE' },
          { label: 'نشطون', value: users.filter(u => u.status === 'نشط').length, icon: 'ri-checkbox-circle-fill', color: '#059669', bg: '#DCFCE7' },
          { label: 'منتهية اشتراكاتهم', value: users.filter(u => u.status === 'منتهي').length, icon: 'ri-time-fill', color: '#EF4444', bg: '#FEE2E2' },
          { label: 'معلقون', value: users.filter(u => u.status === 'معلق').length, icon: 'ri-pause-circle-fill', color: '#D97706', bg: '#FEF3C7' },
        ].map((s, i) => (
          <div key={i} className="bg-white rounded-2xl p-4 flex items-center gap-3" style={{ border: '1px solid #E2E8F0', boxShadow: '0 1px 4px rgba(0,0,0,0.04)' }}>
            <div className="w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0" style={{ background: s.bg }}>
              <i className={`${s.icon} text-xl`} style={{ color: s.color }}></i>
            </div>
            <div>
              <p className="text-2xl font-black text-slate-900" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{s.value}</p>
              <p className="text-xs text-slate-500" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{s.label}</p>
            </div>
          </div>
        ))}
      </div>

      {/* Toolbar */}
      <div className="flex items-center justify-between mb-5">
        <div className="flex items-center gap-3 flex-wrap">
          <div className="relative">
            <input type="text" placeholder="بحث بالاسم أو الجوال أو البريد..." value={search} onChange={e => setSearch(e.target.value)}
              className="h-10 bg-white border border-slate-200 rounded-xl pr-10 pl-4 text-sm outline-none text-slate-700"
              style={{ width: '280px', fontFamily: '"IBM Plex Sans Arabic", sans-serif' }} />
            <div className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 flex items-center justify-center">
              <i className="ri-search-line text-slate-400 text-sm"></i>
            </div>
          </div>
          {['الكل', 'نشط', 'منتهي', 'معلق'].map(s => (
            <button key={s} onClick={() => setStatusFilter(s)}
              className="px-4 py-2 rounded-xl text-sm font-bold cursor-pointer transition-all whitespace-nowrap"
              style={{ background: statusFilter === s ? '#1E3A8A' : 'white', color: statusFilter === s ? 'white' : '#64748b', border: `1px solid ${statusFilter === s ? '#1E3A8A' : '#E2E8F0'}`, fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>
              {s}
            </button>
          ))}
        </div>
        <div className="flex items-center gap-2">
          <button className="flex items-center gap-2 px-4 py-2.5 rounded-xl font-bold text-sm cursor-pointer whitespace-nowrap"
            style={{ background: '#F1F5F9', color: '#475569', fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>
            <i className="ri-download-2-line text-base"></i>
            تصدير
          </button>
          <button onClick={() => setShowAdd(true)} className="flex items-center gap-2 px-4 py-2.5 rounded-xl font-bold text-sm cursor-pointer whitespace-nowrap"
            style={{ background: '#1E3A8A', color: 'white', fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>
            <i className="ri-add-line text-base"></i>
            إضافة مستخدم
          </button>
        </div>
      </div>

      {/* Table */}
      <div className="bg-white rounded-2xl overflow-hidden" style={{ border: '1px solid #E2E8F0', boxShadow: '0 1px 4px rgba(0,0,0,0.04)' }}>
        <table className="w-full">
          <thead>
            <tr style={{ background: '#F8FAFC' }}>
              {['المستخدم', 'الجوال', 'المدينة', 'الشركة', 'الخطة', 'الرحلات', 'تاريخ التسجيل', 'الحالة', ''].map(h => (
                <th key={h} className="text-right px-5 py-3 text-xs font-bold text-slate-500 whitespace-nowrap" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {filtered.map((u, i) => (
              <tr key={i} className="border-t hover:bg-slate-50 transition-colors cursor-pointer" style={{ borderColor: '#F8FAFC' }} onClick={() => setSelected(u)}>
                <td className="px-5 py-3.5">
                  <div className="flex items-center gap-3">
                    <div className="w-9 h-9 rounded-xl overflow-hidden flex-shrink-0">
                      <img src={u.avatar} alt={u.name} className="w-full h-full object-cover object-top" />
                    </div>
                    <div>
                      <p className="text-sm font-bold text-slate-800 whitespace-nowrap" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{u.name}</p>
                      <p className="text-xs text-slate-400" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{u.id}</p>
                    </div>
                  </div>
                </td>
                <td className="px-5 py-3.5"><span className="text-xs font-mono text-slate-600">{u.phone}</span></td>
                <td className="px-5 py-3.5"><span className="text-xs text-slate-600 whitespace-nowrap" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{u.city}</span></td>
                <td className="px-5 py-3.5"><span className="text-xs text-slate-500 whitespace-nowrap" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{u.company}</span></td>
                <td className="px-5 py-3.5">
                  <span className="px-2.5 py-1 rounded-full text-xs font-bold whitespace-nowrap" style={{ background: '#F1F5F9', color: '#475569', fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{u.plan}</span>
                </td>
                <td className="px-5 py-3.5"><span className="text-xs font-bold text-slate-700" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{u.trips}</span></td>
                <td className="px-5 py-3.5"><span className="text-xs text-slate-500 whitespace-nowrap" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{u.joinDate}</span></td>
                <td className="px-5 py-3.5">
                  <span className="px-2.5 py-1 rounded-full text-xs font-bold whitespace-nowrap" style={{ background: u.statusBg, color: u.statusColor, fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{u.status}</span>
                </td>
                <td className="px-5 py-3.5" onClick={e => e.stopPropagation()}>
                  <div className="flex items-center gap-1">
                    <button className="w-7 h-7 rounded-lg flex items-center justify-center cursor-pointer hover:bg-slate-100"><i className="ri-edit-line text-slate-500 text-sm"></i></button>
                    <button className="w-7 h-7 rounded-lg flex items-center justify-center cursor-pointer hover:bg-red-50"><i className="ri-delete-bin-line text-red-400 text-sm"></i></button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* Add User Modal */}
      {showAdd && (
        <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-6" onClick={() => setShowAdd(false)}>
          <div className="bg-white rounded-3xl p-7 w-full max-w-lg shadow-2xl" onClick={e => e.stopPropagation()}>
            <div className="flex items-center justify-between mb-6">
              <div>
                <h2 className="text-lg font-black text-slate-900" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>إضافة مستخدم جديد</h2>
                <p className="text-xs text-slate-400 mt-0.5" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>أدخل بيانات المستخدم لإضافته للمنصة</p>
              </div>
              <button onClick={() => setShowAdd(false)} className="w-9 h-9 bg-slate-100 rounded-xl flex items-center justify-center cursor-pointer">
                <i className="ri-close-line text-slate-500 text-lg"></i>
              </button>
            </div>

            {success ? (
              <div className="flex flex-col items-center justify-center py-10 gap-3">
                <div className="w-16 h-16 rounded-full flex items-center justify-center" style={{ background: '#DCFCE7' }}>
                  <i className="ri-checkbox-circle-fill text-3xl" style={{ color: '#059669' }}></i>
                </div>
                <p className="text-base font-black text-slate-800" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>تمت الإضافة بنجاح!</p>
              </div>
            ) : (
              <>
                <div className="grid grid-cols-2 gap-4 mb-4">
                  <div className="col-span-2">
                    <label className="block text-xs font-bold text-slate-600 mb-1.5" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>الاسم الكامل *</label>
                    <input value={form.name} onChange={e => setForm(f => ({ ...f, name: e.target.value }))}
                      placeholder="مثال: سارة المطيري"
                      className="w-full h-10 border border-slate-200 rounded-xl px-4 text-sm outline-none text-slate-700 focus:border-blue-400"
                      style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }} />
                  </div>
                  <div>
                    <label className="block text-xs font-bold text-slate-600 mb-1.5" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>رقم الجوال *</label>
                    <input value={form.phone} onChange={e => setForm(f => ({ ...f, phone: e.target.value }))}
                      placeholder="05xxxxxxxx"
                      className="w-full h-10 border border-slate-200 rounded-xl px-4 text-sm outline-none text-slate-700 focus:border-blue-400"
                      style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }} />
                  </div>
                  <div>
                    <label className="block text-xs font-bold text-slate-600 mb-1.5" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>البريد الإلكتروني *</label>
                    <input value={form.email} onChange={e => setForm(f => ({ ...f, email: e.target.value }))}
                      placeholder="example@email.com"
                      className="w-full h-10 border border-slate-200 rounded-xl px-4 text-sm outline-none text-slate-700 focus:border-blue-400"
                      style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }} />
                  </div>
                  <div>
                    <label className="block text-xs font-bold text-slate-600 mb-1.5" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>المدينة *</label>
                    <input value={form.city} onChange={e => setForm(f => ({ ...f, city: e.target.value }))}
                      placeholder="مثال: الرياض"
                      className="w-full h-10 border border-slate-200 rounded-xl px-4 text-sm outline-none text-slate-700 focus:border-blue-400"
                      style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }} />
                  </div>
                  <div>
                    <label className="block text-xs font-bold text-slate-600 mb-1.5" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>الشركة</label>
                    <input value={form.company} onChange={e => setForm(f => ({ ...f, company: e.target.value }))}
                      placeholder="اسم الشركة"
                      className="w-full h-10 border border-slate-200 rounded-xl px-4 text-sm outline-none text-slate-700 focus:border-blue-400"
                      style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }} />
                  </div>
                  <div>
                    <label className="block text-xs font-bold text-slate-600 mb-1.5" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>خطة الاشتراك</label>
                    <div className="flex gap-2">
                      {['شهري', 'فصلي', 'سنوي'].map(p => (
                        <button key={p} onClick={() => setForm(f => ({ ...f, plan: p }))}
                          className="flex-1 h-10 rounded-xl text-xs font-bold cursor-pointer transition-all whitespace-nowrap"
                          style={{ background: form.plan === p ? '#7C3AED' : '#F8FAFC', color: form.plan === p ? 'white' : '#64748b', border: `1px solid ${form.plan === p ? '#7C3AED' : '#E2E8F0'}`, fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>
                          {p}
                        </button>
                      ))}
                    </div>
                  </div>
                  <div className="col-span-2">
                    <label className="block text-xs font-bold text-slate-600 mb-1.5" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>الحالة</label>
                    <div className="flex gap-2">
                      {['نشط', 'معلق', 'منتهي'].map(s => (
                        <button key={s} onClick={() => setForm(f => ({ ...f, status: s }))}
                          className="flex-1 h-10 rounded-xl text-sm font-bold cursor-pointer transition-all whitespace-nowrap"
                          style={{ background: form.status === s ? '#1E3A8A' : '#F8FAFC', color: form.status === s ? 'white' : '#64748b', border: `1px solid ${form.status === s ? '#1E3A8A' : '#E2E8F0'}`, fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>
                          {s}
                        </button>
                      ))}
                    </div>
                  </div>
                </div>
                <div className="flex gap-3 mt-2">
                  <button onClick={() => setShowAdd(false)} className="flex-1 h-11 bg-slate-100 rounded-xl font-bold text-sm text-slate-600 cursor-pointer whitespace-nowrap" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>إلغاء</button>
                  <button onClick={handleAdd}
                    disabled={!form.name || !form.phone || !form.email || !form.city}
                    className="flex-1 h-11 rounded-xl font-bold text-sm text-white cursor-pointer whitespace-nowrap disabled:opacity-50"
                    style={{ background: '#1E3A8A', fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>
                    <i className="ri-add-line ml-1"></i>إضافة المستخدم
                  </button>
                </div>
              </>
            )}
          </div>
        </div>
      )}

      {/* Detail Modal */}
      {selected && (
        <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-6" onClick={() => setSelected(null)}>
          <div className="bg-white rounded-3xl p-7 w-full max-w-md shadow-2xl" onClick={e => e.stopPropagation()}>
            <div className="flex items-center justify-between mb-5">
              <h2 className="text-lg font-black text-slate-900" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>بيانات المستخدم</h2>
              <button onClick={() => setSelected(null)} className="w-9 h-9 bg-slate-100 rounded-xl flex items-center justify-center cursor-pointer">
                <i className="ri-close-line text-slate-500 text-lg"></i>
              </button>
            </div>
            <div className="flex items-center gap-4 mb-5 p-4 rounded-2xl" style={{ background: '#F8FAFC' }}>
              <div className="w-16 h-16 rounded-2xl overflow-hidden flex-shrink-0">
                <img src={selected.avatar} alt={selected.name} className="w-full h-full object-cover object-top" />
              </div>
              <div>
                <p className="text-lg font-black text-slate-900" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{selected.name}</p>
                <p className="text-sm text-slate-400" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{selected.id}</p>
                <span className="inline-block mt-1 px-2.5 py-0.5 rounded-full text-xs font-bold" style={{ background: selected.statusBg, color: selected.statusColor, fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{selected.status}</span>
              </div>
            </div>
            <div className="space-y-3">
              {[
                { icon: 'ri-phone-line', label: 'الجوال', val: selected.phone },
                { icon: 'ri-mail-line', label: 'البريد', val: selected.email },
                { icon: 'ri-map-pin-line', label: 'المدينة', val: selected.city },
                { icon: 'ri-building-2-line', label: 'الشركة', val: selected.company },
                { icon: 'ri-vip-crown-line', label: 'الخطة', val: selected.plan },
                { icon: 'ri-route-line', label: 'الرحلات', val: `${selected.trips} رحلة` },
                { icon: 'ri-calendar-line', label: 'تاريخ التسجيل', val: selected.joinDate },
              ].map((row, i) => (
                <div key={i} className="flex items-center gap-3">
                  <div className="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0" style={{ background: '#EFF6FF' }}>
                    <i className={`${row.icon} text-sm`} style={{ color: '#3B82F6' }}></i>
                  </div>
                  <div>
                    <p className="text-[10px] text-slate-400" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{row.label}</p>
                    <p className="text-sm text-slate-700 font-semibold" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{row.val}</p>
                  </div>
                </div>
              ))}
            </div>
            <div className="flex gap-3 mt-6">
              <button className="flex-1 h-10 bg-slate-100 rounded-xl font-bold text-sm text-slate-600 cursor-pointer whitespace-nowrap" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }} onClick={() => setSelected(null)}>إغلاق</button>
              <button className="flex-1 h-10 rounded-xl font-bold text-sm text-white cursor-pointer whitespace-nowrap" style={{ background: '#1E3A8A', fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>تعديل البيانات</button>
            </div>
          </div>
        </div>
      )}
    </AdminShell>
  );
}