<!-- components/CarteProduit.vue -->
<script setup lang="ts">
import { computed } from 'vue'

// Types explicites pour les props : meilleure inférence qu'avec l'objet runtime
interface Produit {
  id: number
  nom: string
  prix: number
  stock: number
}

interface Props {
  produit: Produit
  enPromotion?: boolean // ? = optionnel
}

// withDefaults pour typer les valeurs par défaut proprement
const props = withDefaults(defineProps<Props>(), {
  enPromotion: false,
})

// defineEmits typé : chaque événement a une signature stricte de payload
const emit = defineEmits<{
  ajouterPanier: [id: number, quantite: number]
  survol: [id: number]
}>()

const disponible = computed<boolean>(() => props.produit.stock > 0)

function ajouter(quantite: number): void {
  if (!disponible.value) return
  emit('ajouterPanier', props.produit.id, quantite)
}
</script>

<template>
  <article @mouseenter="emit('survol', produit.id)">
    <h3>{{ produit.nom }}</h3>
    <button :disabled="!disponible" @click="ajouter(1)">Ajouter</button>
  </article>
</template>

// composables/useFetch.ts — composable générique, typé sur la forme des données attendues
import { ref, type Ref } from 'vue'

interface UseFetchResult<T> {
  donnees: Ref<T | null>
  erreur: Ref<Error | null>
  enChargement: Ref<boolean>
}

export function useFetch<T>(url: string): UseFetchResult<T> {
  const donnees = ref<T | null>(null) as Ref<T | null>
  const erreur = ref<Error | null>(null)
  const enChargement = ref(true)

  fetch(url)
    .then((r) => {
      if (!r.ok) throw new Error(`HTTP ${r.status}`)
      return r.json()
    })
    .then((d: T) => { donnees.value = d })
    .catch((e: Error) => { erreur.value = e })
    .finally(() => { enChargement.value = false })

  return { donnees, erreur, enChargement }
}

// Utilisation avec inférence complète :
// const { donnees } = useFetch<Produit[]>('/api/produits')
// donnees.value?.[0].prix -> typé number, autocomplété par l'IDE

// stores/panier.ts — Pinia typé de bout en bout (état, getters, actions)
import { defineStore } from 'pinia'

interface ArticlePanier {
  id: number
  nom: string
  prix: number
  quantite: number
}

interface EtatPanier {
  articles: ArticlePanier[]
}

export const usePanierStore = defineStore('panier', {
  state: (): EtatPanier => ({ articles: [] }),
  getters: {
    total: (state): number => state.articles.reduce((s, a) => s + a.prix * a.quantite, 0),
  },
  actions: {
    ajouter(article: ArticlePanier): void {
      this.articles.push(article)
    },
  },
})

// InjectionKey typé pour provide/inject sûr
import { type InjectionKey, provide, inject, ref } from 'vue'

interface ContexteTheme {
  theme: 'clair' | 'sombre'
  basculer: () => void
}

const ThemeKey: InjectionKey<ContexteTheme> = Symbol('theme')

// provide('themeInvalide', {}) déclencherait maintenant une erreur TypeScript à la compilation
function fournirTheme() {
  const theme = ref<'clair' | 'sombre'>('clair')
  provide(ThemeKey, {
    theme: theme.value,
    basculer: () => { theme.value = theme.value === 'clair' ? 'sombre' : 'clair' },
  })
}

function useTheme(): ContexteTheme {
  const contexte = inject(ThemeKey)
  if (!contexte) throw new Error('ThemeKey non fourni par un ancêtre')
  return contexte
}

// Typer un template ref (référence directe à un élément DOM ou un composant enfant)
import { ref, onMounted, useTemplateRef } from 'vue'

const champRecherche = useTemplateRef<HTMLInputElement>('champRecherche')

onMounted(() => {
  champRecherche.value?.focus() // optional chaining car peut être null avant montage
})