/// <reference types="@dhwaniapp/plugin-sdk" />

(function() {
    const React = window.React;
    const { Node, ReactNodeViewRenderer, NodeViewWrapper, NodeViewContent, mergeAttributes } = window.DhwaniEditorSDK;

    // 1. Define the React Component for the Tip Node View
    function TipCalloutComponent() {
        return React.createElement(
            NodeViewWrapper,
            { 
                className: "alert shadow-sm my-4 text-left flex items-center gap-3",
                style: {
                    backgroundColor: "var(--color-info)",
                    color: "var(--color-info-content)"
                }
            },
            React.createElement(
                "div",
                { className: "shrink-0 select-none flex items-center justify-center" },
                React.createElement(
                    "svg",
                    {
                        xmlns: "http://www.w3.org/2000/svg",
                        fill: "none",
                        viewBox: "0 0 24 24",
                        strokeWidth: "2",
                        stroke: "currentColor",
                        className: "w-5 h-5"
                    },
                    React.createElement("path", {
                        strokeLinecap: "round",
                        strokeLinejoin: "round",
                        d: "m11.25 11.25.041-.02a.75.75 0 1 1 1.084 1.085l-.042.022m0 0a.75.75 0 1 1-1.084-1.085l.042-.022ZM12 21.75a9.75 9.75 0 1 0 0-19.5 9.75 9.75 0 0 0 0 19.5Z"
                    })
                )
            ),
            React.createElement(
                NodeViewContent,
                { 
                    className: "outline-none flex-1 font-medium",
                    style: {
                        fontFamily: "var(--editor-font-family, inherit)",
                        fontSize: "var(--editor-font-size, inherit)",
                        fontWeight: "var(--editor-font-weight, inherit)"
                    }
                }
            )
        );
    }

    // 2. Define the Tiptap Node Configuration
    const TipCalloutNode = Node.create({
        name: 'tipCallout',
        group: 'block',
        content: 'block+',
        defining: true,
        parseHTML() {
            return [{ tag: 'div[data-type="tip-callout"]' }];
        },
        renderHTML({ HTMLAttributes }) {
            return ['div', mergeAttributes(HTMLAttributes, { 'data-type': 'tip-callout' }), 0];
        },
        addNodeView() {
            return ReactNodeViewRenderer(TipCalloutComponent);
        }
    });

    // 3. Register it with Dhwani registry
    window.Dhwani.registerPageExtension({
        name: 'tipCallout',
        tiptapExtension: TipCalloutNode,
        slashCommand: {
            title: 'Tip Callout',
            description: 'Insert an editable green tip box',
            // Simple lightbulb SVG icon
            icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 text-success">
              <path stroke-linecap="round" stroke-linejoin="round" d="M12 18a3.75 3.75 0 00.495-7.467 5.99 5.99 0 00-1.925 3.546 5.974 5.974 0 01-2.133-1A3.75 3.75 0 0012 18zM12 21h.008v.008H12V21z" />
            </svg>`,
            command: (editor) => {
                editor
                    .chain()
                    .focus()
                    .insertContent({
                        type: 'tipCallout',
                        content: [
                            {
                                type: 'paragraph',
                                content: [{ type: 'text', text: 'Tip: Type your recommendation here...' }]
                            }
                        ]
                    })
                    .run();

                // Set selection inside the callout content (2 positions back from end of insertion)
                const { from } = editor.state.selection;
                editor.commands.setTextSelection(from - 2);
            }
        }
    });
    console.log("[TipCalloutPlugin] Loaded successfully!");
})();
