'use client';

import Link from 'next/link';
import Image from 'next/image';
import { useCart } from '@/lib/cart-context';
import { ROUTES, productRoute } from '@/lib/routes';
import { formatPrice, DEFAULT_CURRENCY } from '@/lib/site-settings';
import type { ApiSiteSettings } from '@/lib/backend-api';

export function CartPageContent({ currency = DEFAULT_CURRENCY }: { currency?: ApiSiteSettings['currency'] }) {
  const { items, subtotal, updateQuantity, removeItem } = useCart();

  if (items.length === 0) {
    return (
      <section className="py-16">
        <div className="container-page max-w-2xl text-center">
          <span className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-beige text-navy-800">
            <svg viewBox="0 0 24 24" className="h-8 w-8" fill="none" stroke="currentColor" strokeWidth={1.6}>
              <path d="M3 4h2l2.5 12.5a2 2 0 0 0 2 1.5h7a2 2 0 0 0 2-1.6L21 8H6" />
              <circle cx="10" cy="20" r="1" />
              <circle cx="17" cy="20" r="1" />
            </svg>
          </span>
          <h1 className="mt-6 text-2xl font-serif font-bold text-navy-800">Your Cart is Empty</h1>
          <p className="mt-2 text-sm text-navy-600">Browse the shop and add a few handcrafted pieces to get started.</p>
          <Link href={ROUTES.shop} className="btn-primary mt-6 inline-flex">Continue Shopping</Link>
        </div>
      </section>
    );
  }

  return (
    <section className="py-12">
      <div className="container-page grid gap-8 lg:grid-cols-3">
        <div className="lg:col-span-2">
          <h1 className="font-serif text-2xl font-bold text-navy-800">Your Cart</h1>
          <div className="mt-6 space-y-4">
            {items.map((item) => (
              <div key={item.productId} className="card flex flex-wrap items-center gap-4 p-4">
                <Image
                  src={item.image}
                  alt={item.name}
                  width={80}
                  height={80}
                  className="h-20 w-20 rounded-md object-cover"
                />
                <div className="min-w-[10rem] flex-1">
                  <Link href={productRoute(item.slug)} className="text-sm font-semibold text-navy-800 hover:text-gold-600">
                    {item.name}
                  </Link>
                  <p className="mt-1 text-sm text-navy-600">{formatPrice(item.price, currency)}</p>
                </div>
                <div className="flex items-center rounded-md border border-navy-100">
                  <button
                    type="button"
                    aria-label="Decrease quantity"
                    onClick={() => updateQuantity(item.productId, item.quantity - 1)}
                    className="flex h-9 w-9 items-center justify-center text-navy-800 hover:bg-beige"
                  >
                    &#8722;
                  </button>
                  <span className="flex h-9 w-10 items-center justify-center border-x border-navy-100 text-sm font-medium text-navy-800">
                    {item.quantity}
                  </span>
                  <button
                    type="button"
                    aria-label="Increase quantity"
                    onClick={() => updateQuantity(item.productId, item.quantity + 1)}
                    className="flex h-9 w-9 items-center justify-center text-navy-800 hover:bg-beige"
                  >
                    +
                  </button>
                </div>
                <span className="w-24 text-right text-sm font-semibold text-navy-800">
                  {formatPrice(item.price * item.quantity, currency)}
                </span>
                <button
                  type="button"
                  aria-label="Remove item"
                  onClick={() => removeItem(item.productId)}
                  className="text-navy-400 hover:text-red-600"
                >
                  <svg viewBox="0 0 24 24" className="h-5 w-5" fill="none" stroke="currentColor" strokeWidth={1.8}>
                    <path d="M6 6l12 12M18 6L6 18" />
                  </svg>
                </button>
              </div>
            ))}
          </div>
        </div>

        <div className="card h-fit p-6">
          <h2 className="font-serif text-lg font-bold text-navy-800">Order Summary</h2>
          <div className="mt-4 flex items-center justify-between text-sm">
            <span className="text-navy-600">Subtotal</span>
            <span className="font-semibold text-navy-800">{formatPrice(subtotal, currency)}</span>
          </div>
          <p className="mt-1 text-xs text-navy-400">Shipping cost is confirmed after your order is placed.</p>
          <Link href={ROUTES.checkout} className="btn-primary mt-6 block text-center">Proceed to Checkout</Link>
        </div>
      </div>
    </section>
  );
}