'use client';

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

const initialCompanies = [
  { id: 'C-001', name: 'شركة النقل الذهبي', owner: 'عبدالله المطيري', city: 'الرياض', phone: '0112345678', email: 'info@golden.sa', buses: 12, drivers: 12, subscribers: 820, revenue: '148,500 ر', status: 'نشطة', statusColor: '#059669', statusBg: '#DCFCE7', joinDate: '15 يناير 2024', img: 'https://readdy.ai/api/search-image?query=professional%20Saudi%20transportation%20company%20logo%20golden%20bus%20fleet%20modern%20clean%20white%20background%20minimal%20design&width=80&height=80&seq=co-01&orientation=squarish' },
  { id: 'C-002', name: 'مجموعة الفجر للنقل', owner: 'محمد الشهري', city: 'جدة', phone: '0122345678', email: 'info@fajr.sa', buses: 8, drivers: 8, subscribers: 540, revenue: '98,200 ر', status: 'نشطة', statusColor: '#059669', statusBg: '#DCFCE7', joinDate: '3 مارس 2024', img: 'https://readdy.ai/api/search-image?query=professional%20Saudi%20transportation%20company%20logo%20dawn%20sunrise%20bus%20fleet%20modern%20clean%20white%20background%20minimal%20design&width=80&height=80&seq=co-02&orientation=squarish' },
  { id: 'C-003', name: 'شركة الأمانة للنقل', owner: 'سعد الدوسري', city: 'الدمام', phone: '0132345678', email: 'info@amanah.sa', buses: 6, drivers: 5, subscribers: 310, revenue: '56,400 ر', status: 'قيد المراجعة', statusColor: '#D97706', statusBg: '#FEF3C7', joinDate: 'منذ يومين', img: 'https://readdy.ai/api/search-image?query=professional%20Saudi%20transportation%20company%20logo%20trust%20amanah%20bus%20fleet%20modern%20clean%20white%20background%20minimal%20design&width=80&height=80&seq=co-03&orientation=squarish' },
  { id: 'C-004', name: 'نقل الخليج المتحدة', owner: 'فيصل العتيبي', city: 'مكة المكرمة', phone: '0252345678', email: 'info@gulf.sa', buses: 15, drivers: 14, subscribers: 1100, revenue: '210,000 ر', status: 'نشطة', statusColor: '#059669', statusBg: '#DCFCE7', joinDate: '20 أغسطس 2023', img: 'https://readdy.ai/api/search-image?query=professional%20Saudi%20transportation%20company%20logo%20gulf%20united%20bus%20fleet%20modern%20clean%20white%20background%20minimal%20design&width=80&height=80&seq=co-04&orientation=squarish' },
  { id: 'C-005', name: 'شركة الرواد للتنقل', owner: 'خالد الزهراني', city: 'المدينة المنورة', phone: '0142345678', email: 'info@rowad.sa', buses: 4, drivers: 3, subscribers: 180, revenue: '32,400 ر', status: 'معلقة', statusColor: '#EF4444', statusBg: '#FEE2E2', joinDate: 'منذ أسبوع', img: 'https://readdy.ai/api/search-image?query=professional%20Saudi%20transportation%20company%20logo%20pioneer%20rowad%20bus%20fleet%20modern%20clean%20white%20background%20minimal%20design&width=80&height=80&seq=co-05&orientation=squarish' },
  { id: 'C-006', name: 'مؤسسة الوطن للنقل', owner: 'عمر الحربي', city: 'الطائف', phone: '0272345678', email: 'info@watan.sa', buses: 9, drivers: 9, subscribers: 620, revenue: '112,000 ر', status: 'نشطة', statusColor: '#059669', statusBg: '#DCFCE7', joinDate: '10 مايو 2024', img: 'https://readdy.ai/api/search-image?query=professional%20Saudi%20transportation%20company%20logo%20watan%20homeland%20bus%20fleet%20modern%20clean%20white%20background%20minimal%20design&width=80&height=80&seq=co-06&orientation=squarish' },
  { id: 'C-007', name: 'شركة الريادة للنقل', owner: 'أحمد القحطاني', city: 'أبها', phone: '0172345678', email: 'info@riadah.sa', buses: 5, drivers: 5, subscribers: 290, revenue: '52,200 ر', status: 'نشطة', statusColor: '#059669', statusBg: '#DCFCE7', joinDate: '1 يوليو 2024', img: 'https://readdy.ai/api/search-image?query=professional%20Saudi%20transportation%20company%20logo%20leadership%20bus%20fleet%20modern%20clean%20white%20background%20minimal%20design&width=80&height=80&seq=co-07&orientation=squarish' },
];

