import { useEffect, useState } from 'react'
import { Input } from '@/components/ui/input'
import { useDebouncedValue } from '@/hooks/useDebouncedValue'
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 { TipoSeccion } from '../types'

interface SeccionesFiltersProps {
  onMedioIdChange: (medioId: number | undefined) => void
  onTipoChange: (tipo: TipoSeccion | undefined) => void
  onActivoChange: (activo: boolean | undefined) => void
  onSearchChange: (q: string) => void
}

export function SeccionesFilters({
  onMedioIdChange,
  onTipoChange,
  onActivoChange,
  onSearchChange,
}: SeccionesFiltersProps) {
  const [searchRaw, setSearchRaw] = useState('')
  const debouncedSearch = useDebouncedValue(searchRaw, 300)

  useEffect(() => {
    onSearchChange(debouncedSearch)
  }, [debouncedSearch, onSearchChange])

  // Load medios for the selector
  const { data: mediosData } = useMediosList({ page: 1, pageSize: 200, activo: true })
  const medios = mediosData?.items ?? []

  return (
    <div className="flex flex-wrap gap-3 items-center mb-4">
      <Input
        type="text"
        placeholder="Buscar por código, nombre..."
        value={searchRaw}
        onChange={(e) => setSearchRaw(e.target.value)}
        className="max-w-xs"
        aria-label="Buscar secciones"
      />

      <Select
        defaultValue="__all__"
        onValueChange={(v) => onMedioIdChange(v === '__all__' ? undefined : Number(v))}
      >
        <SelectTrigger className="h-9 w-44" aria-label="Medio">
          <SelectValue placeholder="Todos los medios" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="__all__">Todos los medios</SelectItem>
          {medios.map((m) => (
            <SelectItem key={m.id} value={String(m.id)}>
              {m.nombre}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>

      <Select
        defaultValue="__all__"
        onValueChange={(v) => onTipoChange(v === '__all__' ? undefined : (v as TipoSeccion))}
      >
        <SelectTrigger className="h-9 w-44" aria-label="Tipo de sección">
          <SelectValue placeholder="Todos los tipos" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="__all__">Todos los tipos</SelectItem>
          {TIPO_SECCION_OPTIONS.map((o) => (
            <SelectItem key={o.value} value={o.value}>
              {o.label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>

      <Select
        defaultValue="__all__"
        onValueChange={(v) => {
          if (v === '__all__') onActivoChange(undefined)
          else onActivoChange(v === 'true')
        }}
      >
        <SelectTrigger className="h-9 w-32" aria-label="Estado">
          <SelectValue placeholder="Todos" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="__all__">Todos</SelectItem>
          <SelectItem value="true">Activos</SelectItem>
          <SelectItem value="false">Inactivos</SelectItem>
        </SelectContent>
      </Select>
    </div>
  )
}
