<template>
  <div class="section-padding">
    <div class="container-content">
      <header class="mb-12 text-center">
        <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 mx-auto max-w-2xl text-white/60">
          {{ content?.description }}
        </p>
      </header>

      <!-- 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>
  </div>
</template>

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

const { data: content } = await usePageContent('ecouter')

useHead({
  title: content.value?.meta?.title ?? 'Écouter',
})

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 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);
}
</style>
