import { createFileRoute } from '@tanstack/react-router';
import ProductsListing from '@/components/ProductsListing';
import { assertCached } from '@/lib/assertCached';
import { breadcrumbSchema, collectionSchema } from '@/lib/schemas';
import {
  categoriesQueryOptions,
  productsQueryOptions,
  SHOP_DEFAULT_PRODUCTS_PARAMS,
} from '@/hooks/useWooCommerce';
import { headLang, makeT, localizePath, SITE_URL } from '@/lib/i18n';

export const Route = createFileRoute('/shop')({
  // Prime both the categories sidebar and the first page of the default
  // (popular, no filters) product grid on the server so the shop renders
  // fully hydrated with zero client refetch on hydration.
  loader: async ({ context }) => {
    const catsOpts = categoriesQueryOptions();
    const prodOpts = productsQueryOptions(SHOP_DEFAULT_PRODUCTS_PARAMS);
    const [, prodRes] = await Promise.all([
      context.queryClient.ensureQueryData(catsOpts),
      context.queryClient.ensureQueryData(prodOpts),
    ]);
    assertCached(context.queryClient, catsOpts.queryKey, 'categories');
    assertCached(context.queryClient, prodOpts.queryKey, 'products[shop-default]');
    return { products: prodRes?.products ?? [] };
  },
  head: (ctx) => {
    const { loaderData } = ctx;
    const lang = headLang(ctx);
    const t = makeT(lang);
    const title = t('Webshop — Alle Producten | Peptidewinkel', 'Shop — All Products | Peptidewinkel');
    const description = t(
      'Bekijk onze catalogus research-grade peptiden, GLP-1 analogen, HGH en ondersteunende producten. Lab-getest en discreet verzonden door Peptidewinkel.',
      'Browse our catalog of research-grade peptides, GLP-1 analogues, HGH and supporting products. Lab-tested and shipped discreetly by Peptidewinkel.',
    );
    const url = `${SITE_URL}${localizePath('/shop', lang)}`;
    return {
      meta: [
        { title },
        { name: 'description', content: description },
        { property: 'og:title', content: title },
        { property: 'og:description', content: description },
        { property: 'og:type', content: 'website' },
        { property: 'og:url', content: url },
        { property: 'og:site_name', content: 'Peptidewinkel' },
        { property: 'og:locale', content: lang === 'en' ? 'en_US' : 'nl_NL' },
        { name: 'twitter:card', content: 'summary_large_image' },
        { name: 'twitter:title', content: title },
        { name: 'twitter:description', content: description },
      ],
      links: [
        { rel: 'canonical', href: url },
        { rel: 'alternate', hrefLang: 'nl-NL', href: `${SITE_URL}/shop` },
        { rel: 'alternate', hrefLang: 'en', href: `${SITE_URL}${localizePath('/shop', 'en')}` },
        { rel: 'alternate', hrefLang: 'x-default', href: `${SITE_URL}/shop` },
      ],
      scripts: [
        ...collectionSchema(t('Webshop', 'Shop'), '/shop', loaderData?.products ?? [], description, lang).map((s) => ({
          type: 'application/ld+json',
          children: JSON.stringify(s),
        })),
        {
          type: 'application/ld+json',
          children: JSON.stringify(
            breadcrumbSchema([
              { name: t('Home', 'Home'), url: '/' },
              { name: t('Webshop', 'Shop'), url: '/shop' },
            ]),
          ),
        },
      ],
    };
  },
  component: ShopPage,
});

function ShopPage() {
  return <ProductsListing />;
}