import { getAdminCheckins } from "@/lib/api/admin";
import { formatDate } from "@/lib/format";
import { FilterSelect } from "@/components/ui/filter-select";
import { Pagination } from "@/components/ui/pagination";
import { cardClasses } from "@/components/ui/styles";
import { cn } from "@/lib/utils";

export default async function AdminCheckinsPage({
  searchParams,
}: {
  searchParams: Promise<{ checkin_status?: string; page?: string }>;
}) {
  const { checkin_status, page } = await searchParams;
  const { data: checkins, meta } = await getAdminCheckins({
    checkin_status,
    page: page ? Number(page) : undefined,
  });

  return (
    <div>
      <h2 className="text-lg font-semibold">Check-in Monitoring</h2>
      <p className="mt-1 text-sm text-kolabora-neutral-dark/70">
        Check-in activity across every event on the platform (FR-092).
      </p>

      <form className="mt-4 flex gap-3" method="get">
        <FilterSelect
          name="checkin_status"
          ariaLabel="Filter check-in status"
          defaultValue={checkin_status ?? ""}
          options={[
            { value: "", label: "All Statuses" },
            { value: "success", label: "Successful" },
            { value: "failed", label: "Failed" },
          ]}
        />
        <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">Event</th>
              <th className="px-4 py-2">Ticket Code</th>
              <th className="px-4 py-2">Name</th>
              <th className="px-4 py-2">Method</th>
              <th className="px-4 py-2">Result</th>
              <th className="px-4 py-2">Staff</th>
              <th className="px-4 py-2">Time</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-kolabora-neutral-dark/10">
            {checkins.length === 0 && (
              <tr>
                <td colSpan={7} className="px-4 py-6 text-center text-kolabora-neutral-dark/70">
                  No check-in activity yet.
                </td>
              </tr>
            )}
            {checkins.map((checkin) => (
              <tr key={checkin.id}>
                <td className="px-4 py-2">{checkin.event?.title ?? "-"}</td>
                <td className="px-4 py-2 font-mono">{checkin.ticket?.ticket_code ?? "-"}</td>
                <td className="px-4 py-2">
                  {checkin.ticket?.holder_name ?? "-"}
                  {checkin.ticket?.companion_name && <> + {checkin.ticket.companion_name}</>}
                </td>
                <td className="px-4 py-2">{checkin.method === "qr" ? "QR Scan" : "Manual"}</td>
                <td className="px-4 py-2">
                  <span
                    className={`rounded-full px-2 py-0.5 text-xs font-medium ${
                      checkin.success ? "bg-green-100 text-green-700" : "bg-red-100 text-red-700"
                    }`}
                  >
                    {checkin.success ? "Successful" : (checkin.notes ?? "Failed")}
                  </span>
                </td>
                <td className="px-4 py-2">{checkin.petugas ?? "-"}</td>
                <td className="px-4 py-2">
                  {checkin.checked_in_at ? formatDate(checkin.checked_in_at) : "-"}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <Pagination meta={meta} basePath="/admin/checkins" searchParams={{ checkin_status }} />
    </div>
  );
}