'use client';
import Image from 'next/image';
import Link from 'next/link';
import { useCart, type CartItem } from '@/contexts/CartContext';

function formatPrice(cents: number) {
  return `€${(cents / 100).toFixed(2)}`;
}

function CartItemRow({ item }: { item: CartItem }) {
  const { removeItem, changeQuantity } = useCart();

  return (
    <div className="flex gap-4 py-4 border-b border-gray-100 last:border-0">
      {/* Image: bounded box (80x112 max, 5:7 ratio matching the backend
          thumbnail). The image preserves its source aspect ratio via
          `object-contain` so non-square images are not cropped. */}
      <div className="w-20 max-h-28 bg-gray-50 rounded-lg overflow-hidden flex-shrink-0 flex items-center justify-center">
        {item.imageUrl ? (
          <Image
            src={item.imageUrl.replace('/uploads/', '/uploads/40/')}
            alt={item.productName}
            width={80}
            height={112}
            className="object-contain"
          />
        ) : (
          <span className="text-3xl">🌿</span>
        )}
      </div>

      {/* Info */}
      <div className="flex-1 min-w-0">
        <Link href={`/products/${item.productId}`} className="font-semibold text-gray-900 hover:text-[#70ad47] transition-colors line-clamp-2 text-sm">
          {item.productName}
        </Link>
        <p className="text-gray-500 text-sm mt-1">{formatPrice(item.priceCents)}/ud</p>

        {/* Quantity controls */}
        <div className="flex items-center gap-3 mt-2">
          <div className="flex items-center border border-gray-300 rounded-lg">
            <button
              onClick={() => changeQuantity(item.variantId, item.quantity - 1)}
              disabled={item.quantity <= (item.minPurchaseQty ?? 1)}
              title={item.quantity <= (item.minPurchaseQty ?? 1) && (item.minPurchaseQty ?? 1) > 1 ? `Compra mínima: ${item.minPurchaseQty} uds.` : undefined}
              className="w-8 h-8 flex items-center justify-center text-gray-600 hover:text-[#70ad47] transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
            >
              −
            </button>
            <span className="w-8 text-center text-sm font-medium">{item.quantity}</span>
            <button
              onClick={() => changeQuantity(item.variantId, item.quantity + 1)}
              className="w-8 h-8 flex items-center justify-center text-gray-600 hover:text-[#70ad47] transition-colors"
            >
              +
            </button>
          </div>
          <button
            onClick={() => removeItem(item.variantId)}
            className="text-gray-400 hover:text-red-500 transition-colors text-sm"
          >
            Eliminar
          </button>
        </div>
      </div>

      {/* Subtotal */}
      <div className="text-right flex-shrink-0">
        <p className="font-bold text-[#70ad47]">{formatPrice(item.priceCents * item.quantity)}</p>
      </div>
    </div>
  );
}

export default function CartPageContent() {
  const { items, subtotalCents, itemCount, clearCart } = useCart();

  if (items.length === 0) {
    return (
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 text-center">
        <div className="text-6xl mb-4">🛒</div>
        <h1 className="text-2xl font-bold text-gray-900 mb-2">Tu carrito está vacío</h1>
        <p className="text-gray-500 mb-8">Añade productos para empezar tu pedido.</p>
        <Link href="/products" className="inline-flex items-center gap-2 px-6 py-3 bg-[#70ad47] hover:bg-[#5a9040] text-white font-semibold rounded-xl transition-colors">
          Ver productos
        </Link>
      </div>
    );
  }

  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <div className="mb-6">
        <h1 className="text-3xl font-bold text-gray-900" style={{ fontFamily: 'var(--font-heading)' }}>
          Carrito de compra
        </h1>
        <p className="mt-1 text-gray-500">{itemCount} artículo{itemCount !== 1 ? 's' : ''}</p>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
        {/* Items */}
        <div className="lg:col-span-2">
          <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
            {items.map((item) => (
              <CartItemRow key={item.variantId} item={item} />
            ))}
          </div>
          <button
            onClick={clearCart}
            className="mt-4 text-gray-400 hover:text-red-500 text-sm transition-colors"
          >
            Vaciar carrito
          </button>
        </div>

        {/* Summary */}
        <div>
          <div className="bg-gray-50 rounded-xl p-6 border border-gray-200 sticky top-24">
            <h2 className="font-bold text-gray-900 mb-4">Resumen del pedido</h2>

            <div className="space-y-3 text-sm">
              <div className="flex justify-between">
                <span className="text-gray-600">Subtotal ({itemCount} artículos)</span>
                <span className="font-medium">{formatPrice(subtotalCents)}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-gray-600">Envío</span>
                <span className="text-gray-500">Calculado en checkout</span>
              </div>
              <div className="flex justify-between text-gray-600">
                <span>Impuestos</span>
                <span>Incluidos</span>
              </div>
            </div>

            <div className="border-t border-gray-200 mt-4 pt-4 flex justify-between items-center">
              <span className="font-bold text-gray-900">Total</span>
              <span className="text-2xl font-bold text-[#70ad47]">{formatPrice(subtotalCents)}</span>
            </div>

            <Link
              href="/checkout"
              className="mt-4 w-full block text-center px-6 py-3.5 bg-[#70ad47] hover:bg-[#5a9040] text-white font-semibold rounded-xl transition-colors"
            >
              Proceder al checkout
            </Link>

            <Link
              href="/products"
              className="mt-2 w-full block text-center px-6 py-2 text-sm text-gray-500 hover:text-[#70ad47] transition-colors"
            >
              ← Seguir comprando
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
}
