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

type RegistrationsPageProps = {
  searchParams: Promise<{
    search?: string;
    status?: string;
    payment?: string;
    participant?: string;
  }>;
};

export default async function AdminRegistrationsPage({ searchParams }: RegistrationsPageProps) {
  const filters = await searchParams;
  const registrations = await getAdminRegistrations(filters);

  return (
    <div className="flex h-full min-h-[42rem] flex-col">
      <AdminPageHeader
        eyebrow="Event Registrations"
        title="Bookings without the noise."
        description="Check participant, payment and confirmation status in one operational list."
      />

      <FilterBar resetHref="/admin/registrations">
        <SearchField defaultValue={filters.search} placeholder="Search participant, email or event" />
        <SelectFilter
          name="status"
          label="Registration status"
          value={filters.status}
          options={[
            { value: "all", label: "All bookings" },
            { value: "pending", label: "Pending" },
            { value: "confirmed", label: "Confirmed" },
            { value: "waitlisted", label: "Waitlisted" },
            { value: "cancelled", label: "Cancelled" },
          ]}
        />
        <SelectFilter
          name="payment"
          label="Payment status"
          value={filters.payment}
          options={[
            { value: "all", label: "All payments" },
            { value: "not_required", label: "Not required" },
            { value: "pending", label: "Pending payment" },
            { value: "paid", label: "Paid" },
            { value: "failed", label: "Failed" },
            { value: "refunded", label: "Refunded" },
          ]}
        />
        <SelectFilter
          name="participant"
          label="Participant type"
          value={filters.participant}
          options={[
            { value: "all", label: "All participants" },
            { value: "child", label: "Child profiles" },
            { value: "adult", label: "Adult players" },
          ]}
        />
      </FilterBar>

      <TablePanel count={registrations.length} label={registrations.length === 1 ? "registration" : "registrations"}>
        {registrations.length === 0 ? (
          <EmptyTableState
            icon="how_to_reg"
            title="No registrations to review"
            description="Bookings that match the selected status and payment filters will appear here."
          />
        ) : (
          <>
            {/* MOBILE VIEW (< md): Responsive Stacked Cards */}
            <div className="divide-y divide-slate-100 md:hidden">
              {registrations.map((registration) => (
                <div key={registration.id} className="p-4 space-y-3 hover:bg-slate-50/60 transition-colors">
                  <div className="flex items-start justify-between gap-3">
                    <div>
                      <h3 className="text-sm font-extrabold text-[#0D1B2A]">{registration.participant}</h3>
                      <span className="text-[10px] font-bold uppercase tracking-wider text-slate-400">
                        {registration.participantType === "child" ? "Protected child alias" : "Adult player"}
                      </span>
                    </div>
                    <div className="flex items-center gap-1.5">
                      <StatusBadge value={registration.registrationStatus} />
                    </div>
                  </div>

                  <div className="text-xs text-slate-600">
                    <p className="font-semibold text-slate-800">{registration.eventTitle}</p>
                    <p className="mt-0.5 text-slate-500">Booked by: {registration.registeredBy}</p>
                  </div>

                  <div className="flex items-center justify-between pt-2 border-t border-slate-100 text-xs">
                    <div className="flex items-center gap-2">
                      <span className="font-extrabold text-[#0D1B2A]">{formatAdminCurrency(registration.amountCents)}</span>
                      <StatusBadge value={registration.paymentStatus} />
                    </div>
                    <Link
                      href={`/admin/registrations/${registration.id}`}
                      className="inline-flex items-center gap-1 rounded-xl bg-slate-100 hover:bg-[#1D4ED8] hover:text-white px-3 py-1.5 text-xs font-semibold text-slate-700 transition"
                    >
                      Manage
                      <span className="material-symbols-outlined text-[15px]">arrow_forward</span>
                    </Link>
                  </div>
                </div>
              ))}
            </div>

            {/* DESKTOP VIEW (>= md): Clean Data Table */}
            <table className="hidden md:table w-full border-separate border-spacing-0 text-left">
              <thead className="sticky top-0 z-10 bg-slate-50/95 text-[10px] font-extrabold uppercase tracking-wider text-slate-500 border-b border-slate-200/80 backdrop-blur-xl">
                <tr>
                  <th className="px-5 py-3.5">Participant</th>
                  <th className="px-4 py-3.5">Event</th>
                  <th className="px-4 py-3.5">Booked by</th>
                  <th className="px-4 py-3.5">Created</th>
                  <th className="px-4 py-3.5">Amount</th>
                  <th className="px-4 py-3.5">Payment</th>
                  <th className="px-5 py-3.5 text-right">Booking</th>
                  <th className="px-5 py-3.5 text-right">Support</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-100">
                {registrations.map((registration) => (
                  <tr key={registration.id} className="transition hover:bg-slate-50/70">
                    <td className="px-5 py-3.5">
                      <p className="text-sm font-extrabold text-[#0D1B2A]">{registration.participant}</p>
                      <p className="mt-0.5 text-[10px] font-bold uppercase tracking-wider text-slate-400">
                        {registration.participantType === "child" ? "Protected child alias" : "Adult player"}
                      </p>
                    </td>
                    <td className="max-w-[15rem] truncate px-4 py-3.5 text-xs font-semibold text-slate-800">{registration.eventTitle}</td>
                    <td className="px-4 py-3.5 text-xs text-slate-500">{registration.registeredBy}</td>
                    <td className="px-4 py-3.5 text-xs text-slate-500">{formatAdminDate(registration.createdAt, true)}</td>
                    <td className="px-4 py-3.5 text-xs font-extrabold text-[#0D1B2A]">{formatAdminCurrency(registration.amountCents)}</td>
                    <td className="px-4 py-3.5"><StatusBadge value={registration.paymentStatus} /></td>
                    <td className="px-5 py-3.5 text-right"><StatusBadge value={registration.registrationStatus} /></td>
                    <td className="px-5 py-3.5 text-right">
                      <Link href={`/admin/registrations/${registration.id}`} className="inline-flex items-center gap-1 text-xs font-semibold text-[#1D4ED8] transition hover:text-[#1e40af]">
                        Manage
                        <span className="material-symbols-outlined text-[16px]">arrow_forward</span>
                      </Link>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </>
        )}
      </TablePanel>
    </div>
  );
}