import type { Metadata } from "next";
import { CatalogClient } from "@/components/catalog/catalog-client";
import { getCategories, getProducts } from "@/lib/headless/client";

export const metadata: Metadata = {
  title: "Catálogo",
  description: "Explora todos los productos de Ari Shopping.",
};

type CatalogPageProps = {
  searchParams: Promise<Record<string, string | string[] | undefined>>;
};

function single(value: string | string[] | undefined): string {
  return Array.isArray(value) ? value[0] ?? "" : value ?? "";
}

export default async function CatalogPage({ searchParams }: CatalogPageProps) {
  const params = await searchParams;
  const [products, categories] = await Promise.all([getProducts(), getCategories()]);

  const category = single(params.category) || "Todos";
  const collection = single(params.collection);
  const query = single(params.q);

  // Los links de navbar/tiles apuntan a categorias raiz (ej. "Mochilas y
  // morrales"), pero ningun producto tiene esa categoria asignada
  // directamente -- solo sus hijos ("Marvel", "Frozen", etc.). Este mapa
  // expande cada raiz-con-hijos al nombre real de sus hijos para que el
  // filtro siga funcionando por igualdad exacta de `product.category`.
  const categoryGroups: Record<string, string[]> = {};
  for (const node of categories) {
    if (node.parentId) continue;
    const children = categories.filter((child) => child.parentId === node.id);
    if (children.length > 0) {
      categoryGroups[node.name] = children.map((child) => child.name);
    }
  }

  return (
    <CatalogClient
      key={`${category}:${collection}:${query}`}
      products={products}
      categories={categories}
      categoryGroups={categoryGroups}
      initialCategory={category}
      initialCollection={collection}
      initialQuery={query}
    />
  );
}