"use client"

import Link from "next/link"
import { Minus, Plus, Trash2, ArrowLeft, ShoppingBag, Banknote, CreditCard } from "lucide-react"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { CartProvider, useCart } from "@/lib/cart-context"

function CartContent() {
  const { items, removeFromCart, updateQuantity, totalPrice } = useCart()

  if (items.length === 0) {
    return (
      <div className="container mx-auto px-4 py-16 text-center">
        <div className="max-w-md mx-auto">
          <ShoppingBag className="w-20 h-20 text-muted-foreground mx-auto mb-6" />
          <h2 className="text-2xl font-bold text-foreground mb-4">Your Cart is Empty</h2>
          <p className="text-muted-foreground mb-8">Looks like you haven't added any products yet.</p>
          <Link
            href="/"
            className="inline-flex items-center gap-2 bg-primary hover:bg-primary/90 text-primary-foreground px-6 py-3 rounded-lg font-semibold transition-colors"
          >
            <ArrowLeft className="w-5 h-5" />
            Continue Shopping
          </Link>
        </div>
      </div>
    )
  }

  return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-2xl md:text-3xl font-bold text-foreground mb-8">Shopping Cart ({items.length} items)</h1>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
        {/* Cart Items */}
        <div className="lg:col-span-2 space-y-4">
          {items.map((item) => (
            <div key={item.id} className="bg-card rounded-xl border border-border p-4 flex gap-4">
              <div className="w-24 h-24 bg-muted rounded-lg overflow-hidden shrink-0">
                <img src={item.image || "/placeholder.svg"} alt={item.name} className="w-full h-full object-cover" />
              </div>
              <div className="flex-1">
                <Link
                  href={`/product/${item.slug}`}
                  className="font-semibold text-foreground hover:text-primary transition-colors"
                >
                  {item.name}
                </Link>
                <div className="flex items-center gap-2 mt-1">
                  <span className="text-success font-bold">Rs. {item.price.toLocaleString()}</span>
                  <span className="text-muted-foreground text-sm line-through">Rs. {item.mrp.toLocaleString()}</span>
                </div>
                <div className="flex items-center justify-between mt-3">
                  <div className="flex items-center border border-border rounded-lg">
                    <button
                      onClick={() => updateQuantity(item.id, item.quantity - 1)}
                      className="w-8 h-8 flex items-center justify-center hover:bg-muted transition-colors"
                    >
                      <Minus className="w-4 h-4" />
                    </button>
                    <span className="w-10 text-center font-medium">{item.quantity}</span>
                    <button
                      onClick={() => updateQuantity(item.id, item.quantity + 1)}
                      className="w-8 h-8 flex items-center justify-center hover:bg-muted transition-colors"
                    >
                      <Plus className="w-4 h-4" />
                    </button>
                  </div>
                  <button
                    onClick={() => removeFromCart(item.id)}
                    className="text-destructive hover:text-destructive/80 p-2 transition-colors"
                  >
                    <Trash2 className="w-5 h-5" />
                  </button>
                </div>
              </div>
            </div>
          ))}

          <Link href="/" className="inline-flex items-center gap-2 text-primary hover:text-primary/80 font-medium">
            <ArrowLeft className="w-5 h-5" />
            Continue Shopping
          </Link>
        </div>

        {/* Order Summary */}
        <div className="lg:col-span-1">
          <div className="bg-card rounded-xl border border-border p-6 sticky top-24">
            <h2 className="text-xl font-bold text-foreground mb-6">Order Summary</h2>

            <div className="space-y-3 mb-6">
              <div className="flex justify-between text-muted-foreground">
                <span>Subtotal</span>
                <span>Rs. {totalPrice.toLocaleString()}</span>
              </div>
              <div className="flex justify-between text-muted-foreground">
                <span>Delivery</span>
                <span className="text-success">Free</span>
              </div>
              <div className="border-t border-border pt-3">
                <div className="flex justify-between font-bold text-lg text-foreground">
                  <span>Total</span>
                  <span>Rs. {totalPrice.toLocaleString()}</span>
                </div>
              </div>
            </div>

            <div className="space-y-3">
              <Link
                href="/checkout?type=cod"
                className="w-full flex items-center justify-center gap-2 bg-foreground hover:bg-foreground/90 text-background py-4 rounded-xl font-semibold text-lg transition-colors"
              >
                <Banknote className="w-5 h-5" />
                Buy with Cash on Delivery
              </Link>
              <Link
                href="/checkout?type=online"
                className="w-full flex items-center justify-center gap-2 bg-primary hover:bg-primary/90 text-primary-foreground py-4 rounded-xl font-semibold text-lg transition-colors"
              >
                <CreditCard className="w-5 h-5" />
                Buy it now
              </Link>
            </div>

            <div className="mt-6 pt-6 border-t border-border">
              <p className="text-sm text-muted-foreground text-center mb-3">We Accept</p>
              <div className="flex justify-center gap-2 flex-wrap">
                <span className="bg-green-500 text-white px-3 py-1 rounded text-xs font-semibold">EasyPaisa</span>
                <span className="bg-red-500 text-white px-3 py-1 rounded text-xs font-semibold">JazzCash</span>
                <span className="bg-blue-500 text-white px-3 py-1 rounded text-xs font-semibold">Bank</span>
                <span className="bg-amber-500 text-white px-3 py-1 rounded text-xs font-semibold">COD</span>
              </div>
            </div>

            <div className="mt-4 p-3 bg-muted rounded-lg">
              <p className="text-xs text-muted-foreground text-center">100% Private & Discreet Packaging Guaranteed</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default function CartPage() {
  return (
    <CartProvider>
      <div className="min-h-screen flex flex-col">
        <Header />
        <main className="flex-1 bg-muted">
          <CartContent />
        </main>
        <Footer />
      </div>
    </CartProvider>
  )
}
