import { useState } from "react";
import { Link } from "react-router-dom";
import { Minus, Plus, Trash2, ShoppingCart, ArrowLeft, Truck, ShieldCheck } from "lucide-react";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import { products } from "@/lib/data";

interface CartItem {
  productId: number;
  quantity: number;
}

const Cart = () => {
  const [cartItems, setCartItems] = useState<CartItem[]>([
    { productId: 1, quantity: 1 },
    { productId: 4, quantity: 2 },
  ]);

  const getProduct = (id: number) => products.find((p) => p.id === id);

  const updateQuantity = (productId: number, delta: number) => {
    setCartItems((prev) =>
      prev
        .map((item) =>
          item.productId === productId
            ? { ...item, quantity: Math.max(0, item.quantity + delta) }
            : item
        )
        .filter((item) => item.quantity > 0)
    );
  };

  const removeItem = (productId: number) => {
    setCartItems((prev) => prev.filter((item) => item.productId !== productId));
  };

  const subtotal = cartItems.reduce((sum, item) => {
    const product = getProduct(item.productId);
    return sum + (product ? product.price * item.quantity : 0);
  }, 0);

  const shipping = subtotal >= 500 ? 0 : 49;
  const tax = Math.round(subtotal * 0.0825);
  const total = subtotal + shipping + tax;

  return (
    <div className="min-h-screen bg-[#1a1a1a]">
      <Header />

      <div className="pt-20 lg:pt-24">
        <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 py-10">
          <h1 className="font-playfair text-3xl sm:text-4xl font-bold text-white mb-2">
            Shopping Cart
          </h1>
          <p className="font-inter text-[#888] mb-10">
            {cartItems.length} {cartItems.length === 1 ? "item" : "items"} in your cart
          </p>

          {cartItems.length === 0 ? (
            <div className="text-center py-20">
              <ShoppingCart className="w-16 h-16 text-[#444] mx-auto mb-4" />
              <h2 className="font-playfair text-2xl text-white mb-2">Your cart is empty</h2>
              <p className="font-inter text-[#888] mb-6">
                Discover our premium collection of grills and BBQ equipment.
              </p>
              <Link
                to="/products"
                className="font-oswald inline-flex items-center gap-2 bg-[#d35400] hover:bg-[#e67e22] text-white text-base font-semibold uppercase tracking-wider px-8 py-3 rounded transition-all"
              >
                Browse Products
              </Link>
            </div>
          ) : (
            <div className="grid grid-cols-1 lg:grid-cols-3 gap-10">
              {/* Cart Items */}
              <div className="lg:col-span-2 space-y-4">
                {cartItems.map((item) => {
                  const product = getProduct(item.productId);
                  if (!product) return null;
                  return (
                    <div
                      key={item.productId}
                      className="flex gap-4 sm:gap-6 bg-[#2b2b2b] border border-[#444] rounded-lg p-4 sm:p-6"
                    >
                      <Link to={`/products/${product.slug}`} className="w-24 h-24 sm:w-32 sm:h-32 rounded-lg overflow-hidden shrink-0">
                        <img src={product.image} alt={product.name} className="w-full h-full object-cover" />
                      </Link>
                      <div className="flex-1 min-w-0">
                        <div className="flex items-start justify-between gap-2">
                          <div>
                            <p className="font-oswald text-xs text-[#d35400] uppercase tracking-widest mb-1">
                              {product.category}
                            </p>
                            <Link to={`/products/${product.slug}`} className="font-playfair text-base sm:text-lg font-bold text-white hover:text-[#d35400] transition-colors leading-tight">
                              {product.name}
                            </Link>
                          </div>
                          <button
                            onClick={() => removeItem(item.productId)}
                            className="text-[#888] hover:text-red-500 transition-colors p-1 shrink-0"
                            aria-label="Remove item"
                          >
                            <Trash2 className="w-4 h-4" />
                          </button>
                        </div>

                        <div className="flex flex-wrap items-center gap-2 mt-2">
                          {product.inStock && (
                            <span className="inline-flex items-center gap-1 text-[#27ae60] text-xs font-semibold">
                              <span className="w-1.5 h-1.5 bg-[#27ae60] rounded-full" />
                              In Stock
                            </span>
                          )}
                          {product.freeShipping && (
                            <span className="inline-flex items-center gap-1 text-[#d35400] text-xs">
                              <Truck className="w-3 h-3" />
                              Free Shipping
                            </span>
                          )}
                        </div>

                        <div className="flex items-center justify-between mt-4">
                          <div className="flex items-center border border-[#444] rounded">
                            <button
                              onClick={() => updateQuantity(item.productId, -1)}
                              className="px-2 py-1.5 text-[#b0b0b0] hover:text-white hover:bg-[#333] transition-colors"
                            >
                              <Minus className="w-3 h-3" />
                            </button>
                            <span className="font-oswald text-white text-sm w-8 text-center">{item.quantity}</span>
                            <button
                              onClick={() => updateQuantity(item.productId, 1)}
                              className="px-2 py-1.5 text-[#b0b0b0] hover:text-white hover:bg-[#333] transition-colors"
                            >
                              <Plus className="w-3 h-3" />
                            </button>
                          </div>
                          <span className="font-oswald text-xl font-bold text-white">
                            ${(product.price * item.quantity).toLocaleString()}
                          </span>
                        </div>
                      </div>
                    </div>
                  );
                })}

                <Link to="/products" className="inline-flex items-center gap-2 font-oswald text-[#d35400] hover:text-[#e67e22] text-sm uppercase tracking-wider transition-colors mt-4">
                  <ArrowLeft className="w-4 h-4" />
                  Continue Shopping
                </Link>
              </div>

              {/* Order Summary */}
              <div>
                <div className="bg-[#2b2b2b] border border-[#444] rounded-lg p-6 sticky top-24">
                  <h2 className="font-oswald text-lg font-bold text-white uppercase tracking-wider mb-6">
                    Order Summary
                  </h2>

                  <div className="space-y-3 mb-6">
                    <div className="flex justify-between font-inter text-sm">
                      <span className="text-[#888]">Subtotal</span>
                      <span className="text-white">${subtotal.toLocaleString()}</span>
                    </div>
                    <div className="flex justify-between font-inter text-sm">
                      <span className="text-[#888]">Shipping</span>
                      <span className={shipping === 0 ? "text-[#27ae60]" : "text-white"}>
                        {shipping === 0 ? "FREE" : `$${shipping}`}
                      </span>
                    </div>
                    <div className="flex justify-between font-inter text-sm">
                      <span className="text-[#888]">Tax (est.)</span>
                      <span className="text-white">${tax.toLocaleString()}</span>
                    </div>
                    <div className="border-t border-[#444] pt-3 flex justify-between">
                      <span className="font-oswald text-base font-bold text-white uppercase">Total</span>
                      <span className="font-oswald text-2xl font-bold text-white">${total.toLocaleString()}</span>
                    </div>
                  </div>

                  {shipping > 0 && (
                    <p className="font-inter text-xs text-[#888] mb-4">
                      Add ${(500 - subtotal).toLocaleString()} more for free shipping
                    </p>
                  )}

                  <button className="w-full font-oswald bg-[#d35400] hover:bg-[#e67e22] text-white text-base font-semibold uppercase tracking-wider py-4 rounded transition-all duration-300 hover:shadow-[0_0_30px_rgba(211,84,0,0.3)] mb-4">
                    Proceed to Checkout
                  </button>

                  <div className="space-y-2 pt-4 border-t border-[#444]">
                    <div className="flex items-center gap-2 text-[#888] text-xs">
                      <ShieldCheck className="w-4 h-4 text-[#d35400]" />
                      <span className="font-inter">Secure 256-bit SSL checkout</span>
                    </div>
                    <div className="flex items-center gap-2 text-[#888] text-xs">
                      <Truck className="w-4 h-4 text-[#d35400]" />
                      <span className="font-inter">Free shipping on orders over $500</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>

      <Footer />
    </div>
  );
};

export default Cart;