import React, { useState, useEffect, useMemo } from 'react';
import { initializeApp } from 'firebase/app';
import { 
  getFirestore, 
  collection, 
  addDoc, 
  onSnapshot, 
  doc, 
  updateDoc, 
  serverTimestamp,
  query,
  where
} from 'firebase/firestore';
import { 
  getAuth, 
  signInAnonymously, 
  signInWithCustomToken, 
  onAuthStateChanged 
} from 'firebase/auth';
import { 
  ShoppingBag, 
  Utensils, 
  Clock, 
  CheckCircle2, 
  ChevronRight, 
  Trash2, 
  Plus, 
  Minus,
  Store,
  X,
  PackageCheck,
  Truck,
  Flame,
  UserCheck
} from 'lucide-react';

// --- Firebase Configuration ---
const firebaseConfig = JSON.parse(__firebase_config);
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const appId = typeof __app_id !== 'undefined' ? __app_id : 'kfc-clone-app';

// --- Sample Data: KFC Menu ---
const MENU_DATA = [
  {
    id: 'b1',
    category: 'Buckets',
    name: '10 pc. Family Bucket',
    price: 29.99,
    image: 'https://images.unsplash.com/photo-1626082927389-6cd097cdc6ec?auto=format&fit=crop&w=300&q=80',
    description: '10 pieces of our Original Recipe chicken, 2 large sides, and 4 biscuits.'
  },
  {
    id: 'b2',
    category: 'Buckets',
    name: '8 pc. Chicken & Tenders Box',
    price: 24.99,
    image: 'https://images.unsplash.com/photo-1513185041617-8ab03f83d6c5?auto=format&fit=crop&w=300&q=80',
    description: '4 pieces of chicken and 4 Extra Crispy Tenders.'
  },
  {
    id: 's1',
    category: 'Sandwiches',
    name: 'KFC Chicken Sandwich',
    price: 5.49,
    image: 'https://images.unsplash.com/photo-1606755962773-d324e0a13086?auto=format&fit=crop&w=300&q=80',
    description: 'Double-breaded, premium chicken breast fillet with pickles and mayo.'
  },
  {
    id: 's2',
    category: 'Sandwiches',
    name: 'Spicy Chicken Sandwich',
    price: 5.49,
    image: 'https://images.unsplash.com/photo-1521305916504-4a1121188589?auto=format&fit=crop&w=300&q=80',
    description: 'Our signature spicy sauce adds the perfect kick.'
  },
  {
    id: 't1',
    category: 'Tenders',
    name: '5 pc. Tenders Combo',
    price: 10.99,
    image: 'https://images.unsplash.com/photo-1562967914-608f82629710?auto=format&fit=crop&w=300&q=80',
    description: '5 Extra Crispy Tenders, side, biscuit, and a medium drink.'
  },
  {
    id: 'd1',
    category: 'Sides',
    name: 'Secret Recipe Fries',
    price: 3.29,
    image: 'https://images.unsplash.com/photo-1573080496219-bb080dd4f877?auto=format&fit=crop&w=300&q=80',
    description: 'Seasoned with a secret blend of herbs and spices.'
  }
];

const CATEGORIES = ['All', 'Buckets', 'Sandwiches', 'Tenders', 'Sides'];

