import { Input } from './ui/input';
import { ToggleGroup, ToggleGroupItem } from './ui/toggle-group';
import { Badge } from './ui/badge';
import { Search } from 'lucide-react';
import { __ } from '@/lib/i18n';

export interface StatusOption {
  value: string;
  label: string;
  count?: number;
}

export interface PackageFiltersProps {
  searchQuery: string;
  onSearchChange: (query: string) => void;
  categories: string[];
  categoryFilter: string;
  onCategoryChange: (category: string) => void;
  statusFilter?: string;
  onStatusChange?: (status: string) => void;
  statusOptions?: StatusOption[];
}

const filterPillCls =
  'px-3 py-1.5 h-auto rounded-full text-xs font-medium border border-slate-200 bg-white text-slate-500 hover:border-cyan-400 hover:text-cyan-700 data-[state=on]:bg-cyan-600 data-[state=on]:text-white data-[state=on]:border-cyan-600 transition-colors';

export function PackageFilters({
  searchQuery,
  onSearchChange,
  categories,
  categoryFilter,
  onCategoryChange,
  statusFilter,
  onStatusChange,
  statusOptions,
}: PackageFiltersProps) {
  return (
    <div className="flex flex-col gap-3">
      {/* Search */}
      <div className="relative">
        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" />
        <Input
          placeholder={__('Search packages...')}
          value={searchQuery}
          onChange={(e) => onSearchChange(e.target.value)}
          className="pl-10"
        />
      </div>

      {/* Status chips (optional, only for Pro) */}
      {statusOptions && onStatusChange && (
        <div className="flex flex-wrap items-center gap-2">
          <span className="seq-label text-[11px]">{__('Status')}</span>
          <ToggleGroup
            type="single"
            value={statusFilter ?? 'all'}
            onValueChange={(value) => value && onStatusChange(value)}
            className="flex gap-1.5 flex-wrap"
          >
            {statusOptions.map((option) => (
              <ToggleGroupItem key={option.value} value={option.value} className={filterPillCls}>
                {option.label}
                {option.count != null && (
                  <Badge variant="secondary" className="ml-1.5 px-1.5 py-0 text-[10px] leading-4">
                    {option.count}
                  </Badge>
                )}
              </ToggleGroupItem>
            ))}
          </ToggleGroup>
        </div>
      )}

      {/* Category chips */}
      <div className="flex flex-wrap items-center gap-2">
        <span className="seq-label text-[11px]">{__('Category')}</span>
        <ToggleGroup
          type="single"
          value={categoryFilter}
          onValueChange={(value) => value && onCategoryChange(value)}
          className="flex gap-1.5 flex-wrap"
        >
          <ToggleGroupItem value="all" className={filterPillCls}>
            {__('All')}
          </ToggleGroupItem>
          {categories.map((cat) => (
            <ToggleGroupItem key={cat} value={cat} className={filterPillCls}>
              {cat}
            </ToggleGroupItem>
          ))}
        </ToggleGroup>
      </div>
    </div>
  );
}