"use client"

import type React from "react"
import { useState } from "react"
import Link from "next/link"
import { Music, User, Heart, Settings, Download, Play } from "lucide-react"
import { usePlayer } from "@/components/player-provider"
import { getImageUrl } from "@/lib/image-utils"

interface PlaylistItemProps {
  id: string
  title: string
  subtitle: string
  image: string
  icon?: "music" | "user" | "heart" | "settings" | "download"
  href?: string
  tracks?: any[]
}

const iconMap: Record<string, React.ReactNode> = {
  music: <Music className="h-4 w-4" />,
  user: <User className="h-4 w-4" />,
  heart: <Heart className="h-4 w-4 fill-rose-500 text-rose-500" />,
  settings: <Settings className="h-4 w-4" />,
  download: <Download className="h-4 w-4" />,
}

export function PlaylistItem({ id, title, subtitle, image, icon, href, tracks = [] }: PlaylistItemProps) {
  const { playAlbum, currentTrack, isPlaying } = usePlayer()
  const [imageError, setImageError] = useState(false)

  const playlistTracks = tracks.length > 0 ? tracks : []
  const isPlaylistPlaying = playlistTracks.some((t) => t.id === currentTrack?.id) && isPlaying

  const handlePlay = (e: React.MouseEvent) => {
    e.preventDefault()
    e.stopPropagation()
    if (playlistTracks.length === 0) return
    playAlbum(playlistTracks, 0)
  }

  const content = (
    <div className="group flex items-center gap-3 rounded-lg p-2 transition-colors hover:bg-secondary">
      <div className="relative h-14 w-14 overflow-hidden rounded-lg bg-secondary/50">
        {!imageError && image ? (
          <img
            src={getImageUrl(image, "playlist") || "/placeholder.svg"}
            alt={title}
            className="h-full w-full object-cover"
            onError={() => setImageError(true)}
          />
        ) : (
          <div className="flex h-full w-full items-center justify-center bg-gradient-to-br from-primary/20 to-primary/5">
            <Music className="h-6 w-6 text-primary/60" />
          </div>
        )}
        {playlistTracks.length > 0 && (
          <button
            onClick={handlePlay}
            className="absolute inset-0 flex items-center justify-center bg-black/50 opacity-100 md:opacity-0 transition-opacity md:group-hover:opacity-100"
          >
            <Play className="h-6 w-6 text-white" />
          </button>
        )}
        {isPlaylistPlaying && (
          <div className="absolute inset-0 flex items-center justify-center bg-black/50">
            <div className="flex gap-0.5">
              <span className="h-3 w-0.5 animate-pulse bg-white" />
              <span className="h-4 w-0.5 animate-pulse bg-white" style={{ animationDelay: "150ms" }} />
              <span className="h-2 w-0.5 animate-pulse bg-white" style={{ animationDelay: "300ms" }} />
            </div>
          </div>
        )}
      </div>
      <div className="flex-1">
        <h3 className={`font-medium ${isPlaylistPlaying ? "text-primary" : "text-foreground"}`}>{title}</h3>
        <p className="text-sm text-muted-foreground">{subtitle}</p>
      </div>
      {icon && <div className="text-muted-foreground">{iconMap[icon]}</div>}
    </div>
  )

  if (href) {
    return <Link href={href}>{content}</Link>
  }

  return content
}
