'use client';

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

const buses = [
  { id: 'B-001', plateNumber: 'أ ب ج 1234', model: 'مرسيدس سبرينتر 2023', capacity: 20, company: 'شركة النقل الذهبي', driver: 'محمد العتيبي', city: 'الرياض', status: 'نشط', statusColor: '#059669', statusBg: '#DCFCE7', lastMaintenance: '1 مارس 2026', mileage: '45,200 كم', route: 'الرياض - العليا' },
  { id: 'B-002', plateNumber: 'د هـ و 5678', model: 'تويوتا كوستر 2022', capacity: 30, company: 'مجموعة الفجر للنقل', driver: 'خالد الشمري', city: 'جدة', status: 'في رحلة', statusColor: '#2563EB', statusBg: '#DBEAFE', lastMaintenance: '15 فبراير 2026', mileage: '62,100 كم', route: 'جدة - الحمراء' },
  { id: 'B-003', plateNumber: 'ز ح ط 9012', model: 'هيونداي H350 2023', capacity: 16, company: 'شركة الأمانة للنقل', driver: 'عبدالله القحطاني', city: 'الدمام', status: 'صيانة', statusColor: '#D97706', statusBg: '#FEF3C7', lastMaintenance: '20 مارس 2026', mileage: '38,500 كم', route: 'الدمام - الخبر' },
  { id: 'B-004', plateNumber: 'ي ك ل 3456', model: 'مرسيدس سبرينتر 2024', capacity: 20, company: 'نقل الخليج المتحدة', driver: 'فهد الدوسري', city: 'مكة', status: 'نشط', statusColor: '#059669', statusBg: '#DCFCE7', lastMaintenance: '5 مارس 2026', mileage: '12,300 كم', route: 'مكة - العزيزية' },
  { id: 'B-005', plateNumber: 'م ن س 7890', model: 'فولكس واجن كرافتر 2022', capacity: 18, company: 'شركة النقل الذهبي', driver: 'سعد الزهراني', city: 'الرياض', status: 'نشط', statusColor: '#059669', statusBg: '#DCFCE7', lastMaintenance: '10 مارس 2026', mileage: '55,800 كم', route: 'الرياض - النخيل' },
  { id: 'B-006', plateNumber: 'ع غ ف 2345', model: 'تويوتا كوستر 2021', capacity: 30, company: 'مجموعة الفجر للنقل', driver: 'عمر الحربي', city: 'جدة', status: 'متوقف', statusColor: '#EF4444', statusBg: '#FEE2E2', lastMaintenance: '1 يناير 2026', mileage: '88,400 كم', route: 'جدة - الروضة' },
  { id: 'B-007', plateNumber: 'ق ر ش 6789', model: 'مرسيدس سبرينتر 2023', capacity: 20, company: 'شركة الرواد للتنقل', driver: 'يوسف المطيري', city: 'المدينة', status: 'في رحلة', statusColor: '#2563EB', statusBg: '#DBEAFE', lastMaintenance: '12 مارس 2026', mileage: '29,700 كم', route: 'المدينة - قباء' },
  { id: 'B-008', plateNumber: 'ت ث خ 1357', model: 'هيونداي H350 2024', capacity: 16, company: 'شركة النقل الذهبي', driver: 'غير مخصص', city: 'الرياض', status: 'نشط', statusColor: '#059669', statusBg: '#DCFCE7', lastMaintenance: '8 مارس 2026', mileage: '8,900 كم', route: 'غير محدد' },
];

