import { retrieveCart } from "@lib/data/cart"
import { retrieveCustomer } from "@lib/data/customer"
import PaymentWrapper from "@modules/checkout/components/payment-wrapper"
import CheckoutForm from "@modules/checkout/templates/checkout-form"
import CheckoutSummary from "@modules/checkout/templates/checkout-summary"
import { Metadata } from "next"
import { notFound } from "next/navigation"

export const metadata: Metadata = {
  title: "Checkout — Totti",
}

export default async function Checkout() {
  const cart = await retrieveCart()

  if (!cart) {
    return notFound()
  }

  const customer = await retrieveCustomer()

  return (
    <div className="max-w-5xl mx-auto px-4 sm:px-6 py-6 md:py-10">
      <div className="grid grid-cols-1 lg:grid-cols-[1fr_360px] gap-6 lg:gap-10 items-start">
        {/* Left: checkout form */}
        <div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-5 md:p-8">
          <h1 className="text-xl font-black text-black mb-6 flex items-center gap-2">
            <span className="bg-yellow-400 text-black text-xs font-black px-2 py-0.5 rounded-full">
              {(cart.items?.reduce((a, i) => a + i.quantity, 0) ?? 0)} items
            </span>
            Delivery Details
          </h1>
          <PaymentWrapper cart={cart}>
            <CheckoutForm cart={cart} customer={customer} />
          </PaymentWrapper>
        </div>

        {/* Right: order summary — sticky on desktop, shown first on mobile */}
        <div className="lg:sticky lg:top-6 order-first lg:order-last">
          <CheckoutSummary cart={cart} />
        </div>
      </div>
    </div>
  )
}