/**
 * Composant PlaylistCard
 * T0459: Create Playlist List Component
 */

import { Card, CardContent } from '@/components/ui/card';
import { Music, Lock, Users, Check } from 'lucide-react';
import { cn } from '@/lib/utils';
import { Link } from 'react-router-dom';
import type { Playlist } from '../types';

interface PlaylistCardProps {
  playlist: Playlist;
  className?: string;
  onClick?: (playlist: Playlist) => void;
  selectable?: boolean;
  selected?: boolean;
  onSelect?: (playlist: Playlist, selected: boolean) => void;
}

export function PlaylistCard({
  playlist,
  className,
  onClick,
  selectable = false,
  selected = false,
  onSelect,
}: PlaylistCardProps) {
  const handleClick = (e: React.MouseEvent) => {
    if (selectable && onSelect) {
      e.preventDefault();
      e.stopPropagation();
      onSelect(playlist, !selected);
      return;
    }
    if (onClick) {
      e.preventDefault();
      onClick(playlist);
    }
  };

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (selectable && onSelect && (e.key === 'Enter' || e.key === ' ')) {
      e.preventDefault();
      e.stopPropagation();
      onSelect(playlist, !selected);
      return;
    }
    if (onClick && (e.key === 'Enter' || e.key === ' ')) {
      e.preventDefault();
      onClick(playlist);
    }
  };

  const handleCheckboxClick = (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    if (onSelect) {
      onSelect(playlist, !selected);
    }
  };

  const cardContent = (
    <Card
      className={cn(
        'cursor-pointer hover:shadow-lg active:scale-[0.98] transition-all duration-200',
        'touch-manipulation', // Optimize touch response
        selectable && selected && 'ring-2 ring-blue-500 border-blue-500',
        className,
      )}
    >
      <CardContent className="p-0">
        {/* Cover Image */}
        <div className="relative aspect-square bg-gradient-to-br from-purple-500 to-pink-500 overflow-hidden">
          {playlist.cover_url ? (
            <img
              src={playlist.cover_url}
              alt={`Couverture de la playlist ${playlist.title}`}
              className="w-full h-full object-cover"
            />
          ) : (
            <div
              className="w-full h-full flex items-center justify-center"
              role="img"
              aria-label={`Pas de couverture pour la playlist ${playlist.title}`}
            >
              <Music className="w-16 h-16 text-white/50" aria-hidden="true" />
            </div>
          )}
          {/* Selection Checkbox */}
          {selectable && (
            <div className="absolute top-2 left-2 z-10">
              <button
                type="button"
                onClick={handleCheckboxClick}
                className={cn(
                  'w-6 h-6 rounded-full border-2 flex items-center justify-center transition-all',
                  'touch-manipulation min-h-[24px] min-w-[24px]',
                  selected
                    ? 'bg-blue-600 border-blue-600 text-white'
                    : 'bg-white/90 dark:bg-gray-800/90 border-gray-300 dark:border-gray-600 text-transparent hover:border-blue-500',
                )}
                aria-label={
                  selected
                    ? `Désélectionner ${playlist.title}`
                    : `Sélectionner ${playlist.title}`
                }
                aria-checked={selected}
                role="checkbox"
              >
                {selected && <Check className="w-4 h-4" aria-hidden="true" />}
              </button>
            </div>
          )}
          {/* Visibility Badge */}
          <div className="absolute top-2 right-2">
            {playlist.is_public ? (
              <div
                className="bg-green-500/80 text-white px-2 py-1 rounded-full text-xs flex items-center gap-1"
                aria-label="Playlist publique"
              >
                <Users className="w-3 h-3" aria-hidden="true" />
                Public
              </div>
            ) : (
              <div
                className="bg-gray-700/80 text-white px-2 py-1 rounded-full text-xs flex items-center gap-1"
                aria-label="Playlist privée"
              >
                <Lock className="w-3 h-3" aria-hidden="true" />
                Privé
              </div>
            )}
          </div>
        </div>

        {/* Playlist Info - Mobile optimized */}
        <div className="p-3 sm:p-4">
          <h3
            className="font-semibold text-base sm:text-lg truncate mb-1"
            id={`playlist-title-${playlist.id}`}
          >
            {playlist.title}
          </h3>
          {playlist.description && (
            <p
              className="text-xs sm:text-sm text-muted-foreground line-clamp-2 mb-2"
              id={`playlist-description-${playlist.id}`}
            >
              {playlist.description}
            </p>
          )}
          <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-1 sm:gap-0 text-xs sm:text-sm text-muted-foreground">
            <span aria-describedby={`playlist-title-${playlist.id}`}>
              {playlist.track_count} track
              {playlist.track_count !== 1 ? 's' : ''}
            </span>
            {playlist.user && (
              <span
                className="truncate sm:ml-2"
                aria-label={`Créée par ${playlist.user.username}`}
              >
                par {playlist.user.username}
              </span>
            )}
          </div>
        </div>
      </CardContent>
    </Card>
  );

  // Si sélectionnable, ne pas utiliser Link pour éviter la navigation
  if (selectable) {
    return (
      <div
        onClick={handleClick}
        onKeyDown={handleKeyDown}
        role="button"
        tabIndex={0}
        aria-label={`${selected ? 'Désélectionner' : 'Sélectionner'} la playlist ${playlist.title}`}
        className="touch-manipulation"
      >
        {cardContent}
      </div>
    );
  }

  return (
    <Link
      to={`/playlists/${playlist.id}`}
      onClick={handleClick}
      onKeyDown={handleKeyDown}
      aria-label={`Voir la playlist ${playlist.title}`}
      className="touch-manipulation"
    >
      {cardContent}
    </Link>
  );
}