const emptyForm = { name: '', owner: '', city: '', phone: '', email: '', buses: '', drivers: '', status: 'نشطة' };

export default function AdminCompaniesPage() {
  const [companies, setCompanies] = useState(initialCompanies);
  const [search, setSearch] = useState('');
  const [statusFilter, setStatusFilter] = useState('الكل');
  const [selected, setSelected] = useState<typeof initialCompanies[0] | null>(null);
  const [viewMode, setViewMode] = useState<'table' | 'grid'>('table');
  const [showAdd, setShowAdd] = useState(false);
  const [form, setForm] = useState(emptyForm);
  const [success, setSuccess] = useState(false);

  const filtered = companies.filter(c => {
    const matchSearch = c.name.includes(search) || c.city.includes(search) || c.owner.includes(search);
    const matchStatus = statusFilter === 'الكل' || c.status === statusFilter;
    return matchSearch && matchStatus;
  });

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

  function handleAdd() {
    if (!form.name || !form.owner || !form.city || !form.phone || !form.email) return;
    const newId = `C-${String(companies.length + 1).padStart(3, '0')}`;
    const sc = statusMap[form.status] || statusMap['نشطة'];
    setCompanies(prev => [...prev, {
      id: newId,
      name: form.name,
      owner: form.owner,
      city: form.city,
      phone: form.phone,
      email: form.email,
      buses: Number(form.buses) || 0,
      drivers: Number(form.drivers) || 0,
      subscribers: 0,
      revenue: '0 ر',
      status: form.status,
      statusColor: sc.color,
      statusBg: sc.bg,
      joinDate: new Date().toLocaleDateString('ar-SA'),
      img: 'https://readdy.ai/api/search-image?query=professional%20Saudi%20transportation%20company%20logo%20bus%20fleet%20modern%20clean%20white%20background%20minimal%20design%20new&width=80&height=80&seq=co-new-' + newId + '&orientation=squarish',
    }]);
    setSuccess(true);
    setTimeout(() => { setSuccess(false); setShowAdd(false); setForm(emptyForm); }, 1500);
  }

  return (
    <AdminShell title="إدارة الشركات" subtitle={`${companies.length} شركة مسجلة في المنصة`}>
      {/* Summary */}
      <div className="grid grid-cols-4 gap-4 mb-6">
        {[
          { label: 'إجمالي الشركات', value: companies.length, icon: 'ri-building-2-fill', color: '#3B82F6', bg: '#EFF6FF' },
          { label: 'شركات نشطة', value: companies.filter(c => c.status === 'نشطة').length, icon: 'ri-checkbox-circle-fill', color: '#059669', bg: '#DCFCE7' },
          { label: 'قيد المراجعة', value: companies.filter(c => c.status === 'قيد المراجعة').length, icon: 'ri-time-fill', color: '#D97706', bg: '#FEF3C7' },
          { label: 'معلقة', value: companies.filter(c => c.status === 'معلقة').length, icon: 'ri-close-circle-fill', color: '#EF4444', bg: '#FEE2E2' },
        ].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 onClick={() => setViewMode(viewMode === 'table' ? 'grid' : 'table')} className="w-10 h-10 bg-white border border-slate-200 rounded-xl flex items-center justify-center cursor-pointer">
            <i className={`${viewMode === 'table' ? 'ri-grid-fill' : 'ri-list-check'} text-slate-500 text-lg`}></i>
          </button>
          <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 */}
      {viewMode === '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((c, i) => (
                <tr key={i} className="border-t hover:bg-slate-50 transition-colors cursor-pointer" style={{ borderColor: '#F8FAFC' }} onClick={() => setSelected(c)}>
                  <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={c.img} alt={c.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' }}>{c.name}</p>
                        <p className="text-xs text-slate-400" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{c.id}</p>
                      </div>
                    </div>
                  </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' }}>{c.owner}</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' }}>{c.city}</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' }}>{c.buses}</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' }}>{c.drivers}</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' }}>{c.subscribers}</span></td>
                  <td className="px-5 py-3.5"><span className="text-xs font-bold" style={{ color: '#059669', fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{c.revenue}</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: c.statusBg, color: c.statusColor, fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{c.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-eye-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>
      ) : (
        <div className="grid grid-cols-3 gap-5">
          {filtered.map((c, i) => (
            <div key={i} className="bg-white rounded-2xl p-5 cursor-pointer hover:shadow-md transition-all" style={{ border: '1px solid #E2E8F0' }} onClick={() => setSelected(c)}>
              <div className="flex items-center gap-3 mb-4">
                <div className="w-12 h-12 rounded-xl overflow-hidden flex-shrink-0">
                  <img src={c.img} alt={c.name} className="w-full h-full object-cover object-top" />
                </div>
                <div className="flex-1 min-w-0">
                  <p className="font-black text-slate-900 text-sm truncate" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{c.name}</p>
                  <p className="text-xs text-slate-400" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{c.city}</p>
                </div>
                <span className="px-2 py-0.5 rounded-full text-xs font-bold whitespace-nowrap" style={{ background: c.statusBg, color: c.statusColor, fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{c.status}</span>
              </div>
              <div className="grid grid-cols-3 gap-2">
                {[
                  { label: 'باصات', value: c.buses, icon: 'ri-bus-2-fill', color: '#3B82F6' },
                  { label: 'سائقون', value: c.drivers, icon: 'ri-steering-2-fill', color: '#059669' },
                  { label: 'مشتركون', value: c.subscribers, icon: 'ri-group-fill', color: '#7C3AED' },
                ].map((stat, si) => (
                  <div key={si} className="text-center p-2 rounded-xl" style={{ background: '#F8FAFC' }}>
                    <i className={`${stat.icon} text-base`} style={{ color: stat.color }}></i>
                    <p className="text-sm font-black text-slate-800 mt-0.5" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{stat.value}</p>
                    <p className="text-[10px] text-slate-400" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{stat.label}</p>
                  </div>
                ))}
              </div>
              <div className="mt-3 pt-3 border-t flex items-center justify-between" style={{ borderColor: '#F1F5F9' }}>
                <span className="text-xs font-bold" style={{ color: '#059669', fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{c.revenue}</span>
                <span className="text-xs text-slate-400" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{c.joinDate}</span>
              </div>
            </div>
          ))}
        </div>
      )}

      {/* Add Company 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.owner} onChange={e => setForm(f => ({ ...f, owner: 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.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.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="info@company.sa"
                      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 type="number" value={form.buses} onChange={e => setForm(f => ({ ...f, buses: e.target.value }))}
                      placeholder="0"
                      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 type="number" value={form.drivers} onChange={e => setForm(f => ({ ...f, drivers: e.target.value }))}
                      placeholder="0"
                      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 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.owner || !form.city || !form.phone || !form.email}
                    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-lg 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.img} 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="grid grid-cols-2 gap-3 mb-5">
              {[
                { icon: 'ri-user-line', label: 'المالك', val: selected.owner },
                { icon: 'ri-map-pin-line', label: 'المدينة', val: selected.city },
                { icon: 'ri-phone-line', label: 'الجوال', val: selected.phone },
                { icon: 'ri-mail-line', label: 'البريد', val: selected.email },
                { icon: 'ri-bus-2-line', label: 'الباصات', val: `${selected.buses} باص` },
                { icon: 'ri-steering-2-line', label: 'السائقون', val: `${selected.drivers} سائق` },
                { icon: 'ri-group-line', label: 'المشتركون', val: `${selected.subscribers} مشترك` },
                { icon: 'ri-money-dollar-circle-line', label: 'الإيرادات', val: selected.revenue },
              ].map((row, i) => (
                <div key={i} className="flex items-center gap-3 p-3 rounded-xl" style={{ background: '#F8FAFC' }}>
                  <div className="w-7 h-7 rounded-lg 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-xs font-bold text-slate-700" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{row.val}</p>
                  </div>
                </div>
              ))}
            </div>
            <div className="flex gap-3">
              {selected.status === 'قيد المراجعة' && (
                <>
                  <button className="flex-1 h-11 rounded-xl font-bold text-sm text-white cursor-pointer whitespace-nowrap" style={{ background: '#059669', fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>
                    <i className="ri-checkbox-circle-line ml-1"></i>قبول الشركة
                  </button>
                  <button className="flex-1 h-11 rounded-xl font-bold text-sm cursor-pointer whitespace-nowrap" style={{ background: '#FEE2E2', color: '#EF4444', fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>
                    <i className="ri-close-circle-line ml-1"></i>رفض
                  </button>
                </>
              )}
              {selected.status !== 'قيد المراجعة' && (
                <>
                  <button 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' }} onClick={() => setSelected(null)}>إغلاق</button>
                  <button className="flex-1 h-11 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>
  );
}