@push('scripts')
    @vite(['resources/js/blog-editor.js'], 'build')
@endpush

@once
    @push('styles')
        <style>
            /* BlogEditor Container */
            .blog-editor-wrapper {
                border: 1px solid rgb(214 211 209);
                border-radius: 0.5rem;
                overflow: hidden;
                background: white;
            }
            .dark .blog-editor-wrapper {
                border-color: rgb(68 64 60);
                background: rgb(41 37 36);
            }

            /* Toolbar */
            .blog-editor-toolbar {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap: 2px;
                padding: 6px 8px;
                border-bottom: 1px solid rgb(214 211 209);
                background: rgb(245 245 244);
                position: sticky;
                top: 0;
                z-index: 10;
            }
            .dark .blog-editor-toolbar {
                border-color: rgb(68 64 60);
                background: rgb(28 25 23);
            }

            .blog-editor-toolbar button {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 32px;
                height: 32px;
                border-radius: 0.375rem;
                color: rgb(87 83 80);
                transition: all 0.15s;
                cursor: pointer;
                border: none;
                background: transparent;
                font-size: 14px;
                font-weight: 600;
            }
            .blog-editor-toolbar button:hover {
                background: rgb(231 229 228);
                color: rgb(41 37 36);
            }
            .dark .blog-editor-toolbar button:hover {
                background: rgb(68 64 60);
                color: rgb(231 229 228);
            }
            .blog-editor-toolbar button.is-active {
                background: rgb(245 158 11);
                color: white;
            }
            .blog-editor-toolbar button:disabled {
                opacity: 0.4;
                cursor: not-allowed;
            }

            /* Toolbar separator */
            .blog-editor-separator {
                width: 1px;
                height: 24px;
                background: rgb(214 211 209);
                margin: 0 4px;
            }
            .dark .blog-editor-separator {
                background: rgb(68 64 60);
            }

            /* Toolbar label */
            .blog-editor-toolbar .toolbar-label {
                font-size: 11px;
                color: rgb(120 113 108);
                padding: 0 4px;
                font-weight: 500;
                text-transform: uppercase;
                letter-spacing: 0.05em;
            }
            .dark .blog-editor-toolbar .toolbar-label {
                color: rgb(168 162 158);
            }

            /* Editor content area */
            .blog-editor-content .ProseMirror {
                min-height: 400px;
                padding: 16px;
                outline: none;
            }

            /* Placeholder */
            .blog-editor-content .ProseMirror p.is-editor-empty:first-child::before {
                content: attr(data-placeholder);
                float: left;
                color: rgb(168 162 158);
                pointer-events: none;
                height: 0;
            }
            .dark .blog-editor-content .ProseMirror p.is-editor-empty:first-child::before {
                color: rgb(87 83 80);
            }

            /* Code block styling */
            .blog-editor-content pre {
                background: #1e1e1e;
                color: #d4d4d4;
                border-radius: 0.5rem;
                padding: 16px;
                margin: 12px 0;
                font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
                font-size: 13px;
                line-height: 1.6;
                overflow-x: auto;
                white-space: pre-wrap;
                word-break: break-word;
            }
            .blog-editor-content pre code {
                background: none;
                padding: 0;
                color: inherit;
                font-size: inherit;
            }

            /* highlight.js token colors (VS Code Dark theme inspired) */
            .hljs-comment, .hljs-quote { color: #6a9955; font-style: italic; }
            .hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-section, .hljs-doctag { color: #569cd6; }
            .hljs-built_in, .hljs-builtin-name { color: #4ec9b0; }
            .hljs-type, .hljs-class .hljs-title, .hljs-title.class_ { color: #4ec9b0; }
            .hljs-string, .hljs-attr { color: #ce9178; }
            .hljs-number, .hljs-symbol, .hljs-bullet { color: #b5cea8; }
            .hljs-title, .hljs-title.function_ { color: #dcdcaa; }
            .hljs-meta { color: #9b9b9b; }
            .hljs-function .hljs-title { color: #dcdcaa; }
            .hljs-params { color: #9cdcfe; }
            .hljs-variable, .hljs-template-variable { color: #9cdcfe; }
            .hljs-attribute { color: #9cdcfe; }
            .hljs-property { color: #9cdcfe; }
            .hljs-name { color: #569cd6; }
            .hljs-tag { color: #569cd6; }
            .hljs-addition { color: #b5cea8; }
            .hljs-deletion { color: #f48771; }

            /* Inline code */
            .blog-editor-content code:not(pre code) {
                background: rgb(231 229 228);
                color: rgb(120 53 15);
                padding: 2px 6px;
                border-radius: 0.25rem;
                font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
                font-size: 0.875em;
            }
            .dark .blog-editor-content code:not(pre code) {
                background: rgb(68 64 60);
                color: rgb(253 230 138);
            }

            /* Editor content prose styling */
            .blog-editor-content .ProseMirror h1 { font-size: 1.875em; font-weight: 700; margin: 0.8em 0 0.4em; }
            .blog-editor-content .ProseMirror h2 { font-size: 1.5em; font-weight: 700; margin: 0.8em 0 0.4em; }
            .blog-editor-content .ProseMirror h3 { font-size: 1.25em; font-weight: 600; margin: 0.7em 0 0.4em; }
            .blog-editor-content .ProseMirror h4 { font-size: 1.1em; font-weight: 600; margin: 0.6em 0 0.3em; }
            .blog-editor-content .ProseMirror p { margin: 0.5em 0; line-height: 1.75; }
            .blog-editor-content .ProseMirror ul,
            .blog-editor-content .ProseMirror ol { padding-left: 1.5em; margin: 0.5em 0; }
            .blog-editor-content .ProseMirror ul { list-style: disc; }
            .blog-editor-content .ProseMirror ol { list-style: decimal; }
            .blog-editor-content .ProseMirror blockquote {
                border-left: 3px solid rgb(245 158 11);
                padding-left: 1em;
                margin: 0.5em 0;
                color: rgb(87 83 80);
                font-style: italic;
            }
            .dark .blog-editor-content .ProseMirror blockquote {
                color: rgb(168 162 158);
            }
            .blog-editor-content .ProseMirror img {
                max-width: 100%;
                border-radius: 0.5rem;
                margin: 0.5em 0;
            }
            .blog-editor-content .ProseMirror hr {
                border: none;
                border-top: 2px solid rgb(214 211 209);
                margin: 1em 0;
            }
            .dark .blog-editor-content .ProseMirror hr {
                border-color: rgb(68 64 60);
            }
            .blog-editor-content .ProseMirror a {
                color: rgb(245 158 11);
                text-decoration: underline;
                cursor: pointer;
            }
        </style>
    @endpush
@endonce

@php
    $statePath = $getStatePath();
    $state = $getState();
    // If body_json is empty, fall back to body_html for initial content
    if (is_array($state)) {
        $initialContent = json_encode($state);
    } elseif (is_string($state) && !empty($state)) {
        $initialContent = $state;
    } else {
        // Try to get body_html as fallback (for posts seeded with HTML only)
        $record = $getRecord();
        $initialContent = $record && $record->body_html ? $record->body_html : '';
    }
@endphp

<div
    id="{{ $getId() }}"
    class="blog-editor-wrapper"
    x-data="{
        editorInstance: null,
        initEditor() {
            const container = this.$el;
            const b64 = container.dataset.initialContent || '';
            let initialContent = '';
            try { initialContent = b64 ? atob(b64) : ''; } catch(e) { initialContent = ''; }
            this.editorInstance = window.initBlogEditor('{{ $getId() }}', initialContent);
        }
    }"
    x-init="initEditor()"
    wire:ignore
    data-initial-content="{{ base64_encode($initialContent) }}"
>
    <!-- Hidden input for Livewire state binding -->
    <input
        type="hidden"
        data-blog-editor-input
        {{ $applyStateBindingModifiers('wire:model') }}="{{ $statePath }}"
    />

    <!-- Toolbar -->
    <div class="blog-editor-toolbar" data-blog-editor-toolbar>
        <button type="button" data-editor-action="bold" title="Bold (Ctrl+B)" class="font-bold">B</button>
        <button type="button" data-editor-action="italic" title="Italic (Ctrl+I)" class="italic">I</button>
        <button type="button" data-editor-action="underline" title="Underline (Ctrl+U)" style="text-decoration: underline;">U</button>
        <button type="button" data-editor-action="strike" title="Strikethrough" style="text-decoration: line-through;">S</button>
        <button type="button" data-editor-action="code" title="Inline code" style="font-family: monospace;">&lt;/&gt;</button>

        <div class="blog-editor-separator"></div>

        <span class="toolbar-label">Headings</span>
        <button type="button" data-editor-action="h1" title="Heading 1" style="font-weight: 700; font-size: 15px;">H1</button>
        <button type="button" data-editor-action="h2" title="Heading 2" style="font-weight: 700; font-size: 13px;">H2</button>
        <button type="button" data-editor-action="h3" title="Heading 3" style="font-weight: 600; font-size: 12px;">H3</button>
        <button type="button" data-editor-action="h4" title="Heading 4" style="font-weight: 600; font-size: 11px;">H4</button>

        <div class="blog-editor-separator"></div>

        <button type="button" data-editor-action="bulletList" title="Bullet list" style="font-size: 16px;">•</button>
        <button type="button" data-editor-action="orderedList" title="Numbered list" style="font-size: 14px;">1.</button>
        <button type="button" data-editor-action="blockquote" title="Quote" style="font-size: 16px;">❝</button>
        <button type="button" data-editor-action="codeBlock" title="Code block" style="font-family: monospace; font-size: 13px;">{ }</button>
        <select data-editor-action="setCodeBlockLanguage" data-language="" title="Code block language" class="blog-editor-lang-select" style="display:none; height: 32px; border-radius: 0.375rem; border: 1px solid rgb(214 211 209); font-size: 12px; padding: 0 8px; color: rgb(87 83 80); background: white; cursor: pointer;">
            <option value="xpp">X++</option>
            <option value="plaintext">Plain Text</option>
            <option value="javascript">JavaScript</option>
            <option value="typescript">TypeScript</option>
            <option value="sql">SQL</option>
            <option value="json">JSON</option>
            <option value="xml">HTML/XML</option>
            <option value="css">CSS</option>
        </select>

        <div class="blog-editor-separator"></div>

        <button type="button" data-editor-action="link" title="Insert link" style="font-size: 14px;">🔗</button>
        <button type="button" data-editor-action="image" title="Insert image" style="font-size: 14px;">🖼</button>
        <button type="button" data-editor-action="hr" title="Horizontal rule" style="font-size: 14px;">―</button>

        <div class="blog-editor-separator"></div>

        <button type="button" data-editor-action="undo" title="Undo (Ctrl+Z)" style="font-size: 14px;">↶</button>
        <button type="button" data-editor-action="redo" title="Redo (Ctrl+Y)" style="font-size: 14px;">↷</button>
        <button type="button" data-editor-action="clearFormat" title="Clear formatting" style="font-size: 14px;">⌫</button>
    </div>

    <!-- Editor content area -->
    <div class="blog-editor-content" data-blog-editor-content></div>
</div>