"use client";

import { useEffect, useRef, useState } from "react";
import {
    CHECK_LIST,
    ELEMENT_TRANSFORMERS,
    MULTILINE_ELEMENT_TRANSFORMERS,
    TEXT_FORMAT_TRANSFORMERS,
    TEXT_MATCH_TRANSFORMERS,
} from "@lexical/markdown";
import { $getRoot, ParagraphNode } from "lexical";
import { $generateNodesFromDOM } from "@lexical/html";
import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
import { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin";
import { CheckListPlugin } from "@lexical/react/LexicalCheckListPlugin";
import { ClearEditorPlugin } from "@lexical/react/LexicalClearEditorPlugin";
import { ClickableLinkPlugin } from "@lexical/react/LexicalClickableLinkPlugin";
import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
import { HashtagPlugin } from "@lexical/react/LexicalHashtagPlugin";
import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
import { HorizontalRulePlugin } from "@lexical/react/LexicalHorizontalRulePlugin";
import { ListPlugin } from "@lexical/react/LexicalListPlugin";
import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin";
import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
import { TabIndentationPlugin } from "@lexical/react/LexicalTabIndentationPlugin";
import { TablePlugin } from "@lexical/react/LexicalTablePlugin";

import { ContentEditable } from "@/components/editor/editor-ui/content-editable";
import { ActionsPlugin } from "@/components/editor/plugins/actions/actions-plugin";
import { ClearEditorActionPlugin } from "@/components/editor/plugins/actions/clear-editor-plugin";
import { CounterCharacterPlugin } from "@/components/editor/plugins/actions/counter-character-plugin";

import { AutoLinkPlugin } from "@/components/editor/plugins/auto-link-plugin";
import { AutocompletePlugin } from "@/components/editor/plugins/autocomplete-plugin";
import { CodeActionMenuPlugin } from "@/components/editor/plugins/code-action-menu-plugin";
import { CodeHighlightPlugin } from "@/components/editor/plugins/code-highlight-plugin";
import { ComponentPickerMenuPlugin } from "@/components/editor/plugins/component-picker-menu-plugin";
import { ContextMenuPlugin } from "@/components/editor/plugins/context-menu-plugin";
import { DragDropPastePlugin } from "@/components/editor/plugins/drag-drop-paste-plugin";
import { DraggableBlockPlugin } from "@/components/editor/plugins/draggable-block-plugin";
import { AutoEmbedPlugin } from "@/components/editor/plugins/embeds/auto-embed-plugin";
import { TwitterPlugin } from "@/components/editor/plugins/embeds/twitter-plugin";
import { YouTubePlugin } from "@/components/editor/plugins/embeds/youtube-plugin";
import { EmojiPickerPlugin } from "@/components/editor/plugins/emoji-picker-plugin";
import { EmojisPlugin } from "@/components/editor/plugins/emojis-plugin";
import { FloatingLinkEditorPlugin } from "@/components/editor/plugins/floating-link-editor-plugin";
import { FloatingTextFormatToolbarPlugin } from "@/components/editor/plugins/floating-text-format-plugin";
import { ImagesPlugin } from "@/components/editor/plugins/images-plugin";
import { KeywordsPlugin } from "@/components/editor/plugins/keywords-plugin";
import { LayoutPlugin } from "@/components/editor/plugins/layout-plugin";
import { LinkPlugin } from "@/components/editor/plugins/link-plugin";
import { ListMaxIndentLevelPlugin } from "@/components/editor/plugins/list-max-indent-level-plugin";
import { MentionsPlugin } from "@/components/editor/plugins/mentions-plugin";

import { AlignmentPickerPlugin } from "@/components/editor/plugins/picker/alignment-picker-plugin";
import { BulletedListPickerPlugin } from "@/components/editor/plugins/picker/bulleted-list-picker-plugin";
import { CheckListPickerPlugin } from "@/components/editor/plugins/picker/check-list-picker-plugin";
import { CodePickerPlugin } from "@/components/editor/plugins/picker/code-picker-plugin";
import { ColumnsLayoutPickerPlugin } from "@/components/editor/plugins/picker/columns-layout-picker-plugin";
import { DividerPickerPlugin } from "@/components/editor/plugins/picker/divider-picker-plugin";
import { EmbedsPickerPlugin } from "@/components/editor/plugins/picker/embeds-picker-plugin";
import { HeadingPickerPlugin } from "@/components/editor/plugins/picker/heading-picker-plugin";
import { ImagePickerPlugin } from "@/components/editor/plugins/picker/image-picker-plugin";
import { NumberedListPickerPlugin } from "@/components/editor/plugins/picker/numbered-list-picker-plugin";
import { ParagraphPickerPlugin } from "@/components/editor/plugins/picker/paragraph-picker-plugin";
import { QuotePickerPlugin } from "@/components/editor/plugins/picker/quote-picker-plugin";
import {
    DynamicTablePickerPlugin,
    TablePickerPlugin,
} from "@/components/editor/plugins/picker/table-picker-plugin";
import { TabFocusPlugin } from "@/components/editor/plugins/tab-focus-plugin";

import { BlockFormatDropDown } from "@/components/editor/plugins/toolbar/block-format-toolbar-plugin";
import { FormatBulletedList } from "@/components/editor/plugins/toolbar/block-format/format-bulleted-list";
import { FormatCheckList } from "@/components/editor/plugins/toolbar/block-format/format-check-list";
import { FormatCodeBlock } from "@/components/editor/plugins/toolbar/block-format/format-code-block";
import { FormatHeading } from "@/components/editor/plugins/toolbar/block-format/format-heading";
import { FormatNumberedList } from "@/components/editor/plugins/toolbar/block-format/format-numbered-list";
import { FormatParagraph } from "@/components/editor/plugins/toolbar/block-format/format-paragraph";
import { FormatQuote } from "@/components/editor/plugins/toolbar/block-format/format-quote";

import { BlockInsertPlugin } from "@/components/editor/plugins/toolbar/block-insert-plugin";
import { InsertColumnsLayout } from "@/components/editor/plugins/toolbar/block-insert/insert-columns-layout";
import { InsertEmbeds } from "@/components/editor/plugins/toolbar/block-insert/insert-embeds";
import { InsertHorizontalRule } from "@/components/editor/plugins/toolbar/block-insert/insert-horizontal-rule";
import { InsertImage } from "@/components/editor/plugins/toolbar/block-insert/insert-image";
import { InsertTable } from "@/components/editor/plugins/toolbar/block-insert/insert-table";

import { ClearFormattingToolbarPlugin } from "@/components/editor/plugins/toolbar/clear-formatting-toolbar-plugin";
import { CodeLanguageToolbarPlugin } from "@/components/editor/plugins/toolbar/code-language-toolbar-plugin";
import { ElementFormatToolbarPlugin } from "@/components/editor/plugins/toolbar/element-format-toolbar-plugin";
import { FontBackgroundToolbarPlugin } from "@/components/editor/plugins/toolbar/font-background-toolbar-plugin";
import { FontColorToolbarPlugin } from "@/components/editor/plugins/toolbar/font-color-toolbar-plugin";
import { FontFamilyToolbarPlugin } from "@/components/editor/plugins/toolbar/font-family-toolbar-plugin";
import { FontFormatToolbarPlugin } from "@/components/editor/plugins/toolbar/font-format-toolbar-plugin";
import { FontSizeToolbarPlugin } from "@/components/editor/plugins/toolbar/font-size-toolbar-plugin";
import { HistoryToolbarPlugin } from "@/components/editor/plugins/toolbar/history-toolbar-plugin";
import { LinkToolbarPlugin } from "@/components/editor/plugins/toolbar/link-toolbar-plugin";
import { SubSuperToolbarPlugin } from "@/components/editor/plugins/toolbar/subsuper-toolbar-plugin";
import { ToolbarPlugin } from "@/components/editor/plugins/toolbar/toolbar-plugin";

import { TypingPerfPlugin } from "@/components/editor/plugins/typing-pref-plugin";
import { EMOJI } from "@/components/editor/transformers/markdown-emoji-transformer";
import { HR } from "@/components/editor/transformers/markdown-hr-transformer";
import { IMAGE } from "@/components/editor/transformers/markdown-image-transformer";
import { TABLE } from "@/components/editor/transformers/markdown-table-transformer";
import { TWEET } from "@/components/editor/transformers/markdown-tweet-transformer";

import { Separator } from "@/components/ui/separator";
import { ImageIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { useToolbarContext } from "@/components/editor/context/toolbar-context";
import MediaManager from "@/components/media/media-manager";
import type { LexicalEditor } from "lexical";
import { INSERT_IMAGE_COMMAND } from "@/components/editor/plugins/images-plugin";

import { TableToolbarPlugin } from "@/components/editor/plugins/toolbar/table-toolbar-plugin";

const placeholder = "برای نمایش منو دکمه / فشار دهید ...";

function InitialHtmlPlugin({ html }: { html?: string }) {
    const [editor] = useLexicalComposerContext();
    const appliedRef = useRef(false);

    useEffect(() => {
        const next = (html ?? "").trim();
        if (!next) return;

        // ✅ فقط یک بار (در اولین mount) اعمال کن؛ بعدش دیگر ریست نکن
        if (appliedRef.current) return;
        appliedRef.current = true;

        editor.update(() => {
            const root = $getRoot();
            root.clear();

            const parser = new DOMParser();
            const dom = parser.parseFromString(next, "text/html");
            const nodes = $generateNodesFromDOM(editor, dom);

            if (!nodes || nodes.length === 0) {
                root.append(new ParagraphNode());
                return;
            }

            root.append(...nodes);
        });
    }, [editor, html]);

    return null;
}
type ToolbarCtx = ReturnType<typeof useToolbarContext>;

function MediaImageToolbarButton() {
    const { activeEditor } = useToolbarContext();

    return (
        <MediaManager
            mode="single"
            title="انتخاب تصویر"
            description="یک تصویر انتخاب کنید تا داخل متن درج شود."
            trigger={
                <Button
                    type="button"
                    variant="outline"
                    size="sm"
                    className="h-8 w-8 p-0"
                >
                    <ImageIcon className="h-4 w-4" />
                </Button>
            }
            onChange={(picked: any) => {
                const item = !picked
                    ? null
                    : Array.isArray(picked)
                        ? picked[0]
                        : picked;
                if (!item?.url) return;

                try {
                    activeEditor.dispatchCommand(INSERT_IMAGE_COMMAND, {
                        src: item.url,
                        altText:
                            item.alt || item.originalName || item.filename || "",
                        width: typeof item.width === 'number' ? item.width : undefined,
                        height: typeof item.height === 'number' ? item.height : undefined,
                    });
                } catch (error) {
                    console.error("Failed to insert image:", error);
                    // optionally toast error
                }
            }}
        />
    );
}

export function Plugins({ initialHtml }: { initialHtml?: string }) {
    const [floatingAnchorElem, setFloatingAnchorElem] =
        useState<HTMLDivElement | null>(null);
    const [isLinkEditMode, setIsLinkEditMode] = useState<boolean>(false);
    const { activeEditor, showModal } = useToolbarContext();

    const onRef = (el: HTMLDivElement) => {
        if (el) setFloatingAnchorElem(el);
    };

    return (
        <div className="relative" dir="rtl">
            {/* HTML-in از DB */}
            <InitialHtmlPlugin html={initialHtml} />

            <ToolbarPlugin>
                {({ blockType }) => (
                    <div className="vertical-align-middle sticky top-0 z-10 flex flex-wrap items-center gap-2 border-b p-2 bg-background">
                        <HistoryToolbarPlugin />
                        <Separator orientation="vertical" className="h-7!" />

                        <BlockFormatDropDown>
                            <FormatParagraph />
                            <FormatHeading levels={["h1", "h2", "h3"]} />
                            <FormatNumberedList />
                            <FormatBulletedList />
                            <FormatCheckList />
                            <FormatCodeBlock />
                            <FormatQuote />
                        </BlockFormatDropDown>

                        {blockType === "code" ? (
                            <CodeLanguageToolbarPlugin />
                        ) : (
                            <>
                                <FontFamilyToolbarPlugin />
                                <FontSizeToolbarPlugin />
                                <Separator
                                    orientation="vertical"
                                    className="h-7!"
                                />

                                <FontFormatToolbarPlugin />
                                <Separator
                                    orientation="vertical"
                                    className="h-7!"
                                />

                                <SubSuperToolbarPlugin />
                                <LinkToolbarPlugin
                                    setIsLinkEditMode={setIsLinkEditMode}
                                />
                                <Separator
                                    orientation="vertical"
                                    className="h-7!"
                                />

                                <ClearFormattingToolbarPlugin />
                                <Separator
                                    orientation="vertical"
                                    className="h-7!"
                                />

                                <MediaImageToolbarButton />

                                <Separator
                                    orientation="vertical"
                                    className="h-7!"
                                />

                                <FontColorToolbarPlugin />
                                <FontBackgroundToolbarPlugin />
                                <Separator
                                    orientation="vertical"
                                    className="h-7!"
                                />

                                <ElementFormatToolbarPlugin />
                                <Separator
                                    orientation="vertical"
                                    className="h-7!"
                                />

                                <BlockInsertPlugin>
                                    <InsertHorizontalRule />

                                    <InsertTable />
                                    <InsertColumnsLayout />
                                    <InsertEmbeds />
                                </BlockInsertPlugin>
                                
                                <TableToolbarPlugin />
                            </>
                        )}
                    </div>
                )}
            </ToolbarPlugin>

            <div className="relative">
                <AutoFocusPlugin />

                <RichTextPlugin
                    contentEditable={
                        <div dir="rtl">
                            <div ref={onRef} dir="rtl">
                                <ContentEditable
                                    placeholder={placeholder}
                                    className="ContentEditable__root relative block min-h-[300px] overflow-auto px-8 pr-12 py-4 focus:outline-none text-right"
                                />
                            </div>
                        </div>
                    }
                    ErrorBoundary={LexicalErrorBoundary}
                />

                <ClickableLinkPlugin />
                <CheckListPlugin />
                <HorizontalRulePlugin />
                <TablePlugin />
                <ListPlugin />
                <TabIndentationPlugin />
                <HashtagPlugin />
                <HistoryPlugin />

                <MentionsPlugin />
                <DraggableBlockPlugin anchorElem={floatingAnchorElem} />
                <KeywordsPlugin />
                <EmojisPlugin />
                <ImagesPlugin />

                <LayoutPlugin />

                <AutoEmbedPlugin />
                <TwitterPlugin />
                <YouTubePlugin />

                <CodeHighlightPlugin />
                <CodeActionMenuPlugin anchorElem={floatingAnchorElem} />

                <MarkdownShortcutPlugin
                    transformers={[
                        TABLE,
                        HR,
                        IMAGE,
                        EMOJI,
                        TWEET,
                        CHECK_LIST,
                        ...ELEMENT_TRANSFORMERS,
                        ...MULTILINE_ELEMENT_TRANSFORMERS,
                        ...TEXT_FORMAT_TRANSFORMERS,
                        ...TEXT_MATCH_TRANSFORMERS,
                    ]}
                />

                <TypingPerfPlugin />
                <TabFocusPlugin />
                <AutocompletePlugin />
                <AutoLinkPlugin />
                <LinkPlugin />

                <ComponentPickerMenuPlugin
                    baseOptions={[
                        ParagraphPickerPlugin(),
                        HeadingPickerPlugin({ n: 1 }),
                        HeadingPickerPlugin({ n: 2 }),
                        HeadingPickerPlugin({ n: 3 }),
                        TablePickerPlugin(),
                        CheckListPickerPlugin(),
                        NumberedListPickerPlugin(),
                        BulletedListPickerPlugin(),
                        QuotePickerPlugin(),
                        CodePickerPlugin(),
                        DividerPickerPlugin(),
                        EmbedsPickerPlugin({ embed: "tweet" }),
                        EmbedsPickerPlugin({ embed: "youtube-video" }),
                        ImagePickerPlugin(),
                        ColumnsLayoutPickerPlugin(),
                        AlignmentPickerPlugin({ alignment: "left" }),
                        AlignmentPickerPlugin({ alignment: "center" }),
                        AlignmentPickerPlugin({ alignment: "right" }),
                        AlignmentPickerPlugin({ alignment: "justify" }),
                    ]}
                    dynamicOptionsFn={DynamicTablePickerPlugin}
                />

                <ContextMenuPlugin />
                <DragDropPastePlugin />
                <EmojiPickerPlugin />

                <FloatingLinkEditorPlugin
                    anchorElem={floatingAnchorElem}
                    isLinkEditMode={isLinkEditMode}
                    setIsLinkEditMode={setIsLinkEditMode}
                />
                <FloatingTextFormatToolbarPlugin
                    anchorElem={floatingAnchorElem}
                    setIsLinkEditMode={setIsLinkEditMode}
                />

                <ListMaxIndentLevelPlugin />
            </div>

            <ActionsPlugin>
                <div className="clear-both flex items-center justify-between gap-2 overflow-auto border-t p-1">
                    <div className="flex flex-1 justify-start">
                        <CounterCharacterPlugin charset="UTF-16" />
                    </div>

                    <div className="flex flex-1 justify-end">
                        <>
                            <ClearEditorActionPlugin />
                            <ClearEditorPlugin />
                        </>
                    </div>
                </div>
            </ActionsPlugin>
        </div>
    );
}