<template>
    <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' }" /> -->
    </div>
</template>

<script setup>
    import { onMounted, computed } from 'vue'
    import { clientLog } from '~/utils/clientLog'
    
    // Layout utilisé
    definePageMeta({ layout: 'pageheaderfull' })
    const runtimeConfig = useRuntimeConfig()
    //const STRAPI_URL = "http://localhost:1337"
    const STRAPI_URL = runtimeConfig.public.strapiUrl

    // Config app (pour 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("Bienvenue : ",appConfig.title)
</script>

<style lang="scss">


</style>