"use client";

import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { X } from "lucide-react";

interface CorpusFiltersProps {
  subjectPrefix: string;
  minProjects: number;
  onSubjectPrefixChange: (value: string) => void;
  onMinProjectsChange: (value: number) => void;
  totalCount: number;
  filteredCount: number;
}

export function CorpusFilters({
  subjectPrefix,
  minProjects,
  onSubjectPrefixChange,
  onMinProjectsChange,
  totalCount,
  filteredCount,
}: CorpusFiltersProps) {
  const hasActiveFilter = subjectPrefix !== "" || minProjects > 1;

  const handleClear = () => {
    onSubjectPrefixChange("");
    onMinProjectsChange(1);
  };

  return (
    <div className="flex flex-wrap items-center gap-4">
      <div className="flex-1 min-w-[200px]">
        <Input
          placeholder="Filter by subject prefix (e.g., code://rust)"
          value={subjectPrefix}
          onChange={(e) => onSubjectPrefixChange(e.target.value)}
          className="max-w-md"
        />
      </div>

      <div className="flex items-center gap-2">
        <label htmlFor="min-projects" className="text-sm text-muted-foreground whitespace-nowrap">
          Min projects:
        </label>
        <Input
          id="min-projects"
          type="number"
          min={1}
          max={100}
          value={minProjects}
          onChange={(e) => onMinProjectsChange(Math.max(1, parseInt(e.target.value) || 1))}
          className="w-20"
        />
      </div>

      {hasActiveFilter && (
        <Button variant="ghost" size="sm" onClick={handleClear}>
          <X className="h-4 w-4 mr-1" />
          Clear
        </Button>
      )}

      <div className="text-sm text-muted-foreground ml-auto">
        {filteredCount === totalCount
          ? `${totalCount} patterns`
          : `${filteredCount} of ${totalCount} patterns`}
      </div>
    </div>
  );
}
