<template>
  <div class="song-item-wrapper">
    <div
      class="card-surface flex cursor-pointer items-center gap-4"
      :class="{ 'border-primary/40! shadow-primary/10!': isCurrent }"
      @click="handlePlay"
    >
      <!-- Play indicator / cover -->
      <div
        class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-lg bg-surface-200"
        :class="{ 'animate-glow-pulse': isCurrent && store.isPlaying }"
      >
        <div
          v-if="isCurrent && store.isPlaying"
          class="i-lucide-volume-2 h-5 w-5 text-primary"
        />
        <div
          v-else
          class="i-lucide-play h-5 w-5 text-white/40 transition-colors group-hover:text-primary"
        />
      </div>

      <!-- Info -->
      <div class="min-w-0 flex-1">
        <p class="truncate text-sm font-medium" :class="isCurrent ? 'text-primary' : 'text-white'">
          {{ song.title }}
        </p>
        <p class="truncate text-xs text-white/40">
          {{ song.artist }}
        </p>
      </div>

      <!-- Duration -->
      <span class="font-mono text-xs text-white/30 flex-shrink-0">
        {{ formatDuration(song.duration) }}
      </span>
    </div>

    <!-- Lyrics panel (always visible) -->
    <div v-if="song.lyrics" class="lyrics-panel">
      <pre class="lyrics-text">{{ song.lyrics }}</pre>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Song } from '~/types/song'

const props = defineProps<{
  song: Song
}>()

const store = usePlayerStore()
const { loadAndPlay, togglePlayPause } = useAudioPlayer()

const isCurrent = computed(() => store.currentSong?.id === props.song.id)

function handlePlay() {
  if (isCurrent.value) {
    togglePlayPause()
  }
  else {
    loadAndPlay(props.song)
  }
}

function formatDuration(seconds: number): string {
  const mins = Math.floor(seconds / 60)
  const secs = Math.floor(seconds % 60)
  return `${mins}:${secs.toString().padStart(2, '0')}`
}
</script>

<style scoped>
.lyrics-panel {
  margin-top: 0.25rem;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  background: hsl(var(--color-surface));
  border: 1px solid hsl(var(--color-text) / 0.08);
  max-height: 24rem;
  overflow-y: auto;
}

.lyrics-text {
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.7;
  color: hsl(var(--color-text) / 0.6);
}
</style>
