import Link from "next/link";
import { notFound } from "next/navigation";
import { ApiError } from "@/lib/api/server";
import { getOrderInvoice } from "@/lib/api/orders";
import { ORDER_STATUS_LABEL, TICKET_STATUS_LABEL } from "@/lib/labels";
import { formatCurrency, formatDate } from "@/lib/format";
import { OrderSummary } from "@/components/checkout/order-summary";
import { cardClasses } from "@/components/ui/styles";

export default async function OrderInvoicePage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;

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

  return (
    <div className="max-w-2xl">
      <Link href="/dashboard/orders" className="text-sm font-medium text-kolabora-primary">
        &larr; Back to Order History
      </Link>

      <div className="mt-4 flex items-center justify-between">
        <div>
          <p className="text-sm text-kolabora-neutral-dark/70">Invoice</p>
          <h2 className="text-xl font-semibold">{order.order_number}</h2>
        </div>
        <span className="rounded-full bg-kolabora-tertiary/15 px-3 py-1 text-xs font-medium text-kolabora-tertiary">
          {ORDER_STATUS_LABEL[order.status]}
        </span>
      </div>

      <p className="mt-1 text-sm text-kolabora-neutral-dark/70">
        {formatDate(order.created_at)} &middot; {order.holder_name} ({order.holder_email})
      </p>

      <div className="mt-6 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>

      {order.payments[0] && (
        <p className="mt-2 text-sm text-kolabora-neutral-dark/70">
          {order.payments[0].payment_method ?? "-"}
          {order.payments[0].paid_at ? ` · Paid ${formatDate(order.payments[0].paid_at)}` : ""}
        </p>
      )}
    </div>
  );
}