"use client";

import { useEffect, useState } from "react";

type Item = { id: string; label: string; icon?: string };

// One request per list per page, shared between components that ask for it.
const cache = new Map<string, Item[]>();

/**
 * Reads a managed list from the admin panel, falling back to the values
 * passed in so a component still renders if the request hasn't landed.
 */
export function useTaxonomy(name: string, fallback: string[] = []): Item[] {
  const [items, setItems] = useState<Item[]>(
    () => cache.get(name) ?? fallback.map((label, i) => ({ id: `${i}`, label }))
  );

  useEffect(() => {
    if (cache.has(name)) {
      setItems(cache.get(name)!);
      return;
    }

    fetch(`/api/taxonomies?name=${name}`)
      .then((r) => (r.ok ? r.json() : null))
      .then((d: Item[] | null) => {
        if (!Array.isArray(d) || d.length === 0) return;
        cache.set(name, d);
        setItems(d);
      })
      .catch(() => {});
  }, [name]);

  return items;
}