veza/apps/web/src/features/tracks/components/TrackListSelectionActions.tsx

/**
 * Composant TrackListSelectionActions
 * Barre d'actions pour les pistes sélectionnées
 */

import { Play, Trash2, Heart, Download, MoreVertical, X } from 'lucide-react';
import { cn } from '@/lib/utils';

export interface TrackListSelectionActionsProps {
  selectedCount: number;
  onPlay?: (trackIds: string[]) => void;
  onDelete?: (trackIds: string[]) => void;
  onLike?: (trackIds: string[]) => void;
  onDownload?: (trackIds: string[]) => void;
  onMore?: (trackIds: string[]) => void;
  onClearSelection?: () => void;
  selectedTrackIds: string[];
  className?: string;
}

export function TrackListSelectionActions({
  selectedCount,
  onPlay,
  onDelete,
  onLike,
  onDownload,
  onMore,
  onClearSelection,
  selectedTrackIds,
  className,
}: TrackListSelectionActionsProps) {
  if (selectedCount === 0) {
    return null;
  }

  const handlePlay = () => {
    onPlay?.(selectedTrackIds);
  };

  const handleDelete = () => {
    onDelete?.(selectedTrackIds);
  };

  const handleLike = () => {
    onLike?.(selectedTrackIds);
  };

  const handleDownload = () => {
    onDownload?.(selectedTrackIds);
  };

  const handleMore = () => {
    onMore?.(selectedTrackIds);
  };

  return (
    <div
      className={cn(
        'fixed bottom-0 left-0 right-0 z-50',
        'bg-kodo-cyan dark:bg-kodo-cyan text-white',
        'px-4 py-4 shadow-lg',
        'flex items-center justify-between gap-4',
        'transition-transform duration-300 ease-in-out',
        className,
      )}
      role="toolbar"
      aria-label={`Actions pour ${selectedCount} piste${selectedCount > 1 ? 's' : ''} sélectionnée${selectedCount > 1 ? 's' : ''}`}
    >
      <div className="flex items-center gap-4">
        <span className="text-sm font-medium">
          {selectedCount} piste{selectedCount > 1 ? 's' : ''} sélectionnée
          {selectedCount > 1 ? 's' : ''}
        </span>

        <div className="flex items-center gap-2">
          {onPlay && (
            <button
              type="button"
              onClick={handlePlay}
              className={cn(
                'p-2 rounded-md transition-colors',
                'hover:bg-white/5 dark:hover:bg-white/5',
                'focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-blue-600',
              )}
              aria-label={`Lire ${selectedCount} piste${selectedCount > 1 ? 's' : ''}`}
            >
              <Play className="h-5 w-5" aria-hidden="true" />
              <span className="sr-only">Lire</span>
            </button>
          )}

          {onLike && (
            <button
              type="button"
              onClick={handleLike}
              className={cn(
                'p-2 rounded-md transition-colors',
                'hover:bg-white/5 dark:hover:bg-white/5',
                'focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-blue-600',
              )}
              aria-label={`Ajouter ${selectedCount} piste${selectedCount > 1 ? 's' : ''} aux favoris`}
            >
              <Heart className="h-5 w-5" aria-hidden="true" />
              <span className="sr-only">Ajouter aux favoris</span>
            </button>
          )}

          {onDownload && (
            <button
              type="button"
              onClick={handleDownload}
              className={cn(
                'p-2 rounded-md transition-colors',
                'hover:bg-white/5 dark:hover:bg-white/5',
                'focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-blue-600',
              )}
              aria-label={`Télécharger ${selectedCount} piste${selectedCount > 1 ? 's' : ''}`}
            >
              <Download className="h-5 w-5" aria-hidden="true" />
              <span className="sr-only">Télécharger</span>
            </button>
          )}

          {onDelete && (
            <button
              type="button"
              onClick={handleDelete}
              className={cn(
                'p-2 rounded-md transition-colors',
                'hover:bg-kodo-red dark:hover:bg-kodo-red',
                'focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-blue-600',
              )}
              aria-label={`Supprimer ${selectedCount} piste${selectedCount > 1 ? 's' : ''}`}
            >
              <Trash2 className="h-5 w-5" aria-hidden="true" />
              <span className="sr-only">Supprimer</span>
            </button>
          )}

          {onMore && (
            <button
              type="button"
              onClick={handleMore}
              className={cn(
                'p-2 rounded-md transition-colors',
                'hover:bg-white/5 dark:hover:bg-white/5',
                'focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-blue-600',
              )}
              aria-label={`Plus d'options pour ${selectedCount} piste${selectedCount > 1 ? 's' : ''}`}
            >
              <MoreVertical className="h-5 w-5" aria-hidden="true" />
              <span className="sr-only">Plus d'options</span>
            </button>
          )}
        </div>
      </div>

      {onClearSelection && (
        <button
          type="button"
          onClick={onClearSelection}
          className={cn(
            'p-2 rounded-md transition-colors',
            'hover:bg-white/5 dark:hover:bg-white/5',
            'focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-blue-600',
          )}
          aria-label="Désélectionner toutes les pistes"
        >
          <X className="h-5 w-5" aria-hidden="true" />
          <span className="sr-only">Fermer</span>
        </button>
      )}
    </div>
  );
}

export default TrackListSelectionActions;