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 { useDeactivatePuntoDeVenta, useReactivatePuntoDeVenta } from '../hooks/usePuntosDeVenta'

interface DeactivatePuntoDeVentaModalProps {
  puntoDeVentaId: number
  puntoDeVentaNombre: string
  activo: boolean
  disabled?: boolean
}

export function DeactivatePuntoDeVentaModal({
  puntoDeVentaId,
  puntoDeVentaNombre,
  activo,
  disabled = false,
}: DeactivatePuntoDeVentaModalProps) {
  const [open, setOpen] = useState(false)
  const { mutate: deactivate, isPending: deactivating } = useDeactivatePuntoDeVenta()
  const { mutate: reactivate, isPending: reactivating } = useReactivatePuntoDeVenta()

  const isPending = deactivating || reactivating

  function handleConfirm() {
    if (activo) {
      deactivate(puntoDeVentaId, { onSuccess: () => setOpen(false) })
    } else {
      reactivate(puntoDeVentaId, { 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 punto de venta' : 'Reactivar punto de venta'}
          </AlertDialogTitle>
          <AlertDialogDescription>
            {activo
              ? `¿Confirmás que querés desactivar el punto de venta "${puntoDeVentaNombre}"?`
              : `¿Confirmás que querés reactivar el punto de venta "${puntoDeVentaNombre}"?`}
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel disabled={isPending}>Cancelar</AlertDialogCancel>
          <AlertDialogAction onClick={handleConfirm} disabled={isPending}>
            {isPending ? 'Procesando...' : activo ? 'Desactivar' : 'Reactivar'}
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}
