import React, { useState, useEffect, useCallback } from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import {
  ShoppingCart,
  Store,
  LogIn,
  PlusCircle,
  X,
  Smartphone,
  Percent,
  Image,
  Loader2,
  CheckCircle,
  AlertTriangle,
} from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';
import { cn } from '@/lib/utils';

// Mock Firebase (for demonstration - replace with actual Firebase in a real app)
const mockFirebase = {
  initializeApp: () => {},
  firestore: () => ({
    collection: (collectionName: string) => ({
      orderBy: () => ({
        onSnapshot: (callback: (snapshot: any) => void, errorCallback: (error: any) => void) => {
          // Simulate data fetching
          if (collectionName === 'products') {
            const mockProducts = [
              {
                id: '1',
                name: 'Handmade Pottery Vase',
                description: 'A beautiful, unique vase, perfect for any room.',
                basePrice: 25.0,
                imageUrl: 'https://placehold.co/400x300/EEE/31343C',
                timestamp: Date.now() - 100000,
              },
              {
                id: '2',
                name: 'Traditional Woven Rug',
                description: 'Handwoven rug with traditional Bangladeshi patterns.',
                basePrice: 150.0,
                imageUrl: 'https://placehold.co/400x300/EEE/31343C',
                timestamp: Date.now() - 200000,
              },
              {
                id: '3',
                name: 'Organic Cotton Scarf',
                description: 'Soft and breathable organic cotton scarf, available in various colors.',
                basePrice: 15.0,
                imageUrl: 'https://placehold.co/400x300/EEE/31343C',
                timestamp: Date.now() - 300000,
              },
            ];
            setTimeout(() => {
              callback({
                docs: mockProducts.map((p) => ({
                  id: p.id,
                  data: () => p,
                })),
              });
            }, 500); // Simulate network latency
          }
          return () => {}; // Mock unsubscribe
        },
        limit: () => ({
          onSnapshot: (callback: (snapshot: any) => void) => {
            if (collectionName === 'products') {
              const mockProducts = [
                {
                  id: '1',
                  name: 'New Product 1',
                  description: 'Description for New Product 1',
                  basePrice: 10,
                  imageUrl: 'https://placehold.co/400x300/EEE/31343C',
                  timestamp: Date.now() - 1000,
                },
                {
                  id: '2',
                  name: 'New Product 2',
                  description: 'Description for New Product 2',
                  basePrice: 20,
                  imageUrl: 'https://placehold.co/400x300/EEE/31343C',
                  timestamp: Date.now() - 2000,
                },
              ];
              setTimeout(() => {
                callback({
                  docs: mockProducts.map((p) => ({
                    id: p.id,
                    data: () => p,
                  })),
                });
              }, 500);
            }
          },
        }),
      }),
      doc: (docId: string) => ({
        get: () =>
          new Promise((resolve) => {
            setTimeout(() => {
              const mockProducts = [
                {
                  id: '1',
                  name: 'Handmade Pottery Vase',
                  description: 'A beautiful, unique vase, perfect for any room.',
                  basePrice: 25.0,
                  imageUrl: 'https://placehold.co/400x300/EEE/31343C',
                  timestamp: Date.now() - 100000,
                },
                {
                  id: '2',
                  name: 'Traditional Woven Rug',
                  description: 'Handwoven rug with traditional Bangladeshi patterns.',
                  basePrice: 150.0,
                  imageUrl: 'https://placehold.co/400x300/EEE/31343C',
                  timestamp: Date.now() - 200000,
                },
                {
                  id: '3',
                  name: 'Organic Cotton Scarf',
                  description:
                    'Soft and breathable organic cotton scarf, available in various colors.',
                  basePrice: 15.0,
                  imageUrl: 'https://placehold.co/400x300/EEE/31343C',
                  timestamp: Date.now() - 300000,
                },
              ];
              const product = mockProducts.find((p) => p.id === docId);
              resolve({
                data: () => product,
              });
            }, 200);
          }),
      }),
      add: (data: any) =>
        new Promise((resolve) => {
          setTimeout(() => {
            resolve({
              id: 'new-product-id',
            });
          }, 500);
        }),
    }),
  }),
  storage: () => ({
    ref: (path: string) => ({
      put: () =>
        new Promise((resolve) => {
          setTimeout(() => {
            resolve({
              // Mock uploadTaskSnapshot
            });
          }, 500);
        }),
      getDownloadURL: () =>
        new Promise((resolve) => {
          setTimeout(() => {
            resolve('https://placehold.co/400x300/EEE/31343C'); // Mock URL
          }, 200);
        }),
    }),
  }),
  auth: () => ({
    currentUser: null,
    signInAnonymously: () =>
      new Promise((resolve) => {
        setTimeout(() => {
          resolve({ user: { uid: 'mock-anonymous-user-id' } });
        }, 500);
      }),
    onAuthStateChanged: (callback: (user: any) => void) => {
      // Simulate auth state
      setTimeout(() => {
        callback(null); // Or a mock user
      }, 100);
      return () => {};
    },
    signInWithEmailAndPassword: (email: string, password: string) =>
      new Promise((resolve, reject) => {
        if (email === 'test@example.com' && password === 'password') {
          setTimeout(() => {
            resolve({ user: { uid: 'mock-seller-user-id' } });
          }, 500);
        } else {
          setTimeout(() => {
            reject(new Error('Invalid credentials'));
          }, 200);
        }
      }),
  }),
  dynamicLinks: () => ({
    buildShortLink: async () => 'https://yourdomain.com/app', // Mock
  }),
  FieldValue: {
    serverTimestamp: Date.now,
  },
};

