"use client";

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

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

export function CorpusFilters({
  subjectPrefix,
  minProjects,
  onSubjectPrefixChange,
  onMinProjectsChange,
  onSubmit,
  onClear,
  totalCount,
  filteredCount,
  isLoading,
  hasActiveFilter,
}: CorpusFiltersProps) {
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onSubmit();
  };

  return (
    <form onSubmit={handleSubmit}>
      <div className="flex flex-wrap items-end gap-4">
        {/* Subject Prefix Filter */}
        <div className="flex-1 min-w-[200px]">
          <label htmlFor="subject-prefix" className="text-sm font-medium mb-2 block">
            Subject Prefix
          </label>
          <Input
            id="subject-prefix"
            placeholder="e.g., code://rust"
            value={subjectPrefix}
            onChange={(e) => onSubjectPrefixChange(e.target.value)}
            className="max-w-md"
            disabled={isLoading}
          />
        </div>

        {/* Min Projects Filter */}
        <div className="flex flex-col gap-2">
          <label htmlFor="min-projects" className="text-sm font-medium">
            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-24"
            disabled={isLoading}
          />
        </div>

        {/* Submit Button */}
        <Button type="submit" disabled={isLoading}>
          <Search className="h-4 w-4 mr-2" />
          {isLoading ? "Searching..." : "Search"}
        </Button>

        {/* Clear Button */}
        {hasActiveFilter && (
          <Button
            type="button"
            variant="ghost"
            onClick={onClear}
            disabled={isLoading}
          >
            <X className="h-4 w-4 mr-1" />
            Clear
          </Button>
        )}

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