import { notFound } from "next/navigation";
import Link from "next/link";
import BrandLogo from "@/components/brand-logo";
import { getMerchOrderDetail } from "@db/queries/merch";
import { formatPrice } from "@/lib/format";

export const dynamic = "force-dynamic";

const STATUS_LABEL: Record<string, string> = {
  processing: "Being prepared",
  ready: "Ready for pickup",
  shipped: "On its way",
  delivered: "Delivered",
  collected: "Collected",
};

// The order id is an unguessable UUID, and it's the only credential needed
// to view the receipt -- same model as /orders/[id]/success for tickets.
export default async function MerchOrderPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;

  // Fulfilment can land just after the buyer is redirected back (M-Pesa
  // callback / Paystack webhook), so wait a few seconds for "paid".
  let detail = null;
  for (let attempt = 0; attempt < 5; attempt++) {
    detail = await getMerchOrderDetail(id);
    if (!detail || detail.order.status === "paid") break;
    await new Promise((r) => setTimeout(r, 1000));
  }
  if (!detail) notFound();
  const { order, shop, items } = detail;

  return (
    <div className="min-h-screen bg-bg text-ink">
      <header className="border-b border-line bg-bg">
        <div className="mx-auto flex h-14 max-w-2xl items-center px-4">
          <Link href="/" aria-label="VibePass Tickets — home">
            <BrandLogo size="sm" />
          </Link>
        </div>
      </header>

      <main className="mx-auto max-w-2xl px-4 py-10">
        {order.status !== "paid" ? (
          <p className="text-muted">
            We&apos;re still confirming your payment. Refresh this page in a moment, or check your email for confirmation.
          </p>
        ) : (
          <>
            <h1 className="mb-2 text-2xl font-bold text-white">Order confirmed 🛍</h1>
            <p className="mb-6 text-muted">
              A receipt has been sent to {order.buyerEmail}. Status:{" "}
              <strong className="text-ink">{STATUS_LABEL[order.fulfillmentStatus] ?? order.fulfillmentStatus}</strong>
            </p>

            <div className="mb-6 rounded-2xl border border-line bg-panel p-5">
              <p className="text-xs uppercase tracking-wider text-muted">Order code</p>
              <p className="mt-1 text-3xl font-black tracking-[0.25em]">{order.pickupCode}</p>
              {order.fulfillment === "pickup" ? (
                <p className="mt-3 text-sm text-muted">
                  Show this code when you collect your order from {shop.name}.
                  {shop.pickupInstructions ? ` ${shop.pickupInstructions}` : ""}
                </p>
              ) : (
                <p className="mt-3 text-sm text-muted">
                  Delivering to {order.deliveryAddress}, {order.deliveryCity}. {shop.name} will contact you on {order.buyerPhone}.
                  {order.trackingNote ? ` Update: ${order.trackingNote}` : ""}
                </p>
              )}
            </div>

            <ul className="divide-y divide-line rounded-2xl border border-line bg-panel">
              {items.map((i) => (
                <li key={i.id} className="flex justify-between gap-4 p-4 text-sm">
                  <span>
                    {i.quantity} × {i.productName} <span className="text-muted">({i.variantLabel})</span>
                  </span>
                  <span className="tabular-nums">{formatPrice(i.unitCents * i.quantity, order.currency)}</span>
                </li>
              ))}
              {order.discountCents > 0 && (
                <li className="flex justify-between p-4 text-sm">
                  <span>Discount{order.couponCode ? ` (${order.couponCode})` : ""}</span>
                  <span className="tabular-nums">−{formatPrice(order.discountCents, order.currency)}</span>
                </li>
              )}
              {order.deliveryFeeCents > 0 && (
                <li className="flex justify-between p-4 text-sm">
                  <span>Delivery</span>
                  <span className="tabular-nums">{formatPrice(order.deliveryFeeCents, order.currency)}</span>
                </li>
              )}
              <li className="flex justify-between p-4 font-bold">
                <span>Total</span>
                <span className="tabular-nums">{formatPrice(order.totalCents, order.currency)}</span>
              </li>
            </ul>

            <Link href={`/shop/${shop.slug}`} className="mt-6 inline-block text-sm text-brand-green-h hover:underline">
              ← Back to {shop.name}
            </Link>
          </>
        )}
      </main>
    </div>
  );
}