// ===============================
// Types & Interfaces
// ===============================

interface Product {
  id: string;
  name: string;
  description: string;
  basePrice: number;
  imageUrl: string;
  timestamp: number;
}

interface CartItem extends Product {
  quantity: number;
}

// ===============================
// Constants
// ===============================

const CURRENCY = '৳'; // Bangladeshi Taka

// ===============================
// Helper Functions
// ===============================

const calculateDynamicPrice = (basePrice: number) => {
  const timeVariation = Math.sin(Date.now() / 100000) * 0.15;
  const demandVariation = Math.random() * 0.2;
  return Number((basePrice * (1 + timeVariation + demandVariation)).toFixed(2));
};

// ===============================
// Components
// ===============================

const Header = ({ onCartClick, onSellerClick, cartCount }: {
  onCartClick: () => void;
  onSellerClick: () => void;
  cartCount: number;
}) => (
  <header className="bg-gradient-to-r from-red-500 to-green-500 text-white p-4 flex justify-between items-center sticky top-0 z-10 shadow-md">
    <h1 className="text-xl font-bold">
      <span role="img" aria-label="Bangladesh">
        🇧🇩
      </span>{' '}
      Desi Bazaar
    </h1>
    <nav>
      <Button
        variant="outline"
        onClick={onCartClick}
        className="text-white hover:bg-white/20 flex items-center gap-2"
      >
        <ShoppingCart className="w-4 h-4" />
        Cart ({cartCount})
      </Button>
      <Button
        variant="outline"
        onClick={onSellerClick}
        className="text-white hover:bg-white/20 flex items-center gap-2"
      >
        <Store className="w-4 h-4" />
        Seller Panel
      </Button>
    </nav>
  </header>
);

const ProductCard = ({ product, onAddToCart }: {
  product: Product;
  onAddToCart: (productId: string) => void;
}) => {
  const [showFullDescription, setShowFullDescription] = useState(false);
  const dynamicPrice = calculateDynamicPrice(product.basePrice);

  return (
    <motion.div
      className="bg-white rounded-lg p-4 shadow-md transition-transform transform hover:scale-105"
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -20 }}
    >
      <img
        src={product.imageUrl}
        alt={product.name}
        className="w-full h-48 object-cover rounded-t-lg mb-4"
        loading="lazy"
      />
      <h3 className="text-lg font-semibold mb-2">{product.name}</h3>
      <p className="text-gray-600 mb-2">
        {showFullDescription ? product.description : product.description.substring(0, 100)}
        {product.description.length > 100 && (
          <button
            className="text-blue-500 ml-1"
            onClick={() => setShowFullDescription(!showFullDescription)}
          >
            {showFullDescription ? 'Show Less' : 'Read More'}
          </button>
        )}
      </p>
      <div className="bg-yellow-400 text-white px-2 py-1 rounded-md text-sm inline-block mb-4">
        {CURRENCY}
        {dynamicPrice}
      </div>
      <Button
        onClick={() => onAddToCart(product.id)}
        className="w-full bg-green-500 text-white hover:bg-green-600"
      >
        Add to Cart
      </Button>
    </motion.div>
  );
};

