import { useState } from 'react'
import { type Role } from '@/types/roles.types'
import { AlertTriangle } from 'lucide-react'
import { toast } from 'sonner'
import { getApiErrorMessage } from '@/lib/api-error'
import { useDeleteRole } from '@/hooks/roles/useDeleteRole'
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { ConfirmDialog } from '@/components/confirm-dialog'

interface Props {
  open: boolean
  onOpenChange: (open: boolean) => void
  currentRow: Role | null
}

export function RolesDeleteDialog({ open, onOpenChange, currentRow }: Props) {
  const [value, setValue] = useState('')
  const { mutate, isPending } = useDeleteRole()

  if (!currentRow) return null

  const handleDelete = () => {
    mutate(currentRow.id, {
      onSuccess: () => {
        toast.success('نقش با موفقیت حذف شد')
        setValue('')
        onOpenChange(false)
      },
      onError: (error) => {
        toast.error(getApiErrorMessage(error, 'خطا در حذف نقش'))
      },
    })
  }

  return (
    <ConfirmDialog
      open={open}
      onOpenChange={(state) => {
        if (!state) setValue('')
        onOpenChange(state)
      }}
      form='roles-delete-form'
      disabled={value.trim() !== currentRow.name}
      title={
        <span className='text-destructive'>
          <AlertTriangle
            className='me-1 inline-block stroke-destructive'
            size={18}
          />{' '}
          حذف نقش
        </span>
      }
      desc={
        <form
          id='roles-delete-form'
          onSubmit={(event) => {
            event.preventDefault()
            handleDelete()
          }}
          className='space-y-4'
        >
          <p className='mb-2'>
            آیا از حذف نقش <span className='font-bold'>{currentRow.name}</span>{' '}
            مطمئن هستید؟
          </p>

          <Label>
            نام نقش:
            <Input
              value={value}
              onChange={(event) => setValue(event.target.value)}
              placeholder='نام نقش را برای تایید حذف وارد کنید.'
              autoFocus
            />
          </Label>

          <Alert variant='destructive'>
            <AlertTitle>هشدار!</AlertTitle>
            <AlertDescription>
              این عملیات قابل برگشت نیست و دسترسی مدیران دارای این نقش تغییر
              می‌کند.
            </AlertDescription>
          </Alert>
        </form>
      }
      confirmText='حذف'
      cancelBtnText='انصراف'
      isLoading={isPending}
      destructive
    />
  )
}