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 { TIPO_SECCION_OPTIONS } from '../tipoSeccion'
import type { SeccionDetail, TipoSeccion } from '../types'

const TIPO_SECCION_VALUES = ['clasificados', 'notables', 'suplementos'] as const

const seccionFormSchema = z.object({
  medioId: z.coerce.number<number>().refine((v) => v >= 1, 'Seleccioná un medio'),
  codigo: z
    .string()
    .min(1, 'El código es requerido')
    .max(20, 'Máximo 20 caracteres'),
  nombre: z
    .string()
    .min(1, 'El nombre es requerido')
    .max(100, 'Máximo 100 caracteres'),
  tipo: z.enum(TIPO_SECCION_VALUES, { error: 'Seleccioná un tipo válido' }),
})

export type SeccionFormValues = z.infer<typeof seccionFormSchema>

interface SeccionFormProps {
  initialData?: SeccionDetail
  isPending: boolean
  error: unknown
  onSubmit: (values: SeccionFormValues) => 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 === 'seccion_codigo_duplicado_en_medio') {
      return data.message ?? 'Ya existe una sección con ese código en el medio'
    }
    return data.message ?? data.error ?? 'Error al guardar la sección'
  }
  return 'Error al guardar la sección'
}

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

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

  const form = useForm<SeccionFormValues>({
    resolver: zodResolver(seccionFormSchema),
    defaultValues: {
      medioId: initialData?.medioId ?? ('' as unknown as number),
      codigo: initialData?.codigo ?? '',
      nombre: initialData?.nombre ?? '',
      tipo: initialData?.tipo ?? ('' as TipoSeccion),
    },
  })

  useEffect(() => {
    if (initialData) {
      form.reset({
        medioId: initialData.medioId,
        codigo: initialData.codigo,
        nombre: initialData.nombre,
        tipo: initialData.tipo,
      })
    }
  }, [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="codigo"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Código</FormLabel>
              <FormControl>
                <Input
                  {...field}
                  type="text"
                  disabled={isPending || isEdit}
                  placeholder="Ej: CLASIF01"
                />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <FormField
          control={form.control}
          name="nombre"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Nombre</FormLabel>
              <FormControl>
                <Input
                  {...field}
                  type="text"
                  disabled={isPending}
                  placeholder="Nombre de la sección"
                />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <FormField
          control={form.control}
          name="tipo"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Tipo</FormLabel>
              <Select
                value={field.value ?? ''}
                onValueChange={(v) => field.onChange(v as TipoSeccion)}
                disabled={isPending}
              >
                <FormControl>
                  <SelectTrigger className="w-full" aria-label="Tipo de sección">
                    <SelectValue placeholder="Seleccioná un tipo" />
                  </SelectTrigger>
                </FormControl>
                <SelectContent>
                  {TIPO_SECCION_OPTIONS.map((o) => (
                    <SelectItem key={o.value} value={o.value}>
                      {o.label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
              <FormMessage />
            </FormItem>
          )}
        />

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