const CartPanel = ({
  cartItems,
  onCheckout,
  onClose,
}: {
  cartItems: CartItem[];
  onCheckout: () => void;
  onClose: () => void;
}) => {
  const total = cartItems.reduce((acc, item) => acc + calculateDynamicPrice(item.basePrice) * item.quantity, 0);

  return (
    <motion.div
      className="bg-white rounded-lg p-4 shadow-lg fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50 w-full max-w-md"
      initial={{ opacity: 0, x: 50 }}
      animate={{ opacity: 1, x: 0 }}
      exit={{ opacity: 0, x: -50 }}
    >
      <h2 className="text-2xl font-bold mb-4">Shopping Cart</h2>
      {cartItems.length === 0 ? (
        <p className="text-gray-600 mb-4">Your cart is empty.</p>
      ) : (
        <div className="mb-4 space-y-4">
          {cartItems.map((item) => (
            <div key={item.id} className="flex items-center gap-4">
              <img
                src={item.imageUrl}
                alt={item.name}
                className="w-16 h-16 object-cover rounded-md"
              />
              <div>
                <h3 className="text-lg font-semibold">{item.name}</h3>
                <p className="text-gray-600">
                  Quantity: {item.quantity} x {CURRENCY}
                  {calculateDynamicPrice(item.basePrice).toFixed(2)}
                </p>
                <p className="font-bold">
                  Total: {CURRENCY}
                  {(calculateDynamicPrice(item.basePrice) * item.quantity).toFixed(2)}
                </p>
              </div>
            </div>
          ))}
        </div>
      )}
      <p className="text-xl font-bold mb-4">
        Total: {CURRENCY}
        {total.toFixed(2)}
      </p>
      <div className="flex justify-end gap-4">
        <Button
          onClick={onCheckout}
          className="bg-green-500 text-white hover:bg-green-600"
          disabled={cartItems.length === 0}
        >
          Checkout
        </Button>
        <Button onClick={onClose} className="bg-gray-300 text-gray-700 hover:bg-gray-400">
          Close
        </Button>
      </div>
    </motion.div>
  );
};

