import React, { useState, useEffect, useMemo, useRef } from 'react';
import { 
  ShoppingCart, Package, Users, Settings, LogOut, 
  Plus, Trash2, Edit, CheckCircle, Clock, XCircle, 
  ChevronRight, Box, ListOrdered, Tag, Search, TrendingUp, AlertCircle,
  Calendar, Sliders, Info, Link as LinkIcon, Menu, X
} from 'lucide-react';

// --- البيانات الافتراضية (Seed Data) ---
const INITIAL_CATEGORIES = [
  { id: 'c1', name: 'معلبات' },
  { id: 'c2', name: 'بقوليات' },
  { id: 'c3', name: 'ألبان وأجبان' },
];

const INITIAL_UNITS = [
  { id: 'u1', name: 'كرتونة', pieces: 12 },
  { id: 'u2', name: 'بالتة', pieces: 120 },
  { id: 'u3', name: 'شيكارة', pieces: 1 },
  { id: 'u4', name: 'عبوة', pieces: 6 },
];

const INITIAL_CUSTOMERS = [
  { id: 'cust1', clientId: '1001', name: 'شركة النور للمواد الغذائية', phone: '01012345678', password: '1234' },
  { id: 'cust2', clientId: '1002', name: 'سوبر ماركت الهدى', phone: '01112345678', password: '1234' }
];

// توليد منتجات إضافية لتجربة خاصية (التحميل التدريجي - Pagination)
const generateMockProducts = () => {
  let products = [
    {
      id: 'p1', name: 'صلصة طماطم فاين فودز 400جم', image: 'https://placehold.co/150x150/e74c3c/white?text=Tomatoes',
      categoryId: 'c1', unitId: 'u1', piecePrice: 15, stockPieces: 1200, 
      hasOffer: true, offerMinQty: 10, offerType: 'percentage', offerValue: 10, maxDiscountValue: 150,
      hasExpiry: true, expiryDate: '2026-12-31', minPurchaseQty: 1, maxPurchaseQty: 50
    },
    {
      id: 'p2', name: 'أرز بسمتي السوهاجي', image: 'https://placehold.co/150x150/f1c40f/white?text=Rice',
      categoryId: 'c2', unitId: 'u3', piecePrice: 400, stockPieces: 50,
      hasOffer: false, offerMinQty: 0, offerType: 'fixed', offerValue: 0, maxDiscountValue: 0,
      hasExpiry: false, expiryDate: '', minPurchaseQty: 5, maxPurchaseQty: 0
    },
    {
      id: 'p3', name: 'حليب كامل الدسم 1 لتر', image: 'https://placehold.co/150x150/3498db/white?text=Milk',
      categoryId: 'c3', unitId: 'u4', piecePrice: 35, stockPieces: 300,
      hasOffer: true, offerMinQty: 5, offerType: 'fixed', offerValue: 15, maxDiscountValue: 0,
      hasExpiry: true, expiryDate: '2025-08-15', minPurchaseQty: 1, maxPurchaseQty: 0
    }
  ];

  // إضافة 30 منتج افتراضي لتجربة التقليب
  for(let i=4; i<=30; i++) {
    products.push({
      id: `p${i}`, name: `منتج غذائي تجريبي رقم ${i}`, image: `https://placehold.co/150x150/cccccc/333333?text=Product+${i}`,
      categoryId: i%2===0 ? 'c1' : 'c2', unitId: 'u1', piecePrice: 10 + (i*2), stockPieces: 500 + (i*10),
      hasOffer: false, offerMinQty: 0, offerType: 'fixed', offerValue: 0, maxDiscountValue: 0,
      hasExpiry: false, expiryDate: '', minPurchaseQty: 1, maxPurchaseQty: 0
    });
  }
  return products;
};

const INITIAL_PRODUCTS = generateMockProducts();

const INITIAL_SALES_RULES = [
  {
    id: 'r1', targetProductId: 'p1',
    conditions: [{ requiredProductId: 'p2', type: 'absolute', value: 2 }] 
  }
];

export default function App() {
  const [adminCreds, setAdminCreds] = useState({ username: 'admin', password: 'admin' });
  const [user, setUser] = useState(null); 
  const [categories, setCategories] = useState(INITIAL_CATEGORIES);
  const [units, setUnits] = useState(INITIAL_UNITS);
  const [customers, setCustomers] = useState(INITIAL_CUSTOMERS);
  const [products, setProducts] = useState(INITIAL_PRODUCTS);
  const [salesRules, setSalesRules] = useState(INITIAL_SALES_RULES);
  const [orders, setOrders] = useState([]);
  const [cart, setCart] = useState([]); 
  const [orderConstraints, setOrderConstraints] = useState({ minOrder: 1000, maxOrder: 0 });

  const getProductDetails = (product) => {
    const unit = units.find(u => u.id === product.unitId) || { name: 'قطعة', pieces: 1 };
    const category = categories.find(c => c.id === product.categoryId) || { name: 'غير محدد' };
    const unitPrice = product.piecePrice * unit.pieces;
    const availableUnits = Math.floor(product.stockPieces / unit.pieces);
    return { ...product, unit, category, unitPrice, availableUnits };
  };

  const calculateItemPrice = (productInfo, quantity) => {
    let total = productInfo.unitPrice * quantity;
    let discount = 0;
    
    if (productInfo.hasOffer && quantity >= productInfo.offerMinQty) {
      if (productInfo.offerType === 'fixed') {
        discount = productInfo.offerValue; 
      } else if (productInfo.offerType === 'percentage') {
        discount = total * (productInfo.offerValue / 100);
        if (productInfo.maxDiscountValue && productInfo.maxDiscountValue > 0) {
          if (discount > productInfo.maxDiscountValue) {
            discount = productInfo.maxDiscountValue;
          }
        }
      }
    }
    return { subtotal: total, discount, finalTotal: total - discount };
  };

  if (!user) return <LoginView onLogin={setUser} customers={customers} adminCreds={adminCreds} />;
  
  if (user.role === 'admin') {
    return <AdminDashboard 
      state={{ categories, units, customers, products, orders, adminCreds, orderConstraints, salesRules }}
      setters={{ setCategories, setUnits, setCustomers, setProducts, setOrders, setAdminCreds, setOrderConstraints, setSalesRules }}
      onLogout={() => setUser(null)}
      getProductDetails={getProductDetails}
    />;
  }

  if (user.role === 'client') {
    return <ClientDashboard 
      user={user}
      state={{ products, categories, orders, cart, orderConstraints, salesRules }}
      setters={{ setOrders, setCart, setProducts }}
      onLogout={() => setUser(null)}
      getProductDetails={getProductDetails}
      calculateItemPrice={calculateItemPrice}
    />;
  }

  return null;
}

// ==========================================
// 1. LOGIN VIEW
// ==========================================
function LoginView({ onLogin, customers, adminCreds }) {
  const [type, setType] = useState('client');
  const [clientId, setClientId] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');

  const handleLogin = (e) => {
    e.preventDefault();
    setError('');

    if (type === 'admin') {
      if (clientId === adminCreds.username && password === adminCreds.password) {
        onLogin({ role: 'admin', name: 'المدير' });
      } else {
        setError('بيانات الإدارة غير صحيحة');
      }
    } else {
      const customer = customers.find(c => c.clientId === clientId && c.password === password);
      if (customer) {
        onLogin({ role: 'client', ...customer });
      } else {
        setError('رقم العميل أو كلمة المرور غير صحيحة');
      }
    }
  };

  return (
    <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4" dir="rtl">
      <div className="bg-white rounded-xl shadow-xl p-8 w-full max-w-md">
        <div className="text-center mb-8">
          <div className="bg-blue-600 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
            <Package className="text-white w-8 h-8" />
          </div>
          <h1 className="text-2xl font-bold text-gray-800">بوابة المبيعات بالجملة</h1>
          <p className="text-gray-500 mt-2">تسجيل الدخول للنظام</p>
        </div>

        <div className="flex gap-2 mb-6">
          <button 
            onClick={() => setType('client')}
            className={`flex-1 py-2 rounded-lg font-medium transition ${type === 'client' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'}`}
          >
            حساب عميل
          </button>
          <button 
            onClick={() => setType('admin')}
            className={`flex-1 py-2 rounded-lg font-medium transition ${type === 'admin' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'}`}
          >
            الإدارة
          </button>
        </div>

        {error && <div className="bg-red-50 text-red-600 p-3 rounded-lg text-sm mb-4">{error}</div>}

        <form onSubmit={handleLogin} className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              {type === 'client' ? 'رقم العميل' : 'اسم المستخدم'}
            </label>
            <input 
              type="text" 
              required
              value={clientId}
              onChange={(e) => setClientId(e.target.value)}
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:outline-none"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">كلمة المرور</label>
            <input 
              type="password" 
              required
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:outline-none"
            />
          </div>
          <button type="submit" className="w-full bg-blue-600 text-white py-2 rounded-lg font-medium hover:bg-blue-700 transition">
            دخول
          </button>
        </form>
      </div>
    </div>
  );
}

