import Link from "next/link";
import type { KolaboraEvent } from "@/types/event";
import { formatDate } from "@/lib/format";
import { EventThumbnail } from "@/components/events/event-thumbnail";
import { EVENT_STATUS_LABEL } from "@/lib/labels";
import { FOCUS_RING_CLASSES } from "@/components/ui/styles";
import { cn } from "@/lib/utils";

// Only these ever reach a public-facing card — see EventController::index()/
// show() (Draft/Waiting Review/Rejected/Suspended are never publicly
// reachable), but a Finished event can still be opened via its own detail
// page/link even though it's excluded from listings.
const STATUS_BADGE_CLASSES: Record<string, string> = {
  ongoing: "bg-green-600 text-white",
  published: "bg-kolabora-neutral-dark text-white",
  finished: "bg-kolabora-neutral-dark/40 text-white",
};

export function EventCard({ event }: { event: KolaboraEvent }) {
  return (
    <Link
      href={`/events/${event.slug}`}
      className={cn(
        "group flex flex-col overflow-hidden rounded-2xl border border-kolabora-neutral-dark/10 transition-colors hover:border-kolabora-primary/40 hover:shadow-md",
        FOCUS_RING_CLASSES,
      )}
    >
      <div className="relative flex aspect-video items-center justify-center bg-kolabora-secondary/40 text-kolabora-neutral-dark/30">
        {event.thumbnail ? (
          <EventThumbnail src={event.thumbnail} alt={event.title} />
        ) : (
          <span className="text-sm">Kolaborativ</span>
        )}
        {event.is_signature_event && (
          <span className="absolute left-2 top-2 rounded-full bg-kolabora-primary px-2.5 py-0.5 text-xs font-medium text-kolabora-neutral-white">
            Kolaborativ Official
          </span>
        )}
        <span
          className={cn(
            "absolute right-2 top-2 rounded-full px-2.5 py-0.5 text-xs font-medium",
            STATUS_BADGE_CLASSES[event.status] ?? "bg-kolabora-neutral-dark text-white",
          )}
        >
          {EVENT_STATUS_LABEL[event.status] ?? event.status}
        </span>
      </div>
      <div className="flex flex-1 flex-col gap-2 p-4">
        {event.category && (
          <span className="w-fit rounded-full bg-kolabora-tertiary/15 px-2.5 py-0.5 text-xs font-medium text-kolabora-tertiary">
            {event.category.name}
          </span>
        )}
        <h3 className="font-semibold leading-snug group-hover:text-kolabora-primary">
          {event.title}
        </h3>
        <p className="text-sm text-kolabora-neutral-dark/70">{formatDate(event.start_date)}</p>
        {event.location && (
          <p className="text-sm text-kolabora-neutral-dark/70">{event.location}</p>
        )}
        {typeof event.tickets_sold === "number" && event.tickets_sold > 0 && (
          <p className="text-xs font-medium text-kolabora-primary">
            {event.tickets_sold} tickets sold
          </p>
        )}
      </div>
    </Link>
  );
}