import React, { useState, useEffect } from 'react';
import { ShoppingBag, X, Menu, Search, Star, Plus, Minus, Trash2, ArrowRight, ArrowLeft } from 'lucide-react';

// --- البيانات الوهمية للمنتجات (Mock Data) ---
const PRODUCTS = [
  {
    id: 1,
    name: 'ساعة كلاسيكية فاخرة',
    price: 1250,
    category: 'إكسسوارات',
    image: 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?auto=format&fit=crop&w=800&q=80',
    description: 'ساعة يد كلاسيكية بتصميم عصري يناسب جميع المناسبات. مصنوعة من مواد عالية الجودة لتدوم طويلاً.',
    rating: 4.8
  },
  {
    id: 2,
    name: 'حقيبة جلدية أصلية',
    price: 850,
    category: 'حقائب',
    image: 'https://images.unsplash.com/photo-1584916201218-f4242ceb4809?auto=format&fit=crop&w=800&q=80',
    description: 'حقيبة يد نسائية من الجلد الطبيعي. تتميز بمساحة داخلية واسعة وتصميم أنيق يضفي لمسة من الرقي على إطلالتك.',
    rating: 4.9
  },
  {
    id: 3,
    name: 'عطر ليالي الشرق',
    price: 450,
    category: 'عطور',
    image: 'https://images.unsplash.com/photo-1594035910387-fea47794261f?auto=format&fit=crop&w=800&q=80',
    description: 'عطر جذاب يمزج بين نفحات العود الأصيل والورد الجوري. يدوم طويلاً ويمنحك ثقة لا مثيل لها.',
    rating: 4.7
  },
  {
    id: 4,
    name: 'نظارات شمسية عصرية',
    price: 320,
    category: 'إكسسوارات',
    image: 'https://images.unsplash.com/photo-1511499767150-a48a237f0083?auto=format&fit=crop&w=800&q=80',
    description: 'نظارات شمسية بعدسات مستقطبة لحماية فائقة من أشعة الشمس، مع إطار معدني خفيف الوزن ومريح.',
    rating: 4.5
  },
  {
    id: 5,
    name: 'محفظة بطاقات ذكية',
    price: 180,
    category: 'محافظ',
    image: 'https://images.unsplash.com/photo-1627123424574-724758594e93?auto=format&fit=crop&w=800&q=80',
    description: 'محفظة رفيعة جداً تتسع لـ 6 بطاقات مع حماية RFID ضد السرقة الإلكترونية.',
    rating: 4.6
  },
  {
    id: 6,
    name: 'سوار ذهبي ناعم',
    price: 950,
    category: 'مجوهرات',
    image: 'https://images.unsplash.com/photo-1611591437281-460bfbe1220a?auto=format&fit=crop&w=800&q=80',
    description: 'سوار من الذهب عيار 18 بتصميم بسيط وناعم، مثالي كهدية لمن تحب.',
    rating: 4.9
  }
];

