import Link from "next/link";
import type { Metadata } from "next";
import { formatMoney } from "@salixcommerce/core";
import { CartLineControls } from "@/components/cart-line-controls";
import { CartLine } from "@/components/storefront";
import { EmptyState, Hero, Notification, PageContainer } from "@/components/ui";
import { applicationConfiguration } from "@/config/public";
import { loadCurrentCart } from "@/server/commerce/current-commerce";

export const metadata: Metadata = { title: "Cart" };
export const dynamic = "force-dynamic";

export default async function CartPage() {
  const cart = await loadCurrentCart();
  if (cart === null || cart.lines.length === 0) {
    return (
      <PageContainer>
        <Hero
          description="Your cart is stored on the server and priced from the current catalog."
          eyebrow="Cart"
          title="Your cart"
        />
        <EmptyState
          action={
            <Link className="button button--secondary" href="/shop">
              Browse products
            </Link>
          }
          description="Add a product option to begin an order."
          title="Your cart is empty"
        />
      </PageContainer>
    );
  }

  const canOrder = cart.lines.every((line) => line.purchasable);
  return (
    <PageContainer>
      <Hero
        description="Quantities persist in the database; every displayed price and total is recalculated from canonical catalog data."
        eyebrow="Cart"
        title="Your cart"
      />
      <div className="section">
        {cart.lines.map((line) => (
          <CartLine
            actions={<CartLineControls quantity={line.quantity} variantId={line.variantId} />}
            details={
              <p className="muted">
                {line.variantName} · Quantity {line.quantity} ·{" "}
                {line.availability.replaceAll("_", " ")}
              </p>
            }
            formattedPrice={formatMoney(line.lineTotal, applicationConfiguration.business.locale)}
            key={line.variantId}
            name={line.productName}
          />
        ))}
      </div>
      <div className="surface section">
        <h2>Merchandise subtotal</h2>
        <strong>
          {formatMoney(cart.merchandiseSubtotal, applicationConfiguration.business.locale)}
        </strong>
        <p className="muted">
          Tax and shipping are not calculated. SC07 certification uses the merchandise subtotal
          only.
        </p>
        <div className="cluster">
          <Link className="button button--secondary" href="/shop">
            Continue shopping
          </Link>
          {canOrder ? (
            <Link className="button" href="/checkout">
              Continue to order details
            </Link>
          ) : null}
        </div>
      </div>
      {canOrder ? null : (
        <Notification tone="error">
          <p>Remove unavailable items before creating an order.</p>
        </Notification>
      )}
    </PageContainer>
  );
}