
"use client"

import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import {
    DropdownMenu,
    DropdownMenuCheckboxItem,
    DropdownMenuContent,
    DropdownMenuLabel,
    DropdownMenuSeparator,
    DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { VERTICALS } from "@/config/verticals"
import { Filter } from "lucide-react"

interface BandFilterProps {
    selected: string[]
    onChange: (selected: string[]) => void
}

export function BandFilter({ selected, onChange }: BandFilterProps) {
    const toggleVertical = (slug: string) => {
        if (selected.includes(slug)) {
            onChange(selected.filter(s => s !== slug))
        } else {
            onChange([...selected, slug])
        }
    }

    const clearFilters = () => {
        onChange([])
    }

    return (
        <div className="flex items-center gap-2">
            <DropdownMenu>
                <DropdownMenuTrigger asChild>
                    <Button variant="outline" size="sm" className="h-8 gap-2">
                        <Filter className="h-3.5 w-3.5" />
                        Bands
                        {selected.length > 0 && (
                            <span className="ml-1 rounded-full bg-primary/10 px-1.5 py-0.5 text-xs font-semibold text-primary">
                                {selected.length}
                            </span>
                        )}
                    </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end" className="w-56">
                    <DropdownMenuLabel>Filter by Band</DropdownMenuLabel>
                    <DropdownMenuSeparator />
                    {VERTICALS.map((vertical) => (
                        <DropdownMenuCheckboxItem
                            key={vertical.slug}
                            checked={selected.includes(vertical.slug)}
                            onCheckedChange={() => toggleVertical(vertical.slug)}
                        >
                            {vertical.name}
                        </DropdownMenuCheckboxItem>
                    ))}
                    {selected.length > 0 && (
                        <>
                            <DropdownMenuSeparator />
                            <DropdownMenuCheckboxItem
                                checked={false}
                                onCheckedChange={clearFilters}
                                className="text-red-500 focus:text-red-500"
                            >
                                Clear Filters
                            </DropdownMenuCheckboxItem>
                        </>
                    )}
                </DropdownMenuContent>
            </DropdownMenu>

            {/* Inline filters for desktop - optionally could show these next to dropdown or instead of on large screens */}
            <div className="hidden lg:flex items-center gap-2 ml-2">
                {selected.length > 0 && (
                    <Button
                        variant="ghost"
                        size="sm"
                        onClick={clearFilters}
                        className="h-8 text-muted-foreground hover:text-foreground"
                    >
                        Reset
                    </Button>
                )}
            </div>
        </div>
    )
}