export default function App() {
  const [cart, setCart] = useState([]);
  const [isCartOpen, setIsCartOpen] = useState(false);
  const [selectedProduct, setSelectedProduct] = useState(null);
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  // --- دوال السلة (Cart Functions) ---
  const addToCart = (product) => {
    setCart((prevCart) => {
      const existingItem = prevCart.find((item) => item.id === product.id);
      if (existingItem) {
        return prevCart.map((item) =>
          item.id === product.id ? { ...item, quantity: item.quantity + 1 } : item
        );
      }
      return [...prevCart, { ...product, quantity: 1 }];
    });
    setIsCartOpen(true); // افتح السلة تلقائياً عند إضافة منتج
  };

  const removeFromCart = (productId) => {
    setCart((prevCart) => prevCart.filter((item) => item.id !== productId));
  };

  const updateQuantity = (productId, delta) => {
    setCart((prevCart) =>
      prevCart.map((item) => {
        if (item.id === productId) {
          const newQuantity = Math.max(1, item.quantity + delta);
          return { ...item, quantity: newQuantity };
        }
        return item;
      })
    );
  };

  const cartTotal = cart.reduce((total, item) => total + item.price * item.quantity, 0);
  const cartItemsCount = cart.reduce((count, item) => count + item.quantity, 0);

  // إغلاق النوافذ المنبثقة عند الضغط على زر الهروب (Escape)
  useEffect(() => {
    const handleEsc = (e) => {
      if (e.key === 'Escape') {
        setIsCartOpen(false);
        setSelectedProduct(null);
      }
    };
    window.addEventListener('keydown', handleEsc);
    return () => window.removeEventListener('keydown', handleEsc);
  }, []);

  // --- المكونات الداخلية (Sub-components) ---

  // 1. شريط التنقل (Navbar)
  const Navbar = () => (
    <nav className="sticky top-0 z-40 bg-white/90 backdrop-blur-md border-b border-gray-100 shadow-sm">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center h-20">
          <div className="flex items-center">
            <button 
              onClick={() => setIsMenuOpen(!isMenuOpen)}
              className="p-2 -ml-2 mr-2 text-gray-600 hover:text-black md:hidden"
            >
              <Menu size={24} />
            </button>
            <span className="text-2xl font-bold tracking-wider text-gray-900 cursor-pointer">
              أناقة<span className="text-amber-600">.</span>
            </span>
          </div>

          <div className="hidden md:flex space-x-8 space-x-reverse">
            <a href="#" className="text-gray-800 font-medium hover:text-amber-600 transition">الرئيسية</a>
            <a href="#" className="text-gray-500 hover:text-amber-600 transition">المتجر</a>
            <a href="#" className="text-gray-500 hover:text-amber-600 transition">المجموعات</a>
            <a href="#" className="text-gray-500 hover:text-amber-600 transition">من نحن</a>
          </div>

          <div className="flex items-center space-x-4 space-x-reverse">
            <button className="text-gray-600 hover:text-black transition p-2">
              <Search size={22} />
            </button>
            <button 
              className="text-gray-600 hover:text-black transition p-2 relative"
              onClick={() => setIsCartOpen(true)}
            >
              <ShoppingBag size={22} />
              {cartItemsCount > 0 && (
                <span className="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-white transform translate-x-1/4 -translate-y-1/4 bg-amber-600 rounded-full">
                  {cartItemsCount}
                </span>
              )}
            </button>
          </div>
        </div>
      </div>
    </nav>
  );

  // 2. القسم الرئيسي (Hero Section)
  const Hero = () => (
    <div className="relative bg-gray-50 h-[70vh] flex items-center justify-center overflow-hidden">
      <div className="absolute inset-0 z-0">
        <img 
          src="https://images.unsplash.com/photo-1441986300917-64674bd600d8?auto=format&fit=crop&w=1600&q=80" 
          alt="صورة الغلاف" 
          className="w-full h-full object-cover opacity-90"
        />
        <div className="absolute inset-0 bg-gradient-to-r from-black/70 to-black/30 rtl:from-black/30 rtl:to-black/70"></div>
      </div>
      
      <div className="relative z-10 text-center px-4 max-w-3xl mx-auto mt-10">
        <span className="block text-amber-500 text-sm md:text-base font-semibold tracking-widest uppercase mb-4">
          تشكيلة صيف 2026
        </span>
        <h1 className="text-4xl md:text-6xl font-bold text-white mb-6 leading-tight">
          اكتشف البساطة <br/> في أبهى صورها
        </h1>
        <p className="text-gray-200 text-lg md:text-xl mb-8 max-w-2xl mx-auto">
          تسوق الآن أحدث المنتجات المصممة بعناية لتناسب ذوقك الرفيع. جودة لا تضاهى وتصاميم تخطف الأنظار.
        </p>
        <button 
          onClick={() => window.scrollTo({top: window.innerHeight * 0.7, behavior: 'smooth'})}
          className="bg-white text-gray-900 px-8 py-4 rounded-none font-semibold hover:bg-gray-100 transition duration-300 shadow-lg"
        >
          تسوق المجموعة
        </button>
      </div>
    </div>
  );

  // 3. سلة المشتريات (Cart Drawer)
  const CartDrawer = () => (
    <>
      {/* خلفية معتمة */}
      {isCartOpen && (
        <div 
          className="fixed inset-0 bg-black/50 z-50 transition-opacity"
          onClick={() => setIsCartOpen(false)}
        />
      )}
      
      {/* السلة */}
      <div 
        className={`fixed top-0 bottom-0 left-0 w-full md:w-[400px] bg-white z-50 shadow-2xl transform transition-transform duration-300 ease-in-out flex flex-col ${
          isCartOpen ? 'translate-x-0' : '-translate-x-full'
        }`}
      >
        <div className="p-6 border-b flex justify-between items-center bg-gray-50">
          <div className="flex items-center gap-3">
            <ShoppingBag className="text-amber-600" />
            <h2 className="text-xl font-bold text-gray-900">سلة المشتريات</h2>
          </div>
          <button 
            onClick={() => setIsCartOpen(false)}
            className="p-2 text-gray-500 hover:text-red-500 hover:bg-red-50 rounded-full transition"
          >
            <X size={24} />
          </button>
        </div>

        <div className="flex-1 overflow-y-auto p-6">
          {cart.length === 0 ? (
            <div className="h-full flex flex-col items-center justify-center text-gray-400">
              <ShoppingBag size={64} className="mb-4 opacity-20" />
              <p className="text-lg">سلتك فارغة حالياً</p>
              <button 
                onClick={() => setIsCartOpen(false)}
                className="mt-6 text-amber-600 font-medium hover:underline"
              >
                مواصلة التسوق
              </button>
            </div>
          ) : (
            <div className="space-y-6">
              {cart.map((item) => (
                <div key={item.id} className="flex gap-4 border-b pb-4">
                  <div className="w-24 h-24 bg-gray-100 rounded overflow-hidden flex-shrink-0">
                    <img src={item.image} alt={item.name} className="w-full h-full object-cover" />
                  </div>
                  <div className="flex-1 flex flex-col">
                    <div className="flex justify-between">
                      <h3 className="font-semibold text-gray-800 line-clamp-1">{item.name}</h3>
                      <button 
                        onClick={() => removeFromCart(item.id)}
                        className="text-gray-400 hover:text-red-500 transition"
                      >
                        <Trash2 size={18} />
                      </button>
                    </div>
                    <p className="text-gray-500 text-sm mb-auto">{item.category}</p>
                    <div className="flex justify-between items-end mt-2">
                      <span className="font-bold text-gray-900">{item.price} ر.س</span>
                      
                      <div className="flex items-center border border-gray-200 rounded">
                        <button 
                          onClick={() => updateQuantity(item.id, -1)}
                          className="px-2 py-1 text-gray-600 hover:bg-gray-100 transition"
                        >
                          <Minus size={16} />
                        </button>
                        <span className="px-4 text-sm font-medium">{item.quantity}</span>
                        <button 
                          onClick={() => updateQuantity(item.id, 1)}
                          className="px-2 py-1 text-gray-600 hover:bg-gray-100 transition"
                        >
                          <Plus size={16} />
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>

        {cart.length > 0 && (
          <div className="p-6 bg-gray-50 border-t border-gray-200">
            <div className="flex justify-between items-center mb-4">
              <span className="text-gray-600">المجموع الفرعي:</span>
              <span className="text-2xl font-bold text-gray-900">{cartTotal} ر.س</span>
            </div>
            <p className="text-sm text-gray-500 mb-6">الضرائب ورسوم التوصيل تحسب عند الدفع.</p>
            <button className="w-full bg-gray-900 text-white py-4 font-semibold hover:bg-gray-800 transition flex justify-center items-center gap-2">
              إتمام الطلب بأمان <ArrowLeft size={18} />
            </button>
          </div>
        )}
      </div>
    </>
  );

  // 4. نافذة تفاصيل المنتج (Product Modal with Cross-selling)
  const ProductModal = () => {
    if (!selectedProduct) return null;

    // منتجات مقترحة (استبعاد المنتج الحالي واختيار 3 عشوائياً أو أول 3)
    const relatedProducts = PRODUCTS.filter(p => p.id !== selectedProduct.id).slice(0, 3);

    return (
      <div className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6">
        <div 
          className="absolute inset-0 bg-black/60 backdrop-blur-sm transition-opacity"
          onClick={() => setSelectedProduct(null)}
        />
        
        <div className="relative bg-white w-full max-w-5xl max-h-[90vh] overflow-y-auto rounded-xl shadow-2xl flex flex-col animate-in fade-in zoom-in-95 duration-200">
          <button 
            onClick={() => setSelectedProduct(null)}
            className="absolute top-4 right-4 z-10 p-2 bg-white/80 hover:bg-white rounded-full text-gray-800 shadow-sm transition"
          >
            <X size={24} />
          </button>

          <div className="flex flex-col md:flex-row">
            {/* صورة المنتج */}
            <div className="w-full md:w-1/2 h-[400px] md:h-auto bg-gray-100">
              <img 
                src={selectedProduct.image} 
                alt={selectedProduct.name} 
                className="w-full h-full object-cover"
              />
            </div>

            {/* تفاصيل المنتج */}
            <div className="w-full md:w-1/2 p-8 md:p-12 flex flex-col justify-center">
              <span className="text-amber-600 text-sm font-medium tracking-wider mb-2">
                {selectedProduct.category}
              </span>
              <h2 className="text-3xl font-bold text-gray-900 mb-4">{selectedProduct.name}</h2>
              
              <div className="flex items-center gap-2 mb-6">
                <div className="flex text-amber-400">
                  {[...Array(5)].map((_, i) => (
                    <Star key={i} size={18} fill={i < Math.floor(selectedProduct.rating) ? "currentColor" : "none"} />
                  ))}
                </div>
                <span className="text-gray-500 text-sm">({selectedProduct.rating}) تقييمات</span>
              </div>

              <p className="text-3xl font-light text-gray-900 mb-8">
                {selectedProduct.price} <span className="text-xl text-gray-500">ر.س</span>
              </p>

              <p className="text-gray-600 leading-relaxed mb-8">
                {selectedProduct.description}
              </p>

              <div className="flex gap-4 mt-auto">
                <button 
                  onClick={() => {
                    addToCart(selectedProduct);
                    setSelectedProduct(null); // اختياري: إغلاق النافذة بعد الإضافة
                  }}
                  className="flex-1 bg-gray-900 text-white py-4 px-6 font-semibold rounded hover:bg-gray-800 transition shadow-lg flex items-center justify-center gap-2"
                >
                  <ShoppingBag size={20} />
                  إضافة إلى السلة
                </button>
              </div>

              {/* ضمانات / مميزات سريعة */}
              <div className="mt-8 pt-8 border-t border-gray-100 grid grid-cols-2 gap-4 text-sm text-gray-500">
                <div className="flex items-center gap-2"><ArrowLeft size={16} className="text-amber-600"/> توصيل مجاني وسريع</div>
                <div className="flex items-center gap-2"><ArrowLeft size={16} className="text-amber-600"/> ضمان استرجاع 14 يوم</div>
                <div className="flex items-center gap-2"><ArrowLeft size={16} className="text-amber-600"/> دفع آمن 100%</div>
                <div className="flex items-center gap-2"><ArrowLeft size={16} className="text-amber-600"/> منتجات أصلية مضمونة</div>
              </div>
            </div>
          </div>

          {/* قسم الإعلانات والمنتجات المقترحة (Cross-selling) */}
          <div className="bg-gray-50 p-8 border-t border-gray-200 rounded-b-xl">
            <h3 className="text-xl font-bold text-gray-900 mb-6 text-center">أكمل أناقتك - قد يعجبك أيضاً</h3>
            <div className="grid grid-cols-1 sm:grid-cols-3 gap-6">
              {relatedProducts.map(product => (
                <div key={product.id} className="bg-white p-4 rounded-lg shadow-sm group cursor-pointer border border-transparent hover:border-amber-200 transition"
                     onClick={() => setSelectedProduct(product)}
                >
                  <div className="h-40 w-full mb-4 overflow-hidden rounded">
                    <img src={product.image} alt={product.name} className="w-full h-full object-cover group-hover:scale-105 transition duration-500" />
                  </div>
                  <h4 className="font-semibold text-gray-800 line-clamp-1">{product.name}</h4>
                  <p className="text-amber-600 font-medium mt-2">{product.price} ر.س</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    );
  };

  return (
    <div dir="rtl" className="min-h-screen bg-white font-sans text-gray-900 selection:bg-amber-100 selection:text-amber-900">
      <Navbar />
      <Hero />
      <CartDrawer />
      <ProductModal />

      {/* قسم المنتجات (Products Grid) */}
      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
        <div className="flex justify-between items-end mb-12">
          <div>
            <h2 className="text-3xl font-bold text-gray-900 mb-2">وصل حديثاً</h2>
            <p className="text-gray-500">تسوق أحدث المنتجات المضافة لمتجرنا</p>
          </div>
          <button className="hidden sm:flex items-center text-amber-600 font-medium hover:text-amber-700 transition">
            عرض الكل <ArrowLeft size={18} className="mr-1" />
          </button>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-10">
          {PRODUCTS.map((product) => (
            <div key={product.id} className="group relative">
              {/* بطاقة المنتج */}
              <div className="relative aspect-[4/5] bg-gray-100 overflow-hidden mb-4">
                <img 
                  src={product.image} 
                  alt={product.name}
                  className="w-full h-full object-cover object-center group-hover:scale-105 transition-transform duration-700 ease-in-out"
                />
                
                {/* تأثير الظهور عند التمرير (Hover Overlay) */}
                <div className="absolute inset-0 bg-black/10 group-hover:bg-black/20 transition-colors duration-300" />
                
                <div className="absolute bottom-0 left-0 right-0 p-4 translate-y-full group-hover:translate-y-0 transition-transform duration-300 ease-in-out flex gap-2">
                  <button 
                    onClick={() => addToCart(product)}
                    className="flex-1 bg-white text-gray-900 py-3 font-medium hover:bg-gray-100 transition shadow-lg flex items-center justify-center gap-2"
                  >
                    <ShoppingBag size={18} /> أضف للسلة
                  </button>
                  <button 
                    onClick={() => setSelectedProduct(product)}
                    className="bg-gray-900 text-white p-3 hover:bg-gray-800 transition shadow-lg flex items-center justify-center"
                    title="عرض التفاصيل"
                  >
                    <Search size={18} />
                  </button>
                </div>
              </div>

              {/* معلومات المنتج */}
              <div className="flex flex-col cursor-pointer" onClick={() => setSelectedProduct(product)}>
                <span className="text-xs text-gray-500 uppercase tracking-wider mb-1">{product.category}</span>
                <h3 className="text-lg font-semibold text-gray-900 line-clamp-1 hover:text-amber-600 transition">
                  {product.name}
                </h3>
                <div className="flex items-center justify-between mt-2">
                  <span className="text-lg font-bold text-gray-900">{product.price} ر.س</span>
                  <div className="flex items-center text-amber-400 text-sm">
                    <Star size={14} fill="currentColor" />
                    <span className="text-gray-500 mr-1 ml-1">{product.rating}</span>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </main>

      {/* قسم مميزات المتجر */}
      <section className="bg-gray-50 border-t border-gray-200 py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 text-center divide-y md:divide-y-0 md:divide-x md:divide-x-reverse divide-gray-200">
            <div className="p-4">
              <h4 className="font-bold text-lg mb-2 text-gray-900">شحن مجاني</h4>
              <p className="text-gray-500 text-sm">للطلبات التي تزيد عن 500 ر.س</p>
            </div>
            <div className="p-4">
              <h4 className="font-bold text-lg mb-2 text-gray-900">إرجاع سهل</h4>
              <p className="text-gray-500 text-sm">سياسة إرجاع مرنة خلال 14 يوماً</p>
            </div>
            <div className="p-4">
              <h4 className="font-bold text-lg mb-2 text-gray-900">دعم متواصل</h4>
              <p className="text-gray-500 text-sm">خدمة عملاء على مدار الساعة</p>
            </div>
          </div>
        </div>
      </section>

      {/* التذييل (Footer) */}
      <footer className="bg-gray-900 text-white py-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid grid-cols-1 md:grid-cols-4 gap-8">
          <div className="md:col-span-2">
             <span className="text-2xl font-bold tracking-wider mb-4 block">
              أناقة<span className="text-amber-500">.</span>
            </span>
            <p className="text-gray-400 max-w-sm">
              وجهتك الأولى للتسوق الإلكتروني الأنيق. نوفر لك أفضل المنتجات بأعلى جودة وتصاميم تواكب أحدث صيحات الموضة.
            </p>
          </div>
          <div>
            <h4 className="font-bold mb-4">روابط سريعة</h4>
            <ul className="space-y-2 text-gray-400">
              <li><a href="#" className="hover:text-white transition">الرئيسية</a></li>
              <li><a href="#" className="hover:text-white transition">المتجر</a></li>
              <li><a href="#" className="hover:text-white transition">من نحن</a></li>
              <li><a href="#" className="hover:text-white transition">تواصل معنا</a></li>
            </ul>
          </div>
          <div>
            <h4 className="font-bold mb-4">خدمة العملاء</h4>
            <ul className="space-y-2 text-gray-400">
              <li><a href="#" className="hover:text-white transition">سياسة الشحن</a></li>
              <li><a href="#" className="hover:text-white transition">الاسترجاع والاستبدال</a></li>
              <li><a href="#" className="hover:text-white transition">الأسئلة الشائعة</a></li>
            </ul>
          </div>
        </div>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-12 pt-8 border-t border-gray-800 text-center text-gray-500 text-sm">
          جميع الحقوق محفوظة © 2026 متجر أناقة.
        </div>
      </footer>
    </div>
  );
}