'use client'

import { useState } from 'react'

export interface SongCardProps {
  id: string
  title: string
  artistName: string
  coverUrl?: string
  duration: number
  plays?: number
  onPlay?: () => void
  onClick?: () => void
}

export function SongCard({
  id,
  title,
  artistName,
  coverUrl,
  duration,
  plays = 0,
  onPlay,
  onClick
}: SongCardProps) {
  const [isHovered, setIsHovered] = useState(false)

  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="group bg-zinc-900 rounded-lg p-4 hover:bg-zinc-800 transition cursor-pointer"
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      onClick={onClick}
    >
      <div className="flex items-center gap-4">
        {/* Cover Image */}
        <div className="relative flex-shrink-0">
          <div className="w-16 h-16 rounded bg-zinc-800 overflow-hidden">
            {coverUrl ? (
              <img
                src={coverUrl}
                alt={title}
                className="w-full h-full object-cover"
              />
            ) : (
              <div className="w-full h-full flex items-center justify-center">
                <svg className="w-8 h-8 text-zinc-600" 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>
              </div>
            )}
          </div>

          {/* Play Button Overlay */}
          {isHovered && onPlay && (
            <button
              onClick={(e) => {
                e.stopPropagation()
                onPlay()
              }}
              className="absolute inset-0 flex items-center justify-center bg-black/60 rounded"
            >
              <div className="w-10 h-10 rounded-full bg-purple-500 hover:bg-purple-600 flex items-center justify-center">
                <svg className="w-5 h-5 text-white ml-0.5" 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>
            </button>
          )}
        </div>

        {/* Song Info */}
        <div className="flex-1 min-w-0">
          <h3 className="font-medium text-white truncate group-hover:text-purple-400 transition">
            {title}
          </h3>
          <p className="text-sm text-zinc-400 truncate">{artistName}</p>
        </div>

        {/* Stats */}
        <div className="flex items-center gap-4 text-sm text-zinc-400">
          {plays > 0 && (
            <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(plays)}</span>
            </div>
          )}
          <span>{formatDuration(duration)}</span>
        </div>
      </div>
    </div>
  )
}