"use client";

import { LoaderCircleIcon, MapPinIcon, RepeatIcon, SendIcon } from "lucide-react";
import { CalendarBadge } from "@/components/admin/CalendarBadge";
import { Button } from "@/components/ui/button";
import { dateBlock, describeWhen, isPast, occurrence, repeatLabel } from "@/lib/event-display";
import type { CalendarEvent } from "@/lib/types";
import { cn } from "@/lib/utils";

/**
 * One event in the list. The whole row opens the event (a stretched button on
 * the title, so the row's other button - "Veröffentlichen" - stays a separate,
 * valid control rather than a button inside a button).
 */
export function EventListItem({
  event,
  now,
  publishing,
  onOpen,
  onPublish,
}: {
  event: CalendarEvent;
  now: Date;
  publishing: boolean;
  onOpen?: (event: CalendarEvent) => void;
  onPublish: (event: CalendarEvent) => void;
}) {
  const { start } = occurrence(event, now);
  const block = dateBlock(start);
  const repeat = repeatLabel(event.repeatFrequency);
  const title = event.name || "(ohne Titel)";

  return (
    <li
      className={cn(
        "relative flex gap-3 px-3 py-3 transition-colors sm:gap-4 sm:px-4",
        onOpen && "hover:bg-muted/50 has-[button[data-open]:focus-visible]:bg-muted/50",
        isPast(event, now) && "opacity-60",
      )}
    >
      <div className="flex w-11 shrink-0 flex-col items-center pt-0.5 text-center leading-tight" aria-hidden>
        <span className="text-[11px] font-medium text-muted-foreground uppercase">{block.weekday}</span>
        <span className="text-xl font-semibold tabular-nums">{block.day}</span>
        <span className="text-[11px] text-muted-foreground">{block.month}</span>
      </div>

      <div className="flex min-w-0 flex-1 flex-col gap-1">
        {onOpen ? (
          <button
            type="button"
            data-open
            onClick={() => onOpen(event)}
            className="text-left font-medium outline-none after:absolute after:inset-0 after:content-['']"
          >
            <span className="line-clamp-2">{title}</span>
          </button>
        ) : (
          <span className="line-clamp-2 font-medium">{title}</span>
        )}

        <div className="flex flex-wrap items-center gap-x-3 gap-y-0.5 text-sm text-muted-foreground">
          <span>{describeWhen(event, now)}</span>
          {event.location && (
            <span className="inline-flex min-w-0 items-center gap-1">
              <MapPinIcon aria-hidden className="size-3.5 shrink-0" />
              <span className="truncate">{event.location}</span>
            </span>
          )}
        </div>

        <div className="mt-1 flex flex-wrap items-center gap-1.5">
          <CalendarBadge calendarId={event.calendarId} />
          {event.status === "DRAFT" && (
            <span className="inline-flex h-5 items-center rounded-full border border-dashed border-amber-400 px-2 text-xs font-medium text-amber-800">
              Entwurf
            </span>
          )}
          {event.status === "PRIVATE" && (
            <span className="inline-flex h-5 items-center rounded-full bg-muted px-2 text-xs font-medium text-muted-foreground">
              Privat
            </span>
          )}
          {repeat && (
            <span className="inline-flex h-5 items-center gap-1 rounded-full bg-muted px-2 text-xs text-muted-foreground">
              <RepeatIcon aria-hidden className="size-3" />
              {repeat}
            </span>
          )}
          {event.status === "DRAFT" && (
            <Button
              variant="outline"
              size="xs"
              className="relative z-10 ml-auto"
              disabled={publishing}
              onClick={() => onPublish(event)}
            >
              {publishing ? <LoaderCircleIcon className="animate-spin" /> : <SendIcon />}
              Veröffentlichen
            </Button>
          )}
        </div>
      </div>
    </li>
  );
}