import React, { useState, useEffect, createContext, useContext } from 'react';
import { initializeApp } from 'firebase/app';
import { getAuth, signInAnonymously, signInWithCustomToken, onAuthStateChanged } from 'firebase/auth';
import { getFirestore, collection, query, onSnapshot, doc, setDoc, updateDoc, deleteDoc, getDoc, addDoc, where, getDocs } from 'firebase/firestore';

// Firebase Context to provide db, auth, and userId to components
const FirebaseContext = createContext(null);

const App = () => {
  const [db, setDb] = useState(null);
  const [auth, setAuth] = useState(null);
  const [userId, setUserId] = useState(null);
  const [isAuthReady, setIsAuthReady] = useState(false);

  // Initialize Firebase and set up auth listener
  useEffect(() => {
    try {
      const firebaseConfig = typeof __firebase_config !== 'undefined' ? JSON.parse(__firebase_config) : {};
      const app = initializeApp(firebaseConfig);
      const firestoreDb = getFirestore(app);
      const firebaseAuth = getAuth(app);

      setDb(firestoreDb);
      setAuth(firebaseAuth);

      const unsubscribe = onAuthStateChanged(firebaseAuth, async (user) => {
        if (user) {
          setUserId(user.uid);
        } else {
          // Sign in anonymously if no user is found
          try {
            if (typeof __initial_auth_token !== 'undefined') {
              await signInWithCustomToken(firebaseAuth, __initial_auth_token);
            } else {
              await signInAnonymously(firebaseAuth);
            }
          } catch (error) {
            console.error("Error signing in anonymously:", error);
          }
        }
        setIsAuthReady(true); // Mark auth as ready after initial check
      });

      return () => unsubscribe();
    } catch (error) {
      console.error("Failed to initialize Firebase:", error);
    }
  }, []);

  if (!isAuthReady) {
    return (
      <div className="flex items-center justify-center min-h-screen bg-gray-100">
        <div className="text-xl font-semibold text-gray-700">Loading...</div>
      </div>
    );
  }

  return (
    <FirebaseContext.Provider value={{ db, auth, userId }}>
      <div className="min-h-screen bg-gray-100 font-inter">
        <Header />
        <MainContent />
        <Footer />
      </div>
    </FirebaseContext.Provider>
  );
};

const Header = () => {
  const { userId } = useContext(FirebaseContext);
  return (
    <header className="bg-gradient-to-r from-purple-600 to-indigo-700 text-white p-4 shadow-lg rounded-b-xl">
      <div className="container mx-auto flex justify-between items-center">
        <h1 className="text-3xl font-bold tracking-tight">Evangeline's</h1> {/* Updated name here */}
        <nav>
          <ul className="flex space-x-6">
            <li><a href="#home" className="hover:text-purple-200 transition duration-300">Home</a></li>
            <li><a href="#products" className="hover:text-purple-200 transition duration-300">Products</a></li>
            <li><a href="#cart" className="hover:text-purple-200 transition duration-300">Cart</a></li>
            <li><a href="#contact" className="hover:text-purple-200 transition duration-300">Contact</a></li>
          </ul>
        </nav>
        {userId && (
          <div className="text-sm bg-purple-700 bg-opacity-50 px-3 py-1 rounded-full">
            User ID: {userId}
          </div>
        )}
      </div>
    </header>
  );
};

const Footer = () => {
  return (
    <footer className="bg-gray-800 text-white p-6 mt-8 rounded-t-xl shadow-inner">
      <div className="container mx-auto text-center text-sm">
        &copy; {new Date().getFullYear()} Evangeline's. All rights reserved. {/* Updated name here */}
      </div>
    </footer>
  );
};

const MainContent = () => {
  const [view, setView] = useState('products'); // 'products', 'cart', 'checkout'

  const navigateTo = (newView) => {
    setView(newView);
  };

  return (
    <main className="container mx-auto p-4 mt-8">
      {view === 'products' && <ProductList navigateTo={navigateTo} />}
      {view === 'cart' && <ShoppingCart navigateTo={navigateTo} />}
      {view === 'checkout' && <Checkout navigateTo={navigateTo} />}
    </main>
  );
};

