'use client';

interface PrdViewerProps {
  content: string;
}

/**
 * Lightweight markdown-to-HTML renderer for PRD content.
 * Supports headings, bold, italic, inline code, code blocks, and lists.
 * No external dependency — keeps bundle size minimal.
 */
function renderMarkdown(md: string): string {
  let html = md
    // Escape HTML entities first to prevent XSS
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;');

  // Code blocks (must run before inline code)
  html = html.replace(/```[\w]*\n?([\s\S]*?)```/g, (_match, code: string) => {
    return `<pre class="overflow-x-auto rounded-lg bg-surface-elevated p-4 my-4"><code class="text-xs text-text-secondary whitespace-pre">${code.trim()}</code></pre>`;
  });

  // Headings
  html = html.replace(
    /^#### (.+)$/gm,
    '<h4 class="text-sm font-semibold text-text-primary mt-4 mb-1">$1</h4>',
  );
  html = html.replace(
    /^### (.+)$/gm,
    '<h3 class="text-base font-semibold text-text-primary mt-6 mb-2">$1</h3>',
  );
  html = html.replace(
    /^## (.+)$/gm,
    '<h2 class="text-lg font-semibold text-text-primary mt-8 mb-3">$1</h2>',
  );
  html = html.replace(
    /^# (.+)$/gm,
    '<h1 class="text-xl font-bold text-text-primary mt-8 mb-4">$1</h1>',
  );

  // Horizontal rule
  html = html.replace(/^---$/gm, '<hr class="my-6 border-surface-border" />');

  // Unordered list items
  html = html.replace(
    /^[-*] (.+)$/gm,
    '<li class="ml-4 text-sm text-text-secondary list-disc">$1</li>',
  );

  // Ordered list items
  html = html.replace(
    /^\d+\. (.+)$/gm,
    '<li class="ml-4 text-sm text-text-secondary list-decimal">$1</li>',
  );

  // Bold + italic
  html = html.replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>');
  // Bold
  html = html.replace(
    /\*\*(.+?)\*\*/g,
    '<strong class="font-semibold text-text-primary">$1</strong>',
  );
  // Italic
  html = html.replace(/\*(.+?)\*/g, '<em class="italic text-text-secondary">$1</em>');

  // Inline code
  html = html.replace(
    /`([^`]+)`/g,
    '<code class="rounded bg-surface-elevated px-1 py-0.5 text-xs text-text-secondary">$1</code>',
  );

  // Paragraphs — wrap lines that aren't already wrapped in a block element
  const lines = html.split('\n');
  const result: string[] = [];
  for (const line of lines) {
    const trimmed = line.trim();
    if (trimmed === '') {
      result.push('');
    } else if (
      trimmed.startsWith('<h') ||
      trimmed.startsWith('<pre') ||
      trimmed.startsWith('<li') ||
      trimmed.startsWith('<hr')
    ) {
      result.push(trimmed);
    } else {
      result.push(`<p class="text-sm text-text-secondary leading-relaxed my-2">${trimmed}</p>`);
    }
  }

  return result.join('\n');
}

export function PrdViewer({ content }: PrdViewerProps): React.ReactElement {
  const html = renderMarkdown(content);

  return <div className="prose prose-sm max-w-none" dangerouslySetInnerHTML={{ __html: html }} />;
}
