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

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

  if (!event) {
    notFound();
  }

  return (
    <div>
      <Link
        href="/petugas"
        className={cn("rounded text-sm font-medium text-kolabora-primary", FOCUS_RING_CLASSES)}
      >
        &larr; Back to My Events
      </Link>

      <h2 className="mt-4 text-lg font-semibold">{event.title}</h2>
      <p className="mt-1 text-sm text-kolabora-neutral-dark/70">
        {formatDate(event.start_date)}
        {event.location ? ` · ${event.location}` : ""}
      </p>

      <div className="mt-6 flex flex-col gap-3">
        <Link
          href={`/petugas/events/${event.id}/scan`}
          className={cn(
            "rounded-xl bg-kolabora-primary px-4 py-4 text-center font-medium text-kolabora-neutral-white hover:opacity-90",
            FOCUS_RING_CLASSES,
          )}
        >
          Scan QR Code
        </Link>
        <Link
          href={`/petugas/events/${event.id}/search`}
          className={cn(
            "rounded-xl border border-kolabora-neutral-dark/20 px-4 py-4 text-center font-medium hover:bg-kolabora-neutral-dark/5",
            FOCUS_RING_CLASSES,
          )}
        >
          Search & Manual Check-in
        </Link>
        <Link
          href={`/petugas/events/${event.id}/history`}
          className={cn(
            "rounded-xl border border-kolabora-neutral-dark/20 px-4 py-4 text-center font-medium hover:bg-kolabora-neutral-dark/5",
            FOCUS_RING_CLASSES,
          )}
        >
          My Check-in History
        </Link>
      </div>
    </div>
  );
}