"use client"

import type React from "react"
import Image from "next/image"
import Link from "next/link"
import { Play, Pause } from "lucide-react"
import { cn } from "@/lib/utils"
import { usePlayer } from "@/components/player-provider"
import { getImageUrl } from "@/lib/image-utils"

interface AlbumCardProps {
  id: string
  title: string
  image: string
  href?: string
  size?: "sm" | "md" | "lg"
  artist?: string
  track?: {
    id: string
    title: string
    artist: string
    artistId?: string // Added artistId for linking to artist pages
    image: string
    duration: number
    audioUrl?: string
    cover_url?: string
    album_cover?: string
  }
}

export function AlbumCard({ id, title, image, href, size = "md", artist, track }: AlbumCardProps) {
  const { playTrack, currentTrack, isPlaying, togglePlay } = usePlayer()

  const sizeClasses = {
    sm: "w-28 h-28",
    md: "w-32 h-32",
    lg: "w-40 h-40",
  }

  const buttonSizeClasses = {
    sm: "h-9 w-9",
    md: "h-10 w-10",
    lg: "h-12 w-12",
  }

  const isCurrentTrack = currentTrack?.id === id || currentTrack?.id === track?.id

  const handlePlay = (e: React.MouseEvent) => {
    e.preventDefault()
    e.stopPropagation()

    if (isCurrentTrack) {
      togglePlay()
      return
    }

    if (track) {
      // Preserve original cover_url from the track object
      // Only fall back to image prop if no original URL exists
      const originalCoverUrl = track.cover_url || track.album_cover
      playTrack({
        ...track,
        image: getImageUrl(originalCoverUrl || track.image, "track"),
        cover_url: originalCoverUrl || track.image,
        album_cover: track.album_cover,
      })
    } else {
      playTrack({
        id,
        title,
        artist: artist || "Unknown Artist",
        image: getImageUrl(image, "track"),
        cover_url: image,
        duration: 0,
      })
    }
  }

  const content = (
    <div className="group flex flex-col gap-2 flex-shrink-0">
      <div className={cn("relative overflow-hidden rounded-xl bg-secondary", sizeClasses[size])}>
        <Image
          src={image || "/abstract-music-album.png"}
          alt={title}
          fill
          className="object-cover transition-transform group-hover:scale-105"
          sizes={size === "sm" ? "112px" : size === "md" ? "128px" : "160px"}
        />
        <button
          onClick={handlePlay}
          className={cn(
            "absolute bottom-2 right-2 flex items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg transform transition-all",
            "opacity-100 md:opacity-0 md:group-hover:opacity-100 hover:scale-110",
            buttonSizeClasses[size],
          )}
        >
          {isCurrentTrack && isPlaying ? (
            <Pause className={cn(size === "sm" ? "h-4 w-4" : "h-5 w-5")} />
          ) : (
            <Play className={cn(size === "sm" ? "h-4 w-4" : "h-5 w-5", "ml-0.5")} />
          )}
        </button>
        {/* Playing indicator */}
        {isCurrentTrack && isPlaying && (
          <div className="absolute top-2 left-2 flex h-6 w-6 items-center justify-center rounded-full bg-primary/90">
            <div className="flex gap-0.5">
              <span className="h-2 w-0.5 animate-pulse bg-primary-foreground" />
              <span className="h-3 w-0.5 animate-pulse bg-primary-foreground" style={{ animationDelay: "150ms" }} />
              <span className="h-2 w-0.5 animate-pulse bg-primary-foreground" style={{ animationDelay: "300ms" }} />
            </div>
          </div>
        )}
      </div>
      <div className="flex flex-col">
        <span className="text-sm font-medium text-foreground line-clamp-1">{title}</span>
        {artist && <span className="text-xs text-muted-foreground line-clamp-1">{artist}</span>}
      </div>
    </div>
  )

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

  return content
}
