'use client'

export interface Track {
  id: string
  title: string
  artistName: string
  duration: number
  plays?: number
  position?: number
}

export interface TrackListProps {
  tracks: Track[]
  currentTrackId?: string
  onTrackPlay?: (trackId: string) => void
  showPosition?: boolean
  showPlays?: boolean
}

export function TrackList({
  tracks,
  currentTrackId,
  onTrackPlay,
  showPosition = false,
  showPlays = false
}: TrackListProps) {
  const formatDuration = (seconds: number) => {
    const mins = Math.floor(seconds / 60)
    const secs = seconds % 60
    return `${mins}:${secs.toString().padStart(2, '0')}`
  }

  const formatPlays = (count: number) => {
    if (count >= 1000000) return `${(count / 1000000).toFixed(1)}M`
    if (count >= 1000) return `${(count / 1000).toFixed(1)}K`
    return count.toString()
  }

  return (
    <div className="space-y-1">
      {tracks.map((track, index) => {
        const isPlaying = track.id === currentTrackId

        return (
          <div
            key={track.id}
            className={`group flex items-center gap-4 px-4 py-3 rounded-lg transition cursor-pointer ${
              isPlaying
                ? 'bg-purple-500/20'
                : 'hover:bg-zinc-800'
            }`}
            onClick={() => onTrackPlay?.(track.id)}
          >
            {/* Position / Play Button */}
            <div className="w-8 flex items-center justify-center">
              {isPlaying ? (
                <svg className="w-5 h-5 text-purple-400 animate-pulse" fill="currentColor" viewBox="0 0 20 20">
                  <path d="M18 3a1 1 0 00-1.196-.98l-10 2A1 1 0 006 5v9.114A4.369 4.369 0 005 14c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V7.82l8-1.6v5.894A4.37 4.37 0 0015 12c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V3z" />
                </svg>
              ) : (
                <>
                  <span className="text-zinc-400 group-hover:hidden">
                    {showPosition ? (track.position || index + 1) : ''}
                  </span>
                  <svg className="w-5 h-5 text-white hidden group-hover:block" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M6.3 4.1c-.4-.2-.8 0-.8.4v11c0 .4.4.6.8.4l9-5.5c.3-.2.3-.6 0-.8l-9-5.5z" />
                  </svg>
                </>
              )}
            </div>

            {/* Track Info */}
            <div className="flex-1 min-w-0">
              <h4 className={`font-medium truncate ${
                isPlaying ? 'text-purple-400' : 'text-white'
              }`}>
                {track.title}
              </h4>
              <p className="text-sm text-zinc-400 truncate">{track.artistName}</p>
            </div>

            {/* Stats */}
            <div className="flex items-center gap-6 text-sm text-zinc-400">
              {showPlays && track.plays !== undefined && (
                <div className="flex items-center gap-1">
                  <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" />
                  </svg>
                  <span>{formatPlays(track.plays)}</span>
                </div>
              )}
              <span className="tabular-nums">{formatDuration(track.duration)}</span>
            </div>

            {/* More Options */}
            <button
              className="p-2 text-zinc-400 hover:text-white opacity-0 group-hover:opacity-100 transition"
              onClick={(e) => {
                e.stopPropagation()
                // Handle more options
              }}
            >
              <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
              </svg>
            </button>
          </div>
        )
      })}
    </div>
  )
}