import Prism from 'prismjs';
import renderMathInElement from 'katex/contrib/auto-render';
import { unified } from 'unified';
import remarkParse from 'remark-parse';
import remarkGfm from 'remark-gfm';
import remarkBreaks from 'remark-breaks';
import remarkRehype from 'remark-rehype';
import rehypeRaw from 'rehype-raw';
import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';
import rehypeStringify from 'rehype-stringify';
import { visit } from 'unist-util-visit';

let latexRenderTimer: number | null = null;
const markdownCache = new Map<string, string>();
let showHtmlDebugCount = 0;
const SHOW_HTML_DEBUG_MAX = 500;

function isShowHtmlDebugEnabled() {
  if (typeof window === 'undefined') return true;
  try {
    const flag = (window as any).__SHOW_HTML_DEBUG__;
    if (flag === false || flag === '0') return false;
    if (flag === true || flag === '1') return true;
    const localFlag = window.localStorage?.getItem('showHtmlDebug');
    if (localFlag === '0' || localFlag === 'false') return false;
    if (localFlag === '1' || localFlag === 'true') return true;
    return true;
  } catch {
    return true;
  }
}

function showHtmlDebugLog(event: string, payload: Record<string, any> = {}) {
  if (!isShowHtmlDebugEnabled()) return;
  if (showHtmlDebugCount >= SHOW_HTML_DEBUG_MAX) return;
  showHtmlDebugCount += 1;
  if (showHtmlDebugCount === SHOW_HTML_DEBUG_MAX) {
    console.warn('[SHOW_HTML_DEBUG]', 'log-limit-reached', { max: SHOW_HTML_DEBUG_MAX });
    return;
  }
  console.log('[SHOW_HTML_DEBUG]', event, payload);
}

function encodeBase64Utf8(input: string) {
  try {
    return btoa(unescape(encodeURIComponent(input)));
  } catch {
    return '';
  }
}

const SHOW_HTML_ALLOWED_RATIOS = ['1:1', '16:9', '9:16', '4:3', '3:4'] as const;
const SHOW_HTML_RATIO_VALUES: Record<string, number> = {
  '1:1': 1,
  '16:9': 16 / 9,
  '9:16': 9 / 16,
  '4:3': 4 / 3,
  '3:4': 3 / 4
};

function normalizeShowHtmlRatio(raw: string | null | undefined) {
  if (!raw) return '1:1';
  const cleaned = raw.trim().toLowerCase().replace(/[x/]/g, ':').replace(/\s+/g, '');
  if ((SHOW_HTML_ALLOWED_RATIOS as readonly string[]).includes(cleaned)) return cleaned;
  return '1:1';
}

function pickNearestAllowedRatio(width: number, height: number) {
  if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) {
    return '1:1';
  }
  const target = width / height;
  let best = '1:1';
  let bestDiff = Number.POSITIVE_INFINITY;
  for (const ratio of SHOW_HTML_ALLOWED_RATIOS) {
    const diff = Math.abs(SHOW_HTML_RATIO_VALUES[ratio] - target);
    if (diff < bestDiff) {
      bestDiff = diff;
      best = ratio;
    }
  }
  return best;
}

