import React from 'react';
import type { MessageBlock } from '@/store/commStore';

interface HtmlBlockProps {
  block: MessageBlock;
}

/**
 * Basic HTML sanitization: removes <script> tags and event handler attributes.
 * This is a minimal sanitizer — for production use DOMPurify or similar.
 */
function sanitizeHtml(html: string): string {
  let sanitized = html;
  // Remove <script>...</script> blocks (including content)
  sanitized = sanitized.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');
  // Remove <script ...> self-referencing or incomplete tags
  sanitized = sanitized.replace(/<script\b[^>]*>/gi, '');
  // Remove on* event handler attributes (onclick, onload, onerror, etc.)
  sanitized = sanitized.replace(/\son\w+\s*=\s*"[^"]*"/gi, '');
  sanitized = sanitized.replace(/\son\w+\s*=\s*'[^']*'/gi, '');
  sanitized = sanitized.replace(/\son\w+\s*=\s*[^\s>]+/gi, '');
  // Remove javascript: URLs in href/src
  sanitized = sanitized.replace(/(href|src)\s*=\s*"javascript:[^"]*"/gi, '$1="#"');
  sanitized = sanitized.replace(/(href|src)\s*=\s*'javascript:[^']*'/gi, '$1="#"');
  return sanitized;
}

const HtmlBlock: React.FC<HtmlBlockProps> = ({ block }) => {
  const rawHtml: string = block.block_data.html || '';

  if (!rawHtml) {
    return null;
  }

  const sanitized = sanitizeHtml(rawHtml);

  return (
    <div
      className="prose prose-sm max-w-none text-inherit"
      dangerouslySetInnerHTML={{ __html: sanitized }}
    />
  );
};

export default HtmlBlock;
