import React, { useState, useEffect } from 'react';
import { 
  MapPin, 
  Search, 
  Filter, 
  ShoppingBag, 
  User, 
  Home, 
  Map as MapIcon, 
  Star, 
  Clock, 
  ChevronRight, 
  Navigation,
  Info,
  Heart,
  QrCode,
  CheckCircle2,
  Bell,
  ArrowRight
} from 'lucide-react';

// --- Mock Data ---
const STORES = [
  {
    id: 1,
    name: "Lebon Cafe",
    type: "شنطة حلويات فرنسية",
    image: "https://images.unsplash.com/photo-1554118811-1e0d58224f24?auto=format&fit=crop&q=80&w=800",
    rating: 4.9,
    distance: "0.5 كم",
    pickupTime: "9:30 م - 10:30 م",
    oldPrice: 18000,
    newPrice: 8500,
    left: 2,
    location: "المنصور، بغداد",
    category: "حلويات"
  },
  {
    id: 2,
    name: "Grinders Cafe",
    type: "شنطة معجنات وقهوة",
    image: "https://images.unsplash.com/photo-1442512595331-e89e73853f31?auto=format&fit=crop&q=80&w=800",
    rating: 4.7,
    distance: "1.8 كم",
    pickupTime: "8:00 م - 9:00 م",
    oldPrice: 15000,
    newPrice: 6000,
    left: 4,
    location: "الكرادة، بغداد",
    category: "قهوة"
  },
  {
    id: 3,
    name: "Dose Cafe",
    type: "شنطة ساندوتشات منوعة",
    image: "https://images.unsplash.com/photo-1509042239860-f550ce710b93?auto=format&fit=crop&q=80&w=800",
    rating: 4.8,
    distance: "2.1 كم",
    pickupTime: "10:00 م - 11:00 م",
    oldPrice: 22000,
    newPrice: 10000,
    left: 1,
    location: "زيونة، بغداد",
    category: "وجبات"
  },
  {
    id: 4,
    name: "Mr Baker",
    type: "شنطة خبز وصمون",
    image: "https://images.unsplash.com/photo-1509440159596-0249088772ff?auto=format&fit=crop&q=80&w=800",
    rating: 4.5,
    distance: "3.0 كم",
    pickupTime: "7:00 م - 8:00 م",
    oldPrice: 8000,
    newPrice: 3000,
    left: 0, // Out of stock
    location: "حي الجامعة، بغداد",
    category: "مخبوزات"
  }
];

// --- Components ---

const Navbar = ({ activeTab, setActiveTab }) => {
  const tabs = [
    { id: 'home', icon: Home, label: 'الرئيسية' },
    { id: 'browse', icon: MapIcon, label: 'التصفح' },
    { id: 'orders', icon: ShoppingBag, label: 'الطلبات' },
    { id: 'profile', icon: User, label: 'حسابي' },
  ];

  return (
    <div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-100 px-6 py-3 flex justify-between items-center z-50 rounded-t-3xl shadow-2xl">
      {tabs.map((tab) => (
        <button
          key={tab.id}
          onClick={() => setActiveTab(tab.id)}
          className={`flex flex-col items-center gap-1 transition-all duration-300 ${
            activeTab === tab.id ? 'text-emerald-600 scale-110' : 'text-gray-400'
          }`}
        >
          <tab.icon size={24} strokeWidth={activeTab === tab.id ? 2.5 : 2} />
          <span className="text-[10px] font-bold">{tab.label}</span>
        </button>
      ))}
    </div>
  );
};

const StoreCard = ({ store, onClick }) => {
  const isOut = store.left === 0;

  return (
    <div 
      onClick={() => !isOut && onClick(store)}
      className={`bg-white rounded-[32px] overflow-hidden shadow-sm border border-gray-100 mb-5 relative transition-all ${isOut ? 'opacity-70 grayscale' : 'active:scale-[0.97] cursor-pointer'}`}
    >
      <div className="relative h-52">
        <img src={store.image} alt={store.name} className="w-full h-full object-cover" />
        <div className="absolute top-4 left-4 bg-white/90 backdrop-blur px-3 py-1 rounded-full flex items-center gap-1 shadow-sm">
          <Star size={14} className="text-yellow-500 fill-yellow-500" />
          <span className="text-sm font-bold">{store.rating}</span>
        </div>
        {isOut ? (
          <div className="absolute inset-0 bg-black/40 flex items-center justify-center">
            <span className="bg-white text-gray-900 px-4 py-2 rounded-full font-bold text-sm">نفذت الكمية</span>
          </div>
        ) : store.left <= 2 && (
          <div className="absolute bottom-4 right-4 bg-red-500 text-white px-3 py-1 rounded-xl text-[10px] font-bold animate-pulse">
             بقي {store.left} فقط
          </div>
        )}
      </div>
      <div className="p-5">
        <div className="flex justify-between items-start mb-3">
          <div>
            <h3 className="text-lg font-bold text-gray-900">{store.name}</h3>
            <p className="text-gray-500 text-xs">{store.type}</p>
          </div>
          <div className="text-left">
            <span className="text-gray-400 line-through text-[10px]">{store.oldPrice.toLocaleString()} د.ع</span>
            <div className="text-emerald-600 font-black text-xl">{store.newPrice.toLocaleString()} د.ع</div>
          </div>
        </div>
        <div className="flex items-center justify-between mt-4 text-[11px] text-gray-500 border-t border-gray-50 pt-4">
          <div className="flex items-center gap-1">
            <Clock size={14} className="text-emerald-500" />
            <span>{store.pickupTime}</span>
          </div>
          <div className="flex items-center gap-1">
            <MapPin size={14} className="text-emerald-500" />
            <span>{store.distance}</span>
          </div>
        </div>
      </div>
    </div>
  );
};

