"use client"

import type React from "react"
import { useState } from "react"
import Image from "next/image"
import Link from "next/link"
import { MoreHorizontal, Play, Heart, Pause } from "lucide-react"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { usePlayer } from "@/components/player-provider"
import { formatDuration, type Track } from "@/lib/music-data"
import { TrackOptionsModal } from "@/components/track-options-modal"
import { getImageUrl } from "@/lib/image-utils"

interface TrackItemProps {
  id: string
  title: string
  artist: string
  image: string
  duration?: number
  collaborators?: { name: string; image: string }[]
  href?: string
  showDuration?: boolean
  track?: Track
}

export function TrackItem({
  id,
  title,
  artist,
  image,
  duration,
  collaborators,
  href,
  showDuration = true,
  track,
}: TrackItemProps) {
  const { playTrack, currentTrack, isPlaying, toggleLike, isLiked, togglePlay } = usePlayer()
  const [showOptions, setShowOptions] = useState(false)

  const isCurrentTrack = currentTrack?.id === id
  const trackData: Track = track || { id, title, artist, image, duration: duration || 200 }

  const handlePlay = (e: React.MouseEvent) => {
    e.preventDefault()
    e.stopPropagation()
    if (isCurrentTrack) {
      togglePlay()
    } else {
      playTrack(trackData)
    }
  }

  const handleLike = (e: React.MouseEvent) => {
    e.preventDefault()
    e.stopPropagation()
    toggleLike(id)
  }

  const handleOptions = (e: React.MouseEvent) => {
    e.preventDefault()
    e.stopPropagation()
    setShowOptions(true)
  }

  const content = (
    <div
      className={`group flex items-center gap-3 rounded-lg p-2 transition-colors hover:bg-secondary ${isCurrentTrack ? "bg-secondary/50" : ""}`}
    >
      <div className="relative h-12 w-12 overflow-hidden rounded-lg flex-shrink-0">
        <Image src={getImageUrl(image, "track") || "/placeholder.svg"} alt={title} fill className="object-cover" />
        <button
          onClick={handlePlay}
          className="absolute inset-0 flex items-center justify-center bg-black/50 opacity-100 md:opacity-0 md:group-hover:opacity-100 transition-opacity"
        >
          {isCurrentTrack && isPlaying ? (
            <Pause className="h-5 w-5 text-white" />
          ) : (
            <Play className="h-5 w-5 text-white ml-0.5" />
          )}
        </button>
      </div>
      <div className="flex-1 min-w-0">
        <h3 className={`font-medium truncate ${isCurrentTrack ? "text-primary" : "text-foreground"}`}>{title}</h3>
        <p className="text-sm text-muted-foreground truncate">{artist}</p>
      </div>
      {collaborators && collaborators.length > 0 && (
        <div className="flex -space-x-2">
          {collaborators.map((collab, index) => (
            <Avatar key={index} className="h-8 w-8 border-2 border-background">
              <AvatarImage src={getImageUrl(collab.image, "artist") || "/placeholder.svg"} alt={collab.name} />
              <AvatarFallback>{collab.name[0]}</AvatarFallback>
            </Avatar>
          ))}
        </div>
      )}
      <div className="flex items-center gap-1">
        <button
          onClick={handleLike}
          className={`p-2 transition-opacity opacity-100 md:opacity-0 md:group-hover:opacity-100 ${isLiked(id) ? "text-primary" : "text-muted-foreground"}`}
        >
          <Heart className={`h-5 w-5 ${isLiked(id) ? "fill-current" : ""}`} />
        </button>
        {showDuration && duration && (
          <span className="text-sm text-muted-foreground w-10 text-right hidden md:block">
            {formatDuration(duration)}
          </span>
        )}
        <button
          onClick={handleOptions}
          className="p-2 text-muted-foreground opacity-100 md:opacity-0 md:group-hover:opacity-100 transition-opacity hover:text-foreground"
        >
          <MoreHorizontal className="h-5 w-5" />
        </button>
      </div>
    </div>
  )

  return (
    <>
      {href ? <Link href={href}>{content}</Link> : content}
      <TrackOptionsModal track={trackData} isOpen={showOptions} onClose={() => setShowOptions(false)} />
    </>
  )
}