export default function App() {
  const [user, setUser] = useState(null);
  const [view, setView] = useState('customer'); // 'customer' or 'kitchen'
  const [cart, setCart] = useState([]);
  const [orders, setOrders] = useState([]);
  const [activeCategory, setActiveCategory] = useState('All');
  const [isOrdering, setIsOrdering] = useState(false);
  const [orderSuccess, setOrderSuccess] = useState(false);

  // 1. Auth Logic
  useEffect(() => {
    const initAuth = async () => {
      try {
        if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
          await signInWithCustomToken(auth, __initial_auth_token);
        } else {
          await signInAnonymously(auth);
        }
      } catch (err) {
        console.error("Auth error:", err);
      }
    };
    initAuth();
    const unsubscribe = onAuthStateChanged(auth, setUser);
    return () => unsubscribe();
  }, []);

  // 2. Data Logic (Kitchen Orders)
  useEffect(() => {
    if (!user) return;
    
    const ordersRef = collection(db, 'artifacts', appId, 'public', 'data', 'orders');
    // We listen to all orders for the kitchen view, but can filter in memory or locally for the customer
    const unsubscribe = onSnapshot(ordersRef, 
      (snapshot) => {
        const orderData = snapshot.docs.map(doc => ({
          id: doc.id,
          ...doc.data()
        }));
        setOrders(orderData.sort((a, b) => (b.createdAt?.seconds || 0) - (a.createdAt?.seconds || 0)));
      },
      (error) => console.error("Firestore error:", error)
    );

    return () => unsubscribe();
  }, [user]);

  // --- Customer Actions ---
  const addToCart = (item) => {
    setCart(prev => {
      const existing = prev.find(i => i.id === item.id);
      if (existing) {
        return prev.map(i => i.id === item.id ? { ...i, qty: i.qty + 1 } : i);
      }
      return [...prev, { ...item, qty: 1 }];
    });
  };

  const updateQty = (id, delta) => {
    setCart(prev => prev.map(item => {
      if (item.id === id) {
        const newQty = Math.max(0, item.qty + delta);
        return { ...item, qty: newQty };
      }
      return item;
    }).filter(item => item.qty > 0));
  };

  const placeOrder = async () => {
    if (cart.length === 0 || !user) return;
    setIsOrdering(true);
    
    try {
      const orderPayload = {
        userId: user.uid,
        items: cart,
        total: cart.reduce((sum, i) => sum + (i.price * i.qty), 0),
        status: 'pending', // pending -> preparing -> ready -> received
        createdAt: serverTimestamp(),
        orderNumber: Math.floor(1000 + Math.random() * 9000)
      };

      await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'orders'), orderPayload);
      setCart([]);
      setOrderSuccess(true);
      setTimeout(() => setOrderSuccess(false), 5000);
    } catch (err) {
      console.error("Order failed:", err);
    } finally {
      setIsOrdering(false);
    }
  };

  // --- Status Helpers ---
  const updateOrderStatus = async (orderId, newStatus) => {
    try {
      const orderRef = doc(db, 'artifacts', appId, 'public', 'data', 'orders', orderId);
      await updateDoc(orderRef, { status: newStatus });
    } catch (err) {
      console.error("Update failed:", err);
    }
  };

  // Filter orders for the current customer that aren't finalized yet
  const myActiveOrders = useMemo(() => {
    if (!user) return [];
    return orders.filter(o => o.userId === user.uid && o.status !== 'received');
  }, [orders, user]);

  const filteredMenu = activeCategory === 'All' 
    ? MENU_DATA 
    : MENU_DATA.filter(item => item.category === activeCategory);

  const cartTotal = cart.reduce((sum, item) => sum + (item.price * item.qty), 0);

  // Helper for status styling
  const getStatusInfo = (status) => {
    switch (status) {
      case 'pending': return { label: 'Placed', icon: PackageCheck, color: 'text-amber-500', bg: 'bg-amber-50', step: 1 };
      case 'preparing': return { label: 'Preparing', icon: Flame, color: 'text-blue-500', bg: 'bg-blue-50', step: 2 };
      case 'ready': return { label: 'Ready for Pickup', icon: Truck, color: 'text-green-500', bg: 'bg-green-50', step: 3 };
      default: return { label: 'Unknown', icon: Clock, color: 'text-gray-500', bg: 'bg-gray-50', step: 0 };
    }
  };

  return (
    <div className="min-h-screen bg-gray-50 font-sans text-slate-900 pb-24">
      {/* Navigation Header */}
      <nav className="bg-white border-b sticky top-0 z-50 px-4 py-3 flex justify-between items-center shadow-sm">
        <div className="flex items-center gap-2">
          <div className="bg-red-600 p-2 rounded-lg">
            <Utensils className="text-white h-6 w-6" />
          </div>
          <h1 className="text-xl font-black tracking-tight text-red-600 uppercase">KFC <span className="text-slate-800">Order</span></h1>
        </div>
        
        <div className="flex bg-gray-100 p-1 rounded-xl">
          <button 
            onClick={() => setView('customer')}
            className={`px-4 py-1.5 rounded-lg text-sm font-bold transition-all ${view === 'customer' ? 'bg-white shadow-sm text-red-600' : 'text-slate-500 hover:text-slate-700'}`}
          >
            Customer
          </button>
          <button 
            onClick={() => setView('kitchen')}
            className={`px-4 py-1.5 rounded-lg text-sm font-bold transition-all ${view === 'kitchen' ? 'bg-white shadow-sm text-red-600' : 'text-slate-500 hover:text-slate-700'}`}
          >
            Kitchen View
          </button>
        </div>
      </nav>

      <main className="max-w-7xl mx-auto p-4 md:p-6">
        {view === 'customer' ? (
          <div className="space-y-8">
            {/* Customer Tracker - Only shows if there are active orders */}
            {myActiveOrders.length > 0 && (
              <section className="animate-in fade-in slide-in-from-top-4 duration-500">
                <h2 className="text-xl font-black mb-4 flex items-center gap-2">
                  <Clock className="text-red-600" /> Track My Order
                </h2>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  {myActiveOrders.map(order => {
                    const status = getStatusInfo(order.status);
                    const StatusIcon = status.icon;
                    return (
                      <div key={order.id} className="bg-white rounded-3xl border border-gray-200 p-6 shadow-lg shadow-gray-200/50">
                        <div className="flex justify-between items-start mb-6">
                          <div>
                            <span className="text-[10px] uppercase font-black text-slate-400">Order ID</span>
                            <h3 className="text-xl font-black">#{order.orderNumber}</h3>
                          </div>
                          <div className={`px-4 py-2 rounded-2xl ${status.bg} ${status.color} flex items-center gap-2 font-bold text-sm`}>
                            <StatusIcon className="w-4 h-4" />
                            {status.label}
                          </div>
                        </div>

                        {/* Progress Tracker Bar */}
                        <div className="relative mb-8 pt-2">
                          <div className="absolute top-1/2 left-0 w-full h-1 bg-gray-100 -translate-y-1/2 rounded-full"></div>
                          <div 
                            className="absolute top-1/2 left-0 h-1 bg-red-600 -translate-y-1/2 rounded-full transition-all duration-1000"
                            style={{ width: `${(status.step / 3) * 100}%` }}
                          ></div>
                          <div className="flex justify-between relative px-1">
                             {[1, 2, 3].map((s) => (
                               <div key={s} className={`w-3 h-3 rounded-full border-2 bg-white transition-colors duration-500 ${status.step >= s ? 'border-red-600 bg-red-600' : 'border-gray-200'}`}></div>
                             ))}
                          </div>
                        </div>

                        <div className="flex items-end justify-between">
                          <div className="text-slate-500 text-sm">
                            {order.items.length} items • ${order.total.toFixed(2)}
                          </div>
                          {order.status === 'ready' && (
                            <button 
                              onClick={() => updateOrderStatus(order.id, 'received')}
                              className="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-xl font-black shadow-lg shadow-green-100 flex items-center gap-2 transition-transform active:scale-95"
                            >
                              <UserCheck className="w-5 h-5" /> I RECEIVED IT
                            </button>
                          )}
                        </div>
                      </div>
                    );
                  })}
                </div>
              </section>
            )}

            <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
              {/* Menu Section */}
              <div className="lg:col-span-2 space-y-6">
                {orderSuccess && (
                  <div className="bg-green-100 border border-green-200 text-green-700 px-4 py-3 rounded-xl flex items-center gap-3 animate-bounce">
                    <CheckCircle2 className="h-5 w-5" />
                    <p className="font-medium">Order placed! Track it at the top of the page.</p>
                  </div>
                )}

                {/* Category Filter */}
                <div className="flex gap-2 overflow-x-auto pb-2 scrollbar-hide">
                  {CATEGORIES.map(cat => (
                    <button
                      key={cat}
                      onClick={() => setActiveCategory(cat)}
                      className={`px-5 py-2 rounded-full whitespace-nowrap text-sm font-bold transition-all ${
                        activeCategory === cat 
                        ? 'bg-red-600 text-white shadow-md' 
                        : 'bg-white text-slate-600 border hover:bg-gray-50'
                      }`}
                    >
                      {cat}
                    </button>
                  ))}
                </div>

                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  {filteredMenu.map(item => (
                    <div key={item.id} className="bg-white rounded-2xl border border-gray-100 overflow-hidden shadow-sm hover:shadow-md transition-shadow group">
                      <div className="relative h-48 overflow-hidden">
                        <img src={item.image} alt={item.name} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
                        <div className="absolute top-3 right-3 bg-white/90 backdrop-blur px-2 py-1 rounded-lg font-bold text-red-600 shadow-sm">
                          ${item.price.toFixed(2)}
                        </div>
                      </div>
                      <div className="p-4">
                        <h3 className="font-bold text-lg mb-1">{item.name}</h3>
                        <p className="text-slate-500 text-sm line-clamp-2 mb-4">{item.description}</p>
                        <button 
                          onClick={() => addToCart(item)}
                          className="w-full bg-slate-900 text-white py-3 rounded-xl font-bold flex items-center justify-center gap-2 hover:bg-red-600 transition-colors"
                        >
                          <Plus className="h-4 w-4" /> Add to Order
                        </button>
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              {/* Cart Summary */}
              <div className="lg:col-span-1">
                <div className="bg-white rounded-3xl border border-gray-200 p-6 sticky top-24 shadow-xl">
                  <div className="flex items-center justify-between mb-6">
                    <h2 className="text-xl font-black flex items-center gap-2">
                      <ShoppingBag className="text-red-600" /> My Bucket
                    </h2>
                    <span className="bg-red-100 text-red-600 px-3 py-1 rounded-full text-xs font-bold">
                      {cart.reduce((s, i) => s + i.qty, 0)} items
                    </span>
                  </div>

                  <div className="space-y-4 max-h-[40vh] overflow-y-auto mb-6 pr-2">
                    {cart.length === 0 ? (
                      <div className="text-center py-12">
                        <div className="bg-gray-50 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                          <ShoppingBag className="text-gray-300 w-8 h-8" />
                        </div>
                        <p className="text-slate-400 font-medium">Your bucket is empty</p>
                      </div>
                    ) : (
                      cart.map(item => (
                        <div key={item.id} className="flex gap-3 items-center">
                          <img src={item.image} className="w-16 h-16 rounded-xl object-cover" />
                          <div className="flex-1">
                            <h4 className="font-bold text-sm leading-tight">{item.name}</h4>
                            <p className="text-slate-500 text-xs">${(item.price * item.qty).toFixed(2)}</p>
                          </div>
                          <div className="flex items-center gap-2 bg-gray-50 rounded-lg p-1 border">
                            <button onClick={() => updateQty(item.id, -1)} className="p-1 hover:text-red-600"><Minus className="w-4 h-4" /></button>
                            <span className="w-4 text-center font-bold text-sm">{item.qty}</span>
                            <button onClick={() => updateQty(item.id, 1)} className="p-1 hover:text-red-600"><Plus className="w-4 h-4" /></button>
                          </div>
                        </div>
                      ))
                    )}
                  </div>

                  {cart.length > 0 && (
                    <div className="border-t pt-4 space-y-4">
                      <div className="flex justify-between items-center text-lg font-black">
                        <span>Total</span>
                        <span className="text-red-600">${cartTotal.toFixed(2)}</span>
                      </div>
                      <button 
                        onClick={placeOrder}
                        disabled={isOrdering}
                        className="w-full bg-red-600 text-white py-4 rounded-2xl font-black text-lg shadow-lg shadow-red-200 hover:bg-red-700 active:scale-[0.98] transition-all disabled:opacity-50"
                      >
                        {isOrdering ? 'PROCESSING...' : 'PLACE ORDER'}
                      </button>
                    </div>
                  )}
                </div>
              </div>
            </div>
          </div>
        ) : (
          /* Kitchen Display System (KDS) */
          <div className="space-y-8 animate-in fade-in duration-500">
            <header className="flex flex-col md:flex-row justify-between items-start md:items-end gap-4">
              <div>
                <h2 className="text-3xl font-black text-slate-900">Kitchen Display</h2>
                <p className="text-slate-500">Manage incoming orders</p>
              </div>
              <div className="flex gap-4">
                <div className="bg-amber-50 text-amber-600 px-4 py-2 rounded-xl border border-amber-100 text-center">
                  <div className="text-xs font-bold uppercase">Pending</div>
                  <div className="text-xl font-black">{orders.filter(o => o.status === 'pending').length}</div>
                </div>
                <div className="bg-blue-50 text-blue-600 px-4 py-2 rounded-xl border border-blue-100 text-center">
                  <div className="text-xs font-bold uppercase">Preparing</div>
                  <div className="text-xl font-black">{orders.filter(o => o.status === 'preparing').length}</div>
                </div>
              </div>
            </header>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
              {orders.filter(o => o.status !== 'received').map(order => (
                <div 
                  key={order.id} 
                  className={`bg-white rounded-2xl border-2 overflow-hidden flex flex-col shadow-sm transition-all ${
                    order.status === 'pending' ? 'border-amber-400' : 
                    order.status === 'preparing' ? 'border-blue-400' : 'border-green-400 opacity-80'
                  }`}
                >
                  <div className={`p-4 flex justify-between items-center ${
                    order.status === 'pending' ? 'bg-amber-50' : 
                    order.status === 'preparing' ? 'bg-blue-50' : 'bg-green-50'
                  }`}>
                    <div>
                      <span className="text-xs font-black uppercase text-slate-500">Order</span>
                      <h4 className="text-xl font-black">#{order.orderNumber}</h4>
                    </div>
                    <div className="flex items-center gap-1 text-xs font-bold bg-white px-2 py-1 rounded-md shadow-sm">
                      <Clock className="w-3 h-3" />
                      {order.createdAt ? new Date(order.createdAt.seconds * 1000).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : '...'}
                    </div>
                  </div>

                  <div className="p-4 flex-1 space-y-3">
                    {order.items.map((item, idx) => (
                      <div key={idx} className="flex justify-between items-start gap-3">
                        <span className="bg-slate-100 text-slate-900 px-2 py-0.5 rounded font-black min-w-[24px] text-center">
                          {item.qty}
                        </span>
                        <div className="flex-1 font-bold text-sm leading-tight text-slate-700">
                          {item.name}
                        </div>
                      </div>
                    ))}
                  </div>

                  <div className="p-4 border-t bg-gray-50 mt-auto">
                    {order.status === 'pending' && (
                      <button 
                        onClick={() => updateOrderStatus(order.id, 'preparing')}
                        className="w-full bg-amber-500 text-white py-3 rounded-xl font-black hover:bg-amber-600 transition-colors"
                      >
                        START PREPARING
                      </button>
                    )}
                    {order.status === 'preparing' && (
                      <button 
                        onClick={() => updateOrderStatus(order.id, 'ready')}
                        className="w-full bg-blue-600 text-white py-3 rounded-xl font-black hover:bg-blue-700 transition-colors"
                      >
                        MARK AS READY
                      </button>
                    )}
                    {order.status === 'ready' && (
                      <div className="text-center text-green-600 font-black py-2 animate-pulse flex items-center justify-center gap-2">
                        <Truck className="w-5 h-5" /> WAITING FOR CUSTOMER
                      </div>
                    )}
                  </div>
                </div>
              ))}
              
              {orders.filter(o => o.status !== 'received').length === 0 && (
                <div className="col-span-full py-20 bg-gray-100 rounded-3xl border-2 border-dashed border-gray-300 flex flex-col items-center justify-center text-gray-400">
                  <Store className="w-16 h-16 mb-4 opacity-20" />
                  <p className="text-xl font-bold">Kitchen is clear!</p>
                </div>
              )}
            </div>
          </div>
        )}
      </main>

      {/* Mobile Footer Cart Hint */}
      {view === 'customer' && cart.length > 0 && (
        <div className="fixed bottom-6 left-1/2 -translate-x-1/2 w-full max-w-md px-4 lg:hidden">
          <button 
            onClick={() => window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' })}
            className="w-full bg-red-600 text-white py-4 rounded-2xl font-black text-lg shadow-2xl flex justify-between items-center px-6 active:scale-95 transition-transform"
          >
            <span>VIEW BUCKET ({cart.reduce((s, i) => s + i.qty, 0)})</span>
            <span>${cartTotal.toFixed(2)}</span>
          </button>
        </div>
      )}
    </div>
  );
}