const DetailView = ({ store, onBack }) => {
  const [booked, setBooked] = useState(false);

  if (booked) {
    return (
      <div className="fixed inset-0 bg-white z-[70] flex flex-col items-center justify-center p-8 text-center" dir="rtl">
        <div className="w-24 h-24 bg-emerald-100 rounded-full flex items-center justify-center mb-6">
          <CheckCircle2 size={48} className="text-emerald-600" />
        </div>
        <h2 className="text-2xl font-bold mb-2">تم الحجز بنجاح!</h2>
        <p className="text-gray-500 mb-8 leading-relaxed">لقد أنقذت وجبة لذيذة من الهدر.<br/>تفضل بزيارة المحل في الوقت المحدد.</p>
        <div className="bg-gray-50 p-6 rounded-[40px] w-full mb-8 border-2 border-dashed border-gray-200">
          <QrCode size={180} className="mx-auto mb-4 text-emerald-900" />
          <p className="font-mono font-bold text-xl tracking-widest text-emerald-700">NI3MA-7742-IQ</p>
        </div>
        <button 
          onClick={onBack}
          className="w-full bg-emerald-600 text-white py-5 rounded-3xl font-bold text-lg shadow-xl shadow-emerald-100"
        >
          تم، العودة للرئيسية
        </button>
      </div>
    );
  }

  return (
    <div className="fixed inset-0 bg-white z-[60] overflow-y-auto pb-32" dir="rtl">
      <div className="relative h-80">
        <button onClick={onBack} className="absolute top-6 right-6 z-10 bg-white/90 backdrop-blur p-3 rounded-2xl shadow-lg">
          <ArrowRight size={24} className="text-gray-900" />
        </button>
        <img src={store.image} alt={store.name} className="w-full h-full object-cover" />
        <div className="absolute bottom-0 left-0 right-0 h-20 bg-gradient-to-t from-white to-transparent"></div>
      </div>

      <div className="px-6 -mt-10 relative z-10">
        <div className="bg-white rounded-[40px] p-6 shadow-xl border border-gray-50">
          <div className="flex justify-between items-start mb-4">
            <div>
              <h1 className="text-2xl font-black text-gray-900 mb-1">{store.name}</h1>
              <div className="flex items-center gap-1 text-sm text-yellow-600 font-bold">
                <Star size={16} fill="currentColor" /> {store.rating} <span className="text-gray-400 font-normal">(61 تقييم)</span>
              </div>
            </div>
            <button className="bg-gray-50 p-3 rounded-2xl text-gray-400 active:text-red-500">
              <Heart size={24} />
            </button>
          </div>

          <div className="grid grid-cols-2 gap-3 mb-6">
            <div className="bg-emerald-50 p-4 rounded-3xl border border-emerald-100">
              <Clock className="text-emerald-600 mb-2" size={20} />
              <p className="text-[10px] text-gray-500 uppercase tracking-wider">وقت الاستلام</p>
              <p className="font-bold text-sm text-emerald-900">{store.pickupTime}</p>
            </div>
            <div className="bg-gray-50 p-4 rounded-3xl border border-gray-100">
              <Navigation className="text-gray-600 mb-2" size={20} />
              <p className="text-[10px] text-gray-500 uppercase tracking-wider">المسافة</p>
              <p className="font-bold text-sm text-gray-900">{store.distance}</p>
            </div>
          </div>

          <div className="space-y-6">
            <section>
              <h2 className="font-bold text-gray-900 mb-2">عن الشنطة</h2>
              <p className="text-gray-500 text-sm leading-relaxed">
                هذه "شنطة مفاجأة" قد تحتوي على تشكيلة من منتجات اليوم الفائضة. المحتويات تختلف يومياً لكننا نضمن جودتها العالية.
              </p>
            </section>

            <div className="flex items-center gap-3 p-4 bg-emerald-900 text-emerald-50 rounded-3xl">
              <Info size={20} className="shrink-0" />
              <p className="text-xs leading-relaxed">بشرائك هذه الوجبة، ساهمت في منع هدر الطعام ودعم استدامة البيئة في بغداد.</p>
            </div>

            <section className="pt-4 border-t border-gray-100">
              <div className="flex items-center justify-between text-sm">
                <span className="text-gray-500">طريقة الدفع</span>
                <span className="font-bold text-emerald-600">نقدًا عند الاستلام / زين كاش</span>
              </div>
            </section>
          </div>
        </div>
      </div>

      <div className="fixed bottom-0 left-0 right-0 bg-white/80 backdrop-blur-md p-6 border-t border-gray-100 flex items-center gap-6 z-20">
        <div className="flex-shrink-0">
          <span className="text-gray-400 line-through block text-xs">{store.oldPrice.toLocaleString()} د.ع</span>
          <span className="text-emerald-700 font-black text-2xl tracking-tighter">{store.newPrice.toLocaleString()} د.ع</span>
        </div>
        <button 
          onClick={() => setBooked(true)}
          className="flex-1 bg-emerald-600 hover:bg-emerald-700 text-white py-5 rounded-[24px] font-bold text-lg shadow-xl shadow-emerald-200 transition-all active:scale-95"
        >
          احجز الآن
        </button>
      </div>
    </div>
  );
};

