/**
 * Composant TrackListEmpty
 * Affiche un état vide quand il n'y a pas de pistes
 * Gère différents états : aucun track, aucun résultat de filtres, erreur
 */

import React from 'react';
import { Music, Search, Filter, AlertCircle, RefreshCw } from 'lucide-react';
import { cn } from '@/lib/utils';

export type EmptyStateType = 'no-tracks' | 'no-results' | 'error';

export interface TrackListEmptyProps {
  type?: EmptyStateType;
  message?: string;
  description?: string;
  icon?: 'music' | 'search' | 'filter' | 'error';
  className?: string;
  action?: React.ReactNode;
  onRetry?: () => void;
  hasFilters?: boolean;
  hasSearch?: boolean;
}

export function TrackListEmpty({
  type,
  message,
  description,
  icon,
  className,
  action,
  onRetry,
  hasFilters = false,
  hasSearch = false,
}: TrackListEmptyProps) {
  // Déterminer le type automatiquement si non fourni
  const determinedType: EmptyStateType =
    type || (hasFilters || hasSearch ? 'no-results' : 'no-tracks');

  // Déterminer l'icône automatiquement si non fournie
  const determinedIcon =
    icon ||
    (determinedType === 'error'
      ? 'error'
      : determinedType === 'no-results'
        ? 'search'
        : 'music');

  const icons = {
    music: Music,
    search: Search,
    filter: Filter,
    error: AlertCircle,
  };

  const Icon = icons[determinedIcon];

  // Messages et descriptions par défaut selon le type
  const defaultMessages: Record<EmptyStateType, string> = {
    'no-tracks': 'Aucune piste disponible',
    'no-results': 'Aucun résultat trouvé',
    error: 'Erreur lors du chargement',
  };

  const defaultDescriptions: Record<EmptyStateType, string> = {
    'no-tracks': 'Commencez par ajouter des pistes à votre bibliothèque',
    'no-results':
      hasFilters && hasSearch
        ? 'Essayez de modifier vos critères de recherche ou vos filtres'
        : hasFilters
          ? 'Essayez de modifier vos filtres'
          : hasSearch
            ? 'Essayez de modifier vos critères de recherche'
            : 'Aucune piste ne correspond à vos critères',
    error:
      'Une erreur est survenue lors du chargement des pistes. Veuillez réessayer.',
  };

  const displayMessage = message || defaultMessages[determinedType];
  const displayDescription = description || defaultDescriptions[determinedType];

  // Couleur de l'icône selon le type
  const iconColorClass =
    determinedType === 'error'
      ? 'text-red-500 dark:text-red-400'
      : 'text-gray-400 dark:text-gray-500';

  return (
    <div
      className={cn(
        'flex flex-col items-center justify-center py-12 px-4 text-center',
        className,
      )}
      role={determinedType === 'error' ? 'alert' : 'status'}
      aria-live={determinedType === 'error' ? 'assertive' : 'polite'}
    >
      <div
        className={cn('mb-4', determinedType === 'error' && 'animate-pulse')}
      >
        <Icon className={cn('h-16 w-16', iconColorClass)} aria-hidden="true" />
      </div>
      <h3
        className={cn(
          'text-lg font-semibold mb-2',
          determinedType === 'error'
            ? 'text-red-900 dark:text-red-100'
            : 'text-gray-900 dark:text-white',
        )}
      >
        {displayMessage}
      </h3>
      {displayDescription && (
        <p
          className={cn(
            'text-sm max-w-md mb-4',
            determinedType === 'error'
              ? 'text-red-700 dark:text-red-300'
              : 'text-gray-600 dark:text-gray-400',
          )}
        >
          {displayDescription}
        </p>
      )}
      {(action || onRetry) && (
        <div className="mt-4 flex flex-col sm:flex-row gap-2 items-center justify-center">
          {action}
          {onRetry && (
            <button
              type="button"
              onClick={onRetry}
              className={cn(
                'inline-flex items-center gap-2 px-4 py-2 rounded-md',
                'text-sm font-medium transition-colors',
                'focus:outline-none focus:ring-2 focus:ring-offset-2',
                determinedType === 'error'
                  ? 'bg-red-600 text-white hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600 focus:ring-red-500'
                  : 'bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 focus:ring-blue-500',
              )}
              aria-label="Réessayer"
            >
              <RefreshCw className="h-4 w-4" aria-hidden="true" />
              Réessayer
            </button>
          )}
        </div>
      )}
      <span className="sr-only">
        {displayMessage}. {displayDescription}
        {onRetry && ' Bouton pour réessayer disponible.'}
      </span>
    </div>
  );
}

export default TrackListEmpty;
