import { ArrowUp, ArrowDown, Loader2 } 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 type { SortConfig, SortField } from '@/types/moderation';

interface QueueSortControlsProps {
  sortConfig: SortConfig;
  onSortChange: (config: SortConfig) => void;
  isMobile: boolean;
  isLoading?: boolean;
}

const SORT_FIELD_LABELS: Record<SortField, string> = {
  created_at: 'Date Submitted',
  submission_type: 'Type',
  status: 'Status'
};

export const QueueSortControls = ({
  sortConfig,
  onSortChange,
  isMobile,
  isLoading = false
}: QueueSortControlsProps) => {
  const handleFieldChange = (value: string) => {
    const validFields: SortField[] = ['created_at', 'submission_type', 'status'];
    
    if (!validFields.includes(value as SortField)) {
      return;
    }
    
    const field = value as SortField;
    onSortChange({ ...sortConfig, field });
  };

  const handleDirectionToggle = () => {
    const newDirection = sortConfig.direction === 'asc' ? 'desc' : 'asc';
    onSortChange({
      ...sortConfig,
      direction: newDirection
    });
  };

  const DirectionIcon = sortConfig.direction === 'asc' ? ArrowUp : ArrowDown;

  return (
    <div className={`flex gap-2 ${isMobile ? 'flex-col' : 'items-end'}`}>
      <div className={`space-y-2 ${isMobile ? 'w-full' : 'min-w-[160px]'}`}>
        <Label className={`font-medium ${isMobile ? 'text-xs' : 'text-sm'} flex items-center gap-2`}>
          Sort By
          {isLoading && <Loader2 className="w-3 h-3 animate-spin text-primary" />}
        </Label>
        <Select 
          value={sortConfig.field} 
          onValueChange={handleFieldChange}
          disabled={isLoading}
        >
          <SelectTrigger className={isMobile ? "h-10" : ""} disabled={isLoading}>
            <SelectValue>
              {SORT_FIELD_LABELS[sortConfig.field]}
            </SelectValue>
          </SelectTrigger>
          <SelectContent>
            {Object.entries(SORT_FIELD_LABELS).map(([field, label]) => (
              <SelectItem key={field} value={field}>
                {label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>

      <div className={isMobile ? "" : "pb-[2px]"}>
        <Button
          variant="outline"
          size={isMobile ? "default" : "icon"}
          onClick={handleDirectionToggle}
          disabled={isLoading}
          className={`flex items-center gap-2 ${isMobile ? 'w-full h-10' : 'h-10 w-10'}`}
          title={sortConfig.direction === 'asc' ? 'Ascending' : 'Descending'}
        >
          {isLoading ? (
            <Loader2 className="w-4 h-4 animate-spin" />
          ) : (
            <DirectionIcon className="w-4 h-4" />
          )}
          {isMobile && (
            <span className="capitalize">
              {isLoading ? 'Loading...' : `${sortConfig.direction}ending`}
            </span>
          )}
        </Button>
      </div>
    </div>
  );
};