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

    <template v-if="data">
      <AdminFormSection title="Identité" open>
        <AdminFieldText v-model="data.identity.name" label="Nom du site" />
        <AdminFieldTextarea v-model="data.identity.description" label="Description" :rows="3" />
        <AdminFieldText v-model="data.identity.url" label="URL" />
      </AdminFormSection>

      <AdminFormSection title="Navigation" open>
        <AdminFieldList
          v-model="data.navigation"
          label="Liens de navigation"
          add-label="Ajouter un lien"
          :default-item="() => ({ label: '', to: '/' })"
        >
          <template #default="{ item, update }">
            <div class="flex gap-2 flex-1">
              <input
                :value="item.label"
                class="admin-input flex-1"
                placeholder="Label"
                @input="update({ ...item, label: ($event.target as HTMLInputElement).value })"
              />
              <input
                :value="item.to"
                class="admin-input w-32"
                placeholder="/chemin"
                @input="update({ ...item, to: ($event.target as HTMLInputElement).value })"
              />
            </div>
          </template>
        </AdminFieldList>
      </AdminFormSection>

      <AdminFormSection title="Pied de page">
        <AdminFieldText v-model="data.footer.credits" label="Crédits" />
        <AdminFieldList
          v-model="data.footer.links"
          label="Liens"
          add-label="Ajouter un lien"
          :default-item="() => ({ label: '', to: '/' })"
        >
          <template #default="{ item, update }">
            <div class="flex gap-2 flex-1">
              <input
                :value="item.label"
                class="admin-input flex-1"
                placeholder="Label"
                @input="update({ ...item, label: ($event.target as HTMLInputElement).value })"
              />
              <input
                :value="item.to"
                class="admin-input w-32"
                placeholder="/chemin"
                @input="update({ ...item, to: ($event.target as HTMLInputElement).value })"
              />
            </div>
          </template>
        </AdminFieldList>
      </AdminFormSection>

      <AdminFormSection title="GrateWizard">
        <AdminFieldText v-model="data.gratewizard.url" label="URL de l'application" />
      </AdminFormSection>
    </template>
  </div>
</template>

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

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

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

<style scoped>
.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;
}

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