<template>
  <Transition name="player-slide">
    <div
      v-if="store.currentSong"
      ref="widgetRef"
      class="mini-player"
    >
      <!-- ═══ EXPANDED PANEL ═══ -->
      <Transition name="panel-expand">
        <div v-if="isExpanded" class="mini-panel">
          <!-- Track info + visualizer -->
          <div class="panel-top">
            <div class="panel-track">
              <p class="panel-title">{{ store.currentSong.title }}</p>
              <p class="panel-artist">{{ store.currentSong.artist }}</p>
            </div>
            <div class="panel-viz">
              <KeepAlive>
                <PlayerVisualizer />
              </KeepAlive>
            </div>
          </div>

          <!-- Progress -->
          <div class="panel-progress">
            <PlayerProgress />
            <div class="panel-times">
              <span>{{ store.formattedCurrentTime }}</span>
              <span>{{ store.formattedDuration }}</span>
            </div>
          </div>

          <!-- Controls -->
          <div class="panel-controls">
            <PlayerControls />
          </div>

          <!-- Volume -->
          <div class="panel-volume-row">
            <button class="panel-vol-btn" @click="toggleMute">
              <div :class="volumeIcon" class="h-3.5 w-3.5" />
            </button>
            <input
              type="range"
              min="0"
              max="1"
              step="0.01"
              :value="store.volume"
              class="volume-slider"
              @input="handleVolumeChange"
            >
          </div>

          <!-- Lyrics (collapsed by default, available for standalone use) -->
          <div v-if="store.currentSong.lyrics && showLyrics" class="panel-lyrics">
            <pre class="panel-lyrics-text">{{ store.currentSong.lyrics }}</pre>
          </div>
          <button
            v-if="store.currentSong.lyrics"
            class="panel-lyrics-toggle"
            @click="showLyrics = !showLyrics"
          >
            <div :class="showLyrics ? 'i-lucide-chevron-up' : 'i-lucide-text'" class="h-3 w-3" />
            {{ showLyrics ? 'Masquer les paroles' : 'Paroles' }}
          </button>

          <!-- Playlist -->
          <div class="panel-playlist">
            <PlayerPlaylist />
          </div>
        </div>
      </Transition>

      <!-- ═══ COMPACT PILL ═══ -->
      <div class="mini-pill" @click="toggleExpanded">
        <!-- Progress ring -->
        <div class="pill-ring">
          <svg viewBox="0 0 36 36" class="pill-ring-svg">
            <circle
              cx="18" cy="18" r="16"
              fill="none"
              stroke="hsl(0 0% 100% / 0.06)"
              stroke-width="2"
            />
            <circle
              cx="18" cy="18" r="16"
              fill="none"
              stroke="hsl(12 76% 48%)"
              stroke-width="2"
              stroke-linecap="round"
              :stroke-dasharray="circumference"
              :stroke-dashoffset="circumference - (circumference * store.progress / 100)"
              class="pill-ring-progress"
            />
          </svg>
        </div>

        <!-- Title -->
        <span class="pill-title">{{ store.currentSong.title }}</span>

        <!-- Play/Pause -->
        <button
          class="pill-play"
          :aria-label="store.isPlaying ? 'Pause' : 'Lecture'"
          @click.stop="togglePlayPause"
        >
          <div :class="store.isPlaying ? 'i-lucide-pause' : 'i-lucide-play'" class="h-4 w-4" />
        </button>

        <!-- Next -->
        <button class="pill-next" aria-label="Suivant" @click.stop="playNext" :disabled="!store.hasNext">
          <div class="i-lucide-skip-forward h-3.5 w-3.5" />
        </button>

        <!-- Expand -->
        <button
          class="pill-expand"
          :aria-label="isExpanded ? 'Réduire' : 'Développer'"
          @click.stop="toggleExpanded"
        >
          <div :class="isExpanded ? 'i-lucide-chevron-down' : 'i-lucide-chevron-up'" class="h-4 w-4" />
        </button>
      </div>
    </div>
  </Transition>
</template>

<script setup lang="ts">
import { onClickOutside } from '@vueuse/core'

const store = usePlayerStore()
const { setVolume, togglePlayPause, playNext } = useAudioPlayer()

useMediaSession()
useKeyboardShortcuts()

const widgetRef = ref<HTMLElement>()
const isExpanded = ref(false)
const showLyrics = ref(false)
let previousVolume = 0.8

const circumference = 2 * Math.PI * 16

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)
  }
}

function toggleExpanded() {
  isExpanded.value = !isExpanded.value
}

onClickOutside(widgetRef, () => {
  if (isExpanded.value) isExpanded.value = false
})
</script>

<style scoped>
/* ═══════════════════════════════════════
   POSITION
   ═══════════════════════════════════════ */