const SellerPanel = ({ onAddProduct, onClose, onLogin, isLoggedIn }: {
  onAddProduct: (product: Omit<Product, 'id' | 'timestamp'>) => void;
  onClose: () => void;
  onLogin: () => void;
  isLoggedIn: boolean;
}) => {
  const [productName, setProductName] = useState('');
  const [productDescription, setProductDescription] = useState('');
  const [basePrice, setBasePrice] = useState<number | string>('');
  const [productImage, setProductImage] = useState<File | null>(null);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [imagePreview, setImagePreview] = useState<string | null>(null);
  const [suggestedTags, setSuggestedTags] = useState<string[]>([]);
  const [formError, setFormError] = useState('');

  const handleImageChange = (e: React.ChangeEvent<HTMLInputElement><link rel="me" href="https://www.blogger.com/profile/11935619400074308268" />
<meta name='google-adsense-platform-account' content='ca-host-pub-1556223355139109'/>
<meta name='google-adsense-platform-domain' content='blogspot.com'/>

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4161677280478827&host=ca-host-pub-1556223355139109" crossorigin="anonymous"></script>

<!-- data-ad-client=ca-pub-4161677280478827 -->
<!-- --><style type="text/css">@import url(//www.blogger.com/static/v1/v-css/navbar/3334278262-classic.css);
div.b-mobile {display:none;}
</style>

<body><script type="text/javascript">
    function setAttributeOnload(object, attribute, val) {
      if(window.addEventListener) {
        window.addEventListener('load',
          function(){ object[attribute] = val; }, false);
      } else {
        window.attachEvent('onload', function(){ object[attribute] = val; });
      }
    }
  </script>
<div id="navbar-iframe-container"></div>
<script type="text/javascript" src="https://apis.google.com/js/platform.js"></script>
<script type="text/javascript">
      gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() {
        if (gapi.iframes && gapi.iframes.getContext) {
          gapi.iframes.getContext().openChild({
              url: 'https://www.blogger.com/navbar/9187964214093702024?origin\x3dhttps://bdbazaarzone.blogspot.com',
              where: document.getElementById("navbar-iframe-container"),
              id: "navbar-iframe"
          });
        }
      });
    </script>) => {
    const file = e.target.files?.[0];
    if (file) {
      setProductImage(file);
      const reader = new FileReader();
      reader.onloadend = () => {
        setImagePreview(reader.result as string);
      };
      reader.readAsDataURL(file);
    }
  };

  const handleProductSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!isLoggedIn) {
      setFormError('Please log in to add a product.');
      return;
    }
    if (!productName || !productDescription || !basePrice || !productImage) {
      setFormError('Please fill in all fields and select an image.');
      return;
    }

    const price = Number(basePrice);
    if (isNaN(price) || price <= 0) {
        setFormError('Price must be a valid number greater than zero.');
        return;
    }
    setIsSubmitting(true);
    setFormError('');

    const newProduct: Omit<Product, 'id' | 'timestamp'> = {
      name: productName,
      description: productDescription,
      basePrice: price,
      imageUrl: imagePreview || 'https://placehold.co/400x300/EEE/31343C', // Use preview or default
    };

    onAddProduct(newProduct);
    setIsSubmitting(false);
    setProductName('');
    setProductDescription('');
    setBasePrice('');
    setProductImage(null);
    setImagePreview(null);
    setSuggestedTags([]);
    onClose();
  };

  const handleGenerateDescription = () => {
    if (!productName) return;
    const templates = [
      `${productName} is a high-quality product made with care.`,
      `Experience the beauty of ${productName}, crafted by skilled artisans.`,
      `Get your ${productName} today!`,
    ];
    setProductDescription(templates[Math.floor(Math.random() * templates.length)]);
  };

  const handleAnalyzeImage = () => {
    const tags = ['Handmade', 'Traditional', 'Modern', 'Eco-friendly', 'Unique'];
    const suggested = tags.sort(() => 0.5 - Math.random()).slice(0, 2);
    setSuggestedTags(suggested);
  };

  return (
    <motion.div
      className="bg-white rounded-lg p-4 shadow-lg fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50 w-full max-w-md"
      initial={{ opacity: 0, y: -50 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: 50 }}
    >
      <h2 className="text-2xl font-bold mb-4">Add New Product</h2>
      {formError && <p className="text-red-500 mb-4">{formError}</p>}
      {!isLoggedIn ? (
        <>
          <p className="text-gray-600 mb-4">
            Please log in to add products.
          </p>
          <Button onClick={onLogin} className="w-full mb-4">
            <LogIn className="w-4 h-4 mr-2" />
            Login
          </Button>
        </>
      ) : (
        <form onSubmit={handleProductSubmit} className="space-y-4">
          <Input
            type="text"
            placeholder="Product Name"
            value={productName}
            onChange={(e) => setProductName(e.target.value)}
            required
            disabled={isSubmitting}
          />
          <Textarea
            placeholder="Description"
            value={productDescription}
            onChange={(e) => setProductDescription(e.target.value)}
            required
            disabled={isSubmitting}
          />
          <Input
            type="number"
            placeholder="Base Price (BDT)"
            value={basePrice}
            onChange={(e) => setBasePrice(e.target.value)}
            required
            disabled={isSubmitting}
          />
          <div className="flex items-center gap-4">
            <Input
              type="file"
              accept="image/*"
              onChange={handleImageChange}
              required
              disabled={isSubmitting}
              className="w-full"
            />
            {imagePreview && (
              <img
                src={imagePreview}
                alt="Product Preview"
                className="w-16 h-16 object-cover rounded-md"
              />
            )}
          </div>

          <div className="flex gap-2">
            <Button
              type="button"
              onClick={handleGenerateDescription}
              disabled={isSubmitting}
              variant="outline"
              className="flex-1"
            >
              Generate Description
            </Button>
            <Button
              type="button"
              onClick={handleAnalyzeImage}
              disabled={isSubmitting}
              variant="outline"
              className="flex-1"
            >
              Analyze Image
            </Button>
          </div>
          {suggestedTags.length > 0 && (
            <div className="text-sm text-gray-600">
              Suggested Tags: {suggestedTags.join(', ')}
            </div>
          )}
          <Button
            type="submit"
            disabled={isSubmitting}
            className="w-full"
          >
            {isSubmitting ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                Adding...
              </>
            ) : (
              <>
                <PlusCircle className="mr-2 h-4 w-4" />
                Add Product
              </>
            )}
          </Button>
        </form>
      )}
      <Button onClick={onClose} className="mt-4 w-full bg-gray-300 text-gray-700 hover:bg-gray-400">
        Close
      </Button>
    </motion.div>
  );
};

