<template>
  <Transition name="player-slide">
    <div
      v-if="store.currentSong"
      class="player-bar fixed inset-x-0 bottom-0 z-70 border-t border-white/8 bg-surface-600/80 backdrop-blur-xl"
    >
      <!-- Expanded panel -->
      <Transition name="panel-expand">
        <div v-if="store.isExpanded" class="border-b border-white/8">
          <div class="container-content grid gap-4 p-4 md:grid-cols-2">
            <PlayerVisualizer />
            <PlayerPlaylist />
          </div>
        </div>
      </Transition>

      <!-- Progress bar (top of player) -->
      <PlayerProgress />

      <!-- Main player bar -->
      <div class="container-content flex items-center gap-4 px-4 py-2">
        <!-- Track info -->
        <div class="flex-1 min-w-0">
          <PlayerTrackInfo />
        </div>

        <!-- Controls -->
        <div class="flex items-center gap-4">
          <PlayerControls />
        </div>

        <!-- Right section: mode + volume + expand -->
        <div class="hidden md:flex items-center gap-3 flex-shrink-0">
          <PlayerModeToggle />

          <!-- Volume -->
          <div class="flex items-center gap-2">
            <button class="btn-ghost !p-1" @click="toggleMute">
              <div :class="volumeIcon" class="h-4 w-4" />
            </button>
            <input
              type="range"
              min="0"
              max="1"
              step="0.01"
              :value="store.volume"
              class="volume-slider w-20"
              @input="handleVolumeChange"
            >
          </div>

          <!-- Time display -->
          <span class="font-mono text-xs text-white/40 w-24 text-center">
            {{ store.formattedCurrentTime }} / {{ store.formattedDuration }}
          </span>

          <!-- Expand toggle -->
          <button
            class="btn-ghost !p-2"
            :aria-label="store.isExpanded ? 'Réduire' : 'Développer'"
            @click="store.toggleExpanded()"
          >
            <div :class="store.isExpanded ? 'i-lucide-chevron-down' : 'i-lucide-chevron-up'" class="h-4 w-4" />
          </button>
        </div>
      </div>
    </div>
  </Transition>
</template>

<script setup lang="ts">
const store = usePlayerStore()
const { setVolume } = useAudioPlayer()

// Initialize media session
useMediaSession()

let previousVolume = 0.8

const volumeIcon = computed(() => {
  if (store.volume === 0) return 'i-lucide-volume-x'
  if (store.volume < 0.3) return 'i-lucide-volume'
  if (store.volume < 0.7) return 'i-lucide-volume-1'
  return 'i-lucide-volume-2'
})

function handleVolumeChange(e: Event) {
  const value = parseFloat((e.target as HTMLInputElement).value)
  setVolume(value)
}

function toggleMute() {
  if (store.volume > 0) {
    previousVolume = store.volume
    setVolume(0)
  }
  else {
    setVolume(previousVolume)
  }
}
</script>

<style scoped>
.player-slide-enter-active,
.player-slide-leave-active {
  transition: transform 0.3s var(--ease-out-expo);
}

.player-slide-enter-from,
.player-slide-leave-to {
  transform: translateY(100%);
}

.panel-expand-enter-active,
.panel-expand-leave-active {
  transition: all 0.3s var(--ease-out-expo);
  overflow: hidden;
}

.panel-expand-enter-from,
.panel-expand-leave-to {
  max-height: 0;
  opacity: 0;
}

.panel-expand-enter-to,
.panel-expand-leave-from {
  max-height: 400px;
  opacity: 1;
}

.volume-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: hsl(0 0% 100% / 0.15);
  border-radius: 2px;
  outline: none;
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  background: white;
  border-radius: 50%;
  cursor: pointer;
}

.volume-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}
</style>
