"use client";

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

interface CorpusFiltersProps {
  sources: string[];
  filterCategory: string;
  availableCategories: string[];
  onSourcesChange: (value: string[]) => void;
  onFilterCategoryChange: (value: string) => void;
  onSubmit: () => void;
  onClear: () => void;
  totalCount: number;
  filteredCount: number;
  isLoading: boolean;
  hasActiveFilter: boolean;
}

const AVAILABLE_SOURCES = [
  { id: "rfc", label: "RFC" },
  { id: "owasp", label: "OWASP" },
  { id: "community", label: "Community" },
  { id: "vendor", label: "Vendor" },
];

export function CorpusFilters({
  sources,
  filterCategory,
  availableCategories,
  onSourcesChange,
  onFilterCategoryChange,
  onSubmit,
  onClear,
  totalCount,
  filteredCount,
  isLoading,
  hasActiveFilter,
}: CorpusFiltersProps) {
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onSubmit();
  };

  const handleSourceToggle = (sourceId: string) => {
    if (sources.includes(sourceId)) {
      onSourcesChange(sources.filter((s) => s !== sourceId));
    } else {
      onSourcesChange([...sources, sourceId]);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div className="flex flex-wrap items-end gap-4">
        {/* Sources Filter */}
        <div className="flex flex-col gap-2">
          <label className="text-sm font-medium">Sources</label>
          <div className="flex items-center gap-4">
            {AVAILABLE_SOURCES.map((source) => (
              <div key={source.id} className="flex items-center gap-2">
                <Checkbox
                  id={`source-${source.id}`}
                  checked={sources.includes(source.id)}
                  onCheckedChange={() => handleSourceToggle(source.id)}
                  disabled={isLoading}
                />
                <label
                  htmlFor={`source-${source.id}`}
                  className="text-sm font-medium cursor-pointer"
                >
                  {source.label}
                </label>
              </div>
            ))}
          </div>
        </div>

        {/* Category Filter */}
        <div className="flex flex-col gap-2">
          <label htmlFor="category-filter" className="text-sm font-medium">
            Category
          </label>
          <select
            id="category-filter"
            value={filterCategory}
            onChange={(e) => onFilterCategoryChange(e.target.value)}
            className="h-10 px-3 py-2 text-sm rounded-md border border-input bg-background"
            disabled={isLoading}
          >
            <option value="all">All Categories</option>
            {availableCategories.map((cat) => (
              <option key={cat} value={cat}>
                {cat}
              </option>
            ))}
          </select>
        </div>

        {/* Submit Button */}
        <Button type="submit" disabled={isLoading}>
          <Search className="h-4 w-4 mr-2" />
          {isLoading ? "Loading..." : "Apply"}
        </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} items`
            : `${filteredCount} of ${totalCount} items`}
        </div>
      </div>
    </form>
  );
}