function extractShowHtmlRatio(tagSource: string) {
  const ratioMatch = tagSource.match(/ratio\s*=\s*["']?\s*([0-9]{1,2}\s*[:xX/]\s*[0-9]{1,2})/i);
  if (ratioMatch?.[1]) {
    return normalizeShowHtmlRatio(ratioMatch[1]);
  }
  const widthMatch = tagSource.match(/width\s*=\s*["']?(\d{1,4})/i);
  const heightMatch = tagSource.match(/height\s*=\s*["']?(\d{1,4})/i);
  if (widthMatch?.[1] && heightMatch?.[1]) {
    const width = Number.parseInt(widthMatch[1], 10);
    const height = Number.parseInt(heightMatch[1], 10);
    return pickNearestAllowedRatio(width, height);
  }
  return '1:1';
}

function normalizeShowHtmlJsMode(raw: string | null | undefined) {
  if (!raw) return 'off';
  const cleaned = raw.trim().toLowerCase();
  if (['on', '1', 'true', 'yes', 'enabled', 'enable'].includes(cleaned)) {
    return 'on';
  }
  return 'off';
}

function extractShowHtmlJsMode(tagSource: string) {
  const jsMatch = tagSource.match(/js\s*=\s*["']?\s*([a-zA-Z0-9_-]+)/i);
  if (jsMatch?.[1]) {
    return normalizeShowHtmlJsMode(jsMatch[1]);
  }
  return 'off';
}

function isShowHtmlTagInsideMarkdownCode(raw: string, tagIndex: number) {
  if (!raw || tagIndex <= 0) return false;
  let i = 0;
  let inFence = false;
  let inInlineCode = false;

  while (i < tagIndex) {
    // fenced code block: ```
    if (!inInlineCode && raw.startsWith('```', i)) {
      inFence = !inFence;
      i += 3;
      continue;
    }
    if (!inFence && raw[i] === '`') {
      // 处理转义反引号 \`
      const escaped = i > 0 && raw[i - 1] === '\\';
      if (!escaped) {
        inInlineCode = !inInlineCode;
      }
      i += 1;
      continue;
    }
    i += 1;
  }

  return inFence || inInlineCode;
}

function transformShowHtmlBlocks(raw: string, isStreaming: boolean) {
  if (!raw || raw.indexOf('<show_html') === -1) return raw;
  showHtmlDebugLog('md:transform:start', {
    isStreaming,
    rawLength: raw.length
  });
  let output = '';
  let cursor = 0;
  let blockCount = 0;
  const closeTag = '</show_html>';
  const closeTagForMarkdown = '</show-html>';

  while (cursor < raw.length) {
    const start = raw.indexOf('<show_html', cursor);
    if (start === -1) {
      output += raw.slice(cursor);
      break;
    }
    if (isShowHtmlTagInsideMarkdownCode(raw, start)) {
      // 在 markdown 代码片段里的 <show_html> 仅作为文本展示，不参与渲染替换
      output += raw.slice(cursor, start + 1);
      cursor = start + 1;
      continue;
    }
    blockCount += 1;
    output += raw.slice(cursor, start);

    const openEnd = raw.indexOf('>', start);
    if (openEnd === -1) {
      if (!isStreaming) {
        output += raw.slice(start);
        break;
      }
      const partialOpen = raw.slice(start);
      const ratio = extractShowHtmlRatio(partialOpen);
      const jsMode = extractShowHtmlJsMode(partialOpen);
      const ratioAttr = ratio ? ` ratio="${ratio}"` : '';
      const jsAttr = ` js="${jsMode}"`;
      showHtmlDebugLog('md:transform:open-tag-partial', {
        blockCount,
        isStreaming,
        ratio,
        jsMode,
        partialLength: partialOpen.length
      });
      output += `<show-html${ratioAttr}${jsAttr} data-partial="1">${closeTagForMarkdown}`;
      break;
    }

    const openTag = raw.slice(start, openEnd + 1);
    const ratio = extractShowHtmlRatio(openTag);
    const jsMode = extractShowHtmlJsMode(openTag);
    const canonicalOpenTag = `<show-html ratio="${ratio}" js="${jsMode}">`;
    const closeStart = raw.indexOf(closeTag, openEnd + 1);
    if (closeStart === -1) {
      if (!isStreaming) {
        output += raw.slice(start);
        break;
      }
      const innerPartial = raw.slice(openEnd + 1);
      const encoded = encodeBase64Utf8(innerPartial);
      showHtmlDebugLog('md:transform:close-tag-partial', {
        blockCount,
        isStreaming,
        ratio,
        jsMode,
        innerPartialLength: innerPartial.length,
        encodedLength: encoded.length
      });
      const safeOpen = canonicalOpenTag.replace(
        />$/,
        encoded ? ` data-encoded="${encoded}" data-partial="1">` : ' data-partial="1">'
      );
      output += `${safeOpen}${closeTagForMarkdown}`;
      break;
    }

    const inner = raw.slice(openEnd + 1, closeStart);
    const encoded = encodeBase64Utf8(inner);
    showHtmlDebugLog('md:transform:block-complete', {
      blockCount,
      isStreaming,
      ratio,
      jsMode,
      innerLength: inner.length,
      encodedLength: encoded.length
    });
    const safeOpen = canonicalOpenTag.replace(/>$/, encoded ? ` data-encoded="${encoded}">` : '>');
    output += `${safeOpen}${closeTagForMarkdown}`;
    cursor = closeStart + closeTag.length;
  }
  showHtmlDebugLog('md:transform:end', {
    isStreaming,
    blocks: blockCount,
    outLength: output.length
  });

  return output;
}

function transformShowImageBlocks(raw: string) {
  if (!raw || raw.indexOf('show_image') === -1) return raw;
  let output = '';
  let cursor = 0;
  const openToken = '<show_image';
  const closeToken = '</show_image>';

  while (cursor < raw.length) {
    const openIdx = raw.indexOf(openToken, cursor);
    const closeIdx = raw.indexOf(closeToken, cursor);
    if (openIdx === -1 && closeIdx === -1) {
      output += raw.slice(cursor);
      break;
    }
    const hasOpen = openIdx !== -1;
    const hasClose = closeIdx !== -1;
    const useOpen = hasOpen && (!hasClose || openIdx < closeIdx);
    const hitIdx = useOpen ? openIdx : closeIdx;
    if (hitIdx < 0) {
      output += raw.slice(cursor);
      break;
    }
    if (isShowHtmlTagInsideMarkdownCode(raw, hitIdx)) {
      output += raw.slice(cursor, hitIdx + 1);
      cursor = hitIdx + 1;
      continue;
    }
    output += raw.slice(cursor, hitIdx);
    if (useOpen) {
      output += '<show-image';
      cursor = hitIdx + openToken.length;
      continue;
    }
    output += '</show-image>';
    cursor = hitIdx + closeToken.length;
  }

  return output;
}

type RehypeProps = Record<string, unknown>;

function readAttr(props: RehypeProps | undefined, name: string): string {
  if (!props) return '';
  const direct = props[name];
  if (typeof direct === 'string') return direct;
  const camel = name.replace(/-([a-z])/g, (_, ch: string) => ch.toUpperCase());
  const camelVal = props[camel];
  if (typeof camelVal === 'string') return camelVal;
  return '';
}

function writeAttr(props: RehypeProps, name: string, value: string | null) {
  const camel = name.replace(/-([a-z])/g, (_, ch: string) => ch.toUpperCase());
  if (value == null || value === '') {
    delete props[name];
    delete props[camel];
    return;
  }
  props[name] = value;
}

function normalizeShowTagsPlugin() {
  return (tree: any) => {
    visit(tree, 'element', (node: any) => {
      if (!node || typeof node.tagName !== 'string') return;
      if (node.tagName === 'show_html' || node.tagName === 'show-html') {
        node.tagName = 'show_html';
        const props = (node.properties || {}) as RehypeProps;
        const ratio = normalizeShowHtmlRatio(readAttr(props, 'ratio'));
        const jsMode = normalizeShowHtmlJsMode(readAttr(props, 'js'));
        const encoded = readAttr(props, 'data-encoded');
        const partial = readAttr(props, 'data-partial');
        writeAttr(props, 'ratio', ratio);
        writeAttr(props, 'js', jsMode);
        writeAttr(props, 'data-encoded', encoded);
        writeAttr(props, 'data-partial', partial === '1' ? '1' : null);
        node.properties = props;
      }
      if (node.tagName === 'show_image' || node.tagName === 'show-image') {
        node.tagName = 'show_image';
        const props = (node.properties || {}) as RehypeProps;
        const src = readAttr(props, 'src').trim();
        const alt = readAttr(props, 'alt').trim();
        const title = readAttr(props, 'title').trim();
        writeAttr(props, 'src', src);
        writeAttr(props, 'alt', alt || title || '');
        if (!title) {
          writeAttr(props, 'title', null);
        }
        node.properties = props;
      }
    });
  };
}

function wrapMarkdownTablesPlugin() {
  return (tree: any) => {
    visit(tree, 'element', (node: any, index: number | undefined, parent: any) => {
      if (!node || node.tagName !== 'table' || !parent || typeof index !== 'number') return;
      if (parent?.tagName === 'div' && Array.isArray(parent?.properties?.className)) {
        const classes = parent.properties.className as string[];
        if (classes.includes('md-table-scroll')) {
          return;
        }
      }
      parent.children[index] = {
        type: 'element',
        tagName: 'div',
        properties: { className: ['md-table-scroll'], 'data-md-table-scroll': '1' },
        children: [node]
      };
    });
  };
}

const sanitizedSchema: Record<string, any> = {
  ...defaultSchema,
  tagNames: [...(defaultSchema.tagNames || []), 'show_html', 'show_image', 'show-html', 'show-image'],
  attributes: {
    ...(defaultSchema.attributes || {}),
    div: [...((defaultSchema.attributes || {}).div || []), 'className', 'data-md-table-scroll'],
    show_html: ['ratio', 'js', 'data-encoded', 'data-partial'],
    show_image: ['src', 'alt', 'title', 'width', 'height'],
    'show-html': ['ratio', 'js', 'data-encoded', 'data-partial'],
    'show-image': ['src', 'alt', 'title', 'width', 'height']
  }
};

const markdownProcessor = unified()
  .use(remarkParse)
  .use(remarkGfm)
  .use(remarkBreaks)
  .use(remarkRehype, { allowDangerousHtml: true })
  .use(rehypeRaw)
  .use(normalizeShowTagsPlugin)
  .use(wrapMarkdownTablesPlugin)
  .use(rehypeSanitize, sanitizedSchema)
  .use(rehypeStringify, { allowDangerousHtml: false });

function stableHash(input: string): string {
  let hash = 5381;
  for (let i = 0; i < input.length; i += 1) {
    hash = (hash * 33) ^ input.charCodeAt(i);
  }
  return (hash >>> 0).toString(36);
}

function buildCacheKey(text: string): string {
  return `md_${text.length}_${stableHash(text)}`;
}

function wrapCodeBlocks(html: string, isStreaming = false) {
  if (isStreaming) {
    return html;
  }

  let counter = 0;
  return html.replace(
    /<pre><code([^>]*)>([\s\S]*?)<\/code><\/pre>/g,
    (match, attributes, content) => {
      const langMatch = attributes.match(/class="[^"]*language-(\w+)/);
      const language = langMatch ? langMatch[1] : 'text';
      const blockId = `code-${stableHash(`${attributes}|${content}|${counter++}`)}`;
      const escapedContent = content
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;');

      return `
            <div class="code-block-wrapper">
                <div class="code-block-header">
                    <span class="code-language">${language}</span>
                    <button class="copy-code-btn" data-code="${blockId}" title="复制代码" aria-label="复制代码"></button>
                </div>
                <pre><code${attributes} data-code-id="${blockId}" data-original-code="${escapedContent}">${content}</code></pre>
            </div>`;
    }
  );
}

function renderMarkdownToHtml(text: string): string {
  const file = markdownProcessor.processSync(text);
  return String(file);
}

function escapeHtml(input: string) {
  return input
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;');
}

export function renderMarkdown(text: string, isStreaming = false) {
  if (!text) {
    return '';
  }

  if (!isStreaming) {
    const cacheKey = buildCacheKey(text);
    if (markdownCache.has(cacheKey)) {
      return markdownCache.get(cacheKey) as string;
    }
  }

  const safeText = transformShowImageBlocks(transformShowHtmlBlocks(text, isStreaming));
  let html = '';
  try {
    html = renderMarkdownToHtml(safeText);
  } catch (error) {
    console.warn('Markdown 渲染失败，降级为纯文本渲染:', error);
    html = escapeHtml(safeText).replace(/\n/g, '<br>');
  }
  html = wrapCodeBlocks(html, isStreaming);

  if (!isStreaming && text.length < 10000) {
    const cacheKey = buildCacheKey(text);
    markdownCache.set(cacheKey, html);
    if (markdownCache.size > 20) {
      const firstKey = markdownCache.keys().next().value as string | undefined;
      if (firstKey) {
        markdownCache.delete(firstKey);
      }
    }
  }

  if (!isStreaming) {
    setTimeout(() => {
      if (typeof Prism !== 'undefined') {
        const codeBlocks = document.querySelectorAll(
          '.code-block-wrapper pre code:not([data-highlighted])'
        );
        codeBlocks.forEach((block) => {
          try {
            Prism.highlightElement(block as HTMLElement);
            block.setAttribute('data-highlighted', 'true');
          } catch (error) {
            console.warn('代码高亮失败:', error);
          }
        });
      }

      if (typeof renderMathInElement !== 'undefined') {
        const elements = document.querySelectorAll(
          '.text-output .text-content:not(.streaming-text)'
        );
        elements.forEach((element) => {
          if (element.hasAttribute('data-math-rendered')) return;
          try {
            renderMathInElement(element as HTMLElement, {
              delimiters: [
                { left: '$$', right: '$$', display: true },
                { left: '$', right: '$', display: false },
                { left: '\\[', right: '\\]', display: true },
                { left: '\\(', right: '\\)', display: false }
              ],
              throwOnError: false,
              trust: true
            });
            element.setAttribute('data-math-rendered', 'true');
          } catch (error) {
            console.warn('LaTeX渲染失败:', error);
          }
        });
      }
    }, 100);
  }

  return html;
}

export function renderLatexInRealtime() {
  if (typeof renderMathInElement === 'undefined') {
    return;
  }

  if (latexRenderTimer) {
    cancelAnimationFrame(latexRenderTimer);
  }

  latexRenderTimer = requestAnimationFrame(() => {
    const elements = document.querySelectorAll('.text-output .streaming-text');
    elements.forEach((element) => {
      try {
        renderMathInElement(element as HTMLElement, {
          delimiters: [
            { left: '$$', right: '$$', display: true },
            { left: '$', right: '$', display: false },
            { left: '\\[', right: '\\]', display: true },
            { left: '\\(', right: '\\)', display: false }
          ],
          throwOnError: false,
          trust: true
        });
      } catch {
        // ignore
      }
    });
  });
}