'use client';
import React, { useEffect, useRef, useState } from 'react';
import type { Editor as ToastEditor } from '@toast-ui/react-editor';
import '@toast-ui/editor/dist/toastui-editor.css';
import { isSSR } from '@/utils/is';

interface EditorSectionProps {
  initialContent?: string;
  visible: boolean;
  onChange?: (content: string) => void;
  disabled?: boolean;
}

// 创建一个 Viewer 组件用于服务端渲染
const EditorViewer: React.FC<{ content: string }> = ({ content }) => {
  const viewerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!isSSR && viewerRef.current) {
      // 在客户端激活时，动态加载 Viewer 并渲染内容
      import('@toast-ui/editor/dist/toastui-editor-viewer').then((module) => {
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-ignore
        const { Viewer } = module;
        new Viewer({
          el: viewerRef.current!,
          initialValue: content || ''
        });
      }).catch((error) => {
        console.error('Failed to load Toast UI Viewer:', error);
      });
    }
  }, [content]);

  // 服务端直接渲染 HTML 内容
  return <div ref={viewerRef} dangerouslySetInnerHTML={{ __html: content || '' }} />;
};

export default function EditorSection({ initialContent, visible, onChange }: EditorSectionProps) {
  const [isClient, setIsClient] = useState(false);
  const [editorLoaded, setEditorLoaded] = useState(false);
  const [editorKey, setEditorKey] = useState(0); // 用于强制重新创建编辑器
  const editorRef = useRef<any>(null);
  const editorInstanceRef = useRef<ToastEditor | null>(null);
  const initialContentRef = useRef(initialContent); // 记录上一次的 initialContent
  const isUserEditingRef = useRef(false); // 标记用户是否正在编辑

  useEffect(() => {
    if (!isSSR && visible && !editorRef.current) {
      setIsClient(true);

      // 动态导入编辑器组件
      import('@toast-ui/react-editor').then((module) => {
        editorRef.current = module.Editor;
        setEditorLoaded(true); // 标记编辑器已加载
      }).catch((error) => {
        console.error('Failed to load Toast UI Editor:', error);
      });
    }

    // 当 visible 从 false 变为 true 时，重置编辑标记
    if (visible) {
      isUserEditingRef.current = false;
    }
  }, [visible]);

  // 只在 initialContent 从外部变化时重新创建编辑器（排除用户输入导致的变化）
  useEffect(() => {
    // 如果用户正在编辑，不要重新创建编辑器
    if (isUserEditingRef.current) {
      return;
    }

    if (initialContent !== initialContentRef.current) {
      initialContentRef.current = initialContent;
      setEditorKey(prev => prev + 1); // 改变 key 强制重新创建
    }
  }, [initialContent]);

  // 在服务端或组件未加载完成时，使用 Viewer 模式显示内容
  if (!isClient || !editorLoaded || !visible) {
    return (
      <div className="mt-8">
        <EditorViewer content={initialContent || ''} />
      </div>
    );
  }

  const DynamicEditor = editorRef.current;

  return (
    <div className="mt-8">
      <DynamicEditor
        ref={editorInstanceRef}
        key={`editor-${editorKey}`} // 只在 initialContent 外部变化时改变 key
        initialValue={initialContent || ''}
        initialEditType="markdown"
        onChange={() => {
          // 标记用户正在编辑
          isUserEditingRef.current = true;

          // 获取编辑器实例并读取内容
          if (editorInstanceRef.current && onChange) {
            const content = editorInstanceRef.current.getInstance().getMarkdown();
            onChange(content);
          }
        }}
      />
    </div>
  );
}