import Link from "next/link";
import { getMyOrders } from "@/lib/api/orders";
import { ORDER_STATUS_LABEL } from "@/lib/labels";
import { formatCurrency, formatDate } from "@/lib/format";
import { Pagination } from "@/components/ui/pagination";

export default async function MyOrdersPage({
  searchParams,
}: {
  searchParams: Promise<{ page?: string }>;
}) {
  const { page } = await searchParams;
  const { data: orders, meta } = await getMyOrders(page ? Number(page) : undefined);

  return (
    <div>
      <h2 className="text-lg font-semibold">Order History</h2>

      {orders.length === 0 ? (
        <p className="mt-8 text-sm text-kolabora-neutral-dark/70">No orders yet.</p>
      ) : (
        <ul className="mt-6 flex flex-col gap-3">
          {orders.map((order) => (
            <li key={order.id}>
              <Link
                href={`/dashboard/orders/${order.id}`}
                className="flex items-center justify-between gap-4 rounded-xl border border-kolabora-neutral-dark/10 p-4 hover:border-kolabora-primary/40"
              >
                <div className="min-w-0">
                  <p className="font-medium">{order.order_number}</p>
                  <p className="text-sm text-kolabora-neutral-dark/70">
                    {formatDate(order.created_at)} &middot;{" "}
                    {order.items.map((item) => `${item.ticket_type.name} ×${item.quantity}`).join(", ")}
                  </p>
                </div>
                <div className="shrink-0 text-right">
                  <p className="font-semibold">{formatCurrency(order.total_amount)}</p>
                  <span className="text-xs font-medium text-kolabora-tertiary">
                    {ORDER_STATUS_LABEL[order.status]}
                  </span>
                </div>
              </Link>
            </li>
          ))}
        </ul>
      )}

      <Pagination meta={meta} basePath="/dashboard/orders" />
    </div>
  );
}