import Link from "next/link";
import { notFound } from "next/navigation";
import { getAssignedEvent, getCheckinHistory } from "@/lib/api/petugas";
import { CHECKIN_NOTE_LABEL } from "@/lib/labels";
import { formatDate } from "@/lib/format";
import { Pagination } from "@/components/ui/pagination";
import { FOCUS_RING_CLASSES } from "@/components/ui/styles";
import { cn } from "@/lib/utils";

export default async function PetugasHistoryPage({
  params,
  searchParams,
}: {
  params: Promise<{ id: string }>;
  searchParams: Promise<{ page?: string }>;
}) {
  const { id } = await params;
  const { page } = await searchParams;
  const event = await getAssignedEvent(id);

  if (!event) {
    notFound();
  }

  const { data: checkins, meta } = await getCheckinHistory(event.id, page ? Number(page) : undefined);

  return (
    <div>
      <Link
        href={`/petugas/events/${event.id}`}
        className={cn("rounded text-sm font-medium text-kolabora-primary", FOCUS_RING_CLASSES)}
      >
        &larr; Back
      </Link>
      <h2 className="mt-4 text-lg font-semibold">My Check-in History &mdash; {event.title}</h2>

      {checkins.length === 0 ? (
        <p className="mt-4 text-sm text-kolabora-neutral-dark/70">No check-in history yet.</p>
      ) : (
        <div className="mt-4 flex flex-col divide-y divide-kolabora-neutral-dark/10 rounded-xl border border-kolabora-neutral-dark/10">
          {checkins.map((checkin) => (
            <div key={checkin.id} className="flex items-center justify-between gap-3 px-4 py-3">
              <div className="min-w-0">
                <p className="truncate font-medium">
                  {checkin.ticket?.holder_name ?? "-"}
                  {checkin.ticket?.companion_name && <> + {checkin.ticket.companion_name}</>}
                </p>
                <p className="font-mono text-xs text-kolabora-neutral-dark/70">
                  {checkin.ticket?.ticket_code ?? "-"}
                </p>
                <p className="text-xs text-kolabora-neutral-dark/70">
                  {checkin.method === "qr" ? "QR Scan" : "Manual"}
                  {checkin.checked_in_at ? ` · ${formatDate(checkin.checked_in_at)}` : ""}
                </p>
              </div>
              <span
                className={`shrink-0 rounded-full px-3 py-1 text-xs font-medium ${
                  checkin.success
                    ? "bg-green-100 text-green-700"
                    : "bg-red-100 text-red-700"
                }`}
              >
                {checkin.success ? "Successful" : CHECKIN_NOTE_LABEL[checkin.notes ?? ""] ?? "Failed"}
              </span>
            </div>
          ))}
        </div>
      )}

      <Pagination meta={meta} basePath={`/petugas/events/${event.id}/history`} />
    </div>
  );
}