import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import { useMediosList } from '@/features/medios/hooks/useMediosList'

interface PuntosDeVentaFiltersProps {
  onMedioIdChange: (medioId: number | undefined) => void
  onActivoChange: (activo: boolean | undefined) => void
}

export function PuntosDeVentaFilters({
  onMedioIdChange,
  onActivoChange,
}: PuntosDeVentaFiltersProps) {
  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">
      <Select
        defaultValue="__all__"
        onValueChange={(v) => onMedioIdChange(v === '__all__' ? undefined : Number(v))}
      >
        <SelectTrigger className="h-9 w-52" 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) => {
          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>
  )
}
