import Link from "next/link";
import type { Metadata } from "next";
import { formatMoney } from "@salixcommerce/core";
import { FakePaymentControls } from "@/components/fake-payment-controls";
import { EmptyState, Hero, PageContainer, StatusBadge } from "@/components/ui";
import { applicationConfiguration } from "@/config/public";
import { loadCurrentOrder } from "@/server/commerce/current-commerce";
import { loadCurrentPayment } from "@/server/payments/current-payment";

export const metadata: Metadata = { title: "Fake payment checkout" };
export const dynamic = "force-dynamic";

export default async function FakeCheckoutPage({
  searchParams,
}: Readonly<{ searchParams: Promise<Record<string, string | string[] | undefined>> }>) {
  const params = await searchParams;
  const orderReference = typeof params.order === "string" ? params.order : "";
  const paymentReference = typeof params.payment === "string" ? params.payment : "";
  const [order, payment] = await Promise.all([
    loadCurrentOrder(orderReference),
    loadCurrentPayment(orderReference),
  ]);
  if (
    order === null ||
    payment === null ||
    payment.provider !== "fake" ||
    payment.providerPaymentReference !== paymentReference
  ) {
    return (
      <PageContainer>
        <Hero
          description="The payment capability or reference is missing or invalid."
          eyebrow="Local certification provider"
          title="Payment not found"
        />
        <EmptyState
          action={<Link href="/shop">Return to shop</Link>}
          description="Fake payments are visible only to the browser that created the order."
          title="No authorized payment"
        />
      </PageContainer>
    );
  }

  return (
    <PageContainer>
      <Hero
        description="This local-only screen emits a signed fake provider event. It cannot run in production."
        eyebrow="Local certification provider"
        title="Choose a payment outcome"
      />
      <section className="surface section form-stack">
        <StatusBadge>{payment.status.replaceAll("_", " ")}</StatusBadge>
        <p>Order {order.reference}</p>
        <strong>
          Amount: {formatMoney(payment.amount, applicationConfiguration.business.locale)}
        </strong>
        {payment.status === "pending" ? (
          <FakePaymentControls
            orderReference={order.reference}
            paymentReference={payment.providerPaymentReference}
          />
        ) : (
          <Link href={`/order-confirmation?reference=${encodeURIComponent(order.reference)}`}>
            Return to order status
          </Link>
        )}
      </section>
    </PageContainer>
  );
}