// ==========================================
// 2. ADMIN DASHBOARD
// ==========================================
function AdminDashboard({ state, setters, onLogout, getProductDetails }) {
  const [activeTab, setActiveTab] = useState('products');
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);

  const tabs = [
    { id: 'products', name: 'المنتجات', icon: Package },
    { id: 'orders', name: 'الطلبات', icon: ListOrdered },
    { id: 'customers', name: 'العملاء', icon: Users },
    { id: 'categories', name: 'الفئات', icon: Tag },
    { id: 'units', name: 'الوحدات', icon: Box },
    { id: 'salesRules', name: 'قواعد البيع', icon: LinkIcon },
    { id: 'constraints', name: 'قيود الطلبات', icon: Sliders },
    { id: 'adminSettings', name: 'بيانات الدخول', icon: Settings },
  ];

  return (
    <div className="min-h-screen bg-gray-100 flex flex-col md:flex-row" dir="rtl">
      {/* Mobile Header */}
      <div className="md:hidden bg-white shadow-sm p-4 flex justify-between items-center z-20 relative">
        <div className="flex items-center gap-2">
          <div className="bg-blue-600 p-1.5 rounded-lg"><TrendingUp className="text-white w-5 h-5" /></div>
          <h2 className="font-bold text-lg text-gray-800">لوحة الإدارة</h2>
        </div>
        <button onClick={() => setIsSidebarOpen(!isSidebarOpen)} className="text-gray-600 p-1 bg-gray-100 rounded-md">
          {isSidebarOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
        </button>
      </div>

      {/* Overlay for mobile sidebar */}
      {isSidebarOpen && (
        <div className="fixed inset-0 bg-black bg-opacity-50 z-30 md:hidden" onClick={() => setIsSidebarOpen(false)}></div>
      )}

      {/* Sidebar */}
      <div className={`fixed md:sticky top-0 right-0 h-full w-64 bg-white shadow-xl z-40 transform transition-transform duration-300 ease-in-out flex flex-col ${isSidebarOpen ? 'translate-x-0' : 'translate-x-full md:translate-x-0'}`}>
        <div className="p-6 border-b border-gray-100 hidden md:flex items-center gap-3">
          <div className="bg-blue-600 p-2 rounded-lg"><TrendingUp className="text-white w-6 h-6" /></div>
          <h2 className="font-bold text-xl text-gray-800">لوحة الإدارة</h2>
        </div>
        <nav className="flex-1 p-4 space-y-2 overflow-y-auto">
          {tabs.map(tab => {
            const Icon = tab.icon;
            return (
              <button
                key={tab.id}
                onClick={() => { setActiveTab(tab.id); setIsSidebarOpen(false); }}
                className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition ${activeTab === tab.id ? 'bg-blue-50 text-blue-700 font-semibold' : 'text-gray-600 hover:bg-gray-50'}`}
              >
                <Icon className="w-5 h-5" />
                {tab.name}
              </button>
            )
          })}
        </nav>
        <div className="p-4 border-t border-gray-100">
          <button onClick={onLogout} className="w-full flex items-center justify-center gap-2 px-4 py-2 text-red-600 hover:bg-red-50 rounded-lg transition">
            <LogOut className="w-5 h-5" />
            تسجيل خروج
          </button>
        </div>
      </div>

      {/* Main Content */}
      <div className="flex-1 overflow-auto p-4 md:p-8">
        {activeTab === 'products' && <AdminProducts state={state} setters={setters} getProductDetails={getProductDetails} />}
        {activeTab === 'orders' && <AdminOrders state={state} setters={setters} getProductDetails={getProductDetails} />}
        {activeTab === 'customers' && <AdminCustomers state={state} setters={setters} />}
        {activeTab === 'categories' && <AdminCategories state={state} setters={setters} />}
        {activeTab === 'units' && <AdminUnits state={state} setters={setters} />}
        {activeTab === 'salesRules' && <AdminSalesRules state={state} setters={setters} />}
        {activeTab === 'constraints' && <AdminConstraints state={state} setters={setters} />}
        {activeTab === 'adminSettings' && <AdminSettings state={state} setters={setters} />}
      </div>
    </div>
  );
}

// --- Admin Sub-views ---

function AdminProducts({ state, setters, getProductDetails }) {
  const [isEditing, setIsEditing] = useState(false);
  const [formData, setFormData] = useState(null);
  
  // Search & Pagination States
  const [searchTerm, setSearchTerm] = useState('');
  const [itemsPerPage, setItemsPerPage] = useState(10);
  const [currentPage, setCurrentPage] = useState(1);

  const handleAdd = () => {
    setFormData({
      id: Date.now().toString(),
      name: '', image: '', categoryId: state.categories[0]?.id || '', unitId: state.units[0]?.id || '',
      piecePrice: 0, stockPieces: 0, 
      hasOffer: false, offerMinQty: 0, offerType: 'fixed', offerValue: 0, maxDiscountValue: 0,
      hasExpiry: false, expiryDate: '',
      minPurchaseQty: 1, maxPurchaseQty: 0
    });
    setIsEditing(true);
  };

  const handleSave = (e) => {
    e.preventDefault();
    const existing = state.products.find(p => p.id === formData.id);
    if (existing) {
      setters.setProducts(state.products.map(p => p.id === formData.id ? formData : p));
    } else {
      setters.setProducts([...state.products, formData]);
    }
    setIsEditing(false);
  };

  const handleDelete = (id) => {
    if(confirm('هل أنت متأكد من حذف هذا المنتج؟')) {
      setters.setProducts(state.products.filter(p => p.id !== id));
    }
  };

  if (isEditing) {
    const selectedUnit = state.units.find(u => u.id === formData.unitId) || { pieces: 1 };
    const unitPriceCalc = formData.piecePrice * selectedUnit.pieces;

    return (
      <div className="bg-white rounded-xl shadow p-6 w-full overflow-x-hidden">
        <h3 className="text-xl font-bold mb-6">{formData.name ? 'تعديل منتج' : 'إضافة منتج جديد'}</h3>
        <form onSubmit={handleSave} className="space-y-6">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">اسم المنتج</label>
              <input type="text" required value={formData.name} onChange={e => setFormData({...formData, name: e.target.value})} className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500" />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">رابط الصورة</label>
              <input type="text" value={formData.image} onChange={e => setFormData({...formData, image: e.target.value})} className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500" placeholder="https://..." />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">الفئة</label>
              <select value={formData.categoryId} onChange={e => setFormData({...formData, categoryId: e.target.value})} className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500">
                {state.categories.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">وحدة البيع</label>
              <select value={formData.unitId} onChange={e => setFormData({...formData, unitId: e.target.value})} className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500">
                {state.units.map(u => <option key={u.id} value={u.id}>{u.name} ({u.pieces} قطعة)</option>)}
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">سعر القطعة (ج.م)</label>
              <input type="number" min="0" step="0.01" required value={formData.piecePrice} onChange={e => setFormData({...formData, piecePrice: parseFloat(e.target.value) || 0})} className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500" />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">سعر الوحدة (تلقائي)</label>
              <input type="text" readOnly value={unitPriceCalc} className="w-full px-4 py-2 border rounded-lg bg-gray-50 text-gray-500" />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">الكمية المتاحة (إجمالي بالقطعة)</label>
              <input type="number" min="0" required value={formData.stockPieces} onChange={e => setFormData({...formData, stockPieces: parseInt(e.target.value) || 0})} className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500" />
            </div>
          </div>

          <div className="border-t pt-6">
            <h4 className="font-bold text-gray-800 mb-4 flex items-center gap-2"><Sliders className="w-5 h-5"/> قيود الشراء للعميل (بالوحدة)</h4>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 bg-gray-50 p-4 rounded-lg">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">الحد الأدنى للطلب</label>
                <input type="number" min="1" required value={formData.minPurchaseQty || 1} onChange={e => setFormData({...formData, minPurchaseQty: parseInt(e.target.value) || 1})} className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500" />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">الحد الأقصى للطلب (0 = بدون حد)</label>
                <input type="number" min="0" required value={formData.maxPurchaseQty || 0} onChange={e => setFormData({...formData, maxPurchaseQty: parseInt(e.target.value) || 0})} className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500" />
              </div>
            </div>
          </div>

          <div className="border-t pt-6">
             <label className="flex items-center gap-2 mb-4">
              <input type="checkbox" checked={formData.hasExpiry || false} onChange={e => setFormData({...formData, hasExpiry: e.target.checked})} className="w-5 h-5 text-blue-600 rounded" />
              <span className="font-medium text-gray-800">تفعيل تاريخ الصلاحية لهذا المنتج؟</span>
            </label>
            {formData.hasExpiry && (
               <div className="w-full md:w-1/2">
                 <label className="block text-sm font-medium text-gray-700 mb-1">تاريخ الانتهاء</label>
                 <input type="date" required value={formData.expiryDate || ''} onChange={e => setFormData({...formData, expiryDate: e.target.value})} className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500" />
               </div>
            )}
          </div>

          <div className="border-t pt-6">
            <label className="flex items-center gap-2 mb-4">
              <input type="checkbox" checked={formData.hasOffer} onChange={e => setFormData({...formData, hasOffer: e.target.checked})} className="w-5 h-5 text-blue-600 rounded" />
              <span className="font-medium text-gray-800">تفعيل عرض خاص على هذا المنتج؟</span>
            </label>

            {formData.hasOffer && (
              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6 bg-blue-50 p-4 rounded-lg items-end">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">عند شراء (كمية)</label>
                  <input type="number" min="1" value={formData.offerMinQty} onChange={e => setFormData({...formData, offerMinQty: parseInt(e.target.value) || 1})} className="w-full px-4 py-2 border rounded-lg" placeholder="مثال: 10" />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">نوع الخصم</label>
                  <select value={formData.offerType} onChange={e => setFormData({...formData, offerType: e.target.value, maxDiscountValue: 0})} className="w-full px-4 py-2 border rounded-lg">
                    <option value="fixed">مبلغ ثابت (ج.م)</option>
                    <option value="percentage">نسبة مئوية (%)</option>
                  </select>
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">قيمة الخصم</label>
                  <input type="number" min="0" step="0.01" value={formData.offerValue} onChange={e => setFormData({...formData, offerValue: parseFloat(e.target.value) || 0})} className="w-full px-4 py-2 border rounded-lg" />
                </div>
                {formData.offerType === 'percentage' && (
                  <div>
                    <label className="block text-sm font-medium text-gray-700 mb-1">أقصى خصم (0 = مفتوح)</label>
                    <input type="number" min="0" value={formData.maxDiscountValue || 0} onChange={e => setFormData({...formData, maxDiscountValue: parseFloat(e.target.value) || 0})} className="w-full px-4 py-2 border rounded-lg" />
                  </div>
                )}
              </div>
            )}
          </div>

          <div className="flex flex-wrap gap-4 border-t pt-6">
            <button type="submit" className="bg-blue-600 text-white px-6 py-2 rounded-lg font-medium hover:bg-blue-700 flex-1 md:flex-none">حفظ المنتج</button>
            <button type="button" onClick={() => setIsEditing(false)} className="bg-gray-200 text-gray-700 px-6 py-2 rounded-lg font-medium hover:bg-gray-300 flex-1 md:flex-none">إلغاء</button>
          </div>
        </form>
      </div>
    );
  }

  // فلترة وتقسيم المنتجات للصفحات
  const filteredProducts = state.products.filter(p => p.name.toLowerCase().includes(searchTerm.toLowerCase()));
  const totalPages = Math.ceil(filteredProducts.length / itemsPerPage);
  const currentProducts = filteredProducts.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage);

  // إعادة التعيين للصفحة الأولى عند البحث
  useEffect(() => { setCurrentPage(1); }, [searchTerm, itemsPerPage]);

  return (
    <div>
      <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6">
        <h2 className="text-2xl font-bold text-gray-800">إدارة المنتجات</h2>
        
        <div className="flex flex-wrap items-center gap-3 w-full md:w-auto">
          <div className="relative flex-1 md:w-64">
            <input 
              type="text" 
              placeholder="ابحث عن منتج..." 
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="w-full pl-4 pr-10 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:outline-none"
            />
            <Search className="w-5 h-5 text-gray-400 absolute right-3 top-2.5" />
          </div>
          
          <select 
            value={itemsPerPage} 
            onChange={(e) => setItemsPerPage(Number(e.target.value))}
            className="border rounded-lg px-3 py-2 bg-white focus:ring-2 focus:ring-blue-500 focus:outline-none text-sm"
          >
            <option value={10}>10</option>
            <option value={25}>25</option>
            <option value={50}>50</option>
            <option value={100}>100</option>
            <option value={500}>500</option>
          </select>

          <button onClick={handleAdd} className="flex items-center justify-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 w-full md:w-auto mt-2 md:mt-0">
            <Plus className="w-5 h-5" /> إضافة منتج
          </button>
        </div>
      </div>

      <div className="bg-white rounded-xl shadow overflow-x-auto w-full">
        <table className="w-full text-right min-w-[800px]">
          <thead className="bg-gray-50 border-b">
            <tr>
              <th className="px-6 py-3 text-sm font-semibold text-gray-600">المنتج</th>
              <th className="px-6 py-3 text-sm font-semibold text-gray-600">الفئة والوحدة</th>
              <th className="px-6 py-3 text-sm font-semibold text-gray-600">السعر والمخزون</th>
              <th className="px-6 py-3 text-sm font-semibold text-gray-600">العروض والقيود</th>
              <th className="px-6 py-3 text-sm font-semibold text-gray-600">إجراءات</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-100">
            {currentProducts.map(p => {
              const info = getProductDetails(p);
              return (
                <tr key={p.id} className="hover:bg-gray-50 transition">
                  <td className="px-6 py-4 flex items-center gap-3">
                    <img src={p.image} alt={p.name} className="w-12 h-12 rounded-lg object-cover bg-gray-100 shrink-0" />
                    <span className="font-medium text-gray-800 line-clamp-2" title={p.name}>{p.name}</span>
                  </td>
                  <td className="px-6 py-4">
                    <div className="text-sm text-gray-800">{info.category.name}</div>
                    <div className="text-xs text-gray-500">{info.unit.name} ({info.unit.pieces} قطعة)</div>
                  </td>
                  <td className="px-6 py-4">
                    <div className="font-medium text-blue-600">{info.unitPrice} ج.م / {info.unit.name}</div>
                    <div className="text-xs text-gray-500">المتاح: {info.availableUnits} {info.unit.name}</div>
                  </td>
                  <td className="px-6 py-4 text-sm space-y-1">
                    {p.hasOffer ? (
                      <div className="bg-green-100 text-green-700 px-2 py-1 rounded-md text-xs inline-block">
                        خصم {p.offerType === 'fixed' ? `${p.offerValue} ج` : `${p.offerValue}%`} 
                        {p.offerType === 'percentage' && p.maxDiscountValue > 0 ? ` (أقصى ${p.maxDiscountValue}ج)` : ''}
                      </div>
                    ) : null}
                    {p.hasExpiry && (
                      <div className="text-xs text-red-500 flex items-center gap-1 mt-1">
                        <Calendar className="w-3 h-3" /> انتهاء: {p.expiryDate}
                      </div>
                    )}
                    <div className="text-xs text-gray-500 bg-gray-100 px-2 py-1 rounded-md mt-1 inline-block whitespace-nowrap">
                      أدنى: {p.minPurchaseQty || 1} | أقصى: {p.maxPurchaseQty > 0 ? p.maxPurchaseQty : 'مفتوح'}
                    </div>
                  </td>
                  <td className="px-6 py-4">
                    <div className="flex gap-2">
                      <button onClick={() => { setFormData(p); setIsEditing(true); }} className="text-blue-600 hover:bg-blue-50 p-2 rounded-lg"><Edit className="w-4 h-4" /></button>
                      <button onClick={() => handleDelete(p.id)} className="text-red-600 hover:bg-red-50 p-2 rounded-lg"><Trash2 className="w-4 h-4" /></button>
                    </div>
                  </td>
                </tr>
              )
            })}
            {currentProducts.length === 0 && <tr><td colSpan="5" className="text-center py-8 text-gray-500">لا توجد منتجات مطابقة</td></tr>}
          </tbody>
        </table>
      </div>

      {/* الترقيم (Pagination) */}
      {totalPages > 1 && (
        <div className="flex justify-center items-center gap-2 mt-6">
          <button 
            disabled={currentPage === 1} 
            onClick={() => setCurrentPage(c => c - 1)}
            className="p-2 border rounded-lg hover:bg-gray-50 disabled:opacity-50"
          >
            <ChevronRight className="w-5 h-5 rotate-180" />
          </button>
          <span className="font-medium text-gray-600 text-sm">صفحة {currentPage} من {totalPages}</span>
          <button 
            disabled={currentPage === totalPages} 
            onClick={() => setCurrentPage(c => c + 1)}
            className="p-2 border rounded-lg hover:bg-gray-50 disabled:opacity-50"
          >
            <ChevronRight className="w-5 h-5" />
          </button>
        </div>
      )}
    </div>
  );
}

function AdminOrders({ state, setters, getProductDetails }) {
  const [selectedOrder, setSelectedOrder] = useState(null);

  const updateOrderStatus = (orderId, newStatus) => {
    const order = state.orders.find(o => o.id === orderId);
    
    if (newStatus === 'cancelled' && order.status !== 'cancelled') {
      let updatedProducts = [...state.products];
      order.items.forEach(item => {
        const productIndex = updatedProducts.findIndex(p => p.id === item.productId);
        if(productIndex > -1) {
          const product = updatedProducts[productIndex];
          const unit = state.units.find(u => u.id === product.unitId);
          updatedProducts[productIndex].stockPieces += (item.quantity * unit.pieces);
        }
      });
      setters.setProducts(updatedProducts);
    }

    setters.setOrders(state.orders.map(o => o.id === orderId ? { ...o, status: newStatus } : o));
    if (selectedOrder && selectedOrder.id === orderId) {
      setSelectedOrder({ ...selectedOrder, status: newStatus });
    }
  };

  const getStatusBadge = (status) => {
    switch(status) {
      case 'pending': return <span className="bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-xs font-medium whitespace-nowrap">قيد المراجعة</span>;
      case 'processing': return <span className="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-xs font-medium whitespace-nowrap">جاري التجهيز</span>;
      case 'shipped': return <span className="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-xs font-medium whitespace-nowrap">تم الشحن</span>;
      case 'delivered': return <span className="bg-green-100 text-green-800 px-3 py-1 rounded-full text-xs font-medium whitespace-nowrap">مكتمل</span>;
      case 'cancelled': return <span className="bg-red-100 text-red-800 px-3 py-1 rounded-full text-xs font-medium whitespace-nowrap">ملغي</span>;
      default: return null;
    }
  };

  if (selectedOrder) {
    const customer = state.customers.find(c => c.id === selectedOrder.clientId) || { name: 'غير معروف' };
    return (
      <div>
        <button onClick={() => setSelectedOrder(null)} className="mb-6 flex items-center gap-2 text-gray-600 hover:text-blue-600 transition font-bold">
          <ChevronRight className="w-5 h-5" /> عودة للقائمة
        </button>
        <div className="bg-white rounded-xl shadow-md p-4 md:p-6 border-t-4 border-blue-600">
          <div className="flex flex-col md:flex-row justify-between items-start mb-6 border-b pb-6 gap-4">
            <div>
              <h3 className="font-bold text-xl md:text-2xl text-gray-800">طلب #{selectedOrder.id}</h3>
              <div className="text-gray-500 mt-2 flex flex-col gap-2 font-medium text-sm md:text-base">
                <span><Clock className="w-4 h-4 inline mr-1"/> التاريخ: {new Date(selectedOrder.date).toLocaleString('ar-EG')}</span>
                <span><Users className="w-4 h-4 inline mr-1"/> العميل: {customer.name} (رقم: {customer.clientId})</span>
                <span><AlertCircle className="w-4 h-4 inline mr-1"/> الهاتف: <span dir="ltr">{customer.phone}</span></span>
              </div>
            </div>
            <div className="flex flex-col md:items-end gap-3 w-full md:w-auto">
              <div className="text-lg">{getStatusBadge(selectedOrder.status)}</div>
              <select 
                value={selectedOrder.status} 
                onChange={(e) => updateOrderStatus(selectedOrder.id, e.target.value)}
                disabled={selectedOrder.status === 'cancelled'}
                className="border rounded-lg p-2 bg-gray-50 font-bold text-gray-700 focus:ring-2 focus:ring-blue-500 outline-none w-full md:w-auto"
              >
                <option value="pending">قيد المراجعة</option>
                <option value="processing">جاري التجهيز</option>
                <option value="shipped">تم الشحن</option>
                <option value="delivered">مكتمل</option>
                <option value="cancelled">إلغاء الطلب</option>
              </select>
            </div>
          </div>
          
          <div className="space-y-4">
            <h4 className="font-bold text-gray-800 text-lg">تفاصيل المنتجات:</h4>
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
              {selectedOrder.items.map((item, idx) => {
                const product = state.products.find(p => p.id === item.productId);
                if(!product) return <div key={idx} className="bg-gray-50 p-4 rounded-xl border text-red-500">منتج محذوف</div>;
                const info = getProductDetails(product);
                return (
                  <div key={idx} className="flex justify-between items-center bg-gray-50 p-3 md:p-4 rounded-xl border">
                    <div className="flex gap-3 items-center">
                      <img src={product.image} className="w-12 h-12 md:w-14 md:h-14 rounded-lg object-cover bg-white p-1 shadow-sm shrink-0" />
                      <div>
                        <div className="font-bold text-gray-800 text-sm md:text-base line-clamp-2">{product.name}</div>
                        <div className="text-gray-500 text-xs md:text-sm mt-1">{item.quantity} {info.unit.name} x {item.price} ج.م</div>
                      </div>
                    </div>
                    <div className="text-left shrink-0 ml-2">
                      <div className="font-black text-blue-600 text-base md:text-lg">{item.finalTotal} ج.م</div>
                      {item.discount > 0 && <div className="text-[10px] md:text-xs font-bold text-red-500 bg-red-50 px-2 py-1 rounded mt-1">خصم: {item.discount} ج.م</div>}
                    </div>
                  </div>
                )
              })}
            </div>
          </div>
          <div className="mt-8 pt-6 border-t flex justify-between items-center bg-blue-50 p-4 md:p-6 rounded-xl border border-blue-100">
            <span className="text-lg md:text-xl font-bold text-gray-800">إجمالي الطلب</span>
            <span className="text-2xl md:text-3xl font-black text-blue-600">{selectedOrder.total} ج.م</span>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div>
      <h2 className="text-2xl font-bold text-gray-800 mb-6">إدارة الطلبات</h2>
      <div className="bg-white rounded-xl shadow overflow-x-auto w-full">
        <table className="w-full text-right min-w-[700px]">
          <thead className="bg-gray-50 border-b">
            <tr>
              <th className="px-6 py-4 text-sm font-semibold text-gray-600">رقم الطلب</th>
              <th className="px-6 py-4 text-sm font-semibold text-gray-600">التاريخ</th>
              <th className="px-6 py-4 text-sm font-semibold text-gray-600">العميل</th>
              <th className="px-6 py-4 text-sm font-semibold text-gray-600">الإجمالي</th>
              <th className="px-6 py-4 text-sm font-semibold text-gray-600">الحالة</th>
              <th className="px-6 py-4 text-sm font-semibold text-gray-600">إجراءات</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-100">
            {state.orders.slice().reverse().map(order => {
              const customer = state.customers.find(c => c.id === order.clientId) || { name: 'غير معروف' };
              return (
                <tr key={order.id} className="hover:bg-gray-50 transition">
                  <td className="px-6 py-4 font-bold text-gray-800">#{order.id}</td>
                  <td className="px-6 py-4 text-sm text-gray-600 whitespace-nowrap">{new Date(order.date).toLocaleDateString('ar-EG')}</td>
                  <td className="px-6 py-4 font-medium text-gray-800">{customer.name}</td>
                  <td className="px-6 py-4 font-bold text-blue-600 whitespace-nowrap">{order.total} ج.م</td>
                  <td className="px-6 py-4">{getStatusBadge(order.status)}</td>
                  <td className="px-6 py-4">
                    <button 
                      onClick={() => setSelectedOrder(order)} 
                      className="bg-blue-50 text-blue-600 px-4 py-2 rounded-lg text-sm font-bold hover:bg-blue-100 transition whitespace-nowrap"
                    >
                      عرض الطلب
                    </button>
                  </td>
                </tr>
              )
            })}
            {state.orders.length === 0 && <tr><td colSpan="6" className="text-center py-10 text-gray-500 font-medium">لا توجد طلبات حالياً</td></tr>}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function AdminCustomers({ state, setters }) {
  const [formData, setFormData] = useState({ id: '', clientId: '', name: '', phone: '', password: '' });

  const handleSave = (e) => {
    e.preventDefault();
    if(formData.id) {
      setters.setCustomers(state.customers.map(c => c.id === formData.id ? formData : c));
    } else {
      setters.setCustomers([...state.customers, { ...formData, id: Date.now().toString() }]);
    }
    setFormData({ id: '', clientId: '', name: '', phone: '', password: '' });
  };

  const handleDelete = (id) => {
    if(confirm('متأكد من حذف العميل؟')) setters.setCustomers(state.customers.filter(c => c.id !== id));
  }

  return (
    <div>
      <h2 className="text-2xl font-bold text-gray-800 mb-6">إدارة العملاء</h2>
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <div className="lg:col-span-1 bg-white p-6 rounded-xl shadow h-fit">
          <h3 className="font-bold mb-4">{formData.id ? 'تعديل عميل' : 'إضافة عميل'}</h3>
          <form onSubmit={handleSave} className="space-y-4">
            <input type="text" placeholder="رقم العميل (للتسجيل)" required value={formData.clientId} onChange={e=>setFormData({...formData, clientId: e.target.value})} className="w-full p-2 border rounded focus:ring-2 focus:ring-blue-500 outline-none" />
            <input type="text" placeholder="اسم الشركة / العميل" required value={formData.name} onChange={e=>setFormData({...formData, name: e.target.value})} className="w-full p-2 border rounded focus:ring-2 focus:ring-blue-500 outline-none" />
            <input type="text" placeholder="رقم الهاتف" required value={formData.phone} onChange={e=>setFormData({...formData, phone: e.target.value})} className="w-full p-2 border rounded focus:ring-2 focus:ring-blue-500 outline-none" />
            <input type="text" placeholder="كلمة المرور" required value={formData.password} onChange={e=>setFormData({...formData, password: e.target.value})} className="w-full p-2 border rounded focus:ring-2 focus:ring-blue-500 outline-none" />
            <div className="flex gap-2">
              <button type="submit" className="flex-1 bg-blue-600 text-white p-2 rounded font-bold">{formData.id ? 'تحديث' : 'إضافة'}</button>
              {formData.id && <button type="button" onClick={() => setFormData({ id: '', clientId: '', name: '', phone: '', password: '' })} className="bg-gray-200 text-gray-700 p-2 rounded font-bold">إلغاء</button>}
            </div>
          </form>
        </div>
        <div className="lg:col-span-2 bg-white rounded-xl shadow overflow-x-auto w-full">
           <table className="w-full text-right min-w-[500px]">
            <thead className="bg-gray-50 border-b">
              <tr>
                <th className="p-4 text-sm font-semibold text-gray-600">رقم العميل</th>
                <th className="p-4 text-sm font-semibold text-gray-600">الاسم</th>
                <th className="p-4 text-sm font-semibold text-gray-600">الهاتف</th>
                <th className="p-4 text-sm font-semibold text-gray-600">الإجراءات</th>
              </tr>
            </thead>
            <tbody>
              {state.customers.map(c => (
                <tr key={c.id} className="border-b hover:bg-gray-50">
                  <td className="p-4 font-mono text-gray-600">{c.clientId}</td>
                  <td className="p-4 font-medium text-gray-800">{c.name}</td>
                  <td className="p-4 text-gray-600" dir="ltr">{c.phone}</td>
                  <td className="p-4 flex gap-2">
                    <button onClick={() => setFormData(c)} className="text-blue-600 p-1 hover:bg-blue-50 rounded"><Edit className="w-4 h-4"/></button>
                    <button onClick={() => handleDelete(c.id)} className="text-red-600 p-1 hover:bg-red-50 rounded"><Trash2 className="w-4 h-4"/></button>
                  </td>
                </tr>
              ))}
            </tbody>
           </table>
        </div>
      </div>
    </div>
  )
}

function AdminCategories({ state, setters }) {
  const [formData, setFormData] = useState({ id: '', name: '' });

  const handleSave = (e) => {
    e.preventDefault();
    if(formData.id) {
      setters.setCategories(state.categories.map(c => c.id === formData.id ? formData : c));
    } else {
      setters.setCategories([...state.categories, { id: Date.now().toString(), name: formData.name }]);
    }
    setFormData({ id: '', name: '' });
  };

  return (
    <div>
      <h2 className="text-2xl font-bold text-gray-800 mb-6 flex items-center gap-2"><Tag className="w-6 h-6"/> إدارة الفئات</h2>
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <div className="bg-white p-6 rounded-xl shadow h-fit">
          <h3 className="font-bold mb-4">{formData.id ? 'تعديل الفئة' : 'إضافة فئة جديدة'}</h3>
          <form onSubmit={handleSave} className="space-y-4">
            <input type="text" placeholder="اسم الفئة" required value={formData.name} onChange={e=>setFormData({...formData, name: e.target.value})} className="w-full p-2 border rounded focus:ring-2 focus:ring-blue-500 outline-none" />
            <div className="flex gap-2">
              <button type="submit" className="flex-1 bg-blue-600 text-white p-2 rounded font-bold">{formData.id ? 'تحديث' : 'إضافة'}</button>
              {formData.id && <button type="button" onClick={() => setFormData({ id: '', name: '' })} className="bg-gray-200 text-gray-700 p-2 rounded font-bold">إلغاء</button>}
            </div>
          </form>
        </div>
        <div className="lg:col-span-2 bg-white rounded-xl shadow overflow-x-auto w-full">
          <table className="w-full text-right min-w-[400px]">
            <thead className="bg-gray-50 border-b">
              <tr><th className="p-4 font-semibold text-gray-600">اسم الفئة</th><th className="p-4 font-semibold text-gray-600">الإجراءات</th></tr>
            </thead>
            <tbody>
              {state.categories.map(c => (
                <tr key={c.id} className="border-b hover:bg-gray-50">
                  <td className="p-4 font-medium text-gray-800">{c.name}</td>
                  <td className="p-4 flex gap-2">
                    <button onClick={() => setFormData(c)} className="text-blue-600 p-2 hover:bg-blue-50 rounded"><Edit className="w-4 h-4"/></button>
                    <button onClick={() => {if(confirm('متأكد من الحذف؟')) setters.setCategories(state.categories.filter(x => x.id !== c.id))}} className="text-red-600 p-2 hover:bg-red-50 rounded"><Trash2 className="w-4 h-4"/></button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

function AdminUnits({ state, setters }) {
  const [formData, setFormData] = useState({ id: '', name: '', pieces: 1 });

  const handleSave = (e) => {
    e.preventDefault();
    if(formData.id) {
      setters.setUnits(state.units.map(u => u.id === formData.id ? formData : u));
    } else {
      setters.setUnits([...state.units, { id: Date.now().toString(), name: formData.name, pieces: formData.pieces }]);
    }
    setFormData({ id: '', name: '', pieces: 1 });
  };

  return (
    <div>
      <h2 className="text-2xl font-bold text-gray-800 mb-6 flex items-center gap-2"><Box className="w-6 h-6"/> إدارة وحدات البيع</h2>
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <div className="bg-white p-6 rounded-xl shadow h-fit">
          <h3 className="font-bold mb-4">{formData.id ? 'تعديل الوحدة' : 'إضافة وحدة جديدة'}</h3>
          <form onSubmit={handleSave} className="space-y-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">اسم الوحدة (كرتونة، بالتة..)</label>
              <input type="text" required value={formData.name} onChange={e=>setFormData({...formData, name: e.target.value})} className="w-full p-2 border rounded focus:ring-2 focus:ring-blue-500 outline-none" />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">عدد القطع بداخلها</label>
              <input type="number" min="1" required value={formData.pieces} onChange={e=>setFormData({...formData, pieces: parseInt(e.target.value) || 1})} className="w-full p-2 border rounded focus:ring-2 focus:ring-blue-500 outline-none" />
            </div>
            <div className="flex gap-2 pt-2">
              <button type="submit" className="flex-1 bg-blue-600 text-white p-2 rounded font-bold">{formData.id ? 'تحديث' : 'إضافة'}</button>
              {formData.id && <button type="button" onClick={() => setFormData({ id: '', name: '', pieces: 1 })} className="bg-gray-200 text-gray-700 p-2 rounded font-bold">إلغاء</button>}
            </div>
          </form>
        </div>
        <div className="lg:col-span-2 bg-white rounded-xl shadow overflow-x-auto w-full">
          <table className="w-full text-right min-w-[400px]">
            <thead className="bg-gray-50 border-b">
              <tr><th className="p-4 font-semibold text-gray-600">اسم الوحدة</th><th className="p-4 font-semibold text-gray-600">عدد القطع بداخلها</th><th className="p-4 font-semibold text-gray-600">الإجراءات</th></tr>
            </thead>
            <tbody>
              {state.units.map(u => (
                <tr key={u.id} className="border-b hover:bg-gray-50">
                  <td className="p-4 font-medium text-gray-800">{u.name}</td>
                  <td className="p-4 text-blue-600 font-bold">{u.pieces} قطعة</td>
                  <td className="p-4 flex gap-2">
                    <button onClick={() => setFormData(u)} className="text-blue-600 p-2 hover:bg-blue-50 rounded"><Edit className="w-4 h-4"/></button>
                    <button onClick={() => {if(confirm('متأكد من الحذف؟')) setters.setUnits(state.units.filter(x => x.id !== u.id))}} className="text-red-600 p-2 hover:bg-red-50 rounded"><Trash2 className="w-4 h-4"/></button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

// --- مكون القائمة المنسدلة الذكية (Searchable Select) ---
function SearchableSelect({ options, value, onChange, placeholder, className }) {
  const [isOpen, setIsOpen] = React.useState(false);
  const [search, setSearch] = React.useState('');
  const wrapperRef = React.useRef(null);

  React.useEffect(() => {
    function handleClickOutside(event) {
      if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
        setIsOpen(false);
      }
    }
    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, [wrapperRef]);

  const selectedOption = options.find(o => o.id === value);
  const filteredOptions = options.filter(o => o.name.toLowerCase().includes(search.toLowerCase()));

  return (
    <div ref={wrapperRef} className="relative w-full">
      <div 
        onClick={() => setIsOpen(!isOpen)}
        className={`flex items-center justify-between cursor-pointer bg-white px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 ${className || ''}`}
      >
        <span className="truncate">{selectedOption ? selectedOption.name : placeholder}</span>
        <svg className="w-4 h-4 text-gray-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7"></path></svg>
      </div>

      {isOpen && (
        <div className="absolute z-50 w-full mt-1 bg-white border border-gray-200 rounded-lg shadow-xl max-h-60 flex flex-col">
          <div className="p-2 border-b border-gray-100 sticky top-0 bg-white rounded-t-lg">
            <input 
              type="text" 
              autoFocus
              placeholder="ابحث هنا..." 
              value={search} 
              onChange={(e) => setSearch(e.target.value)}
              className="w-full px-3 py-1.5 border rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 bg-gray-50"
            />
          </div>
          <div className="overflow-y-auto p-1">
            {filteredOptions.length > 0 ? filteredOptions.map(opt => (
              <div 
                key={opt.id} 
                onClick={() => { onChange(opt.id); setIsOpen(false); setSearch(''); }}
                className={`px-3 py-2 cursor-pointer rounded-md text-sm transition-colors ${value === opt.id ? 'bg-blue-100 text-blue-800 font-bold' : 'hover:bg-blue-50 text-gray-700'}`}
              >
                {opt.name}
              </div>
            )) : (
              <div className="px-3 py-4 text-center text-sm text-gray-500">لا توجد نتائج مطابقة</div>
            )}
          </div>
        </div>
      )}
    </div>
  );
}

function AdminSalesRules({ state, setters }) {
  const [isEditing, setIsEditing] = useState(false);
  const [formData, setFormData] = useState({ id: '', targetProductId: '', conditions: [] });

  const handleAdd = () => {
    setFormData({
      id: Date.now().toString(),
      targetProductId: state.products[0]?.id || '',
      conditions: [{ requiredProductId: state.products[0]?.id || '', type: 'absolute', value: 1 }]
    });
    setIsEditing(true);
  };

  const handleSave = (e) => {
    e.preventDefault();
    if (formData.conditions.length === 0) {
      alert('يجب إضافة شرط واحد على الأقل.');
      return;
    }
    if (formData.conditions.some(c => c.requiredProductId === formData.targetProductId)) {
      alert('لا يمكن ربط المنتج بنفسه كشرط!');
      return;
    }
    
    if(formData.id && state.salesRules.find(r => r.id === formData.id)) {
      setters.setSalesRules(state.salesRules.map(r => r.id === formData.id ? formData : r));
    } else {
      setters.setSalesRules([...state.salesRules, formData]);
    }
    setIsEditing(false);
  };

  const addCondition = () => {
    setFormData({
      ...formData,
      conditions: [...formData.conditions, { requiredProductId: state.products[0]?.id || '', type: 'absolute', value: 1 }]
    });
  };

  const updateCondition = (index, field, value) => {
    const newConditions = [...formData.conditions];
    newConditions[index][field] = value;
    setFormData({ ...formData, conditions: newConditions });
  };

  const removeCondition = (index) => {
    setFormData({
      ...formData,
      conditions: formData.conditions.filter((_, i) => i !== index)
    });
  };

  if (isEditing) {
    return (
      <div className="bg-white rounded-xl shadow p-6 max-w-4xl pb-32">
        <h3 className="text-xl font-bold mb-6">{formData.id && state.salesRules.find(r => r.id === formData.id) ? 'تعديل قاعدة بيع' : 'إضافة قاعدة بيع جديدة'}</h3>
        <form onSubmit={handleSave} className="space-y-6">
          <div className="bg-blue-50 p-4 rounded-xl border border-blue-100 relative z-50">
            <label className="block text-sm font-bold text-gray-800 mb-2">المنتج المشروط (الذي يرغب العميل بشرائه)</label>
            <SearchableSelect 
              options={state.products}
              value={formData.targetProductId}
              onChange={(val) => setFormData({...formData, targetProductId: val})}
              placeholder="ابحث واختر المنتج المشروط..."
            />
          </div>

          <div>
            <h4 className="font-bold text-gray-800 mb-3 flex items-center gap-2"><LinkIcon className="w-5 h-5"/> المنتجات المطلوبة لتفعيل الشراء</h4>
            <div className="space-y-3">
              {formData.conditions.map((cond, idx) => (
                <div key={idx} className="flex flex-wrap items-end gap-3 bg-gray-50 p-4 rounded-lg border border-gray-200 relative" style={{ zIndex: 40 - idx }}>
                  <div className="flex-1 min-w-[200px] w-full md:w-auto">
                    <label className="block text-xs font-bold text-gray-600 mb-1">يجب شراء</label>
                    <SearchableSelect 
                      options={state.products}
                      value={cond.requiredProductId}
                      onChange={(val) => updateCondition(idx, 'requiredProductId', val)}
                      placeholder="ابحث واختر المنتج..."
                    />
                  </div>
                  <div className="w-full md:w-48">
                    <label className="block text-xs font-bold text-gray-600 mb-1">نوع الشرط</label>
                    <select 
                      value={cond.type} 
                      onChange={e => updateCondition(idx, 'type', e.target.value)} 
                      className="w-full px-3 py-2 border rounded focus:ring-2 focus:ring-blue-500 text-sm"
                    >
                      <option value="absolute">كمية ثابتة (أدنى)</option>
                      <option value="ratio">مضاعفات (لكل س من المشروط)</option>
                    </select>
                  </div>
                  <div className="w-full md:w-32">
                    <label className="block text-xs font-bold text-gray-600 mb-1">{cond.type === 'ratio' ? 'المضاعف/الكمية' : 'الكمية المطلوبة'}</label>
                    <input 
                      type="number" min="0.1" step={cond.type === 'ratio' ? "0.1" : "1"}
                      value={cond.value} 
                      onChange={e => updateCondition(idx, 'value', parseFloat(e.target.value) || 1)} 
                      className="w-full px-3 py-2 border rounded focus:ring-2 focus:ring-blue-500 text-sm font-bold"
                    />
                  </div>
                  <button type="button" onClick={() => removeCondition(idx)} className="bg-red-50 text-red-600 p-2.5 rounded hover:bg-red-100 w-full md:w-auto mt-2 md:mt-0 mb-[1px]" title="حذف الشرط">
                    <Trash2 className="w-4 h-4 mx-auto"/>
                  </button>
                </div>
              ))}
            </div>
            <button type="button" onClick={addCondition} className="mt-4 text-sm font-bold text-blue-600 flex items-center gap-1 hover:text-blue-800 bg-blue-50 px-3 py-2 rounded-lg">
              <Plus className="w-4 h-4"/> إضافة منتج مطلوب آخر لنفس القاعدة
            </button>
          </div>

          <div className="flex flex-wrap gap-4 border-t pt-6 relative z-10">
            <button type="submit" className="bg-blue-600 text-white px-6 py-2 rounded-lg font-bold hover:bg-blue-700 flex-1 md:flex-none">حفظ القاعدة</button>
            <button type="button" onClick={() => setIsEditing(false)} className="bg-gray-200 text-gray-700 px-6 py-2 rounded-lg font-bold hover:bg-gray-300 flex-1 md:flex-none">إلغاء</button>
          </div>
        </form>
      </div>
    );
  }

  return (
    <div>
      <div className="flex justify-between items-center mb-6">
        <h2 className="text-2xl font-bold text-gray-800 flex items-center gap-2"><LinkIcon className="w-6 h-6"/> قواعد البيع المتقدمة</h2>
        <button onClick={handleAdd} className="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 font-bold">
          <Plus className="w-5 h-5" /> إضافة قاعدة بيع
        </button>
      </div>

      <div className="bg-white rounded-xl shadow overflow-x-auto w-full">
        <table className="w-full text-right min-w-[600px]">
          <thead className="bg-gray-50 border-b">
            <tr>
              <th className="p-4 font-bold text-gray-600">المنتج المشروط (المراد شراؤه)</th>
              <th className="p-4 font-bold text-gray-600">المنتجات الإلزامية لتفعيل الشراء</th>
              <th className="p-4 font-bold text-gray-600">الإجراءات</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-100">
            {state.salesRules.map(rule => {
              const targetProduct = state.products.find(p => p.id === rule.targetProductId);
              if (!targetProduct) return null;
              
              return (
                <tr key={rule.id} className="hover:bg-gray-50 transition">
                  <td className="p-4 font-bold text-gray-800 text-base md:text-lg border-l whitespace-normal min-w-[200px]">{targetProduct.name}</td>
                  <td className="p-4 space-y-2">
                    {rule.conditions.map((cond, i) => {
                      const reqProduct = state.products.find(p => p.id === cond.requiredProductId);
                      if (!reqProduct) return <div key={i} className="text-red-500 text-sm">منتج محذوف</div>;
                      return (
                        <div key={i} className="text-xs md:text-sm bg-blue-50 text-blue-800 px-3 py-1.5 rounded-lg border border-blue-100 inline-block ml-2 mb-1">
                          <span className="font-bold">يجب شراء:</span> {cond.type === 'ratio' ? `(${cond.value} إضافية لكل قطعة)` : `${cond.value} (كحد أدنى ثابت)`} من "{reqProduct.name}"
                        </div>
                      );
                    })}
                  </td>
                  <td className="p-4 flex gap-2">
                    <button onClick={() => { setFormData(rule); setIsEditing(true); }} className="text-blue-600 p-2 hover:bg-blue-50 rounded"><Edit className="w-4 h-4"/></button>
                    <button onClick={() => {if(confirm('متأكد من حذف القاعدة؟')) setters.setSalesRules(state.salesRules.filter(x => x.id !== rule.id))}} className="text-red-600 p-2 hover:bg-red-50 rounded"><Trash2 className="w-4 h-4"/></button>
                  </td>
                </tr>
              )
            })}
            {state.salesRules.length === 0 && <tr><td colSpan="3" className="text-center py-8 text-gray-500">لا توجد قواعد بيع مسجلة حالياً</td></tr>}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function AdminConstraints({ state, setters }) {
  const [minOrder, setMinOrder] = useState(state.orderConstraints.minOrder);
  const [maxOrder, setMaxOrder] = useState(state.orderConstraints.maxOrder);
  const [msg, setMsg] = useState('');

  const handleSave = (e) => {
    e.preventDefault();
    setters.setOrderConstraints({ minOrder: parseFloat(minOrder) || 0, maxOrder: parseFloat(maxOrder) || 0 });
    setMsg('تم حفظ قيود الطلبات بنجاح!');
    setTimeout(() => setMsg(''), 3000);
  };

  return (
    <div className="max-w-xl bg-white rounded-xl shadow p-8 mx-auto md:mx-0 w-full">
      <h2 className="text-2xl font-bold text-gray-800 mb-6 flex items-center gap-2"><Sliders className="w-6 h-6"/> قيود سلة المشتريات</h2>
      <p className="text-gray-500 mb-6 text-sm">حدد الحد الأدنى والأقصى لقيمة الطلب المسموح للعميل بتأكيده. (أدخل 0 لإلغاء القيد)</p>
      
      {msg && <div className="bg-green-50 text-green-700 p-3 rounded-lg mb-6 text-sm font-bold flex items-center gap-2"><CheckCircle className="w-4 h-4"/> {msg}</div>}
      
      <form onSubmit={handleSave} className="space-y-6">
        <div>
          <label className="block text-sm font-bold text-gray-700 mb-2">الحد الأدنى للطلب (ج.م)</label>
          <input type="number" min="0" value={minOrder} onChange={e=>setMinOrder(e.target.value)} className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none" />
        </div>
        <div>
          <label className="block text-sm font-bold text-gray-700 mb-2">الحد الأقصى للطلب (ج.م)</label>
          <input type="number" min="0" value={maxOrder} onChange={e=>setMaxOrder(e.target.value)} className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none" />
        </div>
        <button type="submit" className="bg-blue-600 text-white px-8 py-3 rounded-lg font-bold hover:bg-blue-700 transition w-full">
          حفظ التعديلات
        </button>
      </form>
    </div>
  );
}

function AdminSettings({ state, setters }) {
  const [username, setUsername] = useState(state.adminCreds.username);
  const [password, setPassword] = useState(state.adminCreds.password);
  const [msg, setMsg] = useState('');

  const handleSave = (e) => {
    e.preventDefault();
    setters.setAdminCreds({ username, password });
    setMsg('تم تحديث بيانات الدخول بنجاح!');
    setTimeout(() => setMsg(''), 3000);
  };

  return (
    <div className="max-w-md bg-white rounded-xl shadow p-8 mx-auto md:mx-0 w-full">
      <h2 className="text-2xl font-bold text-gray-800 mb-6 flex items-center gap-2"><Settings className="w-6 h-6"/> بيانات دخول الإدارة</h2>
      {msg && <div className="bg-green-50 text-green-700 p-3 rounded-lg mb-4 text-sm font-bold flex items-center gap-2"><CheckCircle className="w-4 h-4"/> {msg}</div>}
      <form onSubmit={handleSave} className="space-y-4">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">اسم المستخدم</label>
          <input type="text" required value={username} onChange={e=>setUsername(e.target.value)} className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none" />
        </div>
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-1">كلمة المرور</label>
          <input type="text" required value={password} onChange={e=>setPassword(e.target.value)} className="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 outline-none" />
        </div>
        <button type="submit" className="w-full bg-blue-600 text-white py-2.5 rounded-lg font-bold hover:bg-blue-700 transition mt-2">
          تحديث البيانات
        </button>
      </form>
    </div>
  );
}

// ==========================================
// 3. CLIENT DASHBOARD
// ==========================================
function ClientDashboard({ user, state, setters, onLogout, getProductDetails, calculateItemPrice }) {
  const [activeView, setActiveView] = useState('catalog'); 
  const [toast, setToast] = useState(null);

  const showToast = (message, type = 'success') => {
    setToast({ message, type });
    setTimeout(() => setToast(null), 3500);
  };

  const cartItemsCount = state.cart.reduce((sum, item) => sum + item.quantity, 0);

  return (
    <div className="min-h-screen bg-gray-50 relative pb-20 md:pb-8" dir="rtl">
      {/* Toast Notification */}
      {toast && (
        <div className={`fixed bottom-24 md:bottom-6 left-1/2 transform -translate-x-1/2 px-4 py-3 md:px-6 md:py-3 rounded-xl shadow-2xl flex items-center gap-2 md:gap-3 z-[100] transition-all text-white w-11/12 md:w-auto max-w-md ${toast.type === 'error' ? 'bg-red-600' : 'bg-gray-800'}`}>
          {toast.type === 'error' ? <AlertCircle className="w-5 h-5 text-white shrink-0" /> : <CheckCircle className="w-5 h-5 text-green-400 shrink-0" />}
          <span className="font-medium text-sm md:text-base leading-tight">{toast.message}</span>
        </div>
      )}

      {/* Floating Cart Icon */}
      {activeView !== 'cart' && (
        <button 
          onClick={() => setActiveView('cart')}
          className="fixed bottom-6 left-6 bg-blue-600 text-white p-4 rounded-full shadow-2xl z-[90] hover:bg-blue-700 transition-transform hover:scale-105 flex items-center justify-center animate-bounce-short"
        >
          <ShoppingCart className="w-7 h-7" />
          {cartItemsCount > 0 && (
            <span className="absolute -top-2 -right-2 bg-red-500 text-white text-xs font-bold w-6 h-6 flex items-center justify-center rounded-full border-2 border-white shadow-sm">
              {cartItemsCount}
            </span>
          )}
        </button>
      )}

      {/* Header */}
      <header className="bg-white shadow-sm sticky top-0 z-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16">
            <div className="flex items-center gap-2 cursor-pointer" onClick={() => setActiveView('catalog')}>
              <div className="bg-blue-600 p-1.5 rounded-lg"><Package className="text-white w-6 h-6" /></div>
              <h1 className="font-bold text-xl text-gray-800 hidden md:block">جملتي</h1>
            </div>
            
            <nav className="flex gap-4 md:gap-6">
              <button onClick={() => setActiveView('catalog')} className={`font-medium transition text-sm md:text-base ${activeView === 'catalog' ? 'text-blue-600' : 'text-gray-600 hover:text-blue-600'}`}>المنتجات</button>
              <button onClick={() => setActiveView('orders')} className={`font-medium transition text-sm md:text-base ${activeView === 'orders' ? 'text-blue-600' : 'text-gray-600 hover:text-blue-600'}`}>طلباتي</button>
            </nav>

            <div className="flex items-center gap-3 md:gap-4">
              <button onClick={() => setActiveView('cart')} className="relative p-2 text-gray-600 hover:text-blue-600 transition hidden md:block">
                <ShoppingCart className="w-6 h-6" />
                {cartItemsCount > 0 && (
                  <span className="absolute top-0 right-0 bg-red-500 text-white text-[10px] font-bold px-1.5 py-0.5 rounded-full border-2 border-white">
                    {cartItemsCount}
                  </span>
                )}
              </button>
              <div className="h-8 w-px bg-gray-200 hidden md:block"></div>
              <div className="flex items-center gap-2">
                <div className="text-sm text-left hidden sm:block">
                  <div className="font-medium text-gray-800">{user.name}</div>
                  <div className="text-xs text-gray-500">رقم: {user.clientId}</div>
                </div>
                <button onClick={onLogout} className="text-gray-500 hover:text-red-600 p-2 bg-gray-100 md:bg-transparent rounded-lg"><LogOut className="w-5 h-5"/></button>
              </div>
            </div>
          </div>
        </div>
      </header>

      {/* Main Content */}
      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 md:py-8 w-full overflow-x-hidden">
        {activeView === 'catalog' && <ClientCatalog state={state} setters={setters} getProductDetails={getProductDetails} showToast={showToast} />}
        {activeView === 'cart' && <ClientCart user={user} state={state} setters={setters} getProductDetails={getProductDetails} calculateItemPrice={calculateItemPrice} setActiveView={setActiveView} showToast={showToast} />}
        {activeView === 'orders' && <ClientOrders user={user} state={state} getProductDetails={getProductDetails} />}
      </main>
    </div>
  );
}

// --- Client Sub-views ---

function ClientCatalog({ state, setters, getProductDetails, showToast }) {
  const [selectedCategory, setSelectedCategory] = useState('all');
  const [search, setSearch] = useState('');
  const [visibleCount, setVisibleCount] = useState(12);

  const addToCart = (product, info, quantity) => {
    const existingIndex = state.cart.findIndex(i => i.productId === product.id);
    const currentQtyInCart = existingIndex > -1 ? state.cart[existingIndex].quantity : 0;
    const newTotalQty = currentQtyInCart + quantity;

    if (newTotalQty > info.availableUnits) {
      const remaining = info.availableUnits - currentQtyInCart;
      if (remaining <= 0) {
        showToast(`عفواً، لقد أضفت كامل الكمية المتاحة في المخزون (${info.availableUnits} ${info.unit.name}) مسبقاً!`, 'error');
      } else {
        showToast(`عفواً، المتاح للإضافة هو ${remaining} ${info.unit.name} فقط!`, 'error');
      }
      return;
    }

    if (product.maxPurchaseQty && product.maxPurchaseQty > 0 && newTotalQty > product.maxPurchaseQty) {
      showToast(`عفواً، الحد الأقصى المسموح بشرائه من هذا المنتج هو ${product.maxPurchaseQty} ${info.unit.name}.`, 'error');
      return;
    }

    if (newTotalQty < (product.minPurchaseQty || 1)) {
      showToast(`عفواً، الحد الأدنى لطلب هذا المنتج هو ${product.minPurchaseQty || 1} ${info.unit.name}.`, 'error');
      return;
    }

    let newCart = [...state.cart];
    if (existingIndex > -1) {
      newCart[existingIndex].quantity = newTotalQty;
    } else {
      newCart.push({ productId: product.id, quantity: newTotalQty });
    }
    setters.setCart(newCart);
    showToast(`تمت إضافة ${quantity} من "${product.name}" إلى السلة بنجاح!`, 'success');
  };

  // فلترة المنتجات بناء على البحث والفئة
  const filteredProducts = state.products.filter(p => {
    const matchCat = selectedCategory === 'all' || p.categoryId === selectedCategory;
    const matchSearch = p.name.toLowerCase().includes(search.toLowerCase());
    return matchCat && matchSearch;
  });

  // إعادة ضبط المنتجات المرئية عند تغير معايير البحث
  useEffect(() => {
    setVisibleCount(12);
  }, [search, selectedCategory]);

  // منطق التحميل التدريجي (Infinite Scroll)
  useEffect(() => {
    const handleScroll = () => {
      if (window.innerHeight + document.documentElement.scrollTop >= document.documentElement.offsetHeight - 300) {
        setVisibleCount(prev => prev < filteredProducts.length ? prev + 12 : prev);
      }
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, [filteredProducts.length]);

  const displayedProducts = filteredProducts.slice(0, visibleCount);

  return (
    <div>
      <div className="flex flex-col md:flex-row justify-between items-center gap-4 mb-8">
        <h2 className="text-2xl font-bold text-gray-800 w-full md:w-auto">تصفح المنتجات</h2>
        <div className="flex flex-col md:flex-row gap-3 md:gap-4 w-full md:w-auto">
          <div className="relative flex-1 md:w-72">
            <input 
              type="text" 
              placeholder="ابحث عن منتج بالاسم..." 
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              className="w-full pl-4 pr-10 py-2.5 border rounded-xl focus:ring-2 focus:ring-blue-500 focus:outline-none shadow-sm"
            />
            <Search className="w-5 h-5 text-gray-400 absolute right-3 top-3" />
          </div>
          <select 
            value={selectedCategory} 
            onChange={(e) => setSelectedCategory(e.target.value)}
            className="border rounded-xl px-4 py-2.5 bg-white focus:ring-2 focus:ring-blue-500 focus:outline-none shadow-sm font-medium w-full md:w-48"
          >
            <option value="all">جميع الفئات</option>
            {state.categories.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
          </select>
        </div>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6">
        {displayedProducts.map(p => {
          const info = getProductDetails(p);
          const cartItem = state.cart.find(i => i.productId === p.id);
          const currentCartQty = cartItem ? cartItem.quantity : 0;
          const isOutOfStock = info.availableUnits <= 0;

          return (
            <div key={p.id} className={`bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden transition hover:shadow-md relative ${isOutOfStock ? 'opacity-75' : ''}`}>
              
              {/* مؤشر المنتج داخل السلة المميز */}
              {currentCartQty > 0 && (
                <div className="absolute top-2 left-2 bg-gradient-to-r from-green-500 to-green-600 text-white text-xs font-bold px-3 py-1.5 rounded-full shadow-lg z-20 flex items-center gap-1 border-2 border-white">
                  <ShoppingCart className="w-3.5 h-3.5" />
                  بالسلة: {currentCartQty}
                </div>
              )}

              <div className="h-48 bg-gray-100 relative group">
                <img src={p.image} alt={p.name} className="w-full h-full object-cover mix-blend-multiply p-4 transition-transform group-hover:scale-105" />
                {p.hasOffer && (
                  <div className="absolute top-2 right-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-md shadow z-10">
                    عرض خاص
                  </div>
                )}
                {isOutOfStock && (
                  <div className="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center z-20">
                    <span className="bg-red-600 text-white px-4 py-2 rounded-lg font-bold">نفذت الكمية</span>
                  </div>
                )}
              </div>
              
              <div className="p-4 md:p-5 flex flex-col h-[calc(100%-12rem)] justify-between">
                <div>
                  <div className="flex justify-between items-start mb-1">
                    <div className="text-xs md:text-sm text-blue-600 font-medium">{info.category.name}</div>
                    {p.hasExpiry && (
                      <div className="text-[10px] md:text-xs text-red-500 flex items-center gap-1 font-bold bg-red-50 px-2 py-0.5 rounded">
                        <Calendar className="w-3 h-3" /> انتهاء {p.expiryDate}
                      </div>
                    )}
                  </div>
                  <h3 className="font-bold text-gray-800 text-base md:text-lg mb-2 line-clamp-2" title={p.name}>{p.name}</h3>
                  
                  <div className="flex items-end justify-between mb-4 mt-auto">
                    <div>
                      <div className="text-xl md:text-2xl font-extrabold text-gray-900">{info.unitPrice} <span className="text-sm text-gray-500 font-normal">ج.م</span></div>
                      <div className="text-xs md:text-sm text-gray-500 mb-1">القطعة: {p.piecePrice} ج.م</div>
                      <div className="text-[10px] md:text-xs text-blue-600 bg-blue-50 px-2 py-1 rounded-md inline-block">الوحدة: {info.unit.name} ({info.unit.pieces})</div>
                    </div>
                    <div className="text-left">
                      <div className="text-xs md:text-sm text-gray-500 font-medium bg-gray-50 px-2 py-1 rounded mb-1">
                        متاح: {info.availableUnits}
                      </div>
                    </div>
                  </div>

                  {((p.minPurchaseQty > 1) || (p.maxPurchaseQty > 0)) && (
                    <div className="text-[10px] md:text-xs text-gray-600 flex items-center gap-1 mb-3 bg-gray-100 p-2 rounded-lg">
                      <Info className="w-3.5 h-3.5 text-blue-500 shrink-0"/>
                      <span>
                        {p.minPurchaseQty > 1 && `حد أدنى ${p.minPurchaseQty} `}
                        {p.maxPurchaseQty > 0 && `${p.minPurchaseQty > 1 ? ' | ' : ''}حد أقصى ${p.maxPurchaseQty}`}
                      </span>
                    </div>
                  )}

                  {p.hasOffer && (
                    <div className="bg-red-50 text-red-700 text-xs p-2 rounded-lg mb-4 flex items-start gap-1">
                      <Tag className="w-4 h-4 shrink-0 mt-0.5" />
                      <span>
                        خصم {p.offerType === 'fixed' ? `${p.offerValue} ج.م` : `${p.offerValue}%`} عند شراء {p.offerMinQty} أو أكثر.
                      </span>
                    </div>
                  )}
                </div>

                <ProductAddToCart 
                  isOutOfStock={isOutOfStock} 
                  minQty={p.minPurchaseQty || 1}
                  onAdd={(qty) => addToCart(p, info, qty)} 
                />
              </div>
            </div>
          )
        })}
        {filteredProducts.length === 0 && (
          <div className="col-span-full text-center py-20">
            <Package className="w-16 h-16 text-gray-300 mx-auto mb-4" />
            <h3 className="text-xl font-medium text-gray-500">لا توجد منتجات مطابقة للبحث</h3>
          </div>
        )}
      </div>

      {visibleCount < filteredProducts.length && (
         <div className="text-center py-8 text-gray-500 animate-pulse text-sm font-bold">
           جاري تحميل المزيد من المنتجات...
         </div>
      )}
    </div>
  );
}

function ProductAddToCart({ isOutOfStock, onAdd, minQty }) {
  const [qty, setQty] = useState(minQty);

  useEffect(() => {
    setQty(minQty);
  }, [minQty]);

  const handleAdd = () => {
    onAdd(qty);
    setQty(minQty);
  };

  if (isOutOfStock) {
    return <button disabled className="w-full bg-gray-200 text-gray-500 py-2.5 rounded-xl font-bold cursor-not-allowed mt-2">غير متوفر حالياً</button>;
  }

  return (
    <div className="flex gap-2 mt-2">
      <input 
        type="number" 
        min="1" 
        value={qty} 
        onChange={(e) => setQty(parseInt(e.target.value) || 0)}
        className="w-16 md:w-20 px-2 md:px-3 py-2 border rounded-xl text-center font-medium focus:ring-2 focus:ring-blue-500 outline-none text-lg"
      />
      <button 
        onClick={handleAdd}
        className="flex-1 bg-blue-600 text-white py-2.5 rounded-xl font-bold hover:bg-blue-700 transition flex items-center justify-center gap-2 text-sm md:text-base"
      >
        <ShoppingCart className="w-4 h-4 md:w-5 md:h-5" /> أضف للسلة
      </button>
    </div>
  );
}

function ClientCart({ user, state, setters, getProductDetails, calculateItemPrice, setActiveView, showToast }) {
  const [checkoutError, setCheckoutError] = useState('');

  const updateQty = (productId, newQty) => {
    setCheckoutError('');
    const product = state.products.find(p => p.id === productId);
    const info = getProductDetails(product);

    if(newQty <= 0) {
      setters.setCart(state.cart.filter(i => i.productId !== productId));
      return;
    }
    
    if (newQty > info.availableUnits) {
      showToast(`عفواً، أقصى كمية متاحة في المخزون هي ${info.availableUnits} ${info.unit.name}.`, 'error');
      return;
    }
    if (product.maxPurchaseQty > 0 && newQty > product.maxPurchaseQty) {
      showToast(`عفواً، الحد الأقصى المسموح بشرائه من هذا المنتج هو ${product.maxPurchaseQty} ${info.unit.name}.`, 'error');
      return;
    }
    if (newQty < (product.minPurchaseQty || 1)) {
      showToast(`عفواً، الحد الأدنى لطلب هذا المنتج هو ${product.minPurchaseQty || 1} ${info.unit.name}.`, 'error');
      return;
    }

    setters.setCart(state.cart.map(i => i.productId === productId ? { ...i, quantity: newQty } : i));
  };

  const removeItem = (productId) => {
    setCheckoutError('');
    setters.setCart(state.cart.filter(i => i.productId !== productId));
  };

  const cartDetails = state.cart.map(item => {
    const product = state.products.find(p => p.id === item.productId);
    const info = getProductDetails(product);
    const pricing = calculateItemPrice(info, item.quantity);
    return { item, product, info, pricing };
  });

  const cartTotal = cartDetails.reduce((sum, row) => sum + row.pricing.finalTotal, 0);
  const totalDiscount = cartDetails.reduce((sum, row) => sum + row.pricing.discount, 0);

  const validateSalesRules = () => {
    let errors = [];
    cartDetails.forEach(row => {
      const rule = state.salesRules.find(r => r.targetProductId === row.product.id);
      if (rule) {
        rule.conditions.forEach(cond => {
          const reqProduct = state.products.find(p => p.id === cond.requiredProductId);
          const reqInfo = reqProduct ? getProductDetails(reqProduct) : null;
          const reqCartItem = state.cart.find(i => i.productId === cond.requiredProductId);
          const reqQty = reqCartItem ? reqCartItem.quantity : 0;

          if (reqProduct) {
            if (cond.type === 'absolute') {
              if (reqQty < cond.value) {
                errors.push(`لشراء "${row.product.name}" يجب أن تضيف على الأقل ${cond.value} ${reqInfo.unit.name} من "${reqProduct.name}".`);
              }
            } else if (cond.type === 'ratio') {
              const needed = row.item.quantity * cond.value;
              if (reqQty < needed) {
                errors.push(`لكل 1 ${row.info.unit.name} من "${row.product.name}" يجب إضافة ${cond.value} ${reqInfo.unit.name} من "${reqProduct.name}" (المطلوب: ${needed} | المتاح: ${reqQty}).`);
              }
            }
          }
        });
      }
    });
    return errors;
  };

  const handleCheckout = () => {
    setCheckoutError('');

    const constraints = state.orderConstraints;
    if (constraints.minOrder > 0 && cartTotal < constraints.minOrder) {
      setCheckoutError(`الحد الأدنى للطلب هو ${constraints.minOrder} ج.م. يرجى إضافة المزيد من المنتجات.`);
      window.scrollTo(0, 0);
      return;
    }
    if (constraints.maxOrder > 0 && cartTotal > constraints.maxOrder) {
      setCheckoutError(`الحد الأقصى للطلب هو ${constraints.maxOrder} ج.م. يرجى تعديل سلة المشتريات.`);
      window.scrollTo(0, 0);
      return;
    }

    const ruleErrors = validateSalesRules();
    if (ruleErrors.length > 0) {
      setCheckoutError(ruleErrors.join('|'));
      window.scrollTo(0, 0);
      return;
    }

    let isValid = true;
    let outOfStockItem = '';
    
    for(let row of cartDetails) {
      if(row.item.quantity > row.info.availableUnits) {
        isValid = false; outOfStockItem = row.product.name; break;
      }
    }

    if(!isValid) {
      setCheckoutError(`عذراً، الكمية المطلوبة من "${outOfStockItem}" لم تعد متوفرة في المخزون بالكامل.`);
      return;
    }

    const newOrder = {
      id: Date.now().toString(),
      clientId: user.id,
      date: new Date().toISOString(),
      status: 'pending',
      total: cartTotal,
      items: cartDetails.map(row => ({
        productId: row.product.id,
        quantity: row.item.quantity,
        price: row.info.unitPrice,
        discount: row.pricing.discount,
        finalTotal: row.pricing.finalTotal
      }))
    };

    let updatedProducts = [...state.products];
    cartDetails.forEach(row => {
      const productIndex = updatedProducts.findIndex(p => p.id === row.product.id);
      if(productIndex > -1) {
         updatedProducts[productIndex].stockPieces -= (row.item.quantity * row.info.unit.pieces);
      }
    });

    setters.setProducts(updatedProducts);
    setters.setOrders([...state.orders, newOrder]);
    setters.setCart([]);
    showToast('تم إرسال طلب الشراء الخاص بك بنجاح!', 'success');
    setActiveView('orders');
    window.scrollTo(0,0);
  };

  if (state.cart.length === 0) {
    return (
      <div className="text-center py-20 bg-white rounded-2xl shadow-sm border border-gray-100 mx-4 md:mx-0">
        <ShoppingCart className="w-16 h-16 md:w-20 md:h-20 text-gray-200 mx-auto mb-6" />
        <h2 className="text-xl md:text-2xl font-bold text-gray-800 mb-2">سلة المشتريات فارغة</h2>
        <p className="text-gray-500 mb-6 text-sm md:text-base">قم بتصفح المنتجات وإضافتها للسلة لإنشاء طلب شراء.</p>
        <button onClick={() => setActiveView('catalog')} className="bg-blue-600 text-white px-8 py-3 rounded-xl font-bold hover:bg-blue-700">تصفح المنتجات</button>
      </div>
    );
  }

  return (
    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 md:gap-8">
      <div className="lg:col-span-2 space-y-4">
        <h2 className="text-xl md:text-2xl font-bold text-gray-800 mb-4 px-2 md:px-0">مراجعة سلة المشتريات</h2>
        {cartDetails.map((row, idx) => (
          <div key={idx} className="bg-white p-4 rounded-2xl shadow-sm border border-gray-100 flex flex-col sm:flex-row items-center gap-4 relative">
            <button onClick={() => removeItem(row.product.id)} className="absolute top-4 left-4 text-gray-300 hover:text-red-500 bg-gray-50 p-1.5 md:p-2 rounded-lg transition-colors">
               <Trash2 className="w-4 h-4 md:w-5 md:h-5" />
            </button>
            <img src={row.product.image} className="w-20 h-20 md:w-24 md:h-24 object-cover rounded-xl bg-gray-50 p-2 shrink-0" />
            <div className="flex-1 w-full mt-2 sm:mt-0">
              <div className="pr-2 sm:pr-0">
                <h3 className="font-bold text-gray-800 text-base md:text-lg leading-tight w-11/12">{row.product.name}</h3>
                <div className="text-sm text-gray-500 mt-1">{row.info.unitPrice} ج.م / {row.info.unit.name}</div>
              </div>
              
              <div className="flex justify-between items-end mt-4">
                <div className="flex items-center gap-2 md:gap-3 bg-gray-50 p-1 rounded-lg border">
                  <button onClick={() => updateQty(row.product.id, row.item.quantity + 1)} className="p-1 md:p-1.5 hover:bg-white rounded shadow-sm text-gray-600"><Plus className="w-3 h-3 md:w-4 md:h-4"/></button>
                  <span className="font-bold w-6 md:w-8 text-center text-sm md:text-base">{row.item.quantity}</span>
                  <button onClick={() => updateQty(row.product.id, row.item.quantity - 1)} className="p-1 md:p-1.5 hover:bg-white rounded shadow-sm text-gray-600"><div className="w-3 md:w-4 h-0.5 bg-current"></div></button>
                </div>
                
                <div className="text-left">
                  {row.pricing.discount > 0 && (
                    <div className="text-[10px] md:text-xs text-red-500 line-through mb-0.5">{row.pricing.subtotal} ج.م</div>
                  )}
                  <div className="text-lg md:text-xl font-black text-blue-600 leading-none">{row.pricing.finalTotal} ج.م</div>
                  {row.pricing.discount > 0 && (
                    <div className="text-[10px] font-bold text-green-600 bg-green-50 px-2 py-0.5 rounded mt-1 inline-block">
                      خصم {row.pricing.discount} ج.م
                    </div>
                  )}
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>

      <div className="lg:col-span-1">
        <div className="bg-white p-5 md:p-6 rounded-2xl shadow-sm border border-gray-100 md:sticky md:top-24">
          <h3 className="font-bold text-lg md:text-xl border-b pb-4 mb-4">ملخص الطلب</h3>
          
          <div className="space-y-3 mb-6 text-gray-600 text-sm md:text-base">
            <div className="flex justify-between">
              <span>الإجمالي الفرعي</span>
              <span className="font-bold">{cartTotal + totalDiscount} ج.م</span>
            </div>
            {totalDiscount > 0 && (
              <div className="flex justify-between text-green-600 font-medium bg-green-50 p-2 rounded">
                <span>إجمالي الخصومات</span>
                <span>- {totalDiscount} ج.م</span>
              </div>
            )}
            <div className="pt-4 border-t flex justify-between items-center">
              <span className="font-bold text-gray-800 text-base md:text-lg">الإجمالي النهائي</span>
              <span className="font-black text-xl md:text-2xl text-blue-600">{cartTotal} ج.م</span>
            </div>
          </div>

          {checkoutError && (
            <div className="bg-red-50 text-red-700 p-4 rounded-xl text-sm font-bold mb-6 border border-red-200">
              <div className="flex items-center gap-2 mb-2">
                <AlertCircle className="w-5 h-5 shrink-0 text-red-600" />
                <span className="text-base">تنبيه: راجع القواعد لتأكيد الطلب</span>
              </div>
              <ul className="list-disc list-inside space-y-2 text-red-600 leading-relaxed pr-2">
                {checkoutError.split('|').map((err, i) => (
                  <li key={i}>{err.trim()}</li>
                ))}
              </ul>
            </div>
          )}

          <div className="bg-blue-50 text-blue-800 p-3 rounded-lg text-xs md:text-sm flex items-start gap-2 mb-6">
            <AlertCircle className="w-5 h-5 shrink-0 mt-0.5" />
            <p className="leading-relaxed">بمجرد تأكيد الطلب، سيتم حجز الكميات الخاصة بك من المخزون فوراً ولن يتمكن أحد من شرائها.</p>
          </div>

          <button 
            onClick={handleCheckout}
            className="w-full bg-blue-600 text-white py-3.5 md:py-4 rounded-xl font-bold text-base md:text-lg hover:bg-blue-700 shadow-lg shadow-blue-200 transition active:scale-95"
          >
            تأكيد وإنشاء طلب الشراء
          </button>
        </div>
      </div>
    </div>
  );
}

function ClientOrders({ user, state, getProductDetails }) {
  const [selectedOrder, setSelectedOrder] = useState(null);
  const myOrders = state.orders.filter(o => o.clientId === user.id).sort((a,b) => b.id - a.id);

  const getStatusInfo = (status) => {
    switch(status) {
      case 'pending': return { label: 'قيد المراجعة', color: 'text-yellow-600 bg-yellow-50 border-yellow-200', icon: Clock };
      case 'processing': return { label: 'جاري التجهيز', color: 'text-blue-600 bg-blue-50 border-blue-200', icon: Package };
      case 'shipped': return { label: 'في الطريق', color: 'text-purple-600 bg-purple-50 border-purple-200', icon: ChevronRight };
      case 'delivered': return { label: 'مكتمل', color: 'text-green-600 bg-green-50 border-green-200', icon: CheckCircle };
      case 'cancelled': return { label: 'ملغي', color: 'text-red-600 bg-red-50 border-red-200', icon: XCircle };
      default: return { label: 'غير معروف', color: 'text-gray-600 bg-gray-50 border-gray-200', icon: Clock };
    }
  };

  if(myOrders.length === 0) {
    return (
      <div className="text-center py-20 bg-white rounded-2xl shadow-sm border border-gray-100 mx-4 md:mx-0">
        <ListOrdered className="w-16 h-16 md:w-20 md:h-20 text-gray-200 mx-auto mb-6" />
        <h2 className="text-xl md:text-2xl font-bold text-gray-800 mb-2">لا توجد طلبات سابقة</h2>
        <p className="text-gray-500 text-sm md:text-base">لم تقم بإنشاء أي طلبات شراء حتى الآن.</p>
      </div>
    )
  }

  if (selectedOrder) {
    const statusInfo = getStatusInfo(selectedOrder.status);
    const StatusIcon = statusInfo.icon;
    
    return (
      <div className="max-w-4xl mx-auto px-2 md:px-0">
        <button onClick={() => setSelectedOrder(null)} className="mb-6 flex items-center gap-2 text-gray-600 hover:text-blue-600 transition font-bold text-sm md:text-base">
          <ChevronRight className="w-4 h-4 md:w-5 md:h-5" /> عودة لقائمة الطلبات
        </button>
        <div className="bg-white rounded-2xl shadow-md border-t-4 border-blue-600 overflow-hidden">
          <div className="p-4 md:p-6 border-b flex flex-col md:flex-row md:flex-wrap justify-between items-start gap-4">
            <div>
              <h3 className="font-bold text-xl md:text-2xl text-gray-800">طلب #{selectedOrder.id}</h3>
              <div className="text-gray-500 mt-2 font-medium flex items-center gap-2 text-sm md:text-base">
                <Clock className="w-4 h-4"/> تم الإنشاء: {new Date(selectedOrder.date).toLocaleString('ar-EG')}
              </div>
            </div>
            <div className={`px-4 py-2 rounded-xl border flex items-center gap-2 font-bold text-sm md:text-base w-full md:w-auto justify-center md:justify-start ${statusInfo.color}`}>
              <StatusIcon className="w-4 h-4 md:w-5 md:h-5" />
              {statusInfo.label}
            </div>
          </div>
          
          <div className="p-4 md:p-6 space-y-4">
            <h4 className="font-bold text-gray-800 text-base md:text-lg">تفاصيل المنتجات:</h4>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {selectedOrder.items.map((item, idx) => {
                const product = state.products.find(p => p.id === item.productId);
                if(!product) return <div key={idx} className="bg-gray-50 p-4 rounded-xl border text-red-500">منتج غير متوفر</div>;
                const info = getProductDetails(product);
                return (
                  <div key={idx} className="flex justify-between items-center bg-gray-50 p-3 md:p-4 rounded-xl border">
                    <div className="flex gap-3 md:gap-4 items-center">
                      <img src={product.image} className="w-12 h-12 md:w-14 md:h-14 rounded-lg object-cover bg-white p-1 shadow-sm shrink-0" />
                      <div>
                        <div className="font-bold text-gray-800 text-sm md:text-base line-clamp-2">{product.name}</div>
                        <div className="text-gray-500 text-xs md:text-sm mt-1">{item.quantity} {info.unit.name} x {item.price} ج.م</div>
                      </div>
                    </div>
                    <div className="text-left shrink-0 ml-2">
                      <div className="font-black text-blue-600 text-base md:text-lg">{item.finalTotal} ج.م</div>
                      {item.discount > 0 && <div className="text-[10px] md:text-xs font-bold text-red-500 bg-red-50 px-2 py-1 rounded mt-1">خصم: {item.discount} ج.م</div>}
                    </div>
                  </div>
                )
              })}
            </div>
          </div>
          <div className="bg-blue-50 p-4 md:p-6 border-t border-blue-100 flex justify-between items-center">
            <span className="text-lg md:text-xl font-bold text-gray-800">الإجمالي النهائي</span>
            <span className="text-2xl md:text-3xl font-black text-blue-600">{selectedOrder.total} ج.م</span>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="max-w-4xl mx-auto px-2 md:px-0">
      <h2 className="text-xl md:text-2xl font-bold text-gray-800 mb-6">متابعة طلبات الشراء</h2>
      <div className="bg-white rounded-xl shadow overflow-x-auto w-full">
        <table className="w-full text-right min-w-[600px]">
          <thead className="bg-gray-50 border-b">
            <tr>
              <th className="px-4 py-4 text-sm font-semibold text-gray-600">رقم الطلب</th>
              <th className="px-4 py-4 text-sm font-semibold text-gray-600">التاريخ</th>
              <th className="px-4 py-4 text-sm font-semibold text-gray-600">الإجمالي</th>
              <th className="px-4 py-4 text-sm font-semibold text-gray-600">الحالة</th>
              <th className="px-4 py-4 text-sm font-semibold text-gray-600">إجراءات</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-100">
            {myOrders.map(order => {
              const statusInfo = getStatusInfo(order.status);
              const StatusIcon = statusInfo.icon;
              return (
                <tr key={order.id} className="hover:bg-gray-50 transition">
                  <td className="px-4 py-4 font-bold text-gray-800">#{order.id}</td>
                  <td className="px-4 py-4 text-xs md:text-sm text-gray-600 whitespace-nowrap">{new Date(order.date).toLocaleDateString('ar-EG')}</td>
                  <td className="px-4 py-4 font-bold text-blue-600 whitespace-nowrap">{order.total} ج.م</td>
                  <td className="px-4 py-4">
                    <span className={`px-2 py-1 md:px-3 md:py-1 rounded-full border flex items-center gap-1 w-max font-bold text-[10px] md:text-xs ${statusInfo.color}`}>
                      <StatusIcon className="w-3 h-3" /> {statusInfo.label}
                    </span>
                  </td>
                  <td className="px-4 py-4">
                    <button 
                      onClick={() => setSelectedOrder(order)} 
                      className="bg-blue-50 text-blue-600 px-3 py-1.5 md:px-4 md:py-2 rounded-lg text-xs md:text-sm font-bold hover:bg-blue-100 transition whitespace-nowrap"
                    >
                      عرض الطلب
                    </button>
                  </td>
                </tr>
              )
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}