'use client'

import * as React from 'react'
import type { AdminMedia } from '@admin/types'
import { deleteMedia } from '@admin/actions/media'
import { Button } from '@admin/components/ui/button'
import {
  Drawer,
  DrawerContent,
  DrawerDescription,
  DrawerTitle,
  DrawerTrigger
} from '@admin/components/ui/drawer'
import { Spinner } from '@admin/components/ui/spinner'
import { Trash2, TriangleAlert } from 'lucide-react'
import { toast } from 'sonner'

interface MediaDeleteDrawerProps {
  media: AdminMedia
  container?: HTMLElement | null
  disabled?: boolean
  deletePending?: boolean
  startDeleteTransition?: React.TransitionStartFunction
  onDeleted: () => void
}

export function MediaDeleteDrawer({
  media,
  container,
  disabled = false,
  deletePending,
  startDeleteTransition,
  onDeleted
}: MediaDeleteDrawerProps) {
  const [open, setOpen] = React.useState(false)
  const [internalPending, startInternalDeleteTransition] = React.useTransition()
  const [contentHeight, setContentHeight] = React.useState<number | null>(null)
  const contentRef = React.useRef<HTMLDivElement | null>(null)
  const isPending = deletePending ?? internalPending
  const runDeleteTransition = startDeleteTransition ?? startInternalDeleteTransition

  React.useEffect(() => {
    if (!open) {
      return
    }

    const measuredNode = contentRef.current
    if (!measuredNode) {
      return
    }

    const observedNode: HTMLDivElement = measuredNode

    function updateHeight() {
      setContentHeight(observedNode.getBoundingClientRect().height)
    }

    updateHeight()

    const observer = new ResizeObserver(updateHeight)
    observer.observe(observedNode)

    return () => observer.disconnect()
  }, [open])

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

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

        if (result.success) {
          toast.success('Media deleted')
          setOpen(false)
          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.')
      }
    })
  }

  function handleOpenChange(nextOpen: boolean) {
    if (isPending && !nextOpen) {
      return
    }

    setOpen(nextOpen)
  }

  return (
    <Drawer
      container={container}
      swipeDirection="down"
      disablePointerDismissal={isPending}
      open={open}
      onOpenChange={handleOpenChange}
    >
      <DrawerTrigger
        render={<Button variant="destructive" disabled={disabled || isPending || !container} />}
      >
        <Trash2 />
        Delete media
      </DrawerTrigger>
      <DrawerContent className="pointer-events-auto max-h-[calc(100%-1rem)] overflow-hidden p-3 outline-none">
        <div
          className="overflow-hidden rounded-sm border border-border bg-popover text-sm text-popover-foreground shadow-2xl transition-[height] duration-200 ease-out"
          style={contentHeight ? { height: contentHeight } : undefined}
        >
          <div ref={contentRef} className="max-h-[calc(100vh-8rem)] overflow-y-auto px-4 pt-4 pb-4">
            <div aria-hidden="true" className="mx-auto mb-5 h-1.5 w-20 rounded-sm bg-muted" />
            <div className="mb-3 flex size-10 items-center justify-center rounded-sm bg-destructive/10 text-foreground">
              <TriangleAlert className="size-5" />
            </div>
            <DrawerTitle className="font-heading text-base font-medium text-foreground">
              Delete this media?
            </DrawerTitle>
            <DrawerDescription className="mt-1 text-sm text-muted-foreground">
              This deletes {media.filename} from the media library. The stored file is not deleted.
            </DrawerDescription>
            <div className="mt-5 grid grid-cols-2 gap-2">
              <Button
                variant="secondary"
                onClick={() => handleOpenChange(false)}
                disabled={isPending}
              >
                Cancel
              </Button>
              <Button
                variant="destructive"
                onClick={() => void handleDelete()}
                disabled={isPending}
                aria-busy={isPending}
              >
                {isPending && <Spinner />}
                {isPending ? 'Deleting…' : 'Delete media'}
              </Button>
            </div>
          </div>
        </div>
      </DrawerContent>
    </Drawer>
  )
}