"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import Container from "@/components/ui/Container";
import { Button, ButtonLink } from "@/components/ui/Button";
import { useCart } from "@/context/CartContext";

export default function CartPage() {
  const { cart, loading, removeItem } = useCart();
  const router = useRouter();

  return (
    <section className="py-16">
      <Container className="max-w-3xl mx-auto">
        <h1 className="font-display text-3xl text-neutral-900">Your Cart</h1>

        {loading ? (
          <p className="mt-8 text-sm text-neutral-500">Loading…</p>
        ) : !cart || cart.items.length === 0 ? (
          <div className="mt-8">
            <p className="text-neutral-600">Your cart is empty.</p>
            <div className="mt-6">
              <ButtonLink href="/products">Browse Products</ButtonLink>
            </div>
          </div>
        ) : (
          <>
            <div className="mt-8 divide-y divide-neutral-200 border-t border-b border-neutral-200">
              {cart.items.map((item) => (
                <div key={item.variantId} className="flex items-center justify-between gap-4 py-5">
                  <div>
                    <p className="font-medium text-neutral-900">{item.productName}</p>
                    <p className="text-xs text-neutral-500">SKU: {item.sku}</p>
                    <p className="text-sm text-neutral-600 mt-1">Qty: {item.quantity}</p>
                  </div>
                  <div className="flex items-center gap-4">
                    <span className="font-semibold text-neutral-900">${item.lineTotal.toFixed(2)}</span>
                    <button
                      onClick={() => removeItem(item.variantId)}
                      className="text-xs uppercase tracking-wide text-red-600 hover:text-red-700"
                    >
                      Remove
                    </button>
                  </div>
                </div>
              ))}
            </div>

            <div className="mt-6 flex items-center justify-between">
              <span className="text-lg font-medium text-neutral-900">Subtotal</span>
              <span className="text-lg font-semibold text-neutral-900">
                ${cart.subtotal.toFixed(2)} {cart.currency}
              </span>
            </div>

            <div className="mt-8 flex flex-col sm:flex-row gap-4">
              <Link href="/products" className="text-sm text-neutral-600 self-center hover:text-accent-500">
                ← Continue shopping
              </Link>
              <Button className="sm:ml-auto" onClick={() => router.push("/checkout")}>
                Proceed to Checkout
              </Button>
            </div>
          </>
        )}
      </Container>
    </section>
  );
}