<template>

  <!-- Cas avec “cadre couleur” full page mais contenu dans marge -->
  <PageSection tone="dark" :padded="true" content-size="default">
    <DsHeading as="h1" size="">CONCERTS À VENIR...</DsHeading>
    <ConcertCard
      id="1"
      title="TITRE DU CONCERT EN MAJUSCULE"
      venue="Nom du lieu, éventuellement de la salle"
      dateISO="2026-01-15T20:30:00+01:00"
      dateLabel="Jeudi 15 janvier 2026 — 20h30"
      description="Description du concert assez courte qui reprend l'essentiel, les artistes... On pourra écrire un nombre de lettres limitées."
      imageUrl="https://picsum.photos/id/56/500/700"
      imageAlt="Orchestre sur scène"
      ctaHref="/concert[id]"
      detailsHref="/concerts/concert_template"
    />
  </PageSection>

  <!-- Cas normal : toute la section est contenu dans les marges -->
  <PageSection :padded="true" content-size="default">
    <DsHeading as="h1" size="">PAR TOUS ET POUR TOUS</DsHeading>
  </PageSection>

  <div>
    <div>IMAGE TEST</div>
    <NuxtImg v-if="imageUrl" :src="imageUrl" width="1300" height="600" sizes="100vw sm:50vw md:400px" densities="x1 x2" :modifiers="{ roundCorner: '0:100' }" />
    <!-- <img :src="imageUrl" alt="" style="max-width: 100%; height: auto;"> -->
  </div>


</template>

<script setup>
  import { onMounted, computed } from 'vue'
  import { clientLog } from '~/utils/clientLog'
  import DsHeading from '@root/design-system/primitives/DsHeading.vue'

  const runtimeConfig = useRuntimeConfig()

  const STRAPI_URL = runtimeConfig.public.strapiUrl
  console.log("STRAPI_URL : ",STRAPI_URL)
  

  // Config app (pour ton SEO)
  const config = useAppConfig()
  useSeoMeta({
    title: config.title
  })

  // On récupère le fichier le plus récent de la Media Library Strapi
  const { data, error } = await useFetch(
    () => `${STRAPI_URL}/api/upload/files?pagination[pageSize]=1&sort=createdAt:desc`
  )

  const imageUrl = computed(() => {
    const file = data.value?.[0]
    console.log("file : ",file)
    if (!file) return null

    // Si Strapi renvoie une URL absolue (S3/OVH)
    if (file.url?.startsWith('http')) {
      return file.url
    }

    // Si jamais c'était une URL relative
    return `${STRAPI_URL}${file.url}`
  })


  if (error.value) {
    console.error('Erreur en récupérant les fichiers Strapi :', error.value)
    clientLog('error', 'Erreur en récupérant les fichiers Strapi', {
      endpoint: `${STRAPI_URL}/api/upload/files?pagination[pageSize]=1&sort=createdAt:desc`,
      error: error.value?.message || error.value
    })
  }

  const appConfig = useAppConfig()
  console.log("test 3 : ",appConfig.title) // "Mon site Nuxt"
  onMounted(() => {
    clientLog('info', 'test de log depuis vuejs', {  })
    clientLog('info', `STRAPI_URL : ${STRAPI_URL}`, { strapiUrl: STRAPI_URL })
  })
</script>

<style>


</style>
