import { useState } from "react";
import { FaSmile, FaLaugh, FaStar, FaCog } from "react-icons/fa";

export default function StickerStore() {
  const [cart, setCart] = useState([]);
  const [email, setEmail] = useState("");
  const [user, setUser] = useState(null);

  const products = [
    { id: 1, name: "Sticker 1", price: 3.99, colorClass: "bg-orange-200" },
    { id: 2, name: "Sticker 2", price: 4.99, colorClass: "bg-blue-200" },
    { id: 3, name: "Sticker 3", price: 2.99, colorClass: "bg-green-200" },
    { id: 4, name: "Sticker 4", price: 5.49, colorClass: "bg-purple-200" }
  ];

  const categories = [
    { name: "Cute", icon: <FaSmile size={40} className="mx-auto mb-2 text-yellow-500" /> },
    { name: "Funny", icon: <FaLaugh size={40} className="mx-auto mb-2 text-green-500" /> },
    { name: "Holographic", icon: <FaStar size={40} className="mx-auto mb-2 text-indigo-500" /> },
    { name: "Custom", icon: <FaCog size={40} className="mx-auto mb-2 text-orange-500" /> }
  ];

  function addToCart(product) {
    setCart((prev) => {
      const idx = prev.findIndex((p) => p.id === product.id);
      if (idx === -1) return [...prev, { ...product, qty: 1 }];
      const copy = [...prev];
      copy[idx] = { ...copy[idx], qty: copy[idx].qty + 1 };
      return copy;
    });
  }

  function removeFromCart(index) {
    setCart((prev) => prev.filter((_, i) => i !== index));
  }

  function updateQty(index, qty) {
    setCart((prev) => {
      const copy = [...prev];
      if (qty <= 0) {
        copy.splice(index, 1);
      } else {
        copy[index] = { ...copy[index], qty };
      }
      return copy;
    });
  }

  function cartItemCount() {
    return cart.reduce((s, p) => s + (p.qty || 0), 0);
  }

  function cartTotal() {
    return cart.reduce((s, p) => s + (p.qty || 0) * p.price, 0).toFixed(2);
  }

  function handleSubscribe() {
    if (!email) return;
    alert(`Subscribed with ${email}`);
    setEmail("");
  }

  function handleLogin() {
    setUser({ name: "Guest User" });
  }

  function handleLogout() {
    setUser(null);
  }

  function handleCheckout() {
    if (cart.length === 0) return alert("Your cart is empty");
    alert(`Checking out ${cartItemCount()} item(s). Total: $${cartTotal()}`);
    setCart([]);
  }

  return (
    <div className="min-h-screen flex flex-col bg-white text-gray-900">
      <header className="sticky top-0 bg-black text-white shadow-md z-50">
        <div className="container mx-auto flex items-center justify-between py-4 px-6">
          <div className="text-2xl font-bold">StickerCo</div>
          <nav className="hidden md:flex space-x-6 font-medium" aria-label="Main navigation">
            <a href="#" className="hover:text-gray-300">Home</a>
            <a href="#" className="hover:text-gray-300">Shop All</a>
            <a href="#" className="hover:text-gray-300">Categories</a>
            <a href="#" className="hover:text-gray-300">About</a>
            <a href="#" className="hover:text-gray-300">Contact</a>
          </nav>
          <div className="flex items-center space-x-4">
            <input type="search" aria-label="Search stickers" placeholder="Search..." className="border rounded-lg px-3 py-1 hidden md:block text-black" />
            <button type="button" className="relative" aria-label="View cart">
              🛒
              {cartItemCount() > 0 && (
                <span className="absolute -top-2 -right-2 bg-red-600 text-white text-xs px-1 rounded-full">{cartItemCount()}</span>
              )}
            </button>
            {user ? (
              <button type="button" onClick={handleLogout}>Logout ({user.name})</button>
            ) : (
              <button type="button" onClick={handleLogin}>Login</button>
            )}
          </div>
        </div>
      </header>

      <section className="bg-black text-white py-20 text-center">
        <h1 className="text-4xl md:text-6xl font-extrabold mb-4">New Season, Fresh Stickers ✨</h1>
        <p className="mb-6">Discover our latest collection of fun and creative designs.</p>
        <button type="button" className="bg-white text-black font-semibold px-6 py-3 rounded-full shadow hover:bg-gray-200">Shop Now</button>
      </section>

      <section className="container mx-auto py-16 px-6">
        <h2 className="text-3xl font-bold mb-8 text-center">Shop by Category</h2>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
          {categories.map((cat) => (
            <button key={cat.name} type="button" className="p-8 rounded-2xl shadow hover:shadow-lg cursor-pointer text-center font-semibold bg-gray-100">
              {cat.icon}
              <div>{cat.name} Stickers</div>
            </button>
          ))}
        </div>
      </section>

      <section className="bg-gray-50 py-16 px-6">
        <h2 className="text-3xl font-bold mb-8 text-center">Best Sellers</h2>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
          {products.map((product, idx) => (
            <div key={product.id} className="bg-white rounded-xl shadow hover:shadow-lg p-4 text-center">
              <div className={`h-32 rounded-lg mb-4 ${product.colorClass}`}></div>
              <h3 className="font-semibold">{product.name}</h3>
              <p className="text-black font-bold">${product.price.toFixed(2)}</p>
              <button type="button" onClick={() => addToCart(product)} className="mt-2 bg-black text-white px-4 py-2 rounded-lg hover:bg-gray-800">Add to Cart</button>
            </div>
          ))}
        </div>
      </section>

      {cart.length > 0 && (
        <section className="container mx-auto py-10 px-6">
          <h2 className="text-2xl font-bold mb-4">Your Cart</h2>
          <ul className="space-y-2">
            {cart.map((item, idx) => (
              <li key={item.id} className="flex justify-between items-center bg-gray-100 p-3 rounded-lg">
                <div className="flex items-center gap-4">
                  <div className={`w-12 h-12 rounded-md ${item.colorClass}`}></div>
                  <div>
                    <div className="font-medium">{item.name}</div>
                    <div className="text-sm text-gray-600">${item.price.toFixed(2)} each</div>
                  </div>
                </div>
                <div className="flex items-center gap-3">
                  <input aria-label={`Quantity for ${item.name}`} type="number" min="1" value={item.qty} onChange={(e) => updateQty(idx, Number(e.target.value) || 0)} className="w-16 text-center rounded" />
                  <div className="font-semibold">${(item.qty * item.price).toFixed(2)}</div>
                  <button type="button" onClick={() => removeFromCart(idx)} className="text-red-600 font-bold">Remove</button>
                </div>
              </li>
            ))}
          </ul>
          <div className="mt-4 flex justify-between items-center">
            <div className="text-lg font-bold">Total: ${cartTotal()}</div>
            <div>
              <button type="button" onClick={handleCheckout} className="bg-black text-white px-6 py-2 rounded-lg">Checkout</button>
            </div>
          </div>
        </section>
      )}

      <section className="container mx-auto py-16 px-6 text-center">
        <h2 className="text-3xl font-bold mb-6">Create Your Own Sticker</h2>
        <p className="mb-6">Upload your design, pick a size and finish, and make it yours.</p>
        <button type="button" className="bg-black text-white px-6 py-3 rounded-full font-semibold hover:bg-gray-800">Start Designing</button>
      </section>

      <section className="bg-gray-50 py-16 px-6">
        <h2 className="text-3xl font-bold mb-8 text-center">What Our Customers Say</h2>
        <div className="grid md:grid-cols-3 gap-6">
          {[1, 2, 3].map((t) => (
            <div key={t} className="p-6 rounded-xl shadow bg-white">
              <div className="italic mb-4">“Absolutely love these stickers! Great quality and super cute designs.”</div>
              <div className="font-bold text-yellow-500">★★★★★</div>
              <div className="text-sm mt-2">- Happy Customer</div>
            </div>
          ))}
        </div>
      </section>

      <section className="py-16 px-6 text-center bg-black text-white">
        <h2 className="text-3xl font-bold mb-4">Join Our Sticker Club</h2>
        <p className="mb-6">Sign up for 10% off your first order & exclusive designs!</p>
        <div className="flex justify-center">
          <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Your email" className="px-4 py-2 rounded-l-lg text-black w-64" />
          <button type="button" onClick={handleSubscribe} className="bg-white text-black font-semibold px-4 py-2 rounded-r-lg hover:bg-gray-200">Subscribe</button>
        </div>
      </section>

      <footer className="bg-black text-gray-400 py-10 px-6">
        <div className="container mx-auto grid md:grid-cols-3 gap-6">
          <div>
            <h3 className="text-white font-bold mb-4">StickerCo</h3>
            <div>High-quality stickers for every vibe. Express yourself with our unique designs.</div>
          </div>
          <div>
            <h4 className="text-white font-semibold mb-4">Quick Links</h4>
            <ul className="space-y-2">
              <li><a href="#" className="hover:text-white">FAQ</a></li>
              <li><a href="#" className="hover:text-white">Shipping Info</a></li>
              <li><a href="#" className="hover:text-white">Return Policy</a></li>
              <li><a href="#" className="hover:text-white">Terms & Privacy</a></li>
            </ul>
          </div>
          <div>
            <h4 className="text-white font-semibold mb-4">Follow Us</h4>
            <div className="flex space-x-4">
              <a href="#">📸</a>
              <a href="#">🐦</a>
              <a href="#">👍</a>
            </div>
          </div>
        </div>
        <div className="text-center text-sm mt-8">© {new Date().getFullYear()} StickerCo. All rights reserved.</div>
      </footer>
    </div>
  );
}