import Link from "next/link";
import { notFound, redirect } from "next/navigation";
import { ApiError } from "@/lib/api/server";
import { getCheckoutStatus } from "@/lib/api/checkout";
import { getCurrentUser } from "@/lib/api/auth";
import { StatusPoller } from "@/components/checkout/status-poller";
import { PaymentStep } from "@/components/checkout/payment/payment-step";
import { OrderSummary } from "@/components/checkout/order-summary";
import { Spinner } from "@/components/ui/spinner";
import { formatCurrency, formatDate } from "@/lib/format";
import { ORDER_STATUS_LABEL, TICKET_STATUS_LABEL } from "@/lib/labels";
import { cardClasses } from "@/components/ui/styles";

export default async function CheckoutStatusPage({
  searchParams,
}: {
  searchParams: Promise<{ order?: string }>;
}) {
  const { order: orderId } = await searchParams;

  const user = await getCurrentUser();
  if (!user) {
    redirect(`/login?next=/checkout/status${orderId ? `?order=${orderId}` : ""}`);
  }

  if (!orderId) {
    notFound();
  }

  const order = await getCheckoutStatus(orderId)
    .then((res) => res.data)
    .catch((error) => {
      if (error instanceof ApiError && (error.status === 404 || error.status === 403)) {
        notFound();
      }
      throw error;
    });

  const isPending = order.status === "pending";
  const isSuccess = order.status === "settlement" || order.status === "capture";
  const latestPayment = order.payments[order.payments.length - 1] ?? null;
  // Once charged, a payment is "still awaiting this attempt" only while it
  // hasn't reached a terminal status of its own — otherwise (e.g. `expire`)
  // the method selector should show again so the customer can retry.
  const activePayment = latestPayment && latestPayment.status === "pending" ? latestPayment : null;

  return (
    <div className="mx-auto max-w-2xl px-6 py-10">
      {isPending && <StatusPoller />}

      {isSuccess && (
        <div className="mb-6 flex items-center gap-3 rounded-xl border border-green-300 bg-green-50 p-4">
          <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-green-600 text-white">
            ✓
          </span>
          <div>
            <p className="font-medium text-green-700">Transaction successful!</p>
            <p className="text-sm text-green-700/80">Your payment has been confirmed. Your tickets are now active.</p>
          </div>
        </div>
      )}

      <p className="text-sm text-kolabora-neutral-dark/70">Order {order.order_number}</p>
      <h1 className="mt-1 text-2xl font-semibold">{ORDER_STATUS_LABEL[order.status]}</h1>

      {isPending && (
        <>
          <p className="mt-2 flex items-center gap-2 text-sm text-kolabora-tertiary">
            <Spinner className="text-kolabora-tertiary" />
            Waiting for payment confirmation from Midtrans. This page will update automatically.
          </p>
          <div className="mt-4">
            <PaymentStep orderId={order.id} latestPayment={activePayment} />
          </div>
        </>
      )}

      <div className="mt-8 flex flex-col gap-4">
        {order.items.map((item) => (
          <div key={item.id} className={cardClasses("p-4")}>
            <div className="flex items-center justify-between gap-4">
              <p className="min-w-0 font-medium">
                {item.ticket_type.name} &times; {item.quantity}
              </p>
              <p className="shrink-0 font-semibold">{formatCurrency(item.subtotal)}</p>
            </div>
            <ul className="mt-3 flex flex-col gap-1">
              {item.tickets.map((ticket) => (
                <li
                  key={ticket.id}
                  className="flex items-center justify-between text-sm text-kolabora-neutral-dark/70"
                >
                  <span>{ticket.ticket_code}</span>
                  <span>{TICKET_STATUS_LABEL[ticket.status]}</span>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>

      <div className="mt-6 border-t border-kolabora-neutral-dark/10 pt-4">
        <OrderSummary order={order} />
      </div>

      {(() => {
        const paidPayment = order.payments.find((p) => p.paid_at);
        return paidPayment?.paid_at ? (
          <p className="mt-2 text-sm text-kolabora-neutral-dark/70">
            Paid on {formatDate(paidPayment.paid_at)} via {paidPayment.payment_method ?? "-"}
          </p>
        ) : null;
      })()}

      <Link
        href="/events"
        className="mt-8 inline-block text-sm font-medium text-kolabora-primary"
      >
        &larr; Back to event list
      </Link>
    </div>
  );
}