<template>
  <div class="relative overflow-hidden section-padding">
    <!-- Shadok danseur: character dancing with music notes -->
    <svg class="shadok-danseur" viewBox="0 0 240 300" fill="none" aria-hidden="true">
      <!-- Body (dynamic pose, leaning) -->
      <ellipse cx="120" cy="155" rx="38" ry="46" fill="currentColor" opacity="0.85"/>
      <!-- Head (tilted with joy) -->
      <ellipse cx="125" cy="92" rx="24" ry="23" fill="currentColor" opacity="0.8"/>
      <!-- Eyes (happy, squinted) -->
      <path d="M114 88 Q118 84 122 88" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none" opacity="0.4"/>
      <path d="M130 88 Q134 84 138 88" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none" opacity="0.4"/>
      <!-- Big smile -->
      <path d="M116 100 Q125 108 134 100" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none" opacity="0.35"/>
      <!-- Arms thrown up (dancing) -->
      <line x1="85" y1="140" x2="50" y2="100" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
      <line x1="155" y1="140" x2="190" y2="105" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
      <!-- Hands -->
      <circle cx="50" cy="98" r="4" fill="currentColor" opacity="0.4"/>
      <circle cx="190" cy="103" r="4" fill="currentColor" opacity="0.4"/>
      <!-- Legs (one kicked up) -->
      <line x1="105" y1="198" x2="80" y2="255" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
      <line x1="135" y1="198" x2="170" y2="240" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
      <!-- Feet -->
      <path d="M80 255 L68 258 M80 255 L75 261" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" opacity="0.5"/>
      <path d="M170 240 L180 238 M170 240 L175 246" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" opacity="0.5"/>
      <!-- Music notes floating around -->
      <text x="42" y="82" fill="currentColor" opacity="0.3" font-size="18">&#9834;</text>
      <text x="195" y="88" fill="currentColor" opacity="0.25" font-size="16">&#9835;</text>
      <text x="60" y="65" fill="currentColor" opacity="0.2" font-size="14">&#9833;</text>
      <text x="180" y="72" fill="currentColor" opacity="0.2" font-size="20">&#9834;</text>
    </svg>

    <!-- Shadok DJ: character with headphones behind a turntable -->
    <svg class="shadok-dj" viewBox="0 0 260 300" fill="none" aria-hidden="true">
      <!-- Body -->
      <ellipse cx="130" cy="155" rx="42" ry="50" fill="currentColor" opacity="0.85"/>
      <!-- Head -->
      <circle cx="130" cy="88" r="26" fill="currentColor" opacity="0.8"/>
      <!-- Headphones band -->
      <path d="M104 78 Q130 55 156 78" stroke="currentColor" stroke-width="4" stroke-linecap="round" fill="none" opacity="0.6"/>
      <!-- Headphone ear pads -->
      <ellipse cx="102" cy="85" rx="8" ry="12" fill="currentColor" opacity="0.5"/>
      <ellipse cx="158" cy="85" rx="8" ry="12" fill="currentColor" opacity="0.5"/>
      <!-- Eyes (cool, half-lidded) -->
      <ellipse cx="120" cy="85" rx="5" ry="3" fill="currentColor" opacity="0.25"/>
      <ellipse cx="140" cy="85" rx="5" ry="3" fill="currentColor" opacity="0.25"/>
      <circle cx="121" cy="86" r="1.8" fill="currentColor" opacity="0.5"/>
      <circle cx="141" cy="86" r="1.8" fill="currentColor" opacity="0.5"/>
      <!-- Mouth (grin) -->
      <path d="M122 98 Q130 104 138 98" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none" opacity="0.35"/>
      <!-- Arms reaching to turntable -->
      <line x1="90" y1="150" x2="55" y2="195" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
      <line x1="170" y1="150" x2="205" y2="195" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
      <!-- Turntable body -->
      <rect x="30" y="200" width="200" height="18" rx="4" fill="currentColor" opacity="0.4"/>
      <!-- Turntable platter -->
      <ellipse cx="130" cy="200" rx="55" ry="15" fill="currentColor" opacity="0.25"/>
      <ellipse cx="130" cy="200" rx="55" ry="15" stroke="currentColor" stroke-width="1.5" fill="none" opacity="0.35"/>
      <!-- Record center -->
      <circle cx="130" cy="200" r="5" fill="currentColor" opacity="0.4"/>
      <!-- Tone arm -->
      <line x1="195" y1="188" x2="150" y2="195" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.5"/>
      <circle cx="195" cy="188" r="3" fill="currentColor" opacity="0.35"/>
      <!-- Legs -->
      <line x1="115" y1="202" x2="105" y2="260" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
      <line x1="145" y1="202" x2="155" y2="260" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" opacity="0.6"/>
    </svg>

    <div class="container-content">
      <!-- Hero section with book cover -->
      <div class="mb-12 grid items-center gap-8 md:grid-cols-2">
        <div class="book-cover-wrapper">
          <div class="book-cover-3d">
            <img
              :src="homeContent?.book.coverImage"
              :alt="homeContent?.book.coverAlt"
              class="book-cover-img"
            />
          </div>
        </div>

        <div class="text-center md:text-left">
          <p class="mb-2 font-mono text-sm tracking-widest text-accent uppercase">{{ content?.kicker }}</p>
          <h1 class="page-title font-display font-bold tracking-tight text-white">
            {{ content?.title }}
          </h1>
          <p class="mt-4 text-white/60">
            {{ content?.description }}
          </p>
          <div class="mt-6 flex flex-col gap-3 sm:flex-row sm:gap-4 justify-center md:justify-start">
            <UiBaseButton @click="showBookPlayer = true">
              <div class="i-lucide-play mr-2 h-5 w-5" />
              Présentation musicale
            </UiBaseButton>
            <UiBaseButton variant="accent" @click="showPdfReader = true">
              <div class="i-lucide-book-open mr-2 h-5 w-5" />
              Lire le livre
            </UiBaseButton>
          </div>
        </div>
      </div>

      <!-- Search + view toggle -->
      <div class="mb-6 flex items-center justify-between gap-4">
        <div class="relative flex-1 max-w-md">
          <div class="i-lucide-search absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-white/30" />
          <input
            v-model="search"
            type="text"
            :placeholder="content?.searchPlaceholder"
            class="w-full rounded-lg bg-surface border border-white/8 py-2 pl-10 pr-4 text-sm text-white placeholder:text-white/30 focus:border-primary/50 focus:outline-none"
          >
        </div>

        <div class="flex items-center gap-1 rounded-lg bg-surface p-1">
          <button
            class="rounded p-1.5 transition-colors"
            :class="viewMode === 'list' ? 'bg-white/10 text-white' : 'text-white/40'"
            @click="viewMode = 'list'"
          >
            <div class="i-lucide-list h-4 w-4" />
          </button>
          <button
            class="rounded p-1.5 transition-colors"
            :class="viewMode === 'grid' ? 'bg-white/10 text-white' : 'text-white/40'"
            @click="viewMode = 'grid'"
          >
            <div class="i-lucide-grid-3x3 h-4 w-4" />
          </button>
        </div>
      </div>

      <!-- Song list -->
      <div v-if="viewMode === 'list'" class="flex flex-col gap-2">
        <SongItem
          v-for="song in filteredSongs"
          :key="song.id"
          :song="song"
        />
      </div>

      <!-- Song grid -->
      <div v-else class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
        <SongItem
          v-for="song in filteredSongs"
          :key="song.id"
          :song="song"
        />
      </div>

      <p v-if="filteredSongs.length === 0" class="text-center text-white/40 py-12">
        {{ content?.noResults }}
      </p>
    </div>

    <BookPlayer v-model="showBookPlayer" />
    <BookPdfReader v-model="showPdfReader" />
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  layout: 'default',
})

