import { useState } from 'react'
import { isAxiosError } from 'axios'
import { AlertCircle } from 'lucide-react'
import { toast } from 'sonner'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog'
import { Alert, AlertDescription } from '@/components/ui/alert'
import { ProductTypeForm } from './ProductTypeForm'
import type { ProductTypeFormOutput } from './ProductTypeForm'
import { useCreateProductType } from '../hooks/useCreateProductType'
import { useUpdateProductType } from '../hooks/useUpdateProductType'
import type { ProductTypeDetail } from '../types'

// ─── Error resolver ────────────────────────────────────────────────────────────

function resolveBackendError(err: unknown): string | null {
  if (!err) return null
  if (isAxiosError(err) && err.response?.data) {
    const data = err.response.data as { error?: string; message?: string }
    return data.message ?? data.error ?? 'Error al guardar el tipo de producto'
  }
  const errObj = err as { response?: { data?: { message?: string } } }
  if (errObj?.response?.data?.message) {
    return errObj.response.data.message
  }
  return 'Error al guardar el tipo de producto'
}

// ─── Props ────────────────────────────────────────────────────────────────────

interface ProductTypeFormDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  productType?: ProductTypeDetail
  onSuccess?: () => void
}

// ─── Component ────────────────────────────────────────────────────────────────

export function ProductTypeFormDialog({
  open,
  onOpenChange,
  productType,
  onSuccess,
}: ProductTypeFormDialogProps) {
  const [backendError, setBackendError] = useState<string | null>(null)

  const isEdit = !!productType
  const { mutateAsync: createProductType, isPending: creating } = useCreateProductType()
  const { mutateAsync: updateProductType, isPending: updating } = useUpdateProductType()
  const isPending = creating || updating

  async function handleSubmit(values: ProductTypeFormOutput) {
    setBackendError(null)
    try {
      if (isEdit) {
        await updateProductType({ id: productType.id, data: values })
        toast.success('Tipo de producto actualizado')
      } else {
        await createProductType(values)
        toast.success('Tipo de producto creado')
      }
      onOpenChange(false)
      onSuccess?.()
    } catch (err) {
      const msg = resolveBackendError(err)
      setBackendError(msg)
      if (
        !isAxiosError(err) ||
        (err.response?.status !== 409 && err.response?.status !== 422 && err.response?.status !== 400)
      ) {
        toast.error(isEdit ? 'Error al actualizar tipo de producto' : 'Error al crear tipo de producto')
      }
    }
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-lg">
        <DialogHeader>
          <DialogTitle>{isEdit ? 'Editar tipo de producto' : 'Nuevo tipo de producto'}</DialogTitle>
          <DialogDescription>
            {isEdit
              ? `Modificá los datos del tipo "${productType?.nombre ?? ''}".`
              : 'Completá los datos para crear un nuevo tipo de producto.'}
          </DialogDescription>
        </DialogHeader>

        {backendError && (
          <Alert variant="destructive">
            <AlertCircle className="h-4 w-4" />
            <AlertDescription>{backendError}</AlertDescription>
          </Alert>
        )}

        <ProductTypeForm
          defaultValues={productType}
          onSubmit={handleSubmit}
          onCancel={() => onOpenChange(false)}
          isPending={isPending}
          isEdit={isEdit}
        />
      </DialogContent>
    </Dialog>
  )
}
