// components/strict-readonly-editor.js

import React, { useRef } from "react";
import { Editor } from "@tinymce/tinymce-react";

function StrictReadOnlyEditor(props) {
  const editorRef = useRef(null);

  const handleInit = (evt, editor) => {
    editorRef.current = editor;
    
    // Disable all possible editing events
    const disableEvents = ['keydown', 'keyup', 'keypress', 'input', 'paste', 'drop', 'cut', 'copy'];
    
    disableEvents.forEach(eventType => {
      editor.on(eventType, (e) => {
        e.preventDefault();
        e.stopPropagation();
        e.stopImmediatePropagation();
        return false;
      });
    });
    
    // Disable mouse events that might allow editing
    editor.on('mousedown mousemove mouseup click dblclick', (e) => {
      if (e.target.closest('.mce-content-body')) {
        e.preventDefault();
        e.stopPropagation();
        return false;
      }
    });
    
    // Disable focus events
    editor.on('focus blur', (e) => {
      e.preventDefault();
      e.stopPropagation();
      return false;
    });
  };

  return (
    <Editor
      onInit={handleInit}
      initialValue={props.initialData || ''}
      apiKey={process.env.NEXT_PUBLIC_TINYMCE_API_KEY}
      init={{
        height: props.height || 400,
        menubar: false,
        toolbar: false,
        plugins: [
          'advlist', 'autolink', 'lists', 'link', 'image', 'charmap',
          'anchor', 'searchreplace', 'visualblocks', 'code',
          'insertdatetime', 'media', 'table'
        ],
        content_style: `
          body { 
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 
            font-size: 14px; 
            line-height: 1.6; 
            color: #333; 
            pointer-events: none !important;
            user-select: none !important;
            -webkit-user-select: none !important;
            -moz-user-select: none !important;
            -ms-user-select: none !important;
          }
          .mce-content-body { 
            padding: 16px; 
            min-height: ${(props.height || 400) - 32}px; 
            pointer-events: none !important;
            user-select: none !important;
            -webkit-user-select: none !important;
            -moz-user-select: none !important;
            -ms-user-select: none !important;
          }
          .mce-content-body * {
            pointer-events: none !important;
            user-select: none !important;
            -webkit-user-select: none !important;
            -moz-user-select: none !important;
            -ms-user-select: none !important;
          }
        `,
        readonly: true,
        branding: false,
        elementpath: false,
        resize: false,
        statusbar: false,
        auto_focus: false,
        forced_root_block: 'p',
        entity_encoding: 'raw',
        verify_html: false,
        cleanup: false,
        cleanup_on_startup: false,
        auto_resize: false,
        browser_spellcheck: false,
        gecko_spellcheck: false,
        paste_as_text: true,
        paste_enable_default_filters: false,
        contextmenu: false,
        selection: false,
        object_resizing: false,
        element_format: 'html',
        // Additional strict settings
        valid_children: false,
        extended_valid_elements: false,
        custom_elements: false
      }}
    />
  );
}

export default StrictReadOnlyEditor;