"use client";

import {
    InitialConfigType,
    LexicalComposer,
} from "@lexical/react/LexicalComposer";
import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
import type { EditorState, SerializedEditorState } from "lexical";
import { $generateHtmlFromNodes } from "@lexical/html";

import { editorTheme } from "@/components/editor/themes/editor-theme";
import { TooltipProvider } from "@/components/ui/tooltip";

import { nodes } from "./nodes";
import { Plugins } from "./plugins";

const editorConfig: InitialConfigType = {
    namespace: "Editor",
    theme: editorTheme,
    nodes,
    onError: (error: Error) => {
        console.error(error);
    },
};

export function Editor({
    editorState,
    editorSerializedState,
    initialHtml,
    onChange,
    onSerializedChange,
    onHtmlChange,
}: {
    editorState?: EditorState;
    editorSerializedState?: SerializedEditorState;
    /**
     * HTML اولیه برای لود از DB (legacy)
     * لود واقعی HTML داخل Plugins انجام می‌شود (با editor instance).
     */
    initialHtml?: string;
    onChange?: (editorState: EditorState) => void;
    onSerializedChange?: (editorSerializedState: SerializedEditorState) => void;
    /**
     * خروجی HTML برای ذخیره در DB
     */
    onHtmlChange?: (html: string) => void;
}) {
    return (
        <div className="bg-background overflow-hidden rounded-lg border shadow">
            <LexicalComposer
                initialConfig={{
                    ...editorConfig,
                    ...(editorState ? { editorState } : {}),
                    ...(editorSerializedState
                        ? { editorState: JSON.stringify(editorSerializedState) }
                        : {}),
                }}
            >
                <TooltipProvider>
                    {/* ✅ HTML-in اینجا انجام می‌شود (داخل plugins با useLexicalComposerContext) */}
                    <Plugins initialHtml={initialHtml} />

                    <OnChangePlugin
                        ignoreSelectionChange={true}
                        onChange={(state, editor) => {
                            onChange?.(state);
                            onSerializedChange?.(state.toJSON());

                            if (onHtmlChange) {
                                state.read(() => {
                                    const html = $generateHtmlFromNodes(editor);
                                    onHtmlChange(html);
                                });
                            }
                        }}
                    />
                </TooltipProvider>
            </LexicalComposer>
        </div>
    );
}