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 { useDeactivateSeccion } from '../hooks/useDeactivateSeccion'
import { useReactivateSeccion } from '../hooks/useReactivateSeccion'

interface DeactivateSeccionModalProps {
  seccionId: number
  seccionNombre: string
  activo: boolean
  disabled?: boolean
}

export function DeactivateSeccionModal({ seccionId, seccionNombre, activo, disabled = false }: DeactivateSeccionModalProps) {
  const [open, setOpen] = useState(false)
  const { mutate: deactivate, isPending: deactivating } = useDeactivateSeccion()
  const { mutate: reactivate, isPending: reactivating } = useReactivateSeccion()

  const isPending = deactivating || reactivating

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

  return (
    <AlertDialog open={open} onOpenChange={setOpen}>
      <AlertDialogTrigger asChild>
        <Button variant="outline" size="sm" disabled={disabled}>
          {activo ? 'Desactivar' : 'Reactivar'}
        </Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>
            {activo ? 'Desactivar sección' : 'Reactivar sección'}
          </AlertDialogTitle>
          <AlertDialogDescription>
            {activo
              ? `¿Confirmás que querés desactivar la sección "${seccionNombre}"?`
              : `¿Confirmás que querés reactivar la sección "${seccionNombre}"?`}
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel disabled={isPending}>Cancelar</AlertDialogCancel>
          <AlertDialogAction onClick={handleConfirm} disabled={isPending}>
            {isPending ? 'Procesando...' : activo ? 'Desactivar' : 'Reactivar'}
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}
