'use client'

import { useRouter, usePathname, useSearchParams } from 'next/navigation'
import { Input } from '@/components/ui/input'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Search, X } from 'lucide-react'
import { useTransition } from 'react'

interface Group {
  id: string
  name: string
}

interface MachinesFilterProps {
  allTags: string[]
  groups: Group[]
  currentSearch: string
  currentTag: string
  currentGroup: string
  onlineCount: number
  totalCount: number
}

export function MachinesFilter({
  allTags,
  groups,
  currentSearch,
  currentTag,
  currentGroup,
  onlineCount,
  totalCount,
}: MachinesFilterProps) {
  const router = useRouter()
  const pathname = usePathname()
  const searchParams = useSearchParams()
  const [, startTransition] = useTransition()

  const update = (key: string, value: string) => {
    const params = new URLSearchParams(searchParams.toString())
    if (value) params.set(key, value)
    else params.delete(key)
    startTransition(() => router.push(`${pathname}?${params.toString()}`))
  }

  const clearAll = () => {
    startTransition(() => router.push(pathname))
  }

  const hasFilters = currentSearch || currentTag || currentGroup

  return (
    <div className="space-y-3">
      <div className="flex flex-col sm:flex-row gap-2">
        <div className="relative flex-1">
          <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
          <Input
            placeholder="Search machines…"
            defaultValue={currentSearch}
            onChange={e => update('q', e.target.value)}
            className="pl-8"
          />
        </div>

        {groups.length > 0 && (
          <select
            value={currentGroup}
            onChange={e => update('group', e.target.value)}
            className="rounded-md border border-input bg-background px-3 py-2 text-sm"
          >
            <option value="">All groups</option>
            {groups.map(g => (
              <option key={g.id} value={g.id}>{g.name}</option>
            ))}
          </select>
        )}

        <div className="flex items-center gap-2 text-sm text-muted-foreground whitespace-nowrap">
          <span className="text-green-500 font-medium">{onlineCount} online</span>
          <span>/ {totalCount} total</span>
        </div>
      </div>

      {/* Tag filter pills */}
      {allTags.length > 0 && (
        <div className="flex flex-wrap gap-1.5 items-center">
          <span className="text-xs text-muted-foreground">Filter:</span>
          {allTags.map(tag => (
            <Badge
              key={tag}
              variant={currentTag === tag ? 'default' : 'outline'}
              className="cursor-pointer text-xs h-5 py-0"
              onClick={() => update('tag', currentTag === tag ? '' : tag)}
            >
              {tag}
            </Badge>
          ))}
          {hasFilters && (
            <Button variant="ghost" size="sm" className="h-5 px-1.5 text-xs" onClick={clearAll}>
              <X className="h-3 w-3 mr-1" />
              Clear
            </Button>
          )}
        </div>
      )}
    </div>
  )
}