@once
<script>
    document.addEventListener('DOMContentLoaded', () => {
        if (window.FilamentRichEditor && window.FilamentRichEditor.tiptap) {
            setupTiptapOverride();
        } else {
            const checkInterval = setInterval(() => {
                if (window.FilamentRichEditor && window.FilamentRichEditor.tiptap) {
                    setupTiptapOverride();
                    clearInterval(checkInterval);
                }
            }, 50);
            setTimeout(() => clearInterval(checkInterval), 5000);
        }
    });

    function setupTiptapOverride() {
        if (window.TiptapOverrideLoaded) return;
        window.TiptapOverrideLoaded = true;

        const tiptap = window.FilamentRichEditor.tiptap;
        const OriginalEditor = tiptap.core.Editor;
        const Mark = tiptap.core.Mark;

        const SpanMark = Mark.create({
            name: 'spanStyle',
            parseHTML() {
                return [{ tag: 'span' }]
            },
            renderHTML({ HTMLAttributes }) {
                return ['span', HTMLAttributes, 0]
            },
            addAttributes() {
                return {
                    style: {
                        default: null,
                        parseHTML: element => element.getAttribute('style') || null,
                        renderHTML: attributes => {
                            if (!attributes.style) return {};
                            return { style: attributes.style };
                        },
                    }
                }
            }
        });

        tiptap.core.Editor = class extends OriginalEditor {
            constructor(options) {
                if (options && options.extensions) {
                    const extensions = [];
                    const targetNames = ['heading', 'paragraph', 'blockquote', 'horizontalRule', 'bulletList', 'orderedList', 'listItem', 'bold', 'italic', 'underline', 'strike', 'link'];
                    for (const ext of options.extensions) {
                        if (targetNames.includes(ext.name)) {
                            extensions.push(ext.extend({
                                addAttributes() {
                                    return {
                                        ...this.parent?.(),
                                        style: {
                                            default: null,
                                            parseHTML: element => element.getAttribute('style') || null,
                                            renderHTML: attributes => {
                                                if (!attributes.style) return {};
                                                return { style: attributes.style };
                                            },
                                        }
                                    };
                                }
                            }));
                        } else {
                            extensions.push(ext);
                        }
                    }
                    extensions.push(SpanMark);
                    options.extensions = extensions;
                }
                super(options);
            }
        };
    }
</script>
<style>
    .fi-fo-rich-editor-toolbar button:not([x-on\:click*="toggleSourceCode"]) {
        pointer-events: var(--other-buttons-events, auto);
        opacity: var(--other-buttons-opacity, 1);
    }
</style>
@endonce

@php
    $customBlocks = $getCustomBlocks();
    $groupedCustomBlocks = $getGroupedCustomBlocks();
    $extraAttributeBag = $getExtraAttributeBag();
    $fieldWrapperView = $getFieldWrapperView();
    $id = $getId();
    $isDisabled = $isDisabled();
    $label = $getLabel();
    $livewireKey = $getLivewireKey();
    $key = $getKey();
    $mergeTags = $getMergeTags();
    $statePath = $getStatePath();
    $mentions = $getMentionsForJs();
    $toolbarButtons = $getToolbarButtons();
    $tools = $getTools();
    $floatingToolbars = $getFloatingToolbars();
    $linkProtocols = $getLinkProtocols();
    $fileAttachmentsMaxSize = $getFileAttachmentsMaxSize();
    $fileAttachmentsAcceptedFileTypes = $getFileAttachmentsAcceptedFileTypes();
@endphp

