import Link from "next/link";
import type { KolaboraEvent, PaginatedResponse } from "@/types/event";
import { ActionButton } from "@/components/admin/action-button";
import { ReasonAction } from "@/components/admin/reason-action";
import { EventStatusSelect } from "@/components/admin/event-status-select";
import { EVENT_STATUS_LABEL } from "@/lib/labels";
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";

/**
 * Shared list markup for `/admin/events` and `/admin/signature/events` — the
 * two trees differ only in which events they fetch (see each route's
 * `getAdminEvents()` call) and which base path their links point into.
 */
export function EventListView({
  events,
  meta,
  status,
  basePath,
  heading,
  createLabel,
  emptyLabel,
}: {
  events: KolaboraEvent[];
  meta: PaginatedResponse<KolaboraEvent>["meta"];
  status?: string;
  basePath: string;
  heading: string;
  createLabel: string;
  emptyLabel: string;
}) {
  return (
    <div>
      <div className="flex items-center justify-between">
        <h2 className="text-lg font-semibold">{heading}</h2>
        <Link
          href={`${basePath}/new`}
          className="rounded-full bg-kolabora-primary px-4 py-2 text-sm font-medium text-kolabora-neutral-white hover:opacity-90"
        >
          {createLabel}
        </Link>
      </div>

      <form className="mt-4 flex gap-3" method="get">
        <FilterSelect
          name="status"
          ariaLabel="Filter event status"
          defaultValue={status ?? ""}
          options={[
            { value: "", label: "All Statuses" },
            ...Object.entries(EVENT_STATUS_LABEL).map(([value, label]) => ({ value, label })),
          ]}
        />
        <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("mt-4 flex flex-col divide-y divide-kolabora-neutral-dark/10", cardClasses())}>
        {events.length === 0 && (
          <p className="px-4 py-6 text-center text-sm text-kolabora-neutral-dark/70">{emptyLabel}</p>
        )}
        {events.map((event) => (
          <div key={event.id} className="flex flex-wrap items-center justify-between gap-3 px-4 py-3">
            <Link href={`${basePath}/${event.id}`} className="min-w-0 flex-1 hover:underline">
              <p className="font-medium">{event.title}</p>
              <p className="text-sm text-kolabora-neutral-dark/70">
                {event.organizer?.name} &middot; {formatDate(event.start_date)}
              </p>
              <p className="text-xs text-kolabora-neutral-dark/70">
                {EVENT_STATUS_LABEL[event.status] ?? event.status}
              </p>
            </Link>
            <div className="flex flex-wrap gap-2">
              {event.status === "draft" && (
                <ActionButton
                  endpoint={`/api/admin/events/${event.id}/publish`}
                  label="Publish"
                  variant="primary"
                />
              )}
              {event.status === "waiting_review" && (
                <>
                  <ActionButton
                    endpoint={`/api/admin/events/${event.id}/approve`}
                    label="Approve"
                    variant="primary"
                  />
                  <ReasonAction endpoint={`/api/admin/events/${event.id}/reject`} label="Reject" />
                </>
              )}
              {["published", "ongoing", "finished"].includes(event.status) && (
                <EventStatusSelect eventId={event.id} status={event.status} />
              )}
              {["published", "ongoing"].includes(event.status) && (
                <ReasonAction endpoint={`/api/admin/events/${event.id}/suspend`} label="Suspend" />
              )}
              {event.status === "suspended" && (
                <ActionButton
                  endpoint={`/api/admin/events/${event.id}/reinstate`}
                  label="Reactivate"
                  variant="primary"
                />
              )}
            </div>
          </div>
        ))}
      </div>

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