import { useEffect } from 'react'
import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod'
import { isAxiosError } from 'axios'
import { AlertCircle } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Alert, AlertDescription } from '@/components/ui/alert'
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import { useMediosList } from '@/features/medios/hooks/useMediosList'
import type { PuntoDeVentaDetail } from '../types'

const puntoDeVentaFormSchema = z.object({
  medioId: z.coerce.number<number>().refine((v) => v >= 1, 'Seleccioná un medio'),
  numeroAFIP: z.coerce
    .number<number>('El número AFIP debe ser un número')
    .int('Debe ser un número entero')
    .min(1, 'El número AFIP debe ser mayor a 0'),
  nombre: z
    .string()
    .min(1, 'El nombre es requerido')
    .max(100, 'Máximo 100 caracteres'),
})

export type PuntoDeVentaFormValues = z.infer<typeof puntoDeVentaFormSchema>

interface PuntoDeVentaFormProps {
  initialData?: PuntoDeVentaDetail
  isPending: boolean
  error: unknown
  onSubmit: (values: PuntoDeVentaFormValues) => void
}

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 }
    if (data.error === 'numero_afip_duplicado') {
      return data.message ?? 'Ya existe un punto de venta con ese número AFIP en el medio'
    }
    if (data.error === 'medio_inactivo') {
      return data.message ?? 'El medio está inactivo. Reactivalo antes de operar.'
    }
    return data.message ?? data.error ?? 'Error al guardar el punto de venta'
  }
  return 'Error al guardar el punto de venta'
}

export function PuntoDeVentaForm({ initialData, isPending, error, onSubmit }: PuntoDeVentaFormProps) {
  const isEdit = !!initialData

  const { data: mediosData } = useMediosList({ page: 1, pageSize: 200 })
  const medios = mediosData?.items ?? []

  const form = useForm<PuntoDeVentaFormValues>({
    resolver: zodResolver(puntoDeVentaFormSchema),
    defaultValues: {
      medioId: initialData?.medioId ?? ('' as unknown as number),
      numeroAFIP: initialData?.numeroAFIP ?? ('' as unknown as number),
      nombre: initialData?.nombre ?? '',
    },
  })

  useEffect(() => {
    if (initialData) {
      form.reset({
        medioId: initialData.medioId,
        numeroAFIP: initialData.numeroAFIP,
        nombre: initialData.nombre,
      })
    }
  }, [initialData, form])

  const backendError = resolveBackendError(error)

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4" noValidate>
        {backendError && (
          <Alert variant="destructive">
            <AlertCircle className="h-4 w-4" />
            <AlertDescription>{backendError}</AlertDescription>
          </Alert>
        )}

        <FormField
          control={form.control}
          name="medioId"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Medio</FormLabel>
              <Select
                value={field.value ? String(field.value) : ''}
                onValueChange={(v) => field.onChange(Number(v))}
                disabled={isPending || isEdit}
              >
                <FormControl>
                  <SelectTrigger className="w-full" aria-label="Medio">
                    <SelectValue placeholder="Seleccioná un medio" />
                  </SelectTrigger>
                </FormControl>
                <SelectContent>
                  {medios.map((m) => (
                    <SelectItem key={m.id} value={String(m.id)}>
                      {m.nombre}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
              <FormMessage />
            </FormItem>
          )}
        />

        <FormField
          control={form.control}
          name="numeroAFIP"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Número AFIP</FormLabel>
              <FormControl>
                <Input
                  {...field}
                  type="number"
                  min={1}
                  disabled={isPending || isEdit}
                  placeholder="Ej: 1"
                  aria-label="Número AFIP"
                />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <FormField
          control={form.control}
          name="nombre"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Nombre</FormLabel>
              <FormControl>
                <Input
                  {...field}
                  type="text"
                  disabled={isPending}
                  placeholder="Nombre del punto de venta"
                  aria-label="Nombre"
                />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <Button type="submit" disabled={isPending} className="w-full">
          {isPending ? 'Guardando...' : isEdit ? 'Guardar cambios' : 'Crear punto de venta'}
        </Button>
      </form>
    </Form>
  )
}
