"use client"

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Trash2 } from "lucide-react"
import { useState } from "react"

interface ConfirmDeleteDialogProps {
  title?: string
  description?: string
  onConfirm: () => void | Promise<void>
  /** Trigger element — used in uncontrolled mode (no open prop). */
  trigger?: React.ReactNode
  /** Controlled mode: externally manage open state. */
  open?: boolean
  onOpenChange?: (open: boolean) => void
}

export function ConfirmDeleteDialog({
  title = "¿Eliminar este elemento?",
  description = "Esta acción no se puede deshacer.",
  onConfirm,
  trigger,
  open: controlledOpen,
  onOpenChange: controlledOnOpenChange,
}: ConfirmDeleteDialogProps) {
  const [internalOpen, setInternalOpen] = useState(false)
  const [loading, setLoading] = useState(false)

  const isControlled = controlledOpen !== undefined
  const open = isControlled ? controlledOpen : internalOpen
  const setOpen = isControlled ? (controlledOnOpenChange ?? (() => {})) : setInternalOpen

  const handleConfirm = async () => {
    setLoading(true)
    try {
      await onConfirm()
    } finally {
      setLoading(false)
      setOpen(false)
    }
  }

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      {!isControlled && (
        <DialogTrigger asChild>
          {trigger ?? (
            <Button
              variant="ghost"
              size="icon"
              className="h-8 w-8 rounded-[var(--ds-radius-s)] text-[var(--ds-text-neutral-lighter)] hover:bg-[var(--ds-error-100)] hover:text-[var(--ds-error-700)]"
            >
              <Trash2 className="h-4 w-4" />
            </Button>
          )}
        </DialogTrigger>
      )}
      <DialogContent className="rounded-[var(--ds-radius-l)] border-[var(--ds-neutral-200)] shadow-[var(--ds-shadow-4dp)] sm:max-w-[420px]">
        <DialogHeader>
          <DialogTitle className="ds-type-global-m ds-type-semibold text-[var(--ds-text-neutral-default)]">
            {title}
          </DialogTitle>
          <DialogDescription className="ds-type-global-xs text-[var(--ds-text-neutral-lighter)]">
            {description}
          </DialogDescription>
        </DialogHeader>
        <DialogFooter className="gap-[var(--ds-space-2x)] sm:gap-0">
          <Button
            type="button"
            variant="outline"
            onClick={() => setOpen(false)}
            className="rounded-[var(--ds-radius-m)] border-[var(--ds-neutral-300)] ds-type-global-xs text-[var(--ds-text-neutral-default)]"
          >
            Cancelar
          </Button>
          <Button
            type="button"
            onClick={handleConfirm}
            disabled={loading}
            className="rounded-[var(--ds-radius-m)] bg-[var(--ds-error-700)] ds-type-global-xs ds-type-semibold text-white hover:opacity-90"
          >
            {loading ? "Eliminando..." : "Eliminar"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}