'use client'

import { Button } from '@/components/ui/button'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import { MultiFilterPills } from '@/components/shared/backlog-filter-popover'
import { debugProps } from '@/lib/debug'
import type { IdeaStatusApi } from '@/lib/idea-status'

interface IdeasFilterPopoverProps {
  open: boolean
  onOpenChange: (o: boolean) => void
  statusOptions: Array<{ value: IdeaStatusApi; label: string }>
  selected: Set<IdeaStatusApi>
  onToggle: (v: IdeaStatusApi) => void
  onClear: () => void
  activeFilterCount: number
}

export function IdeasFilterPopover({
  open,
  onOpenChange,
  statusOptions,
  selected,
  onToggle,
  onClear,
  activeFilterCount,
}: IdeasFilterPopoverProps) {
  return (
    <Popover open={open} onOpenChange={onOpenChange}>
      <PopoverTrigger
        render={
          <Button
            variant="outline"
            size="sm"
            className="h-7 text-xs"
            {...debugProps('ideas-filter-popover__trigger')}
          >
            {`Filters${activeFilterCount > 0 ? ` (${activeFilterCount})` : ''}`}
          </Button>
        }
      />
      <PopoverContent
        align="end"
        className="w-72 space-y-4"
        {...debugProps('ideas-filter-popover', 'IdeasFilterPopover', 'components/ideas/ideas-filter-popover.tsx')}
      >
        <MultiFilterPills
          label="Status"
          options={statusOptions}
          selected={selected}
          onToggle={onToggle}
          onClear={onClear}
        />
        <div className="flex justify-end pt-1 border-t border-border">
          <Button
            type="button"
            variant="ghost"
            size="sm"
            className="h-7 text-xs"
            disabled={activeFilterCount === 0}
            onClick={onClear}
          >
            Wis filters
          </Button>
        </div>
      </PopoverContent>
    </Popover>
  )
}