import { Filter, MessageSquare, FileText, Image, X, ChevronDown } 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 { Badge } from '@/components/ui/badge';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
import { QueueSortControls } from './QueueSortControls';
import { useFilterPanelState } from '@/hooks/useFilterPanelState';
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) => {
  const { isCollapsed, toggle } = useFilterPanelState();

  // Count active filters
  const activeFilterCount = [
    activeEntityFilter !== 'all' ? 1 : 0,
    activeStatusFilter !== 'all' ? 1 : 0,
  ].reduce((sum, val) => sum + val, 0);

  return (
    <div className={`bg-muted/50 rounded-lg transition-all duration-250 ${isMobile ? 'p-3' : 'p-4'}`}>
      <Collapsible open={!isCollapsed} onOpenChange={() => toggle()}>
        {/* Header with collapse trigger on mobile */}
        <div className="flex items-center justify-between mb-2">
          <div className="flex items-center gap-2">
            <h3 className="text-sm font-medium text-muted-foreground">Moderation Queue</h3>
            {isCollapsed && activeFilterCount > 0 && (
              <Badge variant="secondary" className="text-xs">
                {activeFilterCount} active
              </Badge>
            )}
          </div>
          {isMobile && (
            <CollapsibleTrigger asChild>
              <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
                <ChevronDown className={`h-4 w-4 transition-transform duration-250 ${isCollapsed ? '' : 'rotate-180'}`} />
                <span className="sr-only">{isCollapsed ? 'Expand filters' : 'Collapse filters'}</span>
              </Button>
            </CollapsibleTrigger>
          )}
        </div>

        <CollapsibleContent className="space-y-4">
          <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 htmlFor="entity-filter" className={`font-medium ${isMobile ? 'text-xs' : 'text-sm'}`}>Entity Type</Label>
              <Select 
                value={activeEntityFilter} 
                onValueChange={onEntityFilterChange}
              >
                <SelectTrigger 
                  id="entity-filter"
                  className={isMobile ? "h-11 min-h-[44px]" : ""}
                  aria-label="Filter by entity type"
                >
                  <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 htmlFor="status-filter" className={`font-medium ${isMobile ? 'text-xs' : 'text-sm'}`}>Status</Label>
              <Select 
                value={activeStatusFilter} 
                onValueChange={onStatusFilterChange}
              >
                <SelectTrigger 
                  id="status-filter"
                  className={isMobile ? "h-11 min-h-[44px]" : ""}
                  aria-label="Filter by submission status"
                >
                  <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 & Apply Buttons (mobile only) */}
          {isMobile && (
            <div className="flex gap-2 pt-2 border-t border-border">
              {showClearButton && (
                <Button
                  variant="outline"
                  size="default"
                  onClick={onClearFilters}
                  className="flex-1 h-11 min-h-[44px]"
                  aria-label="Clear all filters"
                >
                  <X className="w-4 h-4 mr-2" />
                  Clear All
                </Button>
              )}
              <Button
                variant="default"
                size="default"
                onClick={() => toggle()}
                className="flex-1 h-11 min-h-[44px]"
              >
                Apply
              </Button>
            </div>
          )}
        </CollapsibleContent>
      </Collapsible>

      {/* Clear Filters Button (desktop only) */}
      {!isMobile && showClearButton && (
        <div className="flex items-end pt-2">
          <Button
            variant="outline"
            size="sm"
            onClick={onClearFilters}
            className="flex items-center gap-2"
            aria-label="Clear all filters"
          >
            <X className="w-4 h-4" />
            Clear Filters
          </Button>
        </div>
      )}
    </div>
  );
};
