// The real GET /customers/:id/orders endpoint returns OrderItem rows with
// only `productVariantId` (no nested product/variant title) — this joins
// against the already-existing GET /catalog/products list client-side rather
// than touching apps/api to add an include.
import { ref } from 'vue'
import { api } from '../api/client'

export interface VariantLookup {
  productTitle: string
  variantTitle: string
  imageUrl?: string
}

const cache = ref<Map<string, VariantLookup> | null>(null)

async function ensureLoaded() {
  if (cache.value) return cache.value
  const products = await api.listProducts()
  const map = new Map<string, VariantLookup>()
  for (const product of products) {
    for (const variant of product.variants) {
      map.set(variant.id, {
        productTitle: product.title,
        variantTitle: variant.title,
        imageUrl: product.images[0]?.url,
      })
    }
  }
  cache.value = map
  return map
}

export function useOrderItemProduct() {
  const lookup = async (productVariantId: string): Promise<VariantLookup | undefined> => {
    const map = await ensureLoaded()
    return map.get(productVariantId)
  }
  return { lookup }
}