"use client"

import { useActionState, useState } from "react"
import { useFormStatus } from "react-dom"

import {
  AlertDialog,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { Button } from "@/components/ui/button"
import type { DeleteInvitationActionState } from "@/app/admin/guests/[id]/actions"
import { deleteInvitationAction } from "@/app/admin/guests/[id]/actions"

interface DeleteInvitationDialogProps {
  invitationId: string
  displayName: string
}

const initialState: DeleteInvitationActionState = { error: null }

function DeleteSubmitButton() {
  const { pending } = useFormStatus()

  return (
    <Button type="submit" variant="destructive" disabled={pending}>
      {pending ? "Deleting..." : "Delete permanently"}
    </Button>
  )
}

export function DeleteInvitationDialog({
  invitationId,
  displayName,
}: DeleteInvitationDialogProps) {
  const [open, setOpen] = useState(false)
  const [state, formAction] = useActionState(deleteInvitationAction, initialState)

  return (
    <AlertDialog open={open} onOpenChange={setOpen}>
      <AlertDialogTrigger asChild>
        <Button variant="destructive">Delete group</Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <form action={formAction} className="space-y-4">
          <input type="hidden" name="invitationId" value={invitationId} />

          <AlertDialogHeader>
            <AlertDialogTitle>Delete {displayName}?</AlertDialogTitle>
            <AlertDialogDescription>
              This permanently removes this invitation group, its members, RSVP information,
              toast requests, and uploaded photo. This action cannot be undone.
            </AlertDialogDescription>
          </AlertDialogHeader>

          {state.error ? (
            <p className="rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
              {state.error}
            </p>
          ) : null}

          <AlertDialogFooter>
            <AlertDialogCancel type="button">Cancel</AlertDialogCancel>
            <DeleteSubmitButton />
          </AlertDialogFooter>
        </form>
      </AlertDialogContent>
    </AlertDialog>
  )
}