import { Button } from '@/components/ui/button'
import { filesService } from '@/lib/api/services/files'
import type { PlayerState } from '@/lib/api/services/player'
import { cn } from '@/lib/utils'
import { Maximize2, Music } from 'lucide-react'
import { memo } from 'react'

interface CompactPlayerTrackInfoProps {
  currentSound: PlayerState['current_sound']
  playlistName?: string
  onExpand: () => void
}

export const CompactPlayerTrackInfo = memo(function CompactPlayerTrackInfo({
  currentSound,
  playlistName,
  onExpand,
}: CompactPlayerTrackInfoProps) {
  return (
    <div className="flex items-center gap-2 mb-3 px-1">
      <div className="flex-shrink-0 w-8 h-8 bg-muted rounded flex items-center justify-center overflow-hidden">
        {currentSound?.thumbnail ? (
          <img
            src={filesService.getThumbnailUrl(currentSound.id)}
            alt={currentSound.name}
            className="w-full h-full object-cover"
            onError={e => {
              // Hide image and show music icon if thumbnail fails to load
              const target = e.target as HTMLImageElement
              target.style.display = 'none'
              const musicIcon = target.nextElementSibling as HTMLElement
              if (musicIcon) musicIcon.style.display = 'block'
            }}
          />
        ) : null}
        <Music
          className={cn(
            'h-4 w-4 text-muted-foreground',
            currentSound?.thumbnail ? 'hidden' : 'block',
          )}
        />
      </div>
      <div className="flex-1 min-w-0">
        <div className="text-sm font-medium truncate">
          {currentSound?.name || 'No track selected'}
        </div>
        <div className="text-xs text-muted-foreground">
          {playlistName}
        </div>
      </div>
      <Button
        size="sm"
        variant="ghost"
        onClick={onExpand}
        className="h-6 w-6 p-0 flex-shrink-0"
        title="Expand Player"
      >
        <Maximize2 className="h-3 w-3" />
      </Button>
    </div>
  )
})