<x-dynamic-component :component="$fieldWrapperView" :field="$field">
    <x-filament::input.wrapper
        :disabled="$isDisabled"
        :valid="! $errors->has($statePath)"
        x-cloak
        x-data="{
            showHtml: false,
            htmlContent: '',
            toggleSourceCode() {
                console.log('[RichEditor] toggleSourceCode called. Current showHtml:', this.showHtml);
                this.showHtml = !this.showHtml;
                console.log('[RichEditor] New showHtml state:', this.showHtml);
                
                const wrapper = this.$el.closest('.fi-fo-rich-editor');
                console.log('[RichEditor] Wrapper element result:', wrapper);
                if (!wrapper) {
                    console.error('[RichEditor] Error: Parent wrapper .fi-fo-rich-editor not found.');
                    return;
                }
                
                const el = wrapper.querySelector('[data-rich-editor-child]');
                console.log('[RichEditor] Child element selector result:', el);
                if (!el) {
                    console.error('[RichEditor] Error: Child element with data-rich-editor-child not found.');
                    return;
                }
                
                const childData = Alpine.$data(el);
                console.log('[RichEditor] Child Alpine data:', childData);
                if (!childData) {
                    console.error('[RichEditor] Error: Could not resolve Alpine data from child element.');
                    return;
                }
                
                const editor = childData.getEditor();
                console.log('[RichEditor] TipTap editor instance:', editor);
                if (!editor) {
                    console.error('[RichEditor] Error: TipTap editor instance is null or undefined.');
                    return;
                }
                
                if (this.showHtml) {
                    this.htmlContent = editor.getHTML() || '';
                    console.log('[RichEditor] Loaded HTML content from editor:', this.htmlContent);
                } else {
                    console.log('[RichEditor] Setting editor content to:', this.htmlContent);
                    try {
                        editor.commands.setContent(this.htmlContent);
                        console.log('[RichEditor] setContent executed successfully. Current editor HTML:', editor.getHTML());
                    } catch (e) {
                        console.error('[RichEditor] Exception caught during setContent:', e);
                    }
                }
            },
            syncHtml() {
                console.log('[RichEditor] syncHtml called. Current htmlContent:', this.htmlContent);
                const wrapper = this.$el.closest('.fi-fo-rich-editor');
                if (!wrapper) {
                    console.warn('[RichEditor] syncHtml: Wrapper not found.');
                    return;
                }
                const el = wrapper.querySelector('[data-rich-editor-child]');
                if (!el) {
                    console.warn('[RichEditor] syncHtml: Child element not found.');
                    return;
                }
                const childData = Alpine.$data(el);
                if (!childData) {
                    console.warn('[RichEditor] syncHtml: Child Alpine data not resolved.');
                    return;
                }
                const editor = childData.getEditor();
                if (!editor) {
                    console.warn('[RichEditor] syncHtml: TipTap editor instance not found.');
                    return;
                }
                try {
                    editor.commands.setContent(this.htmlContent);
                    console.log('[RichEditor] syncHtml: Content set successfully.');
                } catch (e) {
                    console.error('[RichEditor] syncHtml: Exception caught during setContent:', e);
                }
            }
        }"
        :attributes="
            \Filament\Support\prepare_inherited_attributes($extraAttributeBag)
                ->class(['fi-fo-rich-editor'])
        "
    >
        <div
            data-rich-editor-child
            x-load
            x-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('rich-editor', 'filament/forms') }}"
            x-data="richEditorFormComponent({
                        acceptedFileTypes: @js($fileAttachmentsAcceptedFileTypes),
                        acceptedFileTypesValidationMessage: @js($fileAttachmentsAcceptedFileTypes ? __('filament-forms::components.rich_editor.file_attachments_accepted_file_types_message', ['values' => implode(', ', $fileAttachmentsAcceptedFileTypes)]) : null),
                        activePanel: @js($getActivePanel()),
                        canAttachFiles: @js($hasFileAttachments()),
                        deleteCustomBlockButtonIconHtml: @js(\Filament\Support\generate_icon_html(\Filament\Support\Icons\Heroicon::Trash, alias: \Filament\Forms\View\FormsIconAlias::COMPONENTS_RICH_EDITOR_PANELS_CUSTOM_BLOCK_DELETE_BUTTON)->toHtml()),
                        editCustomBlockButtonIconHtml: @js(\Filament\Support\generate_icon_html(\Filament\Support\Icons\Heroicon::PencilSquare, alias: \Filament\Forms\View\FormsIconAlias::COMPONENTS_RICH_EDITOR_PANELS_CUSTOM_BLOCK_EDIT_BUTTON)->toHtml()),
                        extensions: @js($getTipTapJsExtensions()),
                        floatingToolbars: @js($floatingToolbars),
                        getMentionLabelsUsing: async (mentions) => {
                            return await $wire.callSchemaComponentMethod(
                                @js($key),
                                'getMentionLabelsForJs',
                                { mentions },
                            )
                        },
                        getMentionSearchResultsUsing: async (query, char) => {
                            return await $wire.callSchemaComponentMethod(
                                @js($key),
                                'getMentionSearchResultsForJs',
                                { search: query, char },
                            )
                        },
                        hasResizableImages: @js($hasResizableImages()),
                        isDisabled: @js($isDisabled),
                        label: @js($label),
                        isLiveDebounced: @js($isLiveDebounced()),
                        isLiveOnBlur: @js($isLiveOnBlur()),
                        key: @js($key),
                        linkProtocols: @js($linkProtocols),
                        liveDebounce: @js($getNormalizedLiveDebounce()),
                        livewireId: @js($this->getId()),
                        maxFileSize: @js($fileAttachmentsMaxSize),
                        maxFileSizeValidationMessage: @js($fileAttachmentsMaxSize ? trans_choice('filament-forms::components.rich_editor.file_attachments_max_size_message', $fileAttachmentsMaxSize, ['max' => $fileAttachmentsMaxSize]) : null),
                        mentions: @js($mentions),
                        mergeTags: @js($mergeTags),
                        noMergeTagSearchResultsMessage: @js($getNoMergeTagSearchResultsMessage()),
                        placeholder: @js($getPlaceholder()),
                        state: $wire.{{ $applyStateBindingModifiers("\$entangle('{$statePath}')", isOptimisticallyLive: false) }},
                        statePath: @js($statePath),
                        textColors: @js($getTextColorsForJs()),
                        uploadingFileMessage: @js($getUploadingFileMessage()),
                    })"
            x-bind:class="{
                'fi-fo-rich-editor-uploading-file': isUploadingFile,
            }"
            wire:ignore
            wire:key="{{ $livewireKey }}.{{
                substr(md5(serialize([
                    $isDisabled,
                ])), 0, 64)
            }}"
        >
            @if ((! $isDisabled) && filled($toolbarButtons))
                <div class="fi-fo-rich-editor-toolbar" x-bind:style="showHtml ? '--other-buttons-events: none; --other-buttons-opacity: 0.4;' : ''">
                    @foreach ($toolbarButtons as $button => $buttonGroup)
                        <div class="fi-fo-rich-editor-toolbar-group">
                            @foreach ($buttonGroup as $button)
                                @if (is_string($button))
                                    {{ $tools[$button] ?? throw new LogicException("Toolbar button [{$button}] cannot be found.") }}
                                @else
                                    {{ $button }}
                                @endif
                            @endforeach
                        </div>
                    @endforeach
                </div>
            @endif

            <div
                x-show="isUploadingFile"
                x-cloak
                class="fi-fo-rich-editor-uploading-file-message"
            >
                {{ \Filament\Support\generate_loading_indicator_html() }}

                <span>
                    {{ $getUploadingFileMessage() }}
                </span>
            </div>

            <div
                x-show="! isUploadingFile && fileValidationMessage"
                x-cloak
                class="fi-fo-rich-editor-file-validation-message"
            >
                <span
                    x-text="fileValidationMessage"
                    x-show="! isUploadingFile && fileValidationMessage"
                ></span>
            </div>

            <div
                {{ $getExtraInputAttributeBag()->class(['fi-fo-rich-editor-main']) }}
            >
                <div x-show="! showHtml" class="fi-fo-rich-editor-content fi-prose" x-ref="editor">
                    @foreach ($floatingToolbars as $nodeName => $buttons)
                        <div
                            x-ref="floatingToolbar::{{ $nodeName }}"
                            class="fi-fo-rich-editor-floating-toolbar fi-not-prose"
                        >
                            @foreach ($buttons as $button)
                                @if (is_string($button))
                                    {{ $tools[$button] }}
                                @else
                                    {{ $button }}
                                @endif
                            @endforeach
                        </div>
                    @endforeach
                </div>

                <div x-show="showHtml" class="w-full" x-cloak>
                    <textarea
                        x-model="htmlContent"
                        x-on:blur="syncHtml()"
                        class="w-full min-h-[300px] p-4 font-mono text-sm border-0 focus:ring-0 focus:outline-none dark:bg-gray-900 dark:text-gray-100 bg-transparent text-gray-900"
                        placeholder="HTML kodunu buraya yazın veya yapıştırın..."
                    ></textarea>
                </div>

                @if (! $isDisabled)
                    <div
                        x-show="isPanelActive()"
                        x-cloak
                        class="fi-fo-rich-editor-panels"
                    >
                        <div
                            x-show="isPanelActive('customBlocks')"
                            x-cloak
                            class="fi-fo-rich-editor-panel"
                        >
                            <div class="fi-fo-rich-editor-panel-header">
                                <p class="fi-fo-rich-editor-panel-heading">
                                    {{ __('filament-forms::components.rich_editor.tools.custom_blocks') }}
                                </p>

                                <div
                                    class="fi-fo-rich-editor-panel-close-btn-ctn"
                                >
                                    <button
                                        type="button"
                                        x-on:click="togglePanel()"
                                        class="fi-icon-btn"
                                    >
                                        {{ \Filament\Support\generate_icon_html(\Filament\Support\Icons\Heroicon::XMark, alias: \Filament\Forms\View\FormsIconAlias::COMPONENTS_RICH_EDITOR_PANELS_CUSTOM_BLOCKS_CLOSE_BUTTON) }}
                                    </button>
                                </div>
                            </div>

                            <div class="fi-fo-rich-editor-custom-blocks-ctn">
                                @foreach ($groupedCustomBlocks as $customBlockGroupLabel => $groupBlocks)
                                    @if (filled($customBlockGroupLabel))
                                        <h4
                                            class="fi-fo-rich-editor-custom-blocks-group-header"
                                        >
                                            {{ $customBlockGroupLabel }}
                                        </h4>
                                    @endif

                                    <div
                                        class="fi-fo-rich-editor-custom-blocks-list"
                                    >
                                        @foreach ($groupBlocks as $block)
                                            @php
                                                $blockId = $block::getId();
                                            @endphp

                                            <button
                                                draggable="true"
                                                type="button"
                                                x-data="{ isLoading: false }"
                                                x-on:click="
                                                    isLoading = true

                                                    $wire.mountAction(
                                                        'customBlock',
                                                        { editorSelection, id: @js($blockId), mode: 'insert' },
                                                        { schemaComponent: @js($key) },
                                                    )
                                                "
                                                x-on:dragstart="$event.dataTransfer.setData('customBlock', @js($blockId))"
                                                x-on:open-modal.window="isLoading = false"
                                                x-on:run-rich-editor-commands.window="isLoading = false"
                                                class="fi-fo-rich-editor-custom-block-btn"
                                            >
                                                {{
                                                    \Filament\Support\generate_loading_indicator_html((new \Illuminate\View\ComponentAttributeBag([
                                                        'x-show' => 'isLoading',
                                                    ])))
                                                }}

                                                {{ $block::getLabel() }}
                                            </button>
                                        @endforeach
                                    </div>
                                @endforeach
                            </div>
                        </div>

                        <div
                            x-show="isPanelActive('mergeTags')"
                            x-cloak
                            class="fi-fo-rich-editor-panel"
                        >
                            <div class="fi-fo-rich-editor-panel-header">
                                <p class="fi-fo-rich-editor-panel-heading">
                                    {{ __('filament-forms::components.rich_editor.tools.merge_tags') }}
                                </p>

                                <div
                                    class="fi-fo-rich-editor-panel-close-btn-ctn"
                                >
                                    <button
                                        type="button"
                                        x-on:click="togglePanel()"
                                        class="fi-icon-btn"
                                    >
                                        {{ \Filament\Support\generate_icon_html(\Filament\Support\Icons\Heroicon::XMark, alias: \Filament\Forms\View\FormsIconAlias::COMPONENTS_RICH_EDITOR_PANELS_MERGE_TAGS_CLOSE_BUTTON) }}
                                    </button>
                                </div>
                            </div>

                            <div class="fi-fo-rich-editor-merge-tags-list">
                                @foreach ($mergeTags as $tagId => $tagLabel)
                                    <button
                                        draggable="true"
                                        type="button"
                                        x-on:click="insertMergeTag(@js($tagId))"
                                        x-on:dragstart="$event.dataTransfer.setData('mergeTag', @js($tagId))"
                                        class="fi-fo-rich-editor-merge-tag-btn"
                                    >
                                        <span
                                            data-type="mergeTag"
                                            data-id="{{ $tagId }}"
                                        >
                                            {{ $tagLabel }}
                                        </span>
                                    </button>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </x-filament::input.wrapper>
</x-dynamic-component>