import type { SiteDesign } from '../state/SiteDesignContext';
import { templateComponentToTreeNode } from '../templates/apply-template';
import { flattenTreeForCraft } from '../utils/craft-tree';
import { exportToHtml } from '../utils/html-export';
import type { SectionDef } from './catalog';

/** Full HTML document of one section rendered with the site's own tokens and
 *  fonts, for a sandboxed (script-less) `<iframe srcdoc>` thumbnail. Uses the
 *  exact static export path, so it matches what publishing would produce. */
export function buildSectionPreviewDoc(def: SectionDef, design: SiteDesign): string {
  const flat = flattenTreeForCraft(templateComponentToTreeNode(def.tree));
  const nodes: Record<string, unknown> = { ...flat.nodes };
  // exportToHtml walks from ROOT; hang the section under a synthetic one.
  const rootChildren = [flat.rootNodeId];
  (nodes[flat.rootNodeId] as any).parent = 'ROOT';
  nodes.ROOT = {
    type: { resolvedName: 'Container' }, isCanvas: true, props: {}, displayName: 'Container',
    custom: {}, hidden: false, parent: null, nodes: rootChildren, linkedNodes: {},
  };
  return exportToHtml(JSON.stringify(nodes), { design, includeFonts: true }).html;
}