import React from 'react';
import { cn } from '@/lib/utils';
import type { Track } from '../../player/types';

export interface TrackListRowProps {
  track: Track;
  showMetadata?: boolean;
  showCover?: boolean;
  showDuration?: boolean;
  onTrackClick?: (track: Track) => void;
  onTrackPlay?: (track: Track) => void;
  onTrackLike?: (track: Track) => void;
  onTrackMore?: (track: Track) => void;
  showSelection?: boolean;
  onTrackSelect?: (id: string, selected: boolean) => void;
  isSelected?: boolean;
  isLiked?: boolean;
  isPlaying?: boolean;
  format?: 'list' | 'table';
  className?: string;
  showActions?: boolean;
}

export function TrackListRow({
  track,
  showMetadata = true,
  showCover = true,
  showDuration = true,
  onTrackClick,
  onTrackPlay,
  onTrackLike,
  onTrackMore,
  showSelection,
  onTrackSelect,
  isSelected,
  isLiked,
  isPlaying,
  format = 'list',
  className,
  showActions = true,
}: TrackListRowProps) {
  const handlePlay = (e: React.MouseEvent) => {
    e.stopPropagation();
    onTrackPlay?.(track);
  };

  const handleLike = (e: React.MouseEvent) => {
    e.stopPropagation();
    onTrackLike?.(track);
  };

  const handleMore = (e: React.MouseEvent) => {
    e.stopPropagation();
    onTrackMore?.(track);
  };

  const handleSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
    e.stopPropagation();
    onTrackSelect?.(track.id, e.target.checked);
  };

  const PlayIcon = isPlaying ? 'II' : '▶';
  const LikeIcon = isLiked ? '♥' : '♡';

  if (format === 'table') {
    return (
      <tr
        role="row"
        className={cn(
          'hover:bg-muted/50 transition-colors',
          isSelected && 'bg-blue-50 dark:bg-blue-900/20',
          className,
        )}
        onClick={() => onTrackClick?.(track)}
      >
        {showSelection && (
          <td className="w-8 p-2">
            <input
              type="checkbox"
              checked={isSelected}
              onChange={handleSelect}
              onClick={(e) => e.stopPropagation()}
              aria-label="Sélectionner"
            />
          </td>
        )}
        <td className="p-2">
          <div className="flex items-center gap-3">
            {showCover && (
              <div className="relative w-8 h-8 flex-shrink-0 group">
                {track.cover ? (
                  <img
                    src={track.cover}
                    alt={`Cover de ${track.title}`}
                    className="w-full h-full object-cover rounded"
                  />
                ) : (
                  <div className="w-full h-full bg-muted flex items-center justify-center rounded">
                    <svg
                      className="w-4 h-4 text-muted-foreground"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"
                      />
                    </svg>
                  </div>
                )}
                {showActions && (
                  <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black/40 transition-opacity rounded">
                    <button
                      onClick={handlePlay}
                      aria-label={isPlaying ? 'Mettre en pause' : 'Lire'}
                      className="text-white"
                    >
                      {PlayIcon}
                    </button>
                  </div>
                )}
              </div>
            )}
            <span>{track.title}</span>
          </div>
        </td>
        <td className="p-2">{track.artist}</td>
        {showMetadata && (
          <td className="p-2 text-muted-foreground">{track.album}</td>
        )}
        {showDuration && (
          <td className="p-2 text-right text-muted-foreground text-xs">
            {Math.floor(track.duration / 60)}:
            {String(track.duration % 60).padStart(2, '0')}
          </td>
        )}
      </tr>
    );
  }

  return (
    <li
      role="listitem"
      className={cn(
        'flex items-center gap-3 p-2 rounded-md hover:bg-muted/50 group h-14 transition-colors',
        isSelected && 'bg-blue-50 dark:bg-blue-900/20',
        className,
      )}
      onClick={() => onTrackClick?.(track)}
    >
      {showSelection && (
        <input
          type="checkbox"
          checked={isSelected}
          onChange={handleSelect}
          onClick={(e) => e.stopPropagation()}
          aria-label="Sélectionner"
        />
      )}

      {/* Cover/Play Button */}
      <div className="relative w-10 h-10 flex-shrink-0">
        {showCover && (
          <>
            {track.cover ? (
              <img
                src={track.cover}
                alt={`Cover de ${track.title}`}
                className="w-full h-full object-cover rounded"
              />
            ) : (
              <div className="w-full h-full bg-muted flex items-center justify-center rounded">
                <svg
                  className="w-5 h-5 text-muted-foreground"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"
                  />
                </svg>
              </div>
            )}
          </>
        )}

        {showActions && (
          <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 bg-black/40 transition-opacity rounded">
            <button
              aria-label={isPlaying ? 'Mettre en pause' : 'Lire'}
              onClick={handlePlay}
              className="text-white"
            >
              {PlayIcon}
            </button>
          </div>
        )}
      </div>

      <div className="flex-1 min-w-0">
        <div className="font-medium truncate">{track.title}</div>
        {showMetadata && (
          <div className="text-xs text-muted-foreground truncate">
            {track.artist} {track.album && `• ${track.album}`}
          </div>
        )}
      </div>

      {showDuration && (
        <div className="text-xs text-muted-foreground">
          {Math.floor(track.duration / 60)}:
          {String(track.duration % 60).padStart(2, '0')}
        </div>
      )}

      {/* Actions */}
      {showActions && (
        <div className="opacity-0 group-hover:opacity-100 flex gap-2">
          <button
            aria-label={isLiked ? 'Retirer des favoris' : 'Ajouter aux favoris'}
            onClick={handleLike}
            className="hover:text-primary transition-colors"
          >
            {LikeIcon}
          </button>
          <button
            aria-label="Plus d'options"
            onClick={handleMore}
            className="hover:text-primary transition-colors"
          >
            ...
          </button>
        </div>
      )}
    </li>
  );
}
