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';

interface SortControlsProps<T extends string = string> {
  /** Current sort field */
  sortField: T;
  
  /** Current sort direction */
  sortDirection: 'asc' | 'desc';
  
  /** Available sort fields with labels */
  sortFields: Record<T, string>;
  
  /** Handler for field change */
  onFieldChange: (field: T) => void;
  
  /** Handler for direction toggle */
  onDirectionToggle: () => void;
  
  /** Whether component is in mobile mode */
  isMobile?: boolean;
  
  /** Whether data is loading */
  isLoading?: boolean;
  
  /** Optional label for the sort selector */
  label?: string;
}

/**
 * Generic reusable sort controls component
 * 
 * Provides consistent sorting UI across the application:
 * - Field selector with custom labels
 * - Direction toggle (asc/desc)
 * - Mobile-responsive layout
 * - Loading states
 * 
 * @example
 * ```tsx
 * <SortControls
 *   sortField={sortConfig.field}
 *   sortDirection={sortConfig.direction}
 *   sortFields={{
 *     created_at: 'Date Created',
 *     name: 'Name',
 *     status: 'Status'
 *   }}
 *   onFieldChange={(field) => setSortConfig({ ...sortConfig, field })}
 *   onDirectionToggle={() => setSortConfig({
 *     ...sortConfig,
 *     direction: sortConfig.direction === 'asc' ? 'desc' : 'asc'
 *   })}
 *   isMobile={isMobile}
 * />
 * ```
 */
export function SortControls<T extends string = string>({
  sortField,
  sortDirection,
  sortFields,
  onFieldChange,
  onDirectionToggle,
  isMobile = false,
  isLoading = false,
  label = 'Sort By',
}: SortControlsProps<T>) {
  const DirectionIcon = sortDirection === '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`}>
          {label}
          {isLoading && <Loader2 className="w-3 h-3 animate-spin text-primary" />}
        </Label>
        <Select 
          value={sortField} 
          onValueChange={onFieldChange}
          disabled={isLoading}
        >
          <SelectTrigger className={isMobile ? "h-10" : ""} disabled={isLoading}>
            <SelectValue>
              {sortFields[sortField]}
            </SelectValue>
          </SelectTrigger>
          <SelectContent>
            {Object.entries(sortFields).map(([field, label]) => (
              <SelectItem key={field} value={field}>
                {label as string}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>

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