import React from 'react';
import { Music, Play, MoreVertical } from 'lucide-react';
import { cn } from '../../utils/cn';

export interface Track {
    id: string;
    title: string;
    artist?: string;
    duration?: string;
    coverUrl?: string;
}

export interface TrackListProps {
    tracks: Track[];
    onTrackClick?: (track: Track) => void;
    onPlayClick?: (track: Track) => void;
    onMoreClick?: (track: Track) => void;
    className?: string;
}

/**
 * TrackList - Display a list of tracks
 * Part of Kōdō Design System
 */
export const TrackList = React.forwardRef<HTMLDivElement, TrackListProps>(
    ({ tracks, onTrackClick, onPlayClick, onMoreClick, className }, ref) => {
        if (tracks.length === 0) {
            return (
                <div ref={ref} className={cn('text-center py-8', className)}>
                    <p className="text-kodo-secondary text-sm">Aucune piste disponible</p>
                </div>
            );
        }

        return (
            <div ref={ref} className={cn('space-y-2', className)}>
                {tracks.map((track) => (
                    <div
                        key={track.id}
                        className="flex items-center gap-3 p-3 rounded-lg bg-kodo-graphite/50 hover:bg-kodo-slate/50 transition-all group cursor-pointer"
                        onClick={() => onTrackClick?.(track)}
                    >
                        {/* Cover / Icon */}
                        <div className="relative w-12 h-12 rounded bg-kodo-slate flex items-center justify-center flex-shrink-0">
                            {track.coverUrl ? (
                                <img
                                    src={track.coverUrl}
                                    alt={track.title}
                                    className="w-full h-full object-cover rounded"
                                />
                            ) : (
                                <Music className="w-5 h-5 text-kodo-cyan" />
                            )}
                            {/* Play button overlay */}
                            <button
                                onClick={(e) => {
                                    e.stopPropagation();
                                    onPlayClick?.(track);
                                }}
                                className="absolute inset-0 flex items-center justify-center bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity rounded"
                            >
                                <Play className="w-5 h-5 text-white fill-current" />
                            </button>
                        </div>

                        {/* Track Info */}
                        <div className="flex-1 min-w-0">
                            <p className="text-sm font-medium text-white truncate">{track.title}</p>
                            {track.artist && (
                                <p className="text-xs text-kodo-secondary truncate">{track.artist}</p>
                            )}
                        </div>

                        {/* Duration */}
                        {track.duration && (
                            <span className="text-xs text-kodo-secondary font-mono">{track.duration}</span>
                        )}

                        {/* More button */}
                        {onMoreClick && (
                            <button
                                onClick={(e) => {
                                    e.stopPropagation();
                                    onMoreClick(track);
                                }}
                                className="p-2 rounded-lg hover:bg-kodo-steel/30 opacity-0 group-hover:opacity-100 transition-opacity"
                            >
                                <MoreVertical className="w-4 h-4 text-kodo-secondary" />
                            </button>
                        )}
                    </div>
                ))}
            </div>
        );
    }
);

TrackList.displayName = 'TrackList';
