@php $inp = 'w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500/20 focus:border-teal-400'; @endphp
@csrf

@if($errors->any())
<div class="mb-4 px-4 py-3 bg-red-50 border-[0.5px] border-red-200 rounded-xl text-sm text-red-700">{{ $errors->first() }}</div>
@endif

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <div class="lg:col-span-2 space-y-4">
        <div class="bg-white rounded-xl border-[0.5px] border-gray-200 p-5 space-y-4">
            <div>
                <label class="block text-xs font-medium text-gray-600 mb-1.5">Title</label>
                <input type="text" name="title" value="{{ old('title', $post->title) }}" required maxlength="200" class="{{ $inp }}">
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-600 mb-1.5">Excerpt <span class="text-gray-400">(short summary for listings)</span></label>
                <input type="text" name="excerpt" value="{{ old('excerpt', $post->excerpt) }}" maxlength="300" class="{{ $inp }}">
            </div>
            <div x-data="postEditor()">
                <label class="block text-xs font-medium text-gray-600 mb-1.5">Body</label>

                {{-- Toast UI WYSIWYG editor — progressive enhancement over the Markdown textarea.
                     Content is stored as Markdown (Post::bodyHtml renders it XSS-safe), so the
                     visual editor never introduces raw HTML into storage. Loaded async so a slow
                     CDN can't block the page; init() polls for it and falls back to the textarea. --}}
                <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toast-ui/editor@3.2.2/dist/toastui-editor.min.css">
                <script async src="https://cdn.jsdelivr.net/npm/@toast-ui/editor@3.2.2/dist/toastui-editor-all.min.js"></script>

                <div class="flex items-center gap-1 mb-1.5">
                    <button type="button" @click="openPicker()"
                            class="inline-flex items-center gap-1 px-2.5 py-1 text-xs rounded-lg border-[0.5px] border-gray-200 hover:bg-gray-50 text-teal-700 font-medium transition-colors"
                            title="Insert an image from the Media Library">🖼 Insert Image</button>
                </div>

                {{-- Visual editor mounts here once the async script loads (hidden until then) --}}
                <div x-ref="editor" style="display:none"></div>

                {{-- Fallback / source of truth (hidden once the visual editor mounts) --}}
                <textarea x-ref="ta" name="body" rows="16" maxlength="20000" class="{{ $inp }} resize-y leading-relaxed font-mono">{{ old('body', $post->body) }}</textarea>

                <p x-ref="hint" class="text-xs text-gray-400 mt-1">
                    Format visually with the toolbar. Use the <strong>Markdown / WYSIWYG</strong> tabs at the bottom-right to switch modes.
                </p>

                {{-- Media Library picker --}}
                <div x-show="pickerOpen" x-cloak @click.self="pickerOpen = false" @keydown.escape.window="pickerOpen = false"
                     class="fixed inset-0 z-50 flex items-center justify-center p-4" style="background: rgba(0,0,0,.5)">
                    <div class="bg-white rounded-2xl shadow-xl w-full max-w-2xl max-h-[80vh] flex flex-col">
                        <div class="flex items-center justify-between px-5 py-3 border-b border-gray-100">
                            <h3 class="font-semibold text-gray-800 text-sm">Insert from Media Library</h3>
                            <button type="button" @click="pickerOpen = false" class="text-gray-400 hover:text-gray-600 text-xl leading-none">&times;</button>
                        </div>
                        <div class="p-4 overflow-y-auto">
                            <template x-if="loaded && media.length === 0">
                                <p class="text-center text-gray-400 text-sm py-8">No images in the library yet. Upload some in the <a href="{{ route('media.index') }}" target="_blank" class="text-teal-600 underline">Media Library</a>.</p>
                            </template>
                            <div class="grid grid-cols-3 sm:grid-cols-4 gap-3">
                                <template x-for="m in media" :key="m.id">
                                    <button type="button" @click="insertImage(m.url, m.alt)" title="Insert this image"
                                            class="aspect-square rounded-lg overflow-hidden border-[0.5px] border-gray-200 hover:ring-2 hover:ring-teal-400 transition">
                                        <img :src="m.url" :alt="m.alt" class="w-full h-full object-cover">
                                    </button>
                                </template>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <script>
            function postEditor() {
                return {
                    editor: null,       // Toast UI instance (null = plain-textarea fallback)
                    ready: false,       // Toast finished its initial load — ignore earlier change events
                    dirty: false,       // the user actually edited the body
                    pickerOpen: false,
                    media: [],
                    loaded: false,
                    init() {
                        const ta = this.$refs.ta;
                        if (window.toastui && window.toastui.Editor) { this.mount(ta); return; }
                        // Toast loads async, so poll for it (a slow CDN can't block the page); fall back on timeout.
                        let waited = 0;
                        const iv = setInterval(() => {
                            if (window.toastui && window.toastui.Editor) { clearInterval(iv); this.mount(ta); }
                            else if ((waited += 150) >= 9000) { clearInterval(iv); this.fallback(); }
                        }, 150);
                    },
                    mount(ta) {
                        this.editor = new toastui.Editor({
                            el: this.$refs.editor,
                            height: '460px',
                            initialEditType: 'wysiwyg',
                            previewStyle: 'vertical',
                            usageStatistics: false,
                            initialValue: ta.value,
                            autofocus: false,
                            toolbarItems: [
                                ['heading', 'bold', 'italic', 'strike'],
                                ['hr', 'quote'],
                                ['ul', 'ol', 'task', 'indent', 'outdent'],
                                ['table', 'link'],
                                ['code', 'codeblock'],
                            ],
                            // Route pasted/dropped images through the Media Library instead of base64-embedding.
                            hooks: {
                                addImageBlobHook: (blob, callback) => { this.openPicker(); return false; }
                            },
                        });
                        // Flag real user edits. Toast's initial-load change events are ignored until ready.
                        this.editor.on('change', () => { if (this.ready) this.dirty = true; });
                        setTimeout(() => { this.ready = true; }, 0);
                        this.$refs.editor.style.display = '';
                        ta.style.display = 'none';
                        // Only overwrite the stored Markdown when the user actually edited it — a no-op
                        // save must leave the original body byte-for-byte intact (no serializer round-trip).
                        if (ta.form) {
                            ta.form.addEventListener('submit', () => {
                                if (this.dirty) { ta.value = this.editor.getMarkdown(); }
                            });
                        }
                    },
                    fallback() {
                        this.$refs.editor.style.display = 'none';
                        this.$refs.hint.innerHTML = 'Markdown supported: <code>**bold**</code>, <code>*italic*</code>, <code>## Heading</code>, <code>- list</code>, <code>[link](url)</code>.';
                    },
                    openPicker() {
                        this.pickerOpen = true;
                        if (!this.loaded) {
                            fetch('{{ route('media.list') }}', { headers: { 'Accept': 'application/json' } })
                                .then(function (r) { return r.json(); })
                                .then((d) => { this.media = d; this.loaded = true; })
                                .catch(() => { this.loaded = true; });
                        }
                    },
                    insertImage(url, alt) {
                        if (this.editor) {
                            this.editor.exec('addImage', { imageUrl: url, altText: alt || '' });
                            this.dirty = true;
                        } else {
                            const ta = this.$refs.ta, s = ta.selectionStart;
                            ta.setRangeText('![' + (alt || '') + '](' + url + ')', s, s, 'end');
                            ta.focus();
                        }
                        this.pickerOpen = false;
                    }
                };
            }
            </script>
        </div>
    </div>

    <div class="space-y-4">
        <div class="bg-white rounded-xl border-[0.5px] border-gray-200 p-5 space-y-4">
            <div>
                <label class="block text-xs font-medium text-gray-600 mb-1.5">Status</label>
                <select name="status" class="{{ $inp }}">
                    <option value="draft" {{ old('status', $post->status) === 'draft' ? 'selected' : '' }}>Draft (hidden)</option>
                    <option value="published" {{ old('status', $post->status) === 'published' ? 'selected' : '' }}>Published</option>
                </select>
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-600 mb-1.5">Publish Date &amp; Time</label>
                <input type="datetime-local" name="published_at"
                       value="{{ old('published_at', optional($post->published_at)->format('Y-m-d\TH:i')) }}" class="{{ $inp }}">
                <p class="text-xs text-gray-400 mt-1">Leave empty to publish immediately. A future time schedules the post.</p>
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-600 mb-1.5">Category <span class="text-gray-400">(optional)</span></label>
                <input type="text" name="category" value="{{ old('category', $post->category) }}" maxlength="80" placeholder="News, Advisory, Events…" class="{{ $inp }}">
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-600 mb-1.5">URL Slug <span class="text-gray-400">(auto if blank)</span></label>
                <input type="text" name="slug" value="{{ old('slug', $post->slug) }}" maxlength="200" class="{{ $inp }}">
            </div>
            <div>
                <x-media-image-field name="cover_image" label="Cover Image" :current="$post->cover_image ?? ''" />
            </div>
        </div>
        <div class="flex items-center justify-end gap-2">
            <a href="{{ route('posts.index') }}" class="text-sm font-medium text-gray-400 hover:text-gray-600 px-4 py-2.5">Cancel</a>
            <button type="submit" class="bg-teal-600 hover:bg-teal-700 text-white font-semibold text-sm px-5 py-2.5 rounded-lg transition-colors">Save Post</button>
        </div>
    </div>
</div>

<x-media-picker-modal />