export default function App() {
  const [activeTab, setActiveTab] = useState('home');
  const [selectedStore, setSelectedStore] = useState(null);

  return (
    <div className="min-h-screen bg-[#FBFDFA] font-['Cairo',sans-serif] pb-32" dir="rtl">
      {/* --- Header --- */}
      <header className="bg-emerald-900 px-6 pt-12 pb-10 rounded-b-[50px] shadow-2xl relative overflow-hidden">
        <div className="absolute top-0 left-0 w-64 h-64 bg-emerald-800 rounded-full -translate-x-1/2 -translate-y-1/2 opacity-20"></div>
        
        <div className="relative z-10 flex justify-between items-center mb-8">
          <div className="flex items-center gap-3">
            <div className="bg-emerald-400/20 p-2.5 rounded-2xl backdrop-blur-sm">
              <ShoppingBag size={26} className="text-emerald-300" />
            </div>
            <div>
              <h1 className="text-2xl font-black text-white tracking-wide">نِعمة</h1>
              <div className="flex items-center gap-1 text-emerald-200/80 text-[10px] font-bold">
                <MapPin size={12} className="text-emerald-400" />
                <span>المنصور، بغداد</span>
              </div>
            </div>
          </div>
          <div className="flex gap-2">
            <button className="bg-white/10 p-3 rounded-2xl text-white relative">
              <Bell size={20} />
              <span className="absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full border-2 border-emerald-900"></span>
            </button>
            <div className="bg-white/10 px-4 py-2 rounded-2xl flex flex-col items-center">
              <span className="text-[10px] text-emerald-200 font-bold">وفرت</span>
              <span className="text-xs text-white font-black">45 ألف د.ع</span>
            </div>
          </div>
        </div>

        <div className="relative z-10">
          <div className="relative group">
            <Search className="absolute right-4 top-1/2 -translate-y-1/2 text-emerald-300" size={20} />
            <input 
              type="text" 
              placeholder="ابحث عن وجبة، مخبز، أو كافيه..."
              className="w-full bg-emerald-800/40 border border-emerald-700/50 text-white placeholder:text-emerald-400/60 rounded-3xl py-4 pr-12 pl-4 focus:outline-none focus:ring-2 focus:ring-emerald-400/50 transition-all text-sm backdrop-blur-sm"
            />
            <button className="absolute left-2 top-1/2 -translate-y-1/2 bg-emerald-400 text-emerald-950 p-2.5 rounded-2xl shadow-lg">
              <Filter size={18} />
            </button>
          </div>
        </div>
      </header>

      {/* --- Main Content --- */}
      <main className="px-6 py-8">
        {activeTab === 'home' && (
          <div className="animate-in fade-in duration-500">
            <div className="flex justify-between items-center mb-6">
              <h2 className="text-xl font-black text-gray-900">عروض "لقمة" القريبة</h2>
              <button className="text-emerald-600 text-xs font-black bg-emerald-50 px-4 py-2 rounded-full">عرض الخريطة</button>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {STORES.map((store) => (
                <StoreCard 
                  key={store.id} 
                  store={store} 
                  onClick={setSelectedStore} 
                />
              ))}
            </div>

            <div className="mt-10 bg-emerald-50 rounded-[40px] p-8 border border-emerald-100 flex items-center justify-between relative overflow-hidden">
               <div className="relative z-10">
                  <h3 className="text-emerald-900 text-xl font-black mb-1">شنطة الخير 🇮🇶</h3>
                  <p className="text-emerald-700/70 text-xs mb-5 max-w-[180px] leading-relaxed">شارك في توزيع الوجبات الفائضة على المحتاجين في بغداد.</p>
                  <button className="bg-emerald-600 text-white px-8 py-3 rounded-2xl font-bold text-xs shadow-lg shadow-emerald-200">شارك الآن</button>
               </div>
               <div className="absolute -left-4 top-1/2 -translate-y-1/2 opacity-20">
                  <Heart size={140} className="text-emerald-600 fill-emerald-600" />
               </div>
            </div>
          </div>
        )}

        {activeTab === 'browse' && (
          <div className="h-[65vh] relative rounded-[40px] overflow-hidden border border-gray-100 bg-gray-50 flex items-center justify-center">
             <div className="absolute inset-0 opacity-20" style={{ backgroundImage: 'radial-gradient(#065f46 1px, transparent 1px)', backgroundSize: '24px 24px' }}></div>
             <div className="relative z-10 text-center px-10">
                <div className="bg-white p-6 rounded-full shadow-2xl inline-block mb-6 animate-bounce">
                  <MapPin size={40} className="text-emerald-600" />
                </div>
                <h3 className="text-xl font-black text-emerald-900 mb-2">اكتشف العروض حولك</h3>
                <p className="text-gray-500 text-sm">شاهد المحلات المتاحة حالياً على الخريطة التفاعلية</p>
                <button className="mt-8 bg-emerald-900 text-white px-10 py-4 rounded-3xl font-bold shadow-xl">فتح الخريطة</button>
             </div>
          </div>
        )}

        {activeTab === 'orders' && (
          <div className="py-20 flex flex-col items-center text-center px-10">
             <div className="w-32 h-32 bg-emerald-50 rounded-full flex items-center justify-center mb-6">
                <ShoppingBag size={48} className="text-emerald-200" />
             </div>
             <h3 className="text-xl font-black text-emerald-900">لا توجد حجوزات نشطة</h3>
             <p className="text-gray-500 text-sm mt-2">الوجبات التي ستقوم بحجزها ستظهر هنا لتسهيل عملية الاستلام من المحل.</p>
          </div>
        )}

        {activeTab === 'profile' && (
          <div className="space-y-4">
            <div className="bg-emerald-900 p-8 rounded-[40px] text-white flex items-center gap-5 shadow-xl">
              <div className="w-20 h-20 bg-emerald-500/30 rounded-3xl flex items-center justify-center text-3xl font-black border border-emerald-400/20">
                أ
              </div>
              <div>
                <h3 className="text-2xl font-black">أحمد علي</h3>
                <p className="text-emerald-300/80 text-sm">عضو ذهبي • بغداد</p>
              </div>
            </div>
            
            <div className="grid grid-cols-2 gap-4">
               <div className="bg-white p-6 rounded-[32px] border border-gray-100 shadow-sm text-center">
                  <p className="text-3xl font-black text-emerald-600">24</p>
                  <p className="text-[10px] text-gray-400 font-bold uppercase mt-1">وجبة تم إنقاذها</p>
               </div>
               <div className="bg-white p-6 rounded-[32px] border border-gray-100 shadow-sm text-center">
                  <p className="text-3xl font-black text-emerald-600">14</p>
                  <p className="text-[10px] text-gray-400 font-bold uppercase mt-1">كغم CO2 تم منعه</p>
               </div>
            </div>

            <div className="bg-white rounded-[32px] overflow-hidden border border-gray-100 shadow-sm mt-4">
              {['تعديل الحساب', 'طرق الدفع (زين كاش، ماستركارد)', 'المحلات المفضلة', 'تغيير اللغة (العربية)', 'كن شريكاً (للمطاعم)'].map((item, index) => (
                <button key={index} className="w-full flex justify-between items-center p-6 border-b border-gray-50 text-right font-bold text-gray-700 last:border-none active:bg-gray-50">
                  <span>{item}</span>
                  <ChevronRight size={20} className="rotate-180 text-gray-300" />
                </button>
              ))}
            </div>
            <button className="w-full py-6 text-center font-bold text-red-500 mt-4">تسجيل الخروج</button>
          </div>
        )}
      </main>

      {/* --- Detail Overlay --- */}
      {selectedStore && (
        <DetailView 
          store={selectedStore} 
          onBack={() => setSelectedStore(null)} 
        />
      )}

      {/* --- Bottom Navbar --- */}
      <Navbar activeTab={activeTab} setActiveTab={setActiveTab} />
    </div>
  );
}