import { getAdminPayments } from "@/lib/api/admin";
import { formatCurrency, formatDate } from "@/lib/format";
import { ORDER_STATUS_LABEL } from "@/lib/labels";
import type { OrderStatus } from "@/types/order";
import { FilterSelect } from "@/components/ui/filter-select";
import { cardClasses } from "@/components/ui/styles";
import { cn } from "@/lib/utils";
import { Pagination } from "@/components/ui/pagination";

export default async function AdminPaymentsPage({
  searchParams,
}: {
  searchParams: Promise<{ status?: string; page?: string }>;
}) {
  const { status, page } = await searchParams;
  const { data: payments, meta } = await getAdminPayments({ status, page: page ? Number(page) : undefined });

  return (
    <div>
      <h2 className="text-lg font-semibold">Payment Monitoring</h2>
      <p className="mt-1 text-sm text-kolabora-neutral-dark/70">
        All payment transactions platform-wide, across every Organizer (FR-091).
      </p>

      <form className="mt-4 flex gap-3" method="get">
        <FilterSelect
          name="status"
          ariaLabel="Filter payment status"
          defaultValue={status ?? ""}
          options={[
            { value: "", label: "All Statuses" },
            ...Object.entries(ORDER_STATUS_LABEL).map(([value, label]) => ({ value, label })),
          ]}
        />
        <button
          type="submit"
          className="rounded-lg bg-kolabora-primary px-4 py-2 text-sm font-medium text-kolabora-neutral-white hover:opacity-90"
        >
          Filter
        </button>
      </form>

      <div className={cn("scroll-fade-x mt-4 overflow-x-auto", cardClasses())}>
        <table className="w-full text-left text-sm">
          <thead className="bg-kolabora-neutral-dark/5 text-xs uppercase text-kolabora-neutral-dark/70">
            <tr>
              <th className="px-4 py-2">Order No.</th>
              <th className="px-4 py-2">Buyer</th>
              <th className="px-4 py-2">Event</th>
              <th className="px-4 py-2">Organizer</th>
              <th className="px-4 py-2">Total</th>
              <th className="px-4 py-2">Status</th>
              <th className="px-4 py-2">Method</th>
              <th className="px-4 py-2">Date</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-kolabora-neutral-dark/10">
            {payments.length === 0 && (
              <tr>
                <td colSpan={8} className="px-4 py-6 text-center text-kolabora-neutral-dark/70">
                  No transactions yet.
                </td>
              </tr>
            )}
            {payments.map((payment) => (
              <tr key={payment.id}>
                <td className="px-4 py-2 font-mono">{payment.order_number}</td>
                <td className="px-4 py-2">
                  {payment.holder_name}
                  <br />
                  <span className="text-xs text-kolabora-neutral-dark/70">{payment.holder_email}</span>
                </td>
                <td className="px-4 py-2">{payment.event ?? "-"}</td>
                <td className="px-4 py-2">{payment.organizer ?? "-"}</td>
                <td className="px-4 py-2 font-medium">{formatCurrency(payment.total_amount)}</td>
                <td className="px-4 py-2">
                  {ORDER_STATUS_LABEL[payment.status as OrderStatus] ?? payment.status}
                </td>
                <td className="px-4 py-2">{payment.payment_method ?? "-"}</td>
                <td className="px-4 py-2">{formatDate(payment.created_at)}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <Pagination meta={meta} basePath="/admin/payments" searchParams={{ status }} />
    </div>
  );
}