// components/readonly-editor.js

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

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

  const handleInit = (evt, editor) => {
    editorRef.current = editor;
    
    // Set initial content if provided
    if (props.initialData) {
      editor.setContent(props.initialData);
    }
    
    // Disable all editing capabilities
    editor.on('keydown keyup keypress input', (e) => {
      e.preventDefault();
      e.stopPropagation();
      return false;
    });
    
    editor.on('paste', (e) => {
      e.preventDefault();
      e.stopPropagation();
      return false;
    });
    
    editor.on('drop', (e) => {
      e.preventDefault();
      e.stopPropagation();
      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;
      }
    });
  };

  // Update content when props change
  useEffect(() => {
    if (editorRef.current && props.initialData) {
      editorRef.current.setContent(props.initialData);
    }
  }, [props.initialData]);

  return (
    <Editor
      onInit={handleInit}
      initialValue={props.initialData || ''}
      apiKey={process.env.NEXT_PUBLIC_TINYMCE_API_KEY}
      init={{
        height: props.height || 400,
        menubar: false,
        toolbar: false, // No toolbar for read-only mode
        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;
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
          }
          .mce-content-body { 
            padding: 16px; 
            min-height: ${(props.height || 400) - 32}px; 
            pointer-events: none;
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
          }
          .mce-content-body * {
            pointer-events: none;
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
          }
        `,
        readonly: true,
        branding: false,
        elementpath: false,
        resize: false,
        statusbar: false,
        // Minimal settings to prevent cursor jumping
        auto_focus: false,
        forced_root_block: 'p',
        entity_encoding: 'raw',
        // Disable problematic features
        verify_html: false,
        cleanup: false,
        cleanup_on_startup: false,
        auto_resize: false,
        // Performance optimizations for read-only
        cache_suffix: '?v=1.0',
        browser_spellcheck: false,
        gecko_spellcheck: false,
        // Disable editing features
        paste_as_text: true,
        paste_enable_default_filters: false,
        paste_word_valid_elements: false,
        paste_retain_style_properties: false,
        // Additional read-only settings
        contextmenu: false,
        selection: false,
        // Disable all editing
        object_resizing: false,
        element_format: 'html',
        // Mobile support
        mobile: {
          theme: 'silver',
          plugins: ['lists', 'autolink', 'link', 'image', 'table'],
          toolbar: false
        }
      }}
    />
  );
}

export default ReadOnlyEditor;