export default function AdminBusesPage() {
  const [search, setSearch] = useState('');
  const [statusFilter, setStatusFilter] = useState('الكل');
  const [selected, setSelected] = useState<typeof buses[0] | null>(null);

  const filtered = buses.filter(b => {
    const matchSearch = b.plateNumber.includes(search) || b.model.includes(search) || b.company.includes(search) || b.driver.includes(search);
    const matchStatus = statusFilter === 'الكل' || b.status === statusFilter;
    return matchSearch && matchStatus;
  });

  const stats = [
    { label: 'إجمالي الباصات', value: buses.length, icon: 'ri-bus-2-fill', color: '#1E3A8A', bg: '#DBEAFE' },
    { label: 'نشطة', value: buses.filter(b => b.status === 'نشط').length, icon: 'ri-checkbox-circle-fill', color: '#059669', bg: '#DCFCE7' },
    { label: 'في رحلة', value: buses.filter(b => b.status === 'في رحلة').length, icon: 'ri-map-pin-2-fill', color: '#2563EB', bg: '#DBEAFE' },
    { label: 'في الصيانة', value: buses.filter(b => b.status === 'صيانة').length, icon: 'ri-tools-fill', color: '#D97706', bg: '#FEF3C7' },
  ];

  return (
    <AdminShell title="إدارة الباصات" subtitle={`${buses.length} باص مسجل`}>
      <div className="grid grid-cols-4 gap-4 mb-6">
        {stats.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>

      <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: '300px', 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>
        <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>
      </div>

      <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-4 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((b, i) => (
              <tr key={i} className="border-t hover:bg-slate-50 transition-colors cursor-pointer" style={{ borderColor: '#F8FAFC' }} onClick={() => setSelected(b)}>
                <td className="px-4 py-3.5">
                  <div className="flex items-center gap-2">
                    <div className="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0" style={{ background: '#EFF6FF' }}>
                      <i className="ri-bus-2-line text-sm" style={{ color: '#3B82F6' }}></i>
                    </div>
                    <span className="text-sm font-bold text-slate-800 whitespace-nowrap" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{b.plateNumber}</span>
                  </div>
                </td>
                <td className="px-4 py-3.5"><span className="text-xs text-slate-600 whitespace-nowrap" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{b.model}</span></td>
                <td className="px-4 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' }}>{b.capacity} راكب</span>
                </td>
                <td className="px-4 py-3.5"><span className="text-xs text-slate-500 whitespace-nowrap" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{b.company}</span></td>
                <td className="px-4 py-3.5"><span className="text-xs text-slate-600 whitespace-nowrap" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{b.driver}</span></td>
                <td className="px-4 py-3.5"><span className="text-xs text-slate-600 whitespace-nowrap" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{b.city}</span></td>
                <td className="px-4 py-3.5"><span className="text-xs text-slate-500 whitespace-nowrap" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{b.route}</span></td>
                <td className="px-4 py-3.5"><span className="text-xs text-slate-500 whitespace-nowrap" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{b.lastMaintenance}</span></td>
                <td className="px-4 py-3.5">
                  <span className="px-2.5 py-1 rounded-full text-xs font-bold whitespace-nowrap" style={{ background: b.statusBg, color: b.statusColor, fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{b.status}</span>
                </td>
                <td className="px-4 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>

      {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-14 h-14 rounded-2xl flex items-center justify-center flex-shrink-0" style={{ background: '#DBEAFE' }}>
                <i className="ri-bus-2-fill text-3xl" style={{ color: '#1E3A8A' }}></i>
              </div>
              <div>
                <p className="text-lg font-black text-slate-900" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{selected.plateNumber}</p>
                <p className="text-sm text-slate-500" style={{ fontFamily: '"IBM Plex Sans Arabic", sans-serif' }}>{selected.model}</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-group-line', label: 'السعة', val: `${selected.capacity} راكب` },
                { icon: 'ri-building-2-line', label: 'الشركة', val: selected.company },
                { icon: 'ri-steering-2-line', label: 'السائق', val: selected.driver },
                { icon: 'ri-map-pin-line', label: 'المدينة', val: selected.city },
                { icon: 'ri-route-line', label: 'المسار', val: selected.route },
                { icon: 'ri-tools-line', label: 'آخر صيانة', val: selected.lastMaintenance },
                { icon: 'ri-speed-line', label: 'المسافة المقطوعة', val: selected.mileage },
              ].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>
  );
}