"use client";

import { LoaderCircleIcon, SendIcon } from "lucide-react";
import { CalendarBadge } from "@/components/admin/CalendarBadge";
import {
  AlertDialog,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button";
import { calendarById } from "@/lib/calendars";
import { formatDay } from "@/lib/dates";
import { describeWhen, occurrence } from "@/lib/event-display";
import type { CalendarEvent } from "@/lib/types";

/**
 * "Really publish?" - publishing puts the event into every subscriber's
 * calendar app, and for the public calendar onto nachklang.art, which is not
 * something to do by a stray tap on a phone.
 *
 * Stays open with a spinner until the API has answered, and stays open on a
 * failure (the page shows the error as a toast), so a retry is one tap.
 */
export function PublishDialog({
  event,
  now,
  publishing,
  onConfirm,
  onCancel,
}: {
  event: CalendarEvent | null;
  now: Date;
  publishing: boolean;
  onConfirm: (event: CalendarEvent) => void;
  onCancel: () => void;
}) {
  const calendar = event ? calendarById(event.calendarId) : undefined;

  return (
    <AlertDialog
      open={event !== null}
      onOpenChange={(open) => {
        if (!open && !publishing) onCancel();
      }}
    >
      <AlertDialogContent>
        {event && (
          <>
            <AlertDialogHeader>
              <AlertDialogTitle>„{event.name}“ veröffentlichen?</AlertDialogTitle>
              <AlertDialogDescription>
                {calendar?.slug === "public"
                  ? "Der Termin wird danach öffentlich angezeigt – auf nachklang.art und bei allen, die den Kalender abonniert haben."
                  : `Der Termin erscheint danach bei allen, die den Kalender „${calendar?.label ?? event.calendarId}“ abonniert haben.`}
              </AlertDialogDescription>
            </AlertDialogHeader>
            <div className="flex flex-col gap-1.5 rounded-lg bg-muted/60 px-3 py-2.5 text-sm">
              <span>
                {formatDay(occurrence(event, now).start)} · {describeWhen(event, now)}
              </span>
              <CalendarBadge calendarId={event.calendarId} className="self-start" />
            </div>
            <AlertDialogFooter>
              <AlertDialogCancel disabled={publishing}>Abbrechen</AlertDialogCancel>
              <Button onClick={() => onConfirm(event)} disabled={publishing}>
                {publishing ? <LoaderCircleIcon className="animate-spin" /> : <SendIcon />}
                Veröffentlichen
              </Button>
            </AlertDialogFooter>
          </>
        )}
      </AlertDialogContent>
    </AlertDialog>
  );
}