<template>
  <div>
    <Header_full></Header_full>
    <main>
      <div>
        <div>IMAGE TEST</div>
        <NuxtImg :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>
    </main>
  </div>
    
</template>

<script setup>
  const runtimeConfig = useRuntimeConfig()
  const STRAPI_URL = "http://localhost:1337"
  //const STRAPI_URL = runtimeConfig.public.strapiUrl
  console.log("STRAPI_URL : ",STRAPI_URL) // "Mon site Nuxt"

  // 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: files, error } = await useFetch(
    () => `${STRAPI_URL}/api/upload/files?pagination[pageSize]=1&sort=createdAt:desc`
  )

  const imageUrl = computed(() => {
    const file = files.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}`
  })
  console.log("imageUrl : ",imageUrl)


  if (error.value) {
    console.error('Erreur en récupérant les fichiers Strapi :', error.value)
  }

  const appConfig = useAppConfig()
  console.log("test 3 : ",appConfig.title) // "Mon site Nuxt"
</script>

<style>


</style>