import Link from "next/link";
import {
  AdminPageHeader,
  EmptyTableState,
  FilterBar,
  SearchField,
  SelectFilter,
  StatusBadge,
  TablePanel,
} from "@/components/admin/admin-ui";
import { getAdminPaymentMetrics, getAdminPayments } from "@/lib/admin-data";
import { formatAdminCurrency, formatAdminDate } from "@/lib/admin-format";

type PaymentsPageProps = {
  searchParams: Promise<{ search?: string; status?: string; provider?: string }>;
};

export default async function AdminPaymentsPage({ searchParams }: PaymentsPageProps) {
  const filters = await searchParams;
  const [payments, metrics] = await Promise.all([
    getAdminPayments(filters),
    getAdminPaymentMetrics(),
  ]);
  const metricCards = [
    {
      label: "Gross collected",
      value: metrics.grossCents,
      note: "Before refunds",
      icon: "payments",
      iconColor: "text-blue-600 bg-blue-50",
    },
    {
      label: "Refunded",
      value: metrics.refundedCents,
      note: "Completed refunds",
      icon: "assignment_return",
      iconColor: "text-slate-600 bg-slate-100",
    },
    {
      label: "Refund required",
      value: metrics.refundRequiredCents,
      note: `${metrics.refundRequiredCount} payment(s)`,
      icon: "error_outline",
      iconColor: "text-amber-600 bg-amber-50",
    },
  ];

  return (
    <div className="flex h-full min-h-[42rem] flex-col">
      <AdminPageHeader
        eyebrow="Payments"
        title="Money in, refunds under control."
        description="Reconcile customer payments separately from bookings, with a complete record for every full or partial refund."
      />

      <div className="mt-5 grid shrink-0 gap-3 sm:grid-cols-3">
        {metricCards.map((metric) => (
          <article
            key={metric.label}
            className="rounded-2xl border border-slate-200/80 bg-white p-4 shadow-xs transition hover:shadow-md"
          >
            <div className="flex items-center justify-between">
              <p className="text-[10px] font-extrabold uppercase tracking-[0.12em] text-slate-400">
                {metric.label}
              </p>
              <span
                className={`grid h-8 w-8 place-items-center rounded-xl ${metric.iconColor}`}
              >
                <span className="material-symbols-outlined text-[18px]">
                  {metric.icon}
                </span>
              </span>
            </div>
            <p className="mt-2 text-2xl font-bold tracking-tight text-[#0D1B2A]">
              {formatAdminCurrency(metric.value)}
            </p>
            <p className="mt-1 text-xs text-slate-500">{metric.note}</p>
          </article>
        ))}
      </div>

      <FilterBar resetHref="/admin/payments">
        <SearchField defaultValue={filters.search} placeholder="Search customer, event or reference" />
        <SelectFilter
          name="status"
          label="Payment status"
          value={filters.status}
          options={[
            { value: "all", label: "All payments" },
            { value: "refund-required", label: "Refund required" },
            { value: "pending", label: "Pending" },
            { value: "paid", label: "Paid" },
            { value: "partially_refunded", label: "Partially refunded" },
            { value: "refunded", label: "Refunded" },
            { value: "failed", label: "Failed" },
            { value: "cancelled", label: "Cancelled" },
          ]}
        />
        <SelectFilter
          name="provider"
          label="Provider"
          value={filters.provider}
          options={[
            { value: "all", label: "All providers" },
            { value: "mock", label: "Mock checkout" },
            { value: "manual", label: "Manual payment" },
            { value: "stripe", label: "Stripe" },
          ]}
        />
      </FilterBar>

      <TablePanel count={payments.length} label={payments.length === 1 ? "payment" : "payments"}>
        {payments.length === 0 ? (
          <EmptyTableState
            icon="receipt_long"
            title="No payments match these filters"
            description="Payment transactions appear here once a paid or pending checkout is recorded."
          />
        ) : (
          <>
            {/* Mobile View: Stacked Cards */}
            <div className="block divide-y divide-slate-100 md:hidden">
              {payments.map((payment) => (
                <div
                  key={payment.id}
                  className={`p-4 space-y-3 ${payment.requiresRefund ? "bg-amber-50/50" : "bg-white"}`}
                >
                  <div className="flex items-start justify-between gap-2">
                    <div>
                      <p className="text-sm font-bold text-[#0D1B2A]">{payment.participant}</p>
                      <p className="text-xs text-slate-500">{payment.accountEmail}</p>
                    </div>
                    {payment.requiresRefund ? (
                      <StatusBadge value="refund-required" />
                    ) : (
                      <StatusBadge value={payment.status} />
                    )}
                  </div>

                  <div className="rounded-xl bg-slate-50 p-2.5 text-xs text-slate-700">
                    <p className="font-semibold text-[#0D1B2A]">{payment.eventTitle}</p>
                    <p className="mt-0.5 text-[11px] text-slate-400">{formatAdminDate(payment.createdAt, true)}</p>
                  </div>

                  <div className="grid grid-cols-3 gap-2 text-xs">
                    <div>
                      <span className="text-[10px] font-semibold uppercase tracking-wider text-slate-400 block">Collected</span>
                      <span className="font-bold text-[#0D1B2A]">{formatAdminCurrency(payment.amountCents)}</span>
                    </div>
                    <div>
                      <span className="text-[10px] font-semibold uppercase tracking-wider text-slate-400 block">Refunded</span>
                      <span className="font-medium text-slate-600">{formatAdminCurrency(payment.refundedCents)}</span>
                    </div>
                    <div>
                      <span className="text-[10px] font-semibold uppercase tracking-wider text-slate-400 block">Provider</span>
                      <span className="font-medium capitalize text-slate-600">{payment.provider}</span>
                    </div>
                  </div>

                  <div className="pt-2 flex items-center justify-end border-t border-slate-100">
                    <Link
                      href={`/admin/payments/${payment.id}`}
                      className="inline-flex items-center gap-1 text-xs font-semibold text-[#1D4ED8] hover:text-[#2563EB]"
                    >
                      Review
                      <span className="material-symbols-outlined text-[16px]">arrow_forward</span>
                    </Link>
                  </div>
                </div>
              ))}
            </div>

            {/* Desktop View: Full Table */}
            <table className="hidden md:table w-full min-w-[68rem] border-separate border-spacing-0 text-left">
              <thead className="sticky top-0 z-10 bg-slate-100/95 text-[10px] font-extrabold uppercase tracking-[0.12em] text-slate-500 backdrop-blur-xl">
                <tr>
                  <th className="px-5 py-3">Customer</th>
                  <th className="px-4 py-3">Event</th>
                  <th className="px-4 py-3">Collected</th>
                  <th className="px-4 py-3">Refunded</th>
                  <th className="px-4 py-3">Provider</th>
                  <th className="px-4 py-3">Status</th>
                  <th className="px-5 py-3 text-right">Manage</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-200/80">
                {payments.map((payment) => (
                  <tr
                    key={payment.id}
                    className={payment.requiresRefund ? "bg-amber-50/50" : "transition hover:bg-slate-50/80"}
                  >
                    <td className="px-5 py-3.5">
                      <p className="text-sm font-bold text-[#0D1B2A]">{payment.participant}</p>
                      <p className="mt-0.5 text-xs text-slate-500">{payment.accountEmail}</p>
                    </td>
                    <td className="px-4 py-3.5">
                      <p className="text-xs font-semibold text-[#0D1B2A]">{payment.eventTitle}</p>
                      <p className="mt-0.5 text-[11px] text-slate-400">{formatAdminDate(payment.createdAt, true)}</p>
                    </td>
                    <td className="px-4 py-3.5 text-xs font-bold text-[#0D1B2A]">{formatAdminCurrency(payment.amountCents)}</td>
                    <td className="px-4 py-3.5 text-xs font-medium text-slate-600">{formatAdminCurrency(payment.refundedCents)}</td>
                    <td className="px-4 py-3.5 text-xs font-medium capitalize text-slate-600">{payment.provider}</td>
                    <td className="px-4 py-3.5">
                      {payment.requiresRefund ? <StatusBadge value="refund-required" /> : <StatusBadge value={payment.status} />}
                    </td>
                    <td className="px-5 py-3.5 text-right">
                      <Link
                        href={`/admin/payments/${payment.id}`}
                        className="inline-flex items-center gap-1.5 text-xs font-semibold text-[#1D4ED8] transition hover:text-[#2563EB]"
                      >
                        Review
                        <span className="material-symbols-outlined text-[17px]">arrow_forward</span>
                      </Link>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </>
        )}
      </TablePanel>
    </div>
  );
}