const ProductList = ({ navigateTo }) => {
  const { db, userId } = useContext(FirebaseContext);
  const [products, setProducts] = useState([]);
  const [cartItems, setCartItems] = useState({}); // {productId: quantity}
  const [message, setMessage] = useState('');
  const [showModal, setShowModal] = useState(false);

  // Fetch products from Firestore
  useEffect(() => {
    if (!db || !userId) return;

    const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';
    const productsCollectionRef = collection(db, `artifacts/${appId}/public/data/products`);

    const q = query(productsCollectionRef);
    const unsubscribe = onSnapshot(q, (snapshot) => {
      const fetchedProducts = snapshot.docs.map(doc => ({
        id: doc.id,
        ...doc.data()
      }));
      setProducts(fetchedProducts);
    }, (error) => {
      console.error("Error fetching products:", error);
      setMessage("Error loading products.");
      setShowModal(true);
    });

    return () => unsubscribe();
  }, [db, userId]);

  // Fetch cart items from Firestore
  useEffect(() => {
    if (!db || !userId) return;

    const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';
    const cartDocRef = doc(db, `artifacts/${appId}/users/${userId}/cart/current`);

    const unsubscribe = onSnapshot(cartDocRef, (docSnap) => {
      if (docSnap.exists()) {
        const data = docSnap.data();
        // Ensure data.items is an object, default to empty if not
        setCartItems(data.items || {});
      } else {
        setCartItems({});
      }
    }, (error) => {
      console.error("Error fetching cart:", error);
      setMessage("Error loading cart.");
      setShowModal(true);
    });

    return () => unsubscribe();
  }, [db, userId]);

  const addToCart = async (product) => {
    if (!db || !userId) {
      setMessage("Please wait for authentication to complete.");
      setShowModal(true);
      return;
    }

    const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';
    const cartDocRef = doc(db, `artifacts/${appId}/users/${userId}/cart/current`);

    try {
      const newQuantity = (cartItems[product.id] || 0) + 1;
      const updatedCartItems = {
        ...cartItems,
        [product.id]: newQuantity
      };

      await setDoc(cartDocRef, { items: updatedCartItems }, { merge: true });
      setMessage(`${product.name} added to cart!`);
      setShowModal(true);
    } catch (error) {
      console.error("Error adding to cart:", error);
      setMessage("Failed to add to cart.");
      setShowModal(true);
    }
  };

  // Function to seed initial products (run once for testing)
  const seedProducts = async () => {
    if (!db) return;
    const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';
    const productsCollectionRef = collection(db, `artifacts/${appId}/public/data/products`);

    const initialProducts = [
      { name: "Wireless Headphones", price: 99.99, description: "High-fidelity sound with noise cancellation.", imageUrl: "https://placehold.co/300x200/FFD700/000000?text=Headphones" },
      { name: "Smartwatch", price: 199.99, description: "Track your fitness and receive notifications.", imageUrl: "https://placehold.co/300x200/ADD8E6/000000?text=Smartwatch" },
      { name: "Portable Bluetooth Speaker", price: 49.99, description: "Powerful sound in a compact design.", imageUrl: "https://placehold.co/300x200/90EE90/000000?text=Speaker" },
      { name: "Gaming Mouse", price: 59.99, description: "Precision and speed for serious gamers.", imageUrl: "https://placehold.co/300x200/FFA07A/000000?text=Gaming+Mouse" },
    ];

    try {
      for (const product of initialProducts) {
        // Check if product already exists to avoid duplicates
        const q = query(productsCollectionRef, where("name", "==", product.name));
        const querySnapshot = await getDocs(q);
        if (querySnapshot.empty) {
          await addDoc(productsCollectionRef, product);
        }
      }
      setMessage("Products seeded successfully!");
      setShowModal(true);
    } catch (error) {
      console.error("Error seeding products:", error);
      setMessage("Failed to seed products.");
      setShowModal(true);
    }
  };


  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <h2 className="text-4xl font-extrabold text-gray-800 mb-8 col-span-full text-center">Our Products</h2>
      {products.length === 0 ? (
        <div className="col-span-full text-center text-gray-600 text-lg">
          No products available.
          <button
            onClick={seedProducts}
            className="ml-4 px-6 py-2 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-600 transition duration-300"
          >
            Seed Products
          </button>
        </div>
      ) : (
        products.map((product) => (
          <div key={product.id} className="bg-white rounded-xl shadow-lg overflow-hidden transform hover:scale-105 transition duration-300 ease-in-out">
            <img
              src={product.imageUrl}
              alt={product.name}
              className="w-full h-48 object-cover object-center"
              onError={(e) => { e.target.onerror = null; e.target.src = `https://placehold.co/300x200/CCCCCC/000000?text=Image+Error`; }}
            />
            <div className="p-6">
              <h3 className="text-xl font-semibold text-gray-900 mb-2">{product.name}</h3>
              <p className="text-gray-600 text-sm mb-4 line-clamp-2">{product.description}</p>
              <div className="flex justify-between items-center">
                <span className="text-2xl font-bold text-purple-700">${product.price.toFixed(2)}</span>
                <button
                  onClick={() => addToCart(product)}
                  className="bg-purple-600 text-white px-5 py-2 rounded-lg shadow-md hover:bg-purple-700 transition duration-300 flex items-center space-x-2"
                >
                  <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                    <path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.5 13 5.373 13h12.553a1 1 0 000-2H5.373a.5.5 0 01-.39-.188l-.862-.863A.997 0 004 9.892V4H3a1 1 0 000 2h.22L3 1z" />
                    <path d="M16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" />
                  </svg>
                  <span>Add to Cart</span>
                </button>
              </div>
            </div>
          </div>
        ))
      )}
      <div className="col-span-full flex justify-center mt-8">
        <button
          onClick={() => navigateTo('cart')}
          className="px-8 py-3 bg-indigo-600 text-white font-semibold rounded-lg shadow-xl hover:bg-indigo-700 transition duration-300 text-lg"
        >
          View Cart ({Object.values(cartItems).reduce((sum, qty) => sum + qty, 0)})
        </button>
      </div>

      {showModal && (
        <MessageModal message={message} onClose={() => setShowModal(false)} />
      )}
    </div>
  );
};

