// Adapted from legacy singleProduct.vue's own fetch (GET /product/:id).
// The new API has no single-product-detail endpoint (only GET
// /catalog/products, the flat list) — apps/api is out of scope for this port,
// so this fetches the full list and finds the matching product client-side.
// Wasteful for a large catalog, but honest: no fabricated endpoint, no silent
// behavior change.
import { ref } from 'vue'
import { api, type ProductSummary } from '../api/client'

export function useProductDetail(id: string) {
  const loading = ref(false)
  const flag = ref(false)
  const notFound = ref(false)
  const productRef = ref<ProductSummary | null>(null)

  const load = async () => {
    loading.value = true
    try {
      const products = await api.listProducts()
      const found = products.find((p) => p.id === id) ?? null
      productRef.value = found
      notFound.value = !found
      flag.value = true
    } catch (e) {
      console.log(e)
    } finally {
      loading.value = false
    }
  }

  return { loading, flag, notFound, productRef, load }
}