.mini-player {
  position: fixed;
  bottom: 1rem;
  right: max(1rem, calc((100vw - 80rem) / 2));
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* ═══════════════════════════════════════
   PILL
   ═══════════════════════════════════════ */
.mini-pill {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.375rem 0.5rem 0.375rem 0.5rem;
  border-radius: 9999px;
  background: hsl(20 8% 7% / 0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  cursor: pointer;
  transition: all 0.3s var(--ease-out-expo);
  box-shadow: 0 4px 20px hsl(0 0% 0% / 0.35);
}
.mini-pill:hover {
  background: hsl(20 8% 9% / 0.96);
}

/* Progress ring */
.pill-ring {
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
}
.pill-ring-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.pill-ring-progress {
  transition: stroke-dashoffset 0.3s ease;
}

/* Title */
.pill-title {
  font-size: 0.8rem;
  font-weight: 500;
  color: hsl(0 0% 100% / 0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

/* Play/Pause — white circle */
.pill-play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: white;
  border: none;
  color: hsl(20 8% 6%);
  cursor: pointer;
  transition: transform 0.15s var(--ease-out-expo);
  flex-shrink: 0;
}
.pill-play:hover { transform: scale(1.08); }
.pill-play:active { transform: scale(0.94); }

/* Next */
.pill-next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: hsl(0 0% 100% / 0.6);
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}
.pill-next:hover { color: white; }
.pill-next:disabled { opacity: 0.3; cursor: default; }

/* Expand chevron */
.pill-expand {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: hsl(0 0% 100% / 0.08);
  border: none;
  color: hsl(0 0% 100% / 0.5);
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}
.pill-expand:hover { color: hsl(0 0% 100% / 0.9); background: hsl(0 0% 100% / 0.15); }

/* ═══════════════════════════════════════
   PANEL
   ═══════════════════════════════════════ */
.mini-panel {
  width: 360px;
  margin-bottom: 0.5rem;
  border-radius: 1rem;
  background: hsl(20 8% 6% / 0.94);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  box-shadow: 0 8px 40px hsl(0 0% 0% / 0.4);
  overflow: hidden;
}

/* ─── Track + visualizer ─── */
.panel-top {
  padding: 1rem 1.25rem 0.5rem;
}
.panel-track {
  margin-bottom: 0.5rem;
}
.panel-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: white;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.panel-artist {
  font-size: 0.75rem;
  color: hsl(0 0% 100% / 0.35);
  margin-top: 0.125rem;
}
.panel-viz {
  opacity: 0.6;
}

/* ─── Progress ─── */
.panel-progress {
  padding: 0.5rem 1.25rem 0;
}
.panel-times {
  display: flex;
  justify-content: space-between;
  margin-top: 0.25rem;
  font-family: var(--font-mono, monospace);
  font-size: 0.625rem;
  color: hsl(0 0% 100% / 0.25);
  letter-spacing: 0.02em;
}

/* ─── Controls ─── */
.panel-controls {
  display: flex;
  justify-content: center;
  padding: 0.25rem 1.25rem 0.375rem;
}

/* ─── Volume ─── */
.panel-volume-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1.25rem 0.75rem;
}
.panel-vol-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: hsl(0 0% 100% / 0.35);
  cursor: pointer;
  padding: 0;
  transition: color 0.2s;
}
.panel-vol-btn:hover { color: hsl(0 0% 100% / 0.7); }

.volume-slider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 3px;
  background: hsl(0 0% 100% / 0.08);
  border-radius: 2px;
  outline: none;
}
.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 10px;
  background: hsl(0 0% 100% / 0.7);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.15s;
}
.volume-slider::-webkit-slider-thumb:hover { transform: scale(1.3); }
.volume-slider::-moz-range-thumb {
  width: 10px;
  height: 10px;
  background: hsl(0 0% 100% / 0.7);
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

/* ─── Lyrics ─── */
.panel-lyrics {
  max-height: 160px;
  overflow-y: auto;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid hsl(0 0% 100% / 0.04);
}
.panel-lyrics-text {
  font-family: var(--font-sans, sans-serif);
  font-size: 0.75rem;
  line-height: 1.6;
  color: hsl(0 0% 100% / 0.4);
  white-space: pre-wrap;
  margin: 0;
}

/* ─── Lyrics toggle ─── */
.panel-lyrics-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  width: 100%;
  padding: 0.375rem;
  border: none;
  border-top: 1px solid hsl(0 0% 100% / 0.04);
  background: none;
  color: hsl(0 0% 100% / 0.25);
  font-size: 0.65rem;
  cursor: pointer;
  transition: color 0.15s;
}
.panel-lyrics-toggle:hover {
  color: hsl(0 0% 100% / 0.5);
}

/* ─── Playlist ─── */
.panel-playlist {
  max-height: 200px;
  overflow-y: auto;
  border-top: 1px solid hsl(0 0% 100% / 0.04);
}

/* ═══════════════════════════════════════
   TRANSITIONS
   ═══════════════════════════════════════ */
.player-slide-enter-active,
.player-slide-leave-active {
  transition: transform 0.35s var(--ease-out-expo), opacity 0.35s var(--ease-out-expo);
}
.player-slide-enter-from,
.player-slide-leave-to {
  transform: translateY(16px);
  opacity: 0;
}

.panel-expand-enter-active,
.panel-expand-leave-active {
  transition: all 0.35s var(--ease-out-expo);
  overflow: hidden;
}
.panel-expand-enter-from,
.panel-expand-leave-to {
  max-height: 0;
  opacity: 0;
  transform: translateY(8px);
}
.panel-expand-enter-to,
.panel-expand-leave-from {
  max-height: 800px;
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════
   MOBILE
   ═══════════════════════════════════════ */
@media (max-width: 768px) {
  .mini-player {
    right: 0.75rem;
    left: 0.75rem;
    align-items: stretch;
  }
  .mini-panel { width: auto; }
  .pill-title { max-width: none; flex: 1; }
}
</style>
