import React, { useState, useMemo } from 'react';
import { 
  LayoutDashboard, 
  MapPin, 
  CalendarCheck, 
  CreditCard, 
  PlusCircle, 
  Trash2, 
  CheckCircle, 
  Clock, 
  AlertCircle,
  TrendingUp,
  Users,
  Search,
  LogOut,
  ChevronRight
} from 'lucide-react';

const App = () => {
  const [activeTab, setActiveTab] = useState('dashboard');
  const [searchQuery, setSearchQuery] = useState('');
  
  // State for bookings
  const [bookings, setBookings] = useState([
    { id: 'BK-1001', customer: 'أحمد محمد', activity: 'رحلة سفاري دبي', date: '2024-05-15', status: 'confirmed', price: 450 },
    { id: 'BK-1002', customer: 'سارة خالد', activity: 'جولة في جبال الأبها', date: '2024-05-18', status: 'pending', price: 300 },
    { id: 'BK-1003', customer: 'ياسر القحطاني', activity: 'غوص في البحر الأحمر', date: '2024-05-10', status: 'completed', price: 600 },
    { id: 'BK-1004', customer: 'ليلى عبدالله', activity: 'زيارة العلا التاريخية', date: '2024-05-20', status: 'confirmed', price: 1200 },
  ]);

  // State for activities
  const [activities, setActivities] = useState([
    { id: 1, name: 'رحلة سفاري دبي', location: 'دبي، الإمارات', price: 450, category: 'مغامرات' },
    { id: 2, name: 'غوص في البحر الأحمر', location: 'جدة، السعودية', price: 600, category: 'رياضات مائية' },
  ]);

  const [newActivity, setNewActivity] = useState({ name: '', location: '', price: '', category: '' });

  // Helpers
  const getStatusBadge = (status) => {
    switch(status) {
      case 'confirmed': 
        return <span className="px-3 py-1 bg-green-100 text-green-700 rounded-full text-xs flex items-center gap-1 w-fit"><CheckCircle size={14}/> مؤكد</span>;
      case 'pending': 
        return <span className="px-3 py-1 bg-yellow-100 text-yellow-700 rounded-full text-xs flex items-center gap-1 w-fit"><Clock size={14}/> جاري</span>;
      case 'completed': 
        return <span className="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-xs flex items-center gap-1 w-fit"><CheckCircle size={14}/> مكتمل</span>;
      default: return null;
    }
  };

  const handleAddActivity = (e) => {
    e.preventDefault();
    if (!newActivity.name || !newActivity.price) return;
    setActivities([...activities, { ...newActivity, id: Date.now() }]);
    setNewActivity({ name: '', location: '', price: '', category: '' });
  };

  const deleteActivity = (id) => {
    setActivities(activities.filter(a => a.id !== id));
  };

  const filteredBookings = bookings.filter(b => 
    b.customer.includes(searchQuery) || b.id.includes(searchQuery) || b.activity.includes(searchQuery)
  );

  const totalEarnings = bookings.reduce((sum, b) => sum + b.price, 0);

  return (
    <div className="min-h-screen bg-gray-50 flex flex-col md:flex-row font-sans" dir="rtl">
      {/* Sidebar */}
      <aside className="w-full md:w-64 bg-slate-900 text-white flex flex-col">
        <div className="p-6 border-b border-slate-800 flex items-center gap-3">
          <div className="bg-blue-600 p-2 rounded-lg text-white">
            <MapPin size={24} />
          </div>
          <span className="text-xl font-bold tracking-tight">سياحة برو</span>
        </div>
        
        <nav className="flex-1 p-4 space-y-2">
          <button 
            onClick={() => setActiveTab('dashboard')}
            className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition ${activeTab === 'dashboard' ? 'bg-blue-600' : 'hover:bg-slate-800'}`}
          >
            <LayoutDashboard size={20} /> لوحة التحكم
          </button>
          <button 
            onClick={() => setActiveTab('bookings')}
            className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition ${activeTab === 'bookings' ? 'bg-blue-600' : 'hover:bg-slate-800'}`}
          >
            <CalendarCheck size={20} /> الحجوزات
          </button>
          <button 
            onClick={() => setActiveTab('activities')}
            className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition ${activeTab === 'activities' ? 'bg-blue-600' : 'hover:bg-slate-800'}`}
          >
            <PlusCircle size={20} /> إضافة أنشطة
          </button>
          <button 
            className="w-full flex items-center gap-3 px-4 py-3 rounded-xl transition hover:bg-slate-800"
          >
            <CreditCard size={20} /> المدفوعات
          </button>
        </nav>

        <div className="p-4 border-t border-slate-800">
          <button className="w-full flex items-center gap-3 px-4 py-3 text-red-400 hover:bg-red-950/30 rounded-xl transition">
            <LogOut size={20} /> تسجيل الخروج
          </button>
        </div>
      </aside>

      {/* Main Content */}
      <main className="flex-1 p-4 md:p-8 overflow-y-auto">
        <header className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-8">
          <div>
            <h1 className="text-2xl font-bold text-gray-800">مرحباً، مدير النظام</h1>
            <p className="text-gray-500 text-sm">إليك ملخص أداء الشركة لهذا اليوم</p>
          </div>
          
          <div className="relative">
            <Search className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400" size={18} />
            <input 
              type="text" 
              placeholder="بحث عن حجز أو عميل..." 
              className="bg-white border border-gray-200 rounded-full pr-10 pl-4 py-2 w-full md:w-72 focus:outline-none focus:ring-2 focus:ring-blue-500 shadow-sm"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
            />
          </div>
        </header>

        {activeTab === 'dashboard' && (
          <div className="space-y-8">
            {/* Stats Cards */}
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
              <StatCard title="إجمالي الأرباح" value={`$${totalEarnings}`} icon={<CreditCard className="text-green-600"/>} trend="+12%" />
              <StatCard title="الحجوزات النشطة" value={bookings.filter(b => b.status === 'confirmed').length} icon={<CalendarCheck className="text-blue-600"/>} trend="+5%" />
              <StatCard title="الأنشطة المتاحة" value={activities.length} icon={<MapPin className="text-orange-600"/>} />
              <StatCard title="العملاء الجدد" value="24" icon={<Users className="text-purple-600"/>} trend="+8%" />
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
              {/* Recent Bookings Snapshot */}
              <div className="bg-white p-6 rounded-2xl shadow-sm border border-gray-100">
                <div className="flex justify-between items-center mb-6">
                  <h2 className="font-bold text-lg text-gray-800">أحدث الحجوزات</h2>
                  <button onClick={() => setActiveTab('bookings')} className="text-blue-600 text-sm hover:underline">عرض الكل</button>
                </div>
                <div className="space-y-4">
                  {bookings.slice(0, 4).map(booking => (
                    <div key={booking.id} className="flex items-center justify-between p-3 border-b border-gray-50 last:border-0 hover:bg-gray-50 rounded-lg transition">
                      <div className="flex items-center gap-3">
                        <div className="w-10 h-10 bg-blue-50 rounded-full flex items-center justify-center text-blue-600 font-bold">
                          {booking.customer.charAt(0)}
                        </div>
                        <div>
                          <p className="font-medium text-gray-800">{booking.customer}</p>
                          <p className="text-xs text-gray-400">{booking.activity}</p>
                        </div>
                      </div>
                      <div className="text-left">
                        {getStatusBadge(booking.status)}
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              {/* Quick Add Form Mini */}
              <div className="bg-gradient-to-br from-blue-600 to-indigo-700 p-6 rounded-2xl shadow-lg text-white flex flex-col justify-between">
                <div>
                  <h2 className="font-bold text-xl mb-2">توسيع الوجهة السياحية؟</h2>
                  <p className="text-blue-100 text-sm mb-6">أضف أنشطة جديدة لجذب المزيد من السياح وزيادة مبيعات الشركة.</p>
                </div>
                <button 
                  onClick={() => setActiveTab('activities')}
                  className="bg-white text-blue-600 font-bold py-3 px-6 rounded-xl flex items-center justify-center gap-2 hover:bg-blue-50 transition"
                >
                  <PlusCircle size={20} /> ابدأ بإضافة نشاط الآن
                </button>
              </div>
            </div>
          </div>
        )}

        {activeTab === 'bookings' && (
          <div className="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
            <div className="p-6 border-b border-gray-50">
              <h2 className="font-bold text-lg">إدارة كافة الحجوزات</h2>
            </div>
            <div className="overflow-x-auto">
              <table className="w-full text-right">
                <thead className="bg-gray-50 text-gray-500 text-sm uppercase">
                  <tr>
                    <th className="px-6 py-4 font-medium">رقم الحجز</th>
                    <th className="px-6 py-4 font-medium">العميل</th>
                    <th className="px-6 py-4 font-medium">النشاط</th>
                    <th className="px-6 py-4 font-medium">التاريخ</th>
                    <th className="px-6 py-4 font-medium">المبلغ</th>
                    <th className="px-6 py-4 font-medium">الحالة</th>
                    <th className="px-6 py-4 font-medium">إجراءات</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-gray-100">
                  {filteredBookings.map((booking) => (
                    <tr key={booking.id} className="hover:bg-gray-50 transition">
                      <td className="px-6 py-4 font-mono text-sm">{booking.id}</td>
                      <td className="px-6 py-4 font-medium">{booking.customer}</td>
                      <td className="px-6 py-4 text-gray-600">{booking.activity}</td>
                      <td className="px-6 py-4 text-gray-500">{booking.date}</td>
                      <td className="px-6 py-4 font-bold text-gray-800">${booking.price}</td>
                      <td className="px-6 py-4">{getStatusBadge(booking.status)}</td>
                      <td className="px-6 py-4">
                        <button className="p-2 text-gray-400 hover:text-blue-600"><ChevronRight size={18}/></button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        )}

        {activeTab === 'activities' && (
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <div className="lg:col-span-1">
              <div className="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 sticky top-8">
                <h2 className="font-bold text-lg mb-6">إضافة نشاط سياحي جديد</h2>
                <form onSubmit={handleAddActivity} className="space-y-4">
                  <div>
                    <label className="block text-sm text-gray-600 mb-1">اسم النشاط</label>
                    <input 
                      type="text" 
                      className="w-full bg-gray-50 border border-gray-200 rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" 
                      placeholder="مثلاً: جولة المروحية"
                      value={newActivity.name}
                      onChange={(e) => setNewActivity({...newActivity, name: e.target.value})}
                    />
                  </div>
                  <div>
                    <label className="block text-sm text-gray-600 mb-1">الموقع</label>
                    <input 
                      type="text" 
                      className="w-full bg-gray-50 border border-gray-200 rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" 
                      placeholder="المدينة، الدولة"
                      value={newActivity.location}
                      onChange={(e) => setNewActivity({...newActivity, location: e.target.value})}
                    />
                  </div>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <label className="block text-sm text-gray-600 mb-1">السعر ($)</label>
                      <input 
                        type="number" 
                        className="w-full bg-gray-50 border border-gray-200 rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" 
                        value={newActivity.price}
                        onChange={(e) => setNewActivity({...newActivity, price: e.target.value})}
                      />
                    </div>
                    <div>
                      <label className="block text-sm text-gray-600 mb-1">التصنيف</label>
                      <select 
                        className="w-full bg-gray-50 border border-gray-200 rounded-xl px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                        value={newActivity.category}
                        onChange={(e) => setNewActivity({...newActivity, category: e.target.value})}
                      >
                        <option value="">اختر</option>
                        <option value="مغامرات">مغامرات</option>
                        <option value="ثقافي">ثقافي</option>
                        <option value="رياضي">رياضي</option>
                      </select>
                    </div>
                  </div>
                  <button type="submit" className="w-full bg-blue-600 text-white font-bold py-3 rounded-xl hover:bg-blue-700 transition shadow-lg shadow-blue-200 flex items-center justify-center gap-2 mt-4">
                    <PlusCircle size={20} /> حفظ النشاط
                  </button>
                </form>
              </div>
            </div>

            <div className="lg:col-span-2 space-y-4">
              <h2 className="font-bold text-lg mb-2">قائمة الأنشطة الحالية</h2>
              {activities.map(activity => (
                <div key={activity.id} className="bg-white p-5 rounded-2xl shadow-sm border border-gray-100 flex items-center justify-between group">
                  <div className="flex items-center gap-4">
                    <div className="w-16 h-16 bg-gray-100 rounded-xl flex items-center justify-center text-gray-400">
                      <MapPin size={24} />
                    </div>
                    <div>
                      <h3 className="font-bold text-gray-800">{activity.name}</h3>
                      <p className="text-sm text-gray-400">{activity.location} • {activity.category}</p>
                      <p className="text-blue-600 font-bold mt-1">${activity.price}</p>
                    </div>
                  </div>
                  <button 
                    onClick={() => deleteActivity(activity.id)}
                    className="p-3 text-gray-300 hover:text-red-500 hover:bg-red-50 rounded-xl transition"
                  >
                    <Trash2 size={20} />
                  </button>
                </div>
              ))}
              {activities.length === 0 && (
                <div className="text-center py-20 bg-gray-100 rounded-2xl border-2 border-dashed border-gray-200">
                  <AlertCircle className="mx-auto text-gray-300 mb-2" size={48} />
                  <p className="text-gray-500">لا توجد أنشطة حالياً، ابدأ بإضافة نشاطك الأول</p>
                </div>
              )}
            </div>
          </div>
        )}
      </main>
    </div>
  );
};

const StatCard = ({ title, value, icon, trend }) => (
  <div className="bg-white p-5 rounded-2xl shadow-sm border border-gray-100 flex items-center justify-between">
    <div>
      <p className="text-gray-500 text-sm mb-1">{title}</p>
      <h3 className="text-2xl font-bold text-gray-800">{value}</h3>
      {trend && (
        <span className="text-xs text-green-500 font-medium flex items-center gap-1 mt-1">
          <TrendingUp size={12} /> {trend} مقارنة بالشهر السابق
        </span>
      )}
    </div>
    <div className="w-12 h-12 bg-gray-50 rounded-xl flex items-center justify-center">
      {icon}
    </div>
  </div>
);

export default App;