"use client";
import { useCart } from "@/lib/use-cart";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Button } from "@/components/ui/button";
import { Footer } from "@/components/footer";
import { Trash2, Plus, Minus, ShoppingBag, ArrowRight } from "lucide-react";
import Link from "next/link";

export default function CartPage() {
  const { cart, updateQuantity, removeFromCart, total } = useCart();

  if (cart.length === 0) {
    return (
      <main className="min-h-screen bg-neutral-50">
        <Container className="py-20 text-center">
          <div className="bg-white p-12 rounded-3xl shadow-sm max-w-md mx-auto">
            <div className="w-20 h-20 bg-neutral-100 rounded-full flex items-center justify-center mx-auto mb-6">
              <ShoppingBag className="w-10 h-10 text-neutral-400" />
            </div>
            <Heading level={2} className="text-2xl mb-4">Your cart is empty</Heading>
            <p className="text-neutral-500 mb-8">Looks like you haven't added anything to your cart yet.</p>
            <Button asChild className="rounded-full px-8">
              <Link href="/products">Start Shopping</Link>
            </Button>
          </div>
        </Container>
        <Footer />
      </main>
    );
  }

  return (
    <main className="min-h-screen bg-neutral-50">
      <Container className="py-12">
        <Heading className="mb-8">Shopping Cart</Heading>
        
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          <div className="lg:col-span-2 space-y-4">
            {cart.map((item) => (
              <div key={item.id} className="bg-white p-4 rounded-2xl shadow-sm flex gap-4 items-center">
                <div className="w-24 h-24 rounded-xl overflow-hidden bg-neutral-100 flex-shrink-0">
                  <img src={item.image} alt={item.name} className="w-full h-full object-cover" />
                </div>
                <div className="flex-1 min-w-0">
                  <h3 className="font-semibold text-neutral-900 truncate">{item.name}</h3>
                  <p className="text-sm text-neutral-500">{item.category}</p>
                  <div className="mt-2 flex items-center gap-4">
                    <div className="flex items-center border rounded-full px-2 py-1">
                      <button 
                        onClick={() => updateQuantity(item.id, item.quantity - 1)}
                        className="p-1 hover:text-blue-600"
                      >
                        <Minus className="w-3 h-3" />
                      </button>
                      <span className="w-8 text-center text-sm font-medium">{item.quantity}</span>
                      <button 
                        onClick={() => updateQuantity(item.id, item.quantity + 1)}
                        className="p-1 hover:text-blue-600"
                      >
                        <Plus className="w-3 h-3" />
                      </button>
                    </div>
                    <button 
                      onClick={() => removeFromCart(item.id)}
                      className="text-red-500 hover:text-red-600 p-1"
                    >
                      <Trash2 className="w-4 h-4" />
                    </button>
                  </div>
                </div>
                <div className="text-right">
                  <div className="font-bold text-neutral-900">₹{item.price * item.quantity}</div>
                  <div className="text-xs text-neutral-400">₹{item.price} each</div>
                </div>
              </div>
            ))}
          </div>

          <div className="lg:col-span-1">
            <div className="bg-white p-6 rounded-3xl shadow-sm sticky top-24">
              <h3 className="font-bold text-lg mb-6">Order Summary</h3>
              <div className="space-y-4 mb-6">
                <div className="flex justify-between text-neutral-600">
                  <span>Subtotal</span>
                  <span>₹{total}</span>
                </div>
                <div className="flex justify-between text-neutral-600">
                  <span>Shipping</span>
                  <span className="text-green-600 font-medium">FREE</span>
                </div>
                <div className="flex justify-between text-neutral-600">
                  <span>Tax (GST)</span>
                  <span>₹{Math.round(total * 0.18)}</span>
                </div>
                <div className="pt-4 border-t flex justify-between font-bold text-xl text-neutral-900">
                  <span>Total</span>
                  <span>₹{total + Math.round(total * 0.18)}</span>
                </div>
              </div>
              <Button asChild className="w-full rounded-full py-6 text-lg">
                <Link href="/checkout" className="flex items-center justify-center gap-2">
                  Checkout <ArrowRight className="w-5 h-5" />
                </Link>
              </Button>
              <p className="text-[10px] text-neutral-400 text-center mt-4">
                Secure checkout powered by BharatPay
              </p>
            </div>
          </div>
        </div>
      </Container>
      <Footer />
    </main>
  );
}