const LoginModal = ({ onClose, onLogin }: { onClose: () => void; onLogin: (email: string, password: string) => void }) => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const [isLoading, setIsLoading] = useState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setError('');
    setIsLoading(true);
    if (!email || !password) {
      setError('Please fill in all fields.');
      setIsLoading(false);
      return;
    }
    // Mock login
    setTimeout(() => {
      if (email === 'test@example.com' && password === 'password') {
        onLogin(email, password);
        setIsLoading(false);
        onClose();
      } else {
        setError('Invalid credentials.');
        setIsLoading(false);
      }
    }, 1000);
  };

  return (
    <motion.div
      className="bg-white rounded-lg p-4 shadow-lg fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50 w-full max-w-md"
      initial={{ opacity: 0, scale: 0.8 }}
      animate={{ opacity: 1, scale: 1 }}
      exit={{ opacity: 0, scale: 0.8 }}
    >
      <h2 className="text-2xl font-bold mb-4">Login as Seller</h2>
      {error && <p className="text-red-500 mb-4">{error}</p>}
      <form onSubmit={handleSubmit} className="space-y-4">
        <Input
          type="email"
          placeholder="Email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required
          disabled={isLoading}
        />
        <Input
          type="password"
          placeholder="Password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          required
          disabled={isLoading}
        />
        <Button type="submit" className="w-full" disabled={isLoading}>
          {isLoading ? (
            <>
              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
              Logging in...
            </>
          ) : (
            'Login'
          )}
        </Button>
      </form>
      <Button onClick={onClose} className="mt-4 w-full bg-gray-300 text-gray-700 hover:bg-gray-400">
        Close
      </Button>
    </motion.div>
  );
};

const MobileAppBanner = () => {
  const handleDownloadClick = async () => {
    // Mock dynamic link
    const dynamicLink = 'https://yourdomain.com/app';
    // Mock device detection
    const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
      navigator.userAgent
    );

    if (isMobile) {
      window.location.href = dynamicLink;
    } else {
      // Mock modal
      alert('Open this link on your mobile device to download the app.');
    }
  };

  return (
    <div className="bg-gradient-to-r from-blue-900 to-red-500 text-white p-4 text-center flex justify-between items-center">
      <div className="flex items-center gap-2">
        <Smartphone className="w-5 h-5" />
        Get 15% OFF on our mobile app!
      </div>
      <Button
        onClick={handleDownloadClick}
        className="bg-green-500 text-white px-4 py-2 rounded-full hover:bg-green-600"
      >
        Download Now
      </Button>
    </div>
  );
};

