/**
 * Data Completeness Filters Component
 * 
 * Filter controls for entity type, score range, and missing field categories
 */

import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Slider } from '@/components/ui/slider';
import type { CompletenessFilters, EntityType, MissingFieldCategory } from '@/types/data-completeness';

interface CompletenessFiltersProps {
  filters: CompletenessFilters;
  onFiltersChange: (filters: CompletenessFilters) => void;
}

export function CompletenessFilters({ filters, onFiltersChange }: CompletenessFiltersProps) {
  return (
    <div className="space-y-4">
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        <div className="space-y-2">
          <Label htmlFor="entity-type">Entity Type</Label>
          <Select
            value={filters.entityType || 'all'}
            onValueChange={(value) =>
              onFiltersChange({
                ...filters,
                entityType: value === 'all' ? undefined : (value as EntityType),
              })
            }
          >
            <SelectTrigger id="entity-type">
              <SelectValue placeholder="All entities" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Entities</SelectItem>
              <SelectItem value="park">Parks</SelectItem>
              <SelectItem value="ride">Rides</SelectItem>
              <SelectItem value="company">Companies</SelectItem>
              <SelectItem value="ride_model">Ride Models</SelectItem>
            </SelectContent>
          </Select>
        </div>

        <div className="space-y-2">
          <Label htmlFor="missing-category">Missing Category</Label>
          <Select
            value={filters.missingCategory || 'all'}
            onValueChange={(value) =>
              onFiltersChange({
                ...filters,
                missingCategory: value === 'all' ? undefined : (value as MissingFieldCategory),
              })
            }
          >
            <SelectTrigger id="missing-category">
              <SelectValue placeholder="All categories" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Categories</SelectItem>
              <SelectItem value="critical">Missing Critical</SelectItem>
              <SelectItem value="important">Missing Important</SelectItem>
              <SelectItem value="valuable">Missing Valuable</SelectItem>
              <SelectItem value="supplementary">Missing Supplementary</SelectItem>
            </SelectContent>
          </Select>
        </div>

        <div className="space-y-2">
          <Label htmlFor="search">Search</Label>
          <Input
            id="search"
            placeholder="Search entities..."
            value={filters.searchQuery || ''}
            onChange={(e) =>
              onFiltersChange({
                ...filters,
                searchQuery: e.target.value || undefined,
              })
            }
          />
        </div>
      </div>

      <div className="space-y-2">
        <div className="flex items-center justify-between">
          <Label>Completeness Score Range</Label>
          <span className="text-sm text-muted-foreground">
            {filters.minScore || 0}% - {filters.maxScore || 100}%
          </span>
        </div>
        <Slider
          min={0}
          max={100}
          step={5}
          value={[filters.minScore || 0, filters.maxScore || 100]}
          onValueChange={([min, max]) =>
            onFiltersChange({
              ...filters,
              minScore: min === 0 ? undefined : min,
              maxScore: max === 100 ? undefined : max,
            })
          }
          className="w-full"
        />
      </div>
    </div>
  );
}
