/**
 * Page PlaylistListPage
 * T0462: Create Playlist Routes
 * T0504: Create Playlist Mobile Responsive
 * T0506: Create Playlist Batch Operations
 */

import { useState } from 'react';
import { PlaylistList } from '../components/PlaylistList';
import { Button } from '@/components/ui/button';
import { CheckSquare } from 'lucide-react';
import '../styles/playlists.mobile.css';

export function PlaylistListPage() {
  const [enableSelection, setEnableSelection] = useState(false);

  return (
    <div className="space-y-4 sm:space-y-6 playlist-container">
      <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 sm:gap-0">
        <div>
          <h1 className="text-2xl sm:text-3xl font-bold tracking-tight">Playlists</h1>
          <p className="text-sm sm:text-base text-muted-foreground">
            Découvrez et gérez vos playlists
          </p>
        </div>
        <Button
          variant={enableSelection ? 'default' : 'outline'}
          size="sm"
          onClick={() => setEnableSelection(!enableSelection)}
          className="touch-manipulation min-h-[44px] sm:min-h-0"
          aria-label={enableSelection ? 'Désactiver la sélection' : 'Activer la sélection'}
        >
          <CheckSquare className="h-4 w-4 sm:mr-2" aria-hidden="true" />
          <span className="hidden sm:inline">
            {enableSelection ? 'Annuler' : 'Sélectionner'}
          </span>
        </Button>
      </div>
      <PlaylistList enableSelection={enableSelection} />
    </div>
  );
}

