'use client';

/**
 * DocumentEditor Component
 * 文档编辑器主组件
 */

import React, { forwardRef, useImperativeHandle } from 'react';
import { useEditor } from '../hooks/useEditor';
import { useEditorStore } from '../stores/useEditorStore';
import { cn } from '@/lib/utils';
import type { DocumentEditorProps, DocumentEditorRef } from '../core/types';
import { useTranslation } from '@/hooks/useTranslation';
import { SlashMenu } from './SlashMenu';
import { LinkEditor } from './LinkEditor';
import { FloatingToolbar } from './FloatingToolbar';

// 导入样式
import '../styles/editor.css';

export const DocumentEditor = forwardRef<DocumentEditorRef, DocumentEditorProps>(
  function DocumentEditor(props, ref) {
    const { t } = useTranslation();
    const {
      value,
      placeholder = t.documentEditor.placeholder.default,
      readOnly = false,
      onChange,
      onUploadImage,
      showToolbar = false,
      showWordCount = false,
      autoFocus = false,
      className,
      minHeight = '200px',
      maxHeight,
    } = props;

    const { editorRef, editorMethods } = useEditor({
      content: value,
      placeholder,
      readOnly,
      autoFocus,
      onChange,
    });

    const { wordCount, isFocused } = useEditorStore();

    // 暴露编辑器方法给父组件
    useImperativeHandle(ref, () => editorMethods, [editorMethods]);

    return (
      <div
        className={cn(
          'document-editor',
          isFocused && 'document-editor--focused',
          readOnly && 'document-editor--readonly',
          className
        )}
      >
        {/* 工具栏（可选） */}
        {showToolbar && !readOnly && (
          <div className="document-editor__toolbar">
            {/* TODO: 实现工具栏组件 */}
            <div className="flex items-center gap-1 border-b border-gray-200 p-2">
              <span className="text-sm text-gray-500">
                {t.documentEditor.toolbar.placeholder}
              </span>
            </div>
          </div>
        )}

        {/* 编辑区域 */}
        <div
          className="document-editor__content"
          style={{
            minHeight,
            maxHeight,
            overflowY: maxHeight ? 'auto' : undefined,
          }}
        >
          <div
            ref={editorRef}
            className="document-editor__prosemirror"
          />
        </div>

        {/* 字数统计（可选） */}
        {showWordCount && (
          <div className="document-editor__footer">
            <div className="flex items-center gap-4 border-t border-gray-200 px-4 py-2 text-xs text-gray-500">
              <span>
                {t.documentEditor.wordCount.characters.replace(
                  '{count}',
                  String(wordCount.characters)
                )}
              </span>
              <span>
                {t.documentEditor.wordCount.words.replace(
                  '{count}',
                  String(wordCount.words)
                )}
              </span>
              <span>
                {t.documentEditor.wordCount.paragraphs.replace(
                  '{count}',
                  String(wordCount.paragraphs)
                )}
              </span>
            </div>
          </div>
        )}

        {/* 斜杠菜单 */}
        {!readOnly && <SlashMenu />}

        {/* 链接编辑器 */}
        {!readOnly && <LinkEditor />}

        {/* 浮动工具栏 */}
        {!readOnly && <FloatingToolbar />}
      </div>
    );
  }
);

export default DocumentEditor;