<template>
  <div>
    <div class="flex items-center justify-between mb-6">
      <h1 class="font-display text-2xl font-bold text-white">Chansons</h1>
      <AdminSaveButton :saving="saving" :saved="saved" @save="save" />
    </div>

    <template v-if="config">
      <AdminFormSection title="Métadonnées des chansons" open>
        <div
          v-for="(song, i) in config.songs"
          :key="i"
          class="song-row"
        >
          <span class="song-num">{{ i + 1 }}</span>
          <div class="flex-1 grid gap-2 sm:grid-cols-2">
            <input
              v-model="song.title"
              class="admin-input"
              placeholder="Titre"
            />
            <input
              v-model="song.file"
              class="admin-input"
              placeholder="/audio/fichier.mp3"
            />
          </div>
        </div>
      </AdminFormSection>
    </template>
  </div>
</template>

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

const { data: config } = await useFetch('/api/content/config')
const saving = ref(false)
const saved = ref(false)

async function save() {
  saving.value = true
  saved.value = false
  try {
    await $fetch('/api/admin/content/config', {
      method: 'PUT',
      body: config.value,
    })
    saved.value = true
    setTimeout(() => { saved.value = false }, 2000)
  }
  finally {
    saving.value = false
  }
}
</script>

<style scoped>
.song-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  border-bottom: 1px solid hsl(20 8% 10%);
}

.song-num {
  font-family: var(--font-mono, monospace);
  font-size: 0.8rem;
  color: hsl(20 8% 40%);
  width: 1.25rem;
  text-align: right;
}

.admin-input {
  padding: 0.375rem 0.5rem;
  border-radius: 0.375rem;
  border: 1px solid hsl(20 8% 18%);
  background: hsl(20 8% 6%);
  color: white;
  font-size: 0.8rem;
  width: 100%;
}

.admin-input:focus {
  outline: none;
  border-color: hsl(12 76% 48% / 0.5);
}
</style>
