import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Filter, Search, SortAsc, SortDesc, X } from 'lucide-react';

interface DealerRequestsFiltersProps {
  searchTerm: string;
  statusFilter?: string;
  priorityFilter?: string;
  templateTypeFilter?: string;
  sortBy: 'created' | 'due' | 'priority' | 'sla';
  sortOrder: 'asc' | 'desc';
  onSearchChange: (value: string) => void;
  onStatusFilterChange?: (value: string) => void;
  onPriorityFilterChange?: (value: string) => void;
  onTemplateTypeFilterChange?: (value: string) => void;
  onSortByChange: (value: 'created' | 'due' | 'priority' | 'sla') => void;
  onSortOrderChange: (value: 'asc' | 'desc') => void;
  onClearFilters: () => void;
  activeFiltersCount: number;
}

/**
 * Dealer Requests Filters Component
 * 
 * Simplified filters for dealer users.
 * Only includes: Search and Sort filters (no status, priority, or template type).
 */
export function DealerRequestsFilters({
  searchTerm,
  sortBy,
  sortOrder,
  onSearchChange,
  onSortByChange,
  onSortOrderChange,
  onClearFilters,
  activeFiltersCount,
  ...rest // Accept but ignore other props for interface compatibility
}: DealerRequestsFiltersProps) {
  void rest; // Explicitly mark as unused
  return (
    <Card className="shadow-lg border-0">
      <CardHeader className="pb-3 sm:pb-4 px-3 sm:px-6">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2 sm:gap-3">
            <div className="p-1.5 sm:p-2 bg-blue-100 rounded-lg">
              <Filter className="h-4 w-4 sm:h-5 sm:w-5 text-blue-600" />
            </div>
            <div>
              <CardTitle className="text-base sm:text-lg">Filters & Search</CardTitle>
              <CardDescription className="text-xs sm:text-sm">
                {activeFiltersCount > 0 && (
                  <span className="text-blue-600 font-medium">
                    {activeFiltersCount} filter{activeFiltersCount > 1 ? 's' : ''} active
                  </span>
                )}
              </CardDescription>
            </div>
          </div>
          {activeFiltersCount > 0 && (
            <Button
              variant="ghost"
              size="sm"
              onClick={onClearFilters}
              className="text-red-600 hover:bg-red-50 gap-1 h-8 sm:h-9 px-2 sm:px-3"
            >
              <X className="w-3 h-3 sm:w-3.5 sm:h-3.5" />
              <span className="text-xs sm:text-sm">Clear</span>
            </Button>
          )}
        </div>
      </CardHeader>
      <CardContent className="space-y-3 sm:space-y-4 px-3 sm:px-6">
        {/* Dealer-specific filters - Only Search and Sort */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-3 sm:gap-4">
          <div className="relative">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-3.5 h-3.5 sm:w-4 sm:h-4" />
            <Input
              placeholder="Search requests, IDs..."
              value={searchTerm}
              onChange={(e) => onSearchChange(e.target.value)}
              className="pl-9 sm:pl-10 h-9 sm:h-10 md:h-11 text-sm sm:text-base bg-gray-50 border-gray-200 focus:bg-white focus:border-blue-400 focus:ring-1 focus:ring-blue-200 transition-colors"
            />
          </div>
          
          <div className="flex gap-2">
            <Select value={sortBy} onValueChange={(value: any) => onSortByChange(value)}>
              <SelectTrigger className="h-9 sm:h-10 md:h-11 text-sm sm:text-base bg-gray-50 border-gray-200 focus:bg-white focus:border-blue-400 focus:ring-1 focus:ring-blue-200">
                <SelectValue placeholder="Sort by" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="due">Due Date</SelectItem>
                <SelectItem value="created">Date Created</SelectItem>
                <SelectItem value="priority">Priority</SelectItem>
                <SelectItem value="sla">SLA Progress</SelectItem>
              </SelectContent>
            </Select>
            
            <Button
              variant="outline"
              size="sm"
              onClick={() => onSortOrderChange(sortOrder === 'asc' ? 'desc' : 'asc')}
              className="px-2 sm:px-3 h-9 sm:h-10 md:h-11"
            >
              {sortOrder === 'asc' ? <SortAsc className="w-3.5 h-3.5 sm:w-4 sm:h-4" /> : <SortDesc className="w-3.5 h-3.5 sm:w-4 sm:h-4" />}
            </Button>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}

