import { Filter, MessageSquare, FileText, Image, X } from 'lucide-react';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Button } from '@/components/ui/button';
import { QueueSortControls } from './QueueSortControls';
import type { EntityFilter, StatusFilter, SortConfig } from '@/types/moderation';

interface QueueFiltersProps {
  activeEntityFilter: EntityFilter;
  activeStatusFilter: StatusFilter;
  sortConfig: SortConfig;
  isMobile: boolean;
  isLoading?: boolean;
  onEntityFilterChange: (filter: EntityFilter) => void;
  onStatusFilterChange: (filter: StatusFilter) => void;
  onSortChange: (config: SortConfig) => void;
  onClearFilters: () => void;
  showClearButton: boolean;
}

const getEntityFilterIcon = (filter: EntityFilter) => {
  switch (filter) {
    case 'reviews': return <MessageSquare className="w-4 h-4" />;
    case 'submissions': return <FileText className="w-4 h-4" />;
    case 'photos': return <Image className="w-4 h-4" />;
    default: return <Filter className="w-4 h-4" />;
  }
};

export const QueueFilters = ({ 
  activeEntityFilter,
  activeStatusFilter,
  sortConfig,
  isMobile,
  isLoading = false,
  onEntityFilterChange,
  onStatusFilterChange,
  onSortChange,
  onClearFilters,
  showClearButton
}: QueueFiltersProps) => {
  return (
    <div className={`flex flex-col gap-4 bg-muted/50 rounded-lg ${isMobile ? 'p-3' : 'p-4 sm:flex-row'}`}>
      <div className="flex items-center justify-between w-full mb-2 pb-2 border-b border-border">
        <h3 className="text-sm font-medium text-muted-foreground">Moderation Queue</h3>
      </div>
      
      <div className={`flex gap-4 flex-1 ${isMobile ? 'flex-col' : 'flex-col sm:flex-row'}`}>
        {/* Entity Type Filter */}
        <div className={`space-y-2 ${isMobile ? 'w-full' : 'min-w-[140px]'}`}>
          <Label className={`font-medium ${isMobile ? 'text-xs' : 'text-sm'}`}>Entity Type</Label>
          <Select 
            value={activeEntityFilter} 
            onValueChange={onEntityFilterChange}
          >
            <SelectTrigger className={isMobile ? "h-10" : ""}>
              <SelectValue>
                <div className="flex items-center gap-2">
                  {getEntityFilterIcon(activeEntityFilter)}
                  <span className="capitalize">{activeEntityFilter === 'all' ? 'All Items' : activeEntityFilter}</span>
                </div>
              </SelectValue>
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">
                <div className="flex items-center gap-2">
                  <Filter className="w-4 h-4" />
                  All Items
                </div>
              </SelectItem>
              <SelectItem value="reviews">
                <div className="flex items-center gap-2">
                  <MessageSquare className="w-4 h-4" />
                  Reviews
                </div>
              </SelectItem>
              <SelectItem value="submissions">
                <div className="flex items-center gap-2">
                  <FileText className="w-4 h-4" />
                  Submissions
                </div>
              </SelectItem>
              <SelectItem value="photos">
                <div className="flex items-center gap-2">
                  <Image className="w-4 h-4" />
                  Photos
                </div>
              </SelectItem>
            </SelectContent>
          </Select>
        </div>

        {/* Status Filter */}
        <div className={`space-y-2 ${isMobile ? 'w-full' : 'min-w-[120px]'}`}>
          <Label className={`font-medium ${isMobile ? 'text-xs' : 'text-sm'}`}>Status</Label>
          <Select 
            value={activeStatusFilter} 
            onValueChange={onStatusFilterChange}
          >
            <SelectTrigger className={isMobile ? "h-10" : ""}>
              <SelectValue>
                <span className="capitalize">{activeStatusFilter === 'all' ? 'All Status' : activeStatusFilter}</span>
              </SelectValue>
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Status</SelectItem>
              <SelectItem value="pending">Pending</SelectItem>
              <SelectItem value="partially_approved">Partially Approved</SelectItem>
              {activeEntityFilter !== 'submissions' && activeEntityFilter !== 'photos' && (
                <SelectItem value="flagged">Flagged</SelectItem>
              )}
              <SelectItem value="approved">Approved</SelectItem>
              <SelectItem value="rejected">Rejected</SelectItem>
            </SelectContent>
          </Select>
        </div>

        {/* Sort Controls */}
        <QueueSortControls
          sortConfig={sortConfig}
          onSortChange={onSortChange}
          isMobile={isMobile}
          isLoading={isLoading}
        />
      </div>

      {/* Clear Filters Button */}
      {showClearButton && (
        <div className={isMobile ? "" : "flex items-end"}>
          <Button
            variant="outline"
            size={isMobile ? "default" : "sm"}
            onClick={onClearFilters}
            className={`flex items-center gap-2 ${isMobile ? 'w-full h-10' : ''}`}
          >
            <X className="w-4 h-4" />
            Clear Filters
          </Button>
        </div>
      )}
    </div>
  );
};
