/**
 * Composant ViewToggle
 * Toggle pour basculer entre vue liste et vue grille
 */

import { useState, useEffect } from 'react';
import { List, Grid } from 'lucide-react';
import { cn } from '@/lib/utils';
import type { TrackListDisplayMode } from '../types';

export interface ViewToggleProps {
  value: TrackListDisplayMode;
  onChange: (mode: TrackListDisplayMode) => void;
  persistPreference?: boolean;
  storageKey?: string;
  className?: string;
  showLabels?: boolean;
}

export function ViewToggle({
  value,
  onChange,
  persistPreference = false,
  storageKey = 'trackViewMode',
  className,
  showLabels = false,
}: ViewToggleProps) {
  const [isTransitioning, setIsTransitioning] = useState(false);

  // Charger la préférence depuis localStorage au montage si persistPreference est activé
  useEffect(() => {
    if (persistPreference && typeof window !== 'undefined') {
      const stored = localStorage.getItem(storageKey);
      if (
        stored &&
        (stored === 'list' || stored === 'grid') &&
        stored !== value
      ) {
        onChange(stored as TrackListDisplayMode);
      }
    }
  }, []); // eslint-disable-line react-hooks/exhaustive-deps

  // Persister la préférence dans localStorage
  useEffect(() => {
    if (persistPreference && typeof window !== 'undefined') {
      localStorage.setItem(storageKey, value);
    }
  }, [value, persistPreference, storageKey]);

  const handleModeChange = (mode: TrackListDisplayMode) => {
    if (mode === value) {
      return; // Ne rien faire si le mode est déjà sélectionné
    }

    setIsTransitioning(true);
    onChange(mode);

    // Réinitialiser l'état de transition après un court délai
    setTimeout(() => {
      setIsTransitioning(false);
    }, 300);
  };

  return (
    <div
      className={cn(
        'inline-flex items-center gap-1 p-1 rounded-lg',
        'bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700',
        'transition-all duration-300',
        isTransitioning && 'opacity-75',
        className,
      )}
      role="radiogroup"
      aria-label="Sélecteur de vue"
    >
      <button
        type="button"
        onClick={() => handleModeChange('list')}
        className={cn(
          'flex items-center gap-2 px-3 py-1.5 rounded-md',
          'text-sm font-medium transition-all duration-200',
          'hover:bg-gray-200 dark:hover:bg-gray-700',
          'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
          'disabled:opacity-50 disabled:cursor-not-allowed',
          value === 'list'
            ? 'bg-white dark:bg-gray-700 text-blue-600 dark:text-blue-400 shadow-sm'
            : 'text-gray-600 dark:text-gray-400',
        )}
        aria-label="Vue liste"
        aria-pressed={value === 'list'}
        role="radio"
        disabled={isTransitioning}
      >
        <List className="h-4 w-4" aria-hidden="true" />
        {showLabels && <span>Liste</span>}
        <span className="sr-only">Vue liste</span>
      </button>

      <button
        type="button"
        onClick={() => handleModeChange('grid')}
        className={cn(
          'flex items-center gap-2 px-3 py-1.5 rounded-md',
          'text-sm font-medium transition-all duration-200',
          'hover:bg-gray-200 dark:hover:bg-gray-700',
          'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
          'disabled:opacity-50 disabled:cursor-not-allowed',
          value === 'grid'
            ? 'bg-white dark:bg-gray-700 text-blue-600 dark:text-blue-400 shadow-sm'
            : 'text-gray-600 dark:text-gray-400',
        )}
        aria-label="Vue grille"
        aria-pressed={value === 'grid'}
        role="radio"
        disabled={isTransitioning}
      >
        <Grid className="h-4 w-4" aria-hidden="true" />
        {showLabels && <span>Grille</span>}
        <span className="sr-only">Vue grille</span>
      </button>
    </div>
  );
}

export default ViewToggle;