const { data: content } = await usePageContent('en-musique')
const { data: homeContent } = await usePageContent('home')

useSeoPage({
  title: content.value?.meta?.title ?? 'En musique — Le Librodrome',
  description: 'Neuf chansons qui racontent le livre « Une économie du don ». Écoute libre, paroles et présentation musicale guidée.',
  image: '/images/Couv-Economie-du-don.jpg',
})

const store = usePlayerStore()
const bookData = useBookData()
const { loadFullPlaylist } = usePlaylist()

await bookData.init()

// Switch to free mode
store.setMode('free')
await loadFullPlaylist()

const search = ref('')
const viewMode = ref<'list' | 'grid'>('list')
const showBookPlayer = ref(false)
const showPdfReader = ref(false)

const filteredSongs = computed(() => {
  const songs = bookData.getSongs()
  if (!search.value.trim()) return songs

  const q = search.value.toLowerCase()
  return songs.filter(
    s => s.title.toLowerCase().includes(q)
      || s.artist.toLowerCase().includes(q)
      || s.tags.some(t => t.toLowerCase().includes(q)),
  )
})
</script>

<style scoped>
.page-title {
  font-size: clamp(2rem, 5vw, 2.75rem);
}

.book-cover-wrapper {
  perspective: 800px;
  display: flex;
  justify-content: center;
}

.book-cover-3d {
  aspect-ratio: 3 / 4;
  border-radius: 0.75rem;
  overflow: hidden;
  border: 1px solid hsl(var(--color-text) / 0.1);
  box-shadow:
    0 12px 40px hsl(var(--color-text) / 0.15),
    0 0 0 1px hsl(var(--color-text) / 0.08);
  transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1),
              box-shadow 0.5s ease;
  max-width: 280px;
}

.book-cover-3d:hover {
  transform: rotateY(-8deg) rotateX(3deg) scale(1.02);
  box-shadow:
    12px 16px 48px hsl(var(--color-text) / 0.2),
    0 0 0 1px hsl(var(--color-primary) / 0.2);
}

.book-cover-img {
  width: 200%;
  height: 100%;
  object-fit: cover;
  transform: translateX(-50%);
}

.shadok-danseur {
  position: absolute;
  left: 2%;
  top: 3%;
  width: clamp(100px, 14vw, 200px);
  opacity: 0.28;
  pointer-events: none;
  color: hsl(var(--color-primary));
  animation: shadok-float-danseur 7s ease-in-out infinite;
}

.shadok-dj {
  position: absolute;
  right: 2%;
  top: 3%;
  width: clamp(120px, 16vw, 230px);
  opacity: 0.3;
  pointer-events: none;
  color: hsl(var(--color-accent));
  animation: shadok-float-dj 8s ease-in-out infinite;
}

@keyframes shadok-float-danseur {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-8px) rotate(2deg); }
  75% { transform: translateY(-4px) rotate(-2deg); }
}

@keyframes shadok-float-dj {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@media (max-width: 768px) {
  .shadok-danseur { display: none; }
  .shadok-dj { display: none; }
}
</style>
