import Link from "next/link";
import type { Metadata } from "next";
import { formatMoney } from "@salixcommerce/core";
import { OrderCancelButton } from "@/components/order-cancel-button";
import { PaymentCheckoutButton } from "@/components/payment-checkout-button";
import { CartLine } from "@/components/storefront";
import { EmptyState, Hero, Notification, PageContainer, StatusBadge } from "@/components/ui";
import { applicationConfiguration } from "@/config/public";
import { loadCurrentOrder } from "@/server/commerce/current-commerce";
import { loadCurrentPayment } from "@/server/payments/current-payment";
import { paymentEnabled } from "@/server/payments/payments";

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

export default async function OrderConfirmationPage({
  searchParams,
}: Readonly<{ searchParams: Promise<Record<string, string | string[] | undefined>> }>) {
  const params = await searchParams;
  const reference = typeof params.reference === "string" ? params.reference : "";
  const [order, payment] = await Promise.all([
    loadCurrentOrder(reference),
    loadCurrentPayment(reference),
  ]);
  if (order === null) {
    return (
      <PageContainer>
        <Hero
          description="The order capability or reference is missing or invalid."
          eyebrow="Order"
          title="Order not found"
        />
        <EmptyState
          action={
            <Link className="button button--secondary" href="/shop">
              Return to shop
            </Link>
          }
          description="Guest orders are available only to the browser that created them."
          title="No authorized order"
        />
      </PageContainer>
    );
  }

  return (
    <PageContainer>
      <Hero
        description={`Reference ${order.reference}. Provider events update this server-owned order record.`}
        eyebrow="Order status"
        title={
          order.status === "paid"
            ? "Payment verified"
            : order.status === "cancelled"
              ? "Order cancelled"
              : "Payment pending"
        }
      />
      <div className="surface section">
        <StatusBadge>{order.status.replaceAll("_", " ")}</StatusBadge>
        <p>Contact: {order.contactEmail}</p>
        <strong>
          Merchandise subtotal:{" "}
          {formatMoney(order.merchandiseSubtotal, applicationConfiguration.business.locale)}
        </strong>
        <p className="muted">
          SC07 certifies merchandise-subtotal payments only. Tax and shipping remain outside this
          amount.
        </p>
        {payment === null ? null : (
          <p>
            Payment: <StatusBadge>{payment.status.replaceAll("_", " ")}</StatusBadge>
          </p>
        )}
        {order.status === "pending_payment" && payment?.status !== "pending" ? (
          <OrderCancelButton reference={order.reference} />
        ) : null}
      </div>
      <div className="section">
        {order.items.map((item) => (
          <CartLine
            details={
              <p className="muted">
                {item.variantName} · Quantity {item.quantity}
              </p>
            }
            formattedPrice={formatMoney(item.lineTotal, applicationConfiguration.business.locale)}
            key={item.sourceVariantId}
            name={item.productName}
          />
        ))}
      </div>
      {order.status === "pending_payment" ? (
        <Notification>
          {payment?.status === "pending" ? (
            <p>
              Payment verification may take a moment.
              <br />
              <Link href={payment.checkoutUrl}>Continue payment if checkout is unfinished.</Link>
            </p>
          ) : paymentEnabled ? (
            <>
              <p>Continue to the configured secure payment provider.</p>
              <PaymentCheckoutButton reference={order.reference} />
            </>
          ) : (
            <p>Configure a server payment provider to enable checkout. Payments default to off.</p>
          )}
        </Notification>
      ) : order.status === "paid" ? (
        <Notification tone="success">
          <p>The signed provider event was applied and the reserved inventory was consumed once.</p>
        </Notification>
      ) : null}
      <Link href="/shop">Return to shop</Link>
    </PageContainer>
  );
}