const ShoppingCart = ({ navigateTo }) => {
  const { db, userId } = useContext(FirebaseContext);
  const [cartItems, setCartItems] = useState({}); // {productId: quantity}
  const [products, setProducts] = useState([]); // To get product details
  const [message, setMessage] = useState('');
  const [showModal, setShowModal] = useState(false);

  // Fetch products (needed to display product names/prices in cart)
  useEffect(() => {
    if (!db || !userId) return;

    const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';
    const productsCollectionRef = collection(db, `artifacts/${appId}/public/data/products`);

    const unsubscribe = onSnapshot(productsCollectionRef, (snapshot) => {
      const fetchedProducts = snapshot.docs.map(doc => ({
        id: doc.id,
        ...doc.data()
      }));
      setProducts(fetchedProducts);
    }, (error) => {
      console.error("Error fetching products for cart:", error);
      setMessage("Error loading product details for cart.");
      setShowModal(true);
    });

    return () => unsubscribe();
  }, [db, userId]);

  // Fetch cart items
  useEffect(() => {
    if (!db || !userId) return;

    const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';
    const cartDocRef = doc(db, `artifacts/${appId}/users/${userId}/cart/current`);

    const unsubscribe = onSnapshot(cartDocRef, (docSnap) => {
      if (docSnap.exists()) {
        setCartItems(docSnap.data().items || {});
      } else {
        setCartItems({});
      }
    }, (error) => {
      console.error("Error fetching cart:", error);
      setMessage("Error loading cart.");
      setShowModal(true);
    });

    return () => unsubscribe();
  }, [db, userId]);

  const updateCartItemQuantity = async (productId, newQuantity) => {
    if (!db || !userId) {
      setMessage("Please wait for authentication to complete.");
      setShowModal(true);
      return;
    }

    const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';
    const cartDocRef = doc(db, `artifacts/${appId}/users/${userId}/cart/current`);

    try {
      const updatedCartItems = { ...cartItems };
      if (newQuantity <= 0) {
        delete updatedCartItems[productId];
      } else {
        updatedCartItems[productId] = newQuantity;
      }
      await setDoc(cartDocRef, { items: updatedCartItems }, { merge: true });
    } catch (error) {
      console.error("Error updating cart quantity:", error);
      setMessage("Failed to update cart quantity.");
      setShowModal(true);
    }
  };

  const getProductDetails = (productId) => {
    return products.find(p => p.id === productId);
  };

  const calculateTotal = () => {
    let total = 0;
    for (const productId in cartItems) {
      const product = getProductDetails(productId);
      if (product) {
        total += product.price * cartItems[productId];
      }
    }
    return total;
  };

  const totalItems = Object.values(cartItems).reduce((sum, qty) => sum + qty, 0);

  return (
    <div className="bg-white p-8 rounded-xl shadow-lg">
      <h2 className="text-4xl font-extrabold text-gray-800 mb-8 text-center">Your Shopping Cart</h2>
      {totalItems === 0 ? (
        <div className="text-center text-gray-600 text-lg">
          Your cart is empty.
          <button
            onClick={() => navigateTo('products')}
            className="block mx-auto mt-6 px-6 py-2 bg-purple-600 text-white font-semibold rounded-lg shadow-md hover:bg-purple-700 transition duration-300"
          >
            Go to Products
          </button>
        </div>
      ) : (
        <>
          <div className="space-y-6">
            {Object.entries(cartItems).map(([productId, quantity]) => {
              const product = getProductDetails(productId);
              if (!product) return null; // Product might not be loaded yet or deleted

              return (
                <div key={productId} className="flex items-center justify-between border-b pb-4 last:border-b-0">
                  <div className="flex items-center space-x-4">
                    <img
                      src={product.imageUrl}
                      alt={product.name}
                      className="w-20 h-20 object-cover rounded-lg shadow"
                      onError={(e) => { e.target.onerror = null; e.target.src = `https://placehold.co/80x80/CCCCCC/000000?text=Image`; }}
                    />
                    <div>
                      <h3 className="text-lg font-semibold text-gray-900">{product.name}</h3>
                      <p className="text-gray-600">${product.price.toFixed(2)}</p>
                    </div>
                  </div>
                  <div className="flex items-center space-x-3">
                    <button
                      onClick={() => updateCartItemQuantity(productId, quantity - 1)}
                      className="bg-gray-200 text-gray-700 w-8 h-8 rounded-full flex items-center justify-center hover:bg-gray-300 transition duration-200"
                    >
                      -
                    </button>
                    <span className="text-xl font-medium text-gray-800">{quantity}</span>
                    <button
                      onClick={() => updateCartItemQuantity(productId, quantity + 1)}
                      className="bg-gray-200 text-gray-700 w-8 h-8 rounded-full flex items-center justify-center hover:bg-gray-300 transition duration-200"
                    >
                      +
                    </button>
                  </div>
                  <div className="text-lg font-bold text-purple-700">
                    ${(product.price * quantity).toFixed(2)}
                  </div>
                </div>
              );
            })}
          </div>
          <div className="mt-8 pt-6 border-t border-gray-200 flex justify-between items-center">
            <span className="text-2xl font-bold text-gray-800">Total:</span>
            <span className="text-3xl font-extrabold text-purple-800">${calculateTotal().toFixed(2)}</span>
          </div>
          <div className="flex justify-between mt-8">
            <button
              onClick={() => navigateTo('products')}
              className="px-6 py-3 bg-gray-300 text-gray-800 font-semibold rounded-lg shadow-md hover:bg-gray-400 transition duration-300"
            >
              Continue Shopping
            </button>
            <button
              onClick={() => navigateTo('checkout')}
              className="px-8 py-3 bg-green-600 text-white font-semibold rounded-lg shadow-xl hover:bg-green-700 transition duration-300"
            >
              Proceed to Checkout
            </button>
          </div>
        </>
      )}
      {showModal && (
        <MessageModal message={message} onClose={() => setShowModal(false)} />
      )}
    </div>
  );
};

