/**
 * @packageDocumentation
 * @module @knapsack/rendering-utils/blocks-to-html
 * @description Convert Knapsack Blocks to html
 */

import { type BlockConfig } from '@knapsack/types';
import {
  convertTipTapJsonToHtml,
  type JSONContent,
} from '@knapsack/tiptap-utils';
import os from 'node:os';
import domPurify from 'isomorphic-dompurify';

const EOL = os.EOL || '\n';

async function mdToHtml(md: string): Promise<string> {
  const { marked } = await import('marked');
  return marked.parse(md);
}

// Utility to escape HTML attribute values
function escapeAttr(val = '') {
  return val
    .replace(/&/g, '&amp;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;');
}

// TipTap's generateHTML throws (e.g. RangeError: Unknown node type) when
// stored prose JSON references a node type not registered in the schema.
// That's schema drift, not a programming bug — treat it like the video
// guard below and degrade to empty content so the rest of the document
// still renders.
function tiptapToHtmlSafe(
  content: JSONContent,
  blockId: string,
  blockType: string,
): string {
  try {
    return convertTipTapJsonToHtml(content);
  } catch (err) {
    console.error(
      `[blocks-to-html] TipTap render failed for block "${blockId}" (${blockType}):`,
      err,
    );
    return '';
  }
}

const GUIDELINE_LABELS = {
  do: 'Do',
  dont: "Don't",
  caution: 'Caution',
} as const;

async function blockToHtml(b: BlockConfig): Promise<string> {
  if (!b.data) return '';
  switch (b.blockType) {
    case 'code-snippet':
    case 'table':
    case 'text-editor':
      return tiptapToHtmlSafe(b.data.content, b.id, b.blockType);
    case 'guidelines': {
      const guidelines = b.data.guidelines ?? [];
      if (guidelines.length === 0) return '';
      const sections = guidelines
        .map((g) => {
          const label = GUIDELINE_LABELS[g.type] ?? g.type;
          const parts: string[] = [`<h4>${escapeAttr(label)}</h4>`];
          if (g.image?.src) {
            const alt = g.image.alt ?? g.image.title ?? label;
            parts.push(
              `<img src="${escapeAttr(g.image.src)}" alt="${escapeAttr(alt)}" />`,
            );
          }
          if (g.content) {
            const inner = tiptapToHtmlSafe(
              g.content,
              `${b.id}--${g.id}`,
              b.blockType,
            );
            if (inner) parts.push(inner);
          }
          return `<section data-guideline-type="${escapeAttr(g.type)}">${parts.join('')}</section>`;
        })
        .join(EOL);
      return sections;
    }
    case 'markdown-block':
      return mdToHtml(
        Array.isArray(b.data.md) ? b.data.md.join(EOL) : (b.data.md ?? ''),
      );
    case 'divider-block':
      return '<hr />';
    case 'callout': {
      const type = `<span>${escapeAttr(b.data.type)}</span>`;
      const content = tiptapToHtmlSafe(b.data.content, b.id, b.blockType);
      return `<blockquote>${type}: ${content}</blockquote>`;
    }
    case 'image-block':
      return (
        b.data.images
          ?.map(
            (i) =>
              `<img src="${escapeAttr(i.src)}" alt="${escapeAttr(
                i.caption ?? '',
              )}" />`,
          )
          .join(EOL + EOL) ?? ''
      );
    case 'video': {
      const url = b.data.video?.url;
      return url ? `<video src="${escapeAttr(url)}" />` : '';
    }
    case 'files-list':
      return b.data.files
        .map((f) => {
          const ext = f.toLowerCase().split('.').pop();
          if (['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(ext ?? '')) {
            return `<img src="${escapeAttr(f)}" />${EOL}`;
          }
          return `<p><a href="${escapeAttr(f)}">${escapeAttr(f)}</a></p>`;
        })
        .join(EOL);
    case 'figma-block':
      return `<iframe src="${escapeAttr(b.data.url)}" />`;
    case 'shortcut-tiles':
      return b.data.shortcuts
        .map((s) => {
          return [
            `<strong>${escapeAttr(s.title)}</strong>`,
            escapeAttr(s.description),
            s.link
              ? `<a href="${escapeAttr(s.link.path)}">${escapeAttr(
                  s.link.name ?? s.link.path,
                )}</a>`
              : null,
            s.image ? `<img src="${escapeAttr(s.image)}" />` : null,
          ]
            .filter(Boolean)
            .join(EOL);
        })
        .join(EOL);
    case 'abstract-block':
    case 'adobe-xd-block':
    case 'airtable-block':
    case 'framer-cloud-block':
    case 'lucidchart-block':
    case 'vimeo-block':
    case 'youtube-block':
    case 'whimsical-block':
    case 'generic-iframe':
      return `<iframe src="${escapeAttr(b.data.url)}" />`;
    case 'design-tokens':
    case 'component-spec-block':
    case 'design-src-component':
    case 'design-src-tiles':
    case 'design-token-collection':
    case 'pattern-list-block':
    case 'pattern-status-table-block':
    case 'pattern-template-block':
    case 'pattern-variations':
    case 'design-token-block':
      return '';
    default: {
      throw new Error(`Unknown block type: "${(b as BlockConfig)?.blockType}"`);
    }
  }
}

export async function blocksToHtml(blocks: BlockConfig[]): Promise<string> {
  // Sanitize each block's HTML output individually before joining
  const htmls = await Promise.all(
    blocks.map(async (block) => domPurify.sanitize(await blockToHtml(block))),
  );
  return htmls.join(EOL + EOL);
}