'use client'

import * as React from 'react'
import type { AdminMedia } from '@admin/types'
import { deleteMedia } from '@admin/actions/media'
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger
} from '@admin/components/ui/alert-dialog'
import { Button } from '@admin/components/ui/button'
import { Trash2 } from 'lucide-react'
import { toast } from 'sonner'

interface MediaDeleteDialogProps {
  media: AdminMedia
  disabled?: boolean
  onDeleted: () => void
}

export function MediaDeleteDialog({ media, disabled = false, onDeleted }: MediaDeleteDialogProps) {
  const [isPending, startDeleteTransition] = React.useTransition()

  function handleDelete() {
    if (isPending) {
      return
    }

    startDeleteTransition(async () => {
      try {
        const result = await deleteMedia(media.id)

        if (result.success) {
          toast.success('Media deleted')
          onDeleted()
          return
        }

        toast.error(result.error ?? 'Failed to delete this media')
      } catch (error) {
        console.error(error)
        toast.error('Failed to delete this media. Try again.')
      }
    })
  }

  return (
    <AlertDialog>
      <AlertDialogTrigger
        render={<Button variant="destructive" disabled={disabled || isPending} />}
      >
        <Trash2 />
        Delete media
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Delete this media?</AlertDialogTitle>
          <AlertDialogDescription>
            This deletes {media.filename} from the media library. The stored file is not deleted.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel disabled={isPending}>Cancel</AlertDialogCancel>
          <AlertDialogAction
            variant="destructive"
            disabled={isPending}
            aria-busy={isPending}
            onClick={(event) => {
              event.preventDefault()
              void handleDelete()
            }}
          >
            {isPending ? 'Deleting…' : 'Delete media'}
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}