const DesiBazaarApp = () => {
  const [products, setProducts] = useState<Product[]>([]);
  const [cart, setCart] = useState<CartItem[]>([]);
  const [isCartOpen, setIsCartOpen] = useState(false);
  const [isSellerPanelOpen, setIsSellerPanelOpen] = useState(false);
  const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
  const [currentUser, setCurrentUser] = useState<any>(null); // Mock user
  const [loading, setLoading] = useState(true);

  // Mock Firebase
  const db = mockFirebase.firestore();
  const auth = mockFirebase.auth();
  const storage = mockFirebase.storage();
  const dynamicLinks = mockFirebase.dynamicLinks();

  // Load cart from local storage (mock)
  useEffect(() => {
    const savedCart = localStorage.getItem('desiBazaarCart');
    if (savedCart) {
      setCart(JSON.parse(savedCart));
    }
    setLoading(false);
  }, []);

  // Save cart to local storage (mock)
  useEffect(() => {
    if (!loading) {
      localStorage.setItem('desiBazaarCart', JSON.stringify(cart));
    }
  }, [cart, loading]);

  // Fetch products (mock)
  useEffect(() => {
    const unsubscribe = db.collection('products').orderBy('timestamp', 'desc').onSnapshot(
      (snapshot: any) => {
        const fetchedProducts = snapshot.docs.map((doc: any) => ({
          id: doc.id,
          ...doc.data(),
        }));
        setProducts(fetchedProducts);
      },
      (error: any) => {
        console.error('Error fetching products:', error);
        alert('Failed to load products. Please check your connection.');
      }
    );
    return () => unsubscribe();
  }, [db]);

  // Add to cart (mock)
  const handleAddToCart = useCallback((productId: string) => {
    const product = products.find((p) => p.id === productId);
    if (!product) return;

    const existingCartItem = cart.find((item) => item.id === productId);
    if (existingCartItem) {
      setCart(
        cart.map((item) =>
          item.id === productId ? { ...item, quantity: item.quantity + 1 } : item
        )
      );
    } else {
      setCart([...cart, { ...product, quantity: 1 }]);
    }
    setIsCartOpen(true); // Show cart after adding
  }, [cart, products]);

  // Checkout (mock)
  const handleCheckout = () => {
    if (cart.length === 0) {
      alert('Your cart is empty!');
      return;
    }
    alert(
      `Thank you for your purchase of ${cart
        .reduce((acc, item) => acc + item.quantity, 0)
        .toFixed(0)} items for ${CURRENCY}${cart
        .reduce((acc, item) => acc + calculateDynamicPrice(item.basePrice) * item.quantity, 0)
        .toFixed(2)}!`
    );
    setCart([]);
    setIsCartOpen(false);
  };

  // Add product (mock)
  const handleAddProduct = async (newProduct: Omit<Product, 'id' | 'timestamp'>) => {
    try {
      // Mock image upload
      const imageUrl = 'https://placehold.co/400x300/EEE/31343C';
      // Add to Firestore (mock)
      await db.collection('products').add({
        ...newProduct,
        imageUrl,
        timestamp: Date.now(),
      });
      alert('Product added successfully!');
    } catch (error: any) {
      console.error('Error adding product:', error);
      alert('Failed to add product: ' + error.message);
    }
  };

  const handleLogin = (email: string, password: string) => {
    // Mock login
    setCurrentUser({ uid: 'mock-seller-user-id', email });
  };

  const handleSellerLoginClick = () => {
    if (currentUser) {
      setIsSellerPanelOpen(true);
    } else {
      setIsLoginModalOpen(true);
    }
  };

  return (
    <div className="bg-gray-100 min-h-screen">
      <MobileAppBanner />
      <Header
        onCartClick={() => setIsCartOpen(true)}
        onSellerClick={handleSellerLoginClick}
        cartCount={cart.reduce((acc, item) => acc + item.quantity, 0)}
      />
      <main className="container mx-auto py-8">
        {loading ? (
          <div className="text-center">
            <Loader2 className="h-8 w-8 animate-spin mx-auto text-gray-600" />
            <p>Loading products...</p>
          </div>
        ) : (
          <AnimatePresence>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {products.map((product) => (
                <ProductCard
                  key={product.id}
                  product={product}
                  onAddToCart={handleAddToCart}
                />
              ))}
            </div>
          </AnimatePresence>
        )}
      </main>
      <AnimatePresence>
        {isCartOpen && (
          <CartPanel
            cartItems={cart}
            onCheckout={handleCheckout}
            onClose={() => setIsCartOpen(false)}
          />
        )}
      </AnimatePresence>
      <AnimatePresence>
        {isSellerPanelOpen && (
          <SellerPanel
            onAddProduct={handleAddProduct}
            onClose={() => setIsSellerPanelOpen(false)}
            onLogin={() => {
              setIsSellerPanelOpen(false);
              setIsLoginModalOpen(true);
            }}
            isLoggedIn={!!currentUser}
          />
        )}
      </AnimatePresence>
      <AnimatePresence>
        {isLoginModalOpen && (
          <LoginModal
            onClose={() => setIsLoginModalOpen(false)}
            onLogin={handleLogin}
          />
        )}
      </AnimatePresence>
    </div>
  );
};

export default DesiBazaarApp;

</body></html>