const Checkout = ({ navigateTo }) => {
  const { db, userId } = useContext(FirebaseContext);
  const [cartItems, setCartItems] = useState({});
  const [products, setProducts] = useState([]);
  const [message, setMessage] = useState('');
  const [showModal, setShowModal] = useState(false);

  // Fetch products
  useEffect(() => {
    if (!db || !userId) return;
    const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';
    const productsCollectionRef = collection(db, `artifacts/${appId}/public/data/products`);
    const unsubscribe = onSnapshot(productsCollectionRef, (snapshot) => {
      const fetchedProducts = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }));
      setProducts(fetchedProducts);
    });
    return () => unsubscribe();
  }, [db, userId]);

  // Fetch cart items
  useEffect(() => {
    if (!db || !userId) return;
    const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';
    const cartDocRef = doc(db, `artifacts/${appId}/users/${userId}/cart/current`);
    const unsubscribe = onSnapshot(cartDocRef, (docSnap) => {
      if (docSnap.exists()) {
        setCartItems(docSnap.data().items || {});
      } else {
        setCartItems({});
      }
    });
    return () => unsubscribe();
  }, [db, userId]);

  const getProductDetails = (productId) => {
    return products.find(p => p.id === productId);
  };

  const calculateTotal = () => {
    let total = 0;
    for (const productId in cartItems) {
      const product = getProductDetails(productId);
      if (product) {
        total += product.price * cartItems[productId];
      }
    }
    return total;
  };

  const handlePlaceOrder = async () => {
    if (!db || !userId) {
      setMessage("Please wait for authentication to complete.");
      setShowModal(true);
      return;
    }

    const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';
    const ordersCollectionRef = collection(db, `artifacts/${appId}/users/${userId}/orders`);
    const cartDocRef = doc(db, `artifacts/${appId}/users/${userId}/cart/current`);

    if (Object.keys(cartItems).length === 0) {
      setMessage("Your cart is empty. Please add items before checking out.");
      setShowModal(true);
      return;
    }

    try {
      const orderDetails = {
        userId: userId,
        items: cartItems,
        total: calculateTotal(),
        orderDate: new Date().toISOString(),
        status: 'Pending',
      };
      await addDoc(ordersCollectionRef, orderDetails); // Add order to orders collection
      await deleteDoc(cartDocRef); // Clear the cart
      setMessage("Order placed successfully! Thank you for your purchase.");
      setShowModal(true);
      // Optionally navigate to an order confirmation page or products page after a delay
      setTimeout(() => navigateTo('products'), 2000);
    } catch (error) {
      console.error("Error placing order:", error);
      setMessage("Failed to place order. Please try again.");
      setShowModal(true);
    }
  };

  return (
    <div className="bg-white p-8 rounded-xl shadow-lg">
      <h2 className="text-4xl font-extrabold text-gray-800 mb-8 text-center">Checkout</h2>

      <div className="mb-6">
        <h3 className="text-2xl font-semibold text-gray-700 mb-4">Order Summary</h3>
        {Object.keys(cartItems).length === 0 ? (
          <p className="text-gray-600">No items in cart for checkout.</p>
        ) : (
          <ul className="space-y-3">
            {Object.entries(cartItems).map(([productId, quantity]) => {
              const product = getProductDetails(productId);
              if (!product) return null;
              return (
                <li key={productId} className="flex justify-between items-center text-gray-800">
                  <span>{product.name} x {quantity}</span>
                  <span className="font-medium">${(product.price * quantity).toFixed(2)}</span>
                </li>
              );
            })}
          </ul>
        )}
        <div className="mt-6 pt-4 border-t border-gray-200 flex justify-between items-center text-xl font-bold text-gray-900">
          <span>Total:</span>
          <span>${calculateTotal().toFixed(2)}</span>
        </div>
      </div>

      <div className="mb-6">
        <h3 className="text-2xl font-semibold text-gray-700 mb-4">Shipping Information</h3>
        <form className="space-y-4">
          <div>
            <label htmlFor="fullName" className="block text-sm font-medium text-gray-700">Full Name</label>
            <input type="text" id="fullName" className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2 focus:ring-purple-500 focus:border-purple-500" placeholder="John Doe" />
          </div>
          <div>
            <label htmlFor="address" className="block text-sm font-medium text-gray-700">Address</label>
            <input type="text" id="address" className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2 focus:ring-purple-500 focus:border-purple-500" placeholder="123 Main St" />
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
            <div>
              <label htmlFor="city" className="block text-sm font-medium text-gray-700">City</label>
              <input type="text" id="city" className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2 focus:ring-purple-500 focus:border-purple-500" placeholder="Anytown" />
            </div>
            <div>
              <label htmlFor="state" className="block text-sm font-medium text-gray-700">State</label>
              <input type="text" id="state" className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2 focus:ring-purple-500 focus:border-purple-500" placeholder="CA" />
            </div>
            <div>
              <label htmlFor="zip" className="block text-sm font-medium text-gray-700">ZIP Code</label>
              <input type="text" id="zip" className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2 focus:ring-purple-500 focus:border-purple-500" placeholder="12345" />
            </div>
          </div>
        </form>
      </div>

      <div className="mb-8">
        <h3 className="text-2xl font-semibold text-gray-700 mb-4">Payment Information</h3>
        <form className="space-y-4">
          <div>
            <label htmlFor="cardNumber" className="block text-sm font-medium text-gray-700">Card Number</label>
            <input type="text" id="cardNumber" className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2 focus:ring-purple-500 focus:border-purple-500" placeholder="XXXX XXXX XXXX XXXX" />
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <label htmlFor="expiryDate" className="block text-sm font-medium text-gray-700">Expiry Date (MM/YY)</label>
              <input type="text" id="expiryDate" className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2 focus:ring-purple-500 focus:border-purple-500" placeholder="12/25" />
            </div>
            <div>
              <label htmlFor="cvv" className="block text-sm font-medium text-gray-700">CVV</label>
              <input type="text" id="cvv" className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2 focus:ring-purple-500 focus:border-purple-500" placeholder="123" />
            </div>
          </div>
        </form>
      </div>

      <div className="flex justify-between mt-8">
        <button
          onClick={() => navigateTo('cart')}
          className="px-6 py-3 bg-gray-300 text-gray-800 font-semibold rounded-lg shadow-md hover:bg-gray-400 transition duration-300"
        >
          Back to Cart
        </button>
        <button
          onClick={handlePlaceOrder}
          className="px-8 py-3 bg-indigo-600 text-white font-semibold rounded-lg shadow-xl hover:bg-indigo-700 transition duration-300"
        >
          Place Order
        </button>
      </div>

      {showModal && (
        <MessageModal message={message} onClose={() => setShowModal(false)} />
      )}
    </div>
  );
};

const MessageModal = ({ message, onClose }) => {
  return (
    <div className="fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center z-50">
      <div className="bg-white p-6 rounded-lg shadow-xl max-w-sm w-full text-center">
        <p className="text-lg font-semibold text-gray-800 mb-4">{message}</p>
        <button
          onClick={onClose}
          className="px-5 py-2 bg-purple-600 text-white rounded-lg shadow-md hover:bg-purple-700 transition duration-300"
        >
          OK
        </button>
      </div>
    </div>
  );
};

export default App;