import { readFileSync } from "node:fs";
import { COMPONENT_CONTRACTS, type DesignSystem } from "../../design-system/src/index.ts";
import { renderComponent } from "../../test/src/index.ts";
import { resolveThemeConfig, renderThemeCss } from "../../styles/src/theme.ts";
import { renderDocument } from "../../ssr/src/index.ts";
import { uiCss } from "../src/registry.ts";

// SSR baseline gallery. Provider regions and empty collection states intentionally keep their defaults.
export async function catalogFixtureDocument(system: DesignSystem, mode: string, page: number) {
  const entries = Object.entries(COMPONENT_CONTRACTS).slice(page * 16, (page + 1) * 16);
  const cards = await Promise.all(
    entries.map(async ([name, contract]) => {
      const body = await renderComponent(readFileSync(contract.source, "utf8"), {});
      return `<section class="sample" data-sample="${name}"><h2>${name}</h2>${body}</section>`;
    }),
  );
  const theme = resolveThemeConfig({ designSystem: { system }, default: mode });
  const query = `system=${system.id}&mode=${mode}`;
  return renderDocument({
    meta: { title: `${system.name} — Catalog ${page + 1}` },
    htmlAttrs: ` data-theme="${mode}"`,
    body: `<h1>Component catalog</h1><p>Default server-rendered states. Interactive core preview: <a href="/?${query}">open</a>.</p><nav>${Array.from({ length: 7 }, (_, i) => `<a href="/catalog?${query}&page=${i}">${i + 1}</a>`).join(" · ")}</nav><main>${cards.join("")}</main>`,
    extraHead: `<style>${uiCss()}${renderThemeCss(theme)}*{box-sizing:border-box}body{margin:0;padding:24px;background:var(--wrn-color-bg);color:var(--wrn-color-text);font-family:var(--wrn-font-sans)}main{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:24px;margin-top:24px}.sample{min-width:0;overflow:auto;padding:16px;border:1px solid var(--wrn-color-border)}h2{font-size:16px}a{color:inherit}</style>`,
    componentRecipeCss: theme.recipeCss,
  });
}