import { useState } from 'react'
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from '@/components/ui/alert-dialog'
import { Button } from '@/components/ui/button'
import { useDeactivateMedio } from '../hooks/useDeactivateMedio'
import { useReactivateMedio } from '../hooks/useReactivateMedio'

interface DeactivateMedioModalProps {
  medioId: number
  medioNombre: string
  activo: boolean
}

export function DeactivateMedioModal({ medioId, medioNombre, activo }: DeactivateMedioModalProps) {
  const [open, setOpen] = useState(false)
  const { mutate: deactivate, isPending: deactivating } = useDeactivateMedio()
  const { mutate: reactivate, isPending: reactivating } = useReactivateMedio()

  const isPending = deactivating || reactivating

  function handleConfirm() {
    if (activo) {
      deactivate(medioId, { onSuccess: () => setOpen(false) })
    } else {
      reactivate(medioId, { onSuccess: () => setOpen(false) })
    }
  }

  return (
    <AlertDialog open={open} onOpenChange={setOpen}>
      <AlertDialogTrigger asChild>
        <Button variant="outline" size="sm">
          {activo ? 'Desactivar' : 'Reactivar'}
        </Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>
            {activo ? 'Desactivar medio' : 'Reactivar medio'}
          </AlertDialogTitle>
          <AlertDialogDescription>
            {activo
              ? `¿Confirmás que querés desactivar el medio "${medioNombre}"? El medio no podrá usarse hasta que sea reactivado.`
              : `¿Confirmás que querés reactivar el medio "${medioNombre}"?`}
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel disabled={isPending}>Cancelar</AlertDialogCancel>
          <AlertDialogAction onClick={handleConfirm} disabled={isPending}>
            {isPending ? 'Procesando...' : activo ? 'Desactivar' : 'Reactivar'}
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}
