import Link from "next/link";
import { getMyTickets } from "@/lib/api/tickets";
import { TICKET_STATUS_LABEL } from "@/lib/labels";
import { formatDate } from "@/lib/format";
import { Select } from "@/components/ui/input";
import { Pagination } from "@/components/ui/pagination";
import { FOCUS_RING_CLASSES, cardClasses } from "@/components/ui/styles";
import { cn } from "@/lib/utils";

type SearchParams = Promise<{ status?: string; page?: string }>;

export default async function MyTicketsPage({
  searchParams,
}: {
  searchParams: SearchParams;
}) {
  const { status, page } = await searchParams;
  const { data: tickets, meta } = await getMyTickets({ status, page: page ? Number(page) : undefined });

  return (
    <div>
      <h2 className="text-lg font-semibold">My Tickets</h2>

      <form className="mt-4 flex gap-3" method="get">
        <Select name="status" defaultValue={status ?? ""}>
          <option value="">All Statuses</option>
          {Object.entries(TICKET_STATUS_LABEL).map(([value, label]) => (
            <option key={value} value={value}>
              {label}
            </option>
          ))}
        </Select>
        <button
          type="submit"
          className={cn(
            "rounded-lg bg-kolabora-primary px-4 py-2 text-sm font-medium text-kolabora-neutral-white hover:opacity-90",
            FOCUS_RING_CLASSES,
          )}
        >
          Filter
        </button>
      </form>

      {tickets.length === 0 ? (
        <p className="mt-8 text-sm text-kolabora-neutral-dark/70">No tickets yet.</p>
      ) : (
        <ul className="mt-6 flex flex-col gap-3">
          {tickets.map((ticket) => (
            <li key={ticket.id}>
              <Link
                href={`/dashboard/tickets/${ticket.id}`}
                className={cn(
                  "flex items-center justify-between gap-4",
                  cardClasses("p-4 hover:border-kolabora-primary/40"),
                  FOCUS_RING_CLASSES,
                )}
              >
                <div className="min-w-0">
                  <p className="font-medium">{ticket.event?.title ?? "-"}</p>
                  <p className="text-sm text-kolabora-neutral-dark/70">
                    {ticket.ticket_type_name} &middot; {ticket.ticket_code}
                    {ticket.event ? ` · ${formatDate(ticket.event.start_date)}` : ""}
                  </p>
                </div>
                <span className="shrink-0 rounded-full bg-kolabora-tertiary/15 px-3 py-1 text-xs font-medium text-kolabora-tertiary">
                  {TICKET_STATUS_LABEL[ticket.status]}
                </span>
              </Link>
            </li>
          ))}
        </ul>
      )}

      <Pagination meta={meta} basePath="/dashboard/tickets" searchParams={{ status }} />
    </div>
  );
}