// composables/useFetch.js — abstraction robuste des appels réseau avec cycle de vie complet
import { ref, watchEffect, toValue } from 'vue'

// toValue() accepte indifféremment une valeur brute, une ref, ou une fonction -> API flexible
export function useFetch(url) {
  const donnees = ref(null)
  const erreur = ref(null)
  const enChargement = ref(true)

  watchEffect(async (onCleanup) => {
    donnees.value = null
    erreur.value = null
    enChargement.value = true

    const controleur = new AbortController()
    // onCleanup s'exécute avant chaque nouvelle exécution ET au démontage : annule la requête obsolète
    onCleanup(() => controleur.abort())

    try {
      const reponse = await fetch(toValue(url), { signal: controleur.signal })
      if (!reponse.ok) throw new Error(`HTTP ${reponse.status}`)
      donnees.value = await reponse.json()
    } catch (e) {
      if (e.name !== 'AbortError') erreur.value = e
    } finally {
      enChargement.value = false
    }
  })

  return { donnees, erreur, enChargement }
}

// Utilisation : `useFetch(() => \`/api/produits/${id.value}\`)` refait la requête si id change

// composables/useDebounce.js — retarde la mise à jour d'une valeur réactive
import { ref, watch } from 'vue'

export function useDebounce(source, delaiMs = 300) {
  const valeurDebounced = ref(source.value)
  let timer = null

  watch(source, (nouvelleValeur) => {
    clearTimeout(timer)
    timer = setTimeout(() => {
      valeurDebounced.value = nouvelleValeur
    }, delaiMs)
  })

  return valeurDebounced
}

// Utilisation :
// const recherche = ref('')
// const rechercheDebounced = useDebounce(recherche, 400)
// watch(rechercheDebounced, (q) => lancerRecherche(q))

// composables/useLocalStorage.js — état réactif synchronisé avec localStorage
import { ref, watch } from 'vue'

export function useLocalStorage(cle, valeurParDefaut) {
  const donneesStockees = localStorage.getItem(cle)
  const valeur = ref(donneesStockees ? JSON.parse(donneesStockees) : valeurParDefaut)

  watch(valeur, (nv) => {
    localStorage.setItem(cle, JSON.stringify(nv))
  }, { deep: true })

  return valeur
}

// const preferences = useLocalStorage('preferences', { theme: 'clair', langue: 'fr' })
// preferences.value.theme = 'sombre'  -> automatiquement persisté

// composables/useMousePosition.js — état lié à un événement global, avec cleanup automatique
import { ref, onMounted, onUnmounted } from 'vue'

export function useMousePosition() {
  const x = ref(0)
  const y = ref(0)

  function maj(event) {
    x.value = event.clientX
    y.value = event.clientY
  }

  onMounted(() => window.addEventListener('mousemove', maj))
  onUnmounted(() => window.removeEventListener('mousemove', maj))

  return { x, y }
}

// composables/usePagination.js — logique métier pure, réutilisable sur n'importe quelle liste
import { ref, computed } from 'vue'

export function usePagination(liste, taillePage = 10) {
  const pageCourante = ref(1)

  const nombrePages = computed(() => Math.max(1, Math.ceil(liste.value.length / taillePage)))

  const elementsPage = computed(() => {
    const debut = (pageCourante.value - 1) * taillePage
    return liste.value.slice(debut, debut + taillePage)
  })

  function pageSuivante() {
    if (pageCourante.value < nombrePages.value) pageCourante.value++
  }
  function pagePrecedente() {
    if (pageCourante.value > 1) pageCourante.value--
  }

  return { pageCourante, nombrePages, elementsPage, pageSuivante, pagePrecedente }
}