@extends('profile.layout')
@section('title', 'Redaktor: ' . $page->title)

@section('content')
<div class="libro-editor-wrap relative w-full flex flex-col -my-6" style="height: calc(100dvh - 64px); min-height: 420px;">
    <div class="flex flex-col w-full h-full min-h-0">
        @if($formEmailMissing)
        <div class="libro-editor-warning flex items-center gap-2.5 px-4 py-2.5 text-sm shrink-0" style="background:#fff7ed;color:#9a3412;border-bottom:1px solid #fed7aa;">
            <x-icon name="alert-triangle" class="w-4 h-4 shrink-0" />
            <span class="flex-1">{{ __('Sifariş forması üçün e-poçt göstərilməyib — forma işləməyəcək.') }}</span>
            <a href="{{ route('pages.settings', [$profileUser, $page]) }}" class="shrink-0 font-semibold underline" style="color:#9a3412;">{{ __('E-poçt təyin et') }}</a>
        </div>
        @endif
        <iframe id="previewFrame" class="w-full border-0 flex-1 min-h-0 bg-white" srcdoc="{{ $previewHtml ?? $page->html_content }}"></iframe>

        <div class="libro-editor-footer flex-shrink-0 bg-surface border-t border-line px-3 py-2 flex items-center justify-between" style="padding-bottom: calc(8px + env(safe-area-inset-bottom));">
            <div class="flex items-center gap-1.5">
                <a href="https://libro.az/{{ $page->slug }}" target="_blank" class="btn btn-secondary btn-icon no-underline" title="Baxış"><x-icon name="eye" class="w-5 h-5" /></a>
                <span class="text-muted hidden sm:inline">|</span>
                <button id="undoBtn" onclick="undo()" class="btn btn-secondary btn-icon" title="Geri" style="opacity:0.3;"><x-icon name="undo-2" class="w-5 h-5" /></button>
                <button id="redoBtn" onclick="redo()" class="btn btn-secondary btn-icon" title="İrəli" style="opacity:0.3;"><x-icon name="redo-2" class="w-5 h-5" /></button>
            </div>
            <div class="flex items-center gap-2">
                <span id="saveStatus" class="text-xs text-muted"></span>
                <button onclick="saveHtml()" class="btn btn-primary" style="padding:8px 14px;"><x-icon name="save" class="w-4 h-4" /> Saxla</button>
            </div>
        </div>
    </div>

    <!-- Hidden source-of-truth: visual editor serializes the page HTML here. -->
    <textarea id="codeEditor" style="display:none;">{{ $page->html_content }}</textarea>
</div>

<!-- Edit modal -->
<div id="editModal" class="modal-overlay" style="display:none;z-index:60;" onclick="closeModal()">
    <div class="bg-surface rounded-2xl shadow-2xl w-full max-w-md mx-4 p-6 border border-line" style="max-height:min(85vh,600px);overflow-y:auto;" onclick="event.stopPropagation()">
        <div class="flex items-center justify-between mb-4">
            <div class="flex items-center gap-2"><span id="modalIcon"></span><h3 class="font-semibold" id="modalTitle"></h3></div>
            <button onclick="closeModal()" class="text-muted hover:text-ink text-xl"><x-icon name="x" class="w-5 h-5" /></button>
        </div>
        <div id="modalBody"></div>
        <div class="flex gap-2 mt-4">
            <button onclick="applyEdit()" class="btn btn-primary flex-1"><x-icon name="check" class="w-4 h-4" /> Tətbiq et</button>
            <button onclick="closeModal()" class="btn btn-secondary flex-1">Ləğv et</button>
        </div>
    </div>
</div>

<!-- Map edit panel -->
<div id="mapPanel" class="modal-overlay" style="display:none;z-index:70;" onclick="closeMapPanel()">
    <div class="bg-surface rounded-2xl shadow-2xl w-full max-w-3xl mx-4 border border-line flex flex-col overflow-y-auto" style="height:min(90vh,700px);" onclick="event.stopPropagation()">

        {{-- Header --}}
        <div class="flex items-center justify-between px-5 py-4 border-b border-line">
            <div class="flex items-center gap-3">
                <div style="width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#6366f1,#a855f7);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 6px 16px rgba(99,102,241,0.35);"><x-icon name="map-pin" class="w-5 h-5" /></div>
                <div>
                    <h3 class="font-semibold text-ink leading-tight">Xəritə</h3>
                    <p class="text-xs text-muted">Ünvan və ya obyekt adı axtarın, xəritəyə klikləyin</p>
                </div>
            </div>
            <button onclick="closeMapPanel()" class="text-muted hover:text-ink" style="width:32px;height:32px;border-radius:10px;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;"><x-icon name="x" class="w-5 h-5" /></button>
        </div>

        {{-- Search --}}
        <div class="px-5 pt-4">
            <div style="position:relative;">
                <span style="position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;display:flex;"><x-icon name="search" class="w-4 h-4" /></span>
                <input type="text" id="mapSearchInput" class="input w-full text-sm" placeholder="Ünvan və ya obyekt adı..." autocomplete="off" style="padding-left:42px;padding-right:12px;height:46px;border-radius:14px;">
                <div id="mapSearchResults" style="display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:2000;max-height:240px;overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:0 16px 40px rgba(0,0,0,0.16);"></div>
            </div>
        </div>

        {{-- Map --}}
        <div class="flex-1 px-5 pt-3" style="min-height:0;">
            <div id="mapCanvas" class="w-full rounded-2xl border border-line" style="height:100%;min-height:clamp(150px,30vh,240px);background:#e5e7eb;"></div>
        </div>

        {{-- Active point editor --}}
        <div class="px-5 pt-3">
            <div class="rounded-xl border border-line p-3" style="background:var(--surface);">
                <div class="flex items-center gap-2">
                    <div style="width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#6366f1,#a855f7);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;"><x-icon name="map-pin" class="w-4 h-4" /></div>
                    <input type="text" id="mapAddressInput" class="input flex-1 text-sm" placeholder="Nöqtənin adı..." oninput="onPointNameInput()">
                    <button type="button" id="mapRemoveActive" onclick="removeActivePoint()" title="Sil" style="width:34px;height:34px;border-radius:10px;border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px;">✕</button>
                </div>
                <div id="mapActiveAddress" class="text-xs text-muted mt-2" style="padding-left:38px;line-height:1.4;">Ünvan avtomatik müəyyən olunacaq</div>
            </div>
        </div>

        {{-- Points list --}}
        <div class="px-5 pt-3">
            <div class="flex items-center justify-between mb-2">
                <span class="text-xs font-semibold text-muted uppercase tracking-wide">Nöqtələr</span>
                <span id="mapPointsCount" class="text-xs text-muted">0</span>
            </div>
            <div id="mapPointsList" style="max-height:clamp(84px,16vh,132px);overflow-y:auto;display:flex;flex-direction:column;gap:6px;"></div>
        </div>

        {{-- Footer --}}
        <div class="flex gap-2 px-5 py-4">
            <button onclick="applyMap()" class="btn btn-primary flex-1"><x-icon name="check" class="w-4 h-4" /> Tətbiq et</button>
            <button onclick="closeMapPanel()" class="btn btn-secondary flex-1">Ləğv et</button>
        </div>
    </div>
</div>

<!-- Form edit modal -->
<div id="formModal" class="modal-overlay" style="display:none;z-index:70;" onclick="closeFormModal()">
    <div class="bg-surface rounded-2xl shadow-2xl w-full max-w-lg mx-4 border border-line p-6" style="max-height:min(90vh,720px);overflow-y:auto;" onclick="event.stopPropagation()">
        <div class="flex items-center justify-between mb-4">
            <div class="flex items-center gap-3">
                <div style="width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#6366f1,#a855f7);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 6px 16px rgba(99,102,241,0.35);"><x-icon name="clipboard-list" class="w-5 h-5" /></div>
                <div>
                    <h3 class="font-semibold text-ink leading-tight">Sifariş forması</h3>
                    <p class="text-xs text-muted">Sahələri seçin və adlarını dəyişdirin</p>
                </div>
            </div>
            <button onclick="closeFormModal()" class="text-muted hover:text-ink" style="width:32px;height:32px;border-radius:10px;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;"><x-icon name="x" class="w-5 h-5" /></button>
        </div>

        <div class="space-y-4">
            <div><label class="label">Başlıq</label><input type="text" id="formTitleInput" class="input w-full text-sm" placeholder="Sifariş göndər"></div>
            <div><label class="label">Düymə mətni</label><input type="text" id="formButtonInput" class="input w-full text-sm" placeholder="Göndər"></div>
            <div>
                <label class="label">Sahələr</label>
                <p class="text-xs text-muted mb-2">Hansı sahələri göstərmək istədiyinizi seçin və adlarını dəyişdirin.</p>
                <div id="formFieldsContainer" class="space-y-2"></div>
            </div>
        </div>

        <div class="flex gap-2 mt-5">
            <button onclick="applyFormEdit()" class="btn btn-primary flex-1"><x-icon name="check" class="w-4 h-4" /> Tətbiq et</button>
            <button onclick="closeFormModal()" class="btn btn-secondary flex-1">Ləğv et</button>
        </div>
    </div>
</div>

<!-- Add block modal -->
<div id="blockModal" class="modal-overlay" style="display:none;z-index:70;" onclick="closeBlockModal()">
    <div class="bg-surface rounded-2xl shadow-2xl w-full max-w-md mx-4 border border-line p-6" onclick="event.stopPropagation()">
        <div class="flex items-center justify-between mb-5">
            <div class="flex items-center gap-3">
                <div style="width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#6366f1,#a855f7);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 6px 16px rgba(99,102,241,0.35);"><x-icon name="plus" class="w-5 h-5" /></div>
                <div>
                    <h3 class="font-semibold text-ink leading-tight">Blok əlavə et</h3>
                    <p class="text-xs text-muted">Əlavə etmək istədiyiniz bloku seçin</p>
                </div>
            </div>
            <button onclick="closeBlockModal()" class="text-muted hover:text-ink" style="width:32px;height:32px;border-radius:10px;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;"><x-icon name="x" class="w-5 h-5" /></button>
        </div>

        <div class="grid grid-cols-2 gap-3">
            <button type="button" onclick="insertBlock('map')" class="flex flex-col items-center gap-2 p-4 rounded-xl border border-line hover:border-primary hover:bg-surface2 transition-colors text-ink cursor-pointer" style="background:transparent;">
                <span class="w-10 h-10 rounded-full bg-surface flex items-center justify-center text-primary"><x-icon name="map-pin" class="w-5 h-5" /></span>
                <span class="text-sm font-medium">Xəritə</span>
            </button>
            <button type="button" onclick="insertBlock('text')" class="flex flex-col items-center gap-2 p-4 rounded-xl border border-line hover:border-primary hover:bg-surface2 transition-colors text-ink cursor-pointer" style="background:transparent;">
                <span class="w-10 h-10 rounded-full bg-surface flex items-center justify-center text-primary"><x-icon name="file-text" class="w-5 h-5" /></span>
                <span class="text-sm font-medium">Mətn</span>
            </button>
            <button type="button" onclick="insertBlock('image')" class="flex flex-col items-center gap-2 p-4 rounded-xl border border-line hover:border-primary hover:bg-surface2 transition-colors text-ink cursor-pointer" style="background:transparent;">
                <span class="w-10 h-10 rounded-full bg-surface flex items-center justify-center text-primary"><x-icon name="image" class="w-5 h-5" /></span>
                <span class="text-sm font-medium">Şəkil</span>
            </button>
            <button type="button" onclick="insertBlock('divider')" class="flex flex-col items-center gap-2 p-4 rounded-xl border border-line hover:border-primary hover:bg-surface2 transition-colors text-ink cursor-pointer" style="background:transparent;">
                <span class="w-10 h-10 rounded-full bg-surface flex items-center justify-center text-primary"><x-icon name="minus" class="w-5 h-5" /></span>
                <span class="text-sm font-medium">Ayırıcı</span>
            </button>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
const editor = document.getElementById('codeEditor');
const previewFrame = document.getElementById('previewFrame');
let currentEdit = null;
let selectedEl = null;
window.canRemoveWatermark = {{ $canRemoveWatermark ? 'true' : 'false' }};

// Inline SVG icon helper (single Lucide stroke style, for JS-generated HTML).
function iconSVG(name, size) {
    size = size || 14;
    const p = {
        edit: '<path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/>',
        copy: '<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>',
        trash: '<path d="M10 11v6"/><path d="M14 11v6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>',
        up: '<path d="m5 12 7-7 7 7"/><path d="M12 19V5"/>',
        down: '<path d="M12 5v14"/><path d="m19 12-7 7-7-7"/>',
        plus: '<path d="M5 12h14"/><path d="M12 5v14"/>',
        spacing: '<rect x="3" y="3" width="18" height="18" rx="2"/><path d="m8 11 4-4 4 4"/><path d="m8 13 4 4 4-4"/>',
        css: '<path d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"/><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"/><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"/><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"/><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"/>',
        camera: '<path d="M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z"/><circle cx="12" cy="13" r="3"/>',
        check: '<path d="M20 6 9 17l-5-5"/>',
        image: '<rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/>',
        video: '<rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><path d="m10 9 5 3-5 3z"/>',
        music: '<path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/>',
        link: '<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>',
        folder: '<path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/>',
        filePen: '<path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/><path d="M10.378 12.622a1 1 0 0 1 3 3.003L8.36 20.637a2 2 0 0 1-.854.506l-2.867.837a.5.5 0 0 1-.62-.62l.836-2.869a2 2 0 0 1 .506-.853z"/>',
    };
    return '<svg width="'+size+'" height="'+size+'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:middle">'+(p[name]||'')+'</svg>';
}

// ==== History (undo/redo) ====
let history = [editor.value];
let historyIndex = 0;
const MAX_HISTORY = 50;

function pushHistory() {
    // Remove any future states if we're not at the end
    history = history.slice(0, historyIndex + 1);
    history.push(editor.value);
    // Keep max 50 entries
    if (history.length > MAX_HISTORY) history.shift();
    historyIndex = history.length - 1;
    updateUndoButtons();
    scheduleAutosave();
}

function undo() {
    if (historyIndex > 0) {
        historyIndex--;
        editor.value = history[historyIndex];
        previewCode();
        updateUndoButtons();
    }
}

function redo() {
    if (historyIndex < history.length - 1) {
        historyIndex++;
        editor.value = history[historyIndex];
        previewCode();
        updateUndoButtons();
    }
}

function updateUndoButtons() {
    const undoBtn = document.getElementById('undoBtn');
    const redoBtn = document.getElementById('redoBtn');
    if (undoBtn) undoBtn.style.opacity = historyIndex > 0 ? '1' : '0.3';
    if (redoBtn) redoBtn.style.opacity = historyIndex < history.length - 1 ? '1' : '0.3';
}

// Live preview from code → update iframe srcdoc.
// Динамические теги <libro-… /> рендерятся на сервере (нужны данные товаров),
// поэтому при их наличии запрашиваем обработанный HTML; иначе — сразу сырой.
let previewSeq = 0;
function previewCode() {
    const raw = editor.value;
    const seq = ++previewSeq;
    if (!/<libro-[a-z-]+/i.test(raw)) {
        renderPreview(raw);
        return;
    }
    fetch('{{ route('pages.previewhtml', [$profileUser, $page]) }}', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' },
        body: JSON.stringify({ html_content: raw })
    }).then(r => r.json()).then(j => {
        if (seq !== previewSeq) return; // устаревший ответ
        renderPreview(j.html || raw);
    }).catch(() => {
        if (seq !== previewSeq) return;
        renderPreview(raw);
    });
}

function renderPreview(html) {
    // Attach the load handler BEFORE setting srcdoc so a fast reload can't
    // complete before the handler is registered.
    previewFrame.onload = () => {
        try { injectEditorStyles(); } catch(e) {}
        try { attachEditListeners(); } catch(e) {}
        try { renderEditorMaps(); } catch(e) {}
        try { injectBlockControls(); } catch(e) {}
    };
    previewFrame.srcdoc = html;
    // Fallback: the `load` event may not re-fire (e.g. srcdoc value unchanged
    // or the frame already finished loading), so poll the controls too.
    setTimeout(refreshBlockControls, 60);
    setTimeout(refreshBlockControls, 400);
}

// Auto-preview after idle
let previewTimer;
editor.addEventListener('input', () => {
    clearTimeout(previewTimer);
    previewTimer = setTimeout(previewCode, 800);
    scheduleAutosave();
});

// Remove all editor artifacts before saving
function cleanupEditor(doc) {
    // Remove floating toolbars
    doc.querySelectorAll('.libro-toolbar').forEach(el => el.remove());
    // Remove per-block inline controls
    doc.querySelectorAll('.libro-block-ctrls').forEach(el => el.remove());
    doc.querySelectorAll('.libro-spacing-panel').forEach(el => el.remove());
    // Restore <object data-editable> back to clean <object data="…"></object>.
    restoreMediaObjects(doc);
    // Unwrap toolbar wrappers for void media back to the bare element.
    unwrapImages(doc);
    // Remove editor-added inline styles
    doc.querySelectorAll('[data-editable]').forEach(el => {
        el.style.outline = '';
        el.style.outlineOffset = '';
        el.style.cursor = '';
        el.style.opacity = '';
        el.style.setProperty('position', '', 'important');
    });
    // injectBlockControls() sets `position: relative !important` on every top-level
    // block (section / group) so the floating bars position correctly. Clear it here,
    // otherwise it leaks into the saved html_content for template sections that have
    // no data-editable attribute.
    doc.querySelectorAll('section, [data-editable="group"]').forEach(el => {
        el.style.setProperty('position', '', 'important');
    });
    // Вернуть динамические блоки к исходным тегам <libro-… />
    reverseDynamicBlocks(doc);
    // Вернуть карты к плейсхолдеру (координаты остаются в data-* атрибутах)
    restoreMapPlaceholders(doc);
    // Remove editor injected stylesheet
    let editorStyle = doc.getElementById('libro-editor-styles');
    if (editorStyle) editorStyle.remove();
}

// Sync iframe HTML back to editor.
// Serialize a CLONE so the live iframe (and its injected editor controls) is untouched.
function syncIframeToEditor() {
    try {
        const doc = previewFrame.contentDocument;
        if (doc && doc.documentElement) {
            const clone = doc.cloneNode(true);
            cleanupEditor(clone);
            editor.value = '<!DOCTYPE html>\n' + clone.documentElement.outerHTML;
        }
    } catch(e) {}
}

// Save status helper
function setSaveStatus(text, cls) {
    const el = document.getElementById('saveStatus');
    if (!el) return;
    el.textContent = text;
    el.className = 'text-xs ' + (cls || 'text-muted');
}

// Autosave (debounced) — marks content as dirty, saves after 1.5s of idle.
let autosaveTimer = null;
function scheduleAutosave() {
    setSaveStatus('Dəyişiklik...', 'text-warning');
    clearTimeout(autosaveTimer);
    autosaveTimer = setTimeout(saveHtml, 1500);
}

// Save
function saveHtml() {
    // Serialize the (already-edited) iframe DOM back to code before saving.
    syncIframeToEditor();
    const payload = editor.value;
    setSaveStatus('Saxlanır...', 'text-warning');
    fetch('{{ route('pages.htmlcontent.update', [$profileUser, $page]) }}', {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' },
        body: JSON.stringify({ html_content: payload }),
        keepalive: true
    }).then(r => {
        if (!r.ok) throw new Error('HTTP ' + r.status);
        setSaveStatus('Saxlanıldı', 'text-success');
    }).catch(() => {
        setSaveStatus('Xəta', 'text-danger');
    });
}

// Flush any pending autosave when the user leaves the page.
window.addEventListener('pagehide', () => {
    if (autosaveTimer) { clearTimeout(autosaveTimer); autosaveTimer = null; saveHtml(); }
});

// Keyboard shortcuts
editor.addEventListener('keydown', e => {
    if ((e.ctrlKey||e.metaKey) && e.key==='s') { e.preventDefault(); saveHtml(); }
    if ((e.ctrlKey||e.metaKey) && e.key==='z' && !e.shiftKey) { e.preventDefault(); undo(); }
    if ((e.ctrlKey||e.metaKey) && e.key==='z' && e.shiftKey) { e.preventDefault(); redo(); }
});

// ==== Click-to-edit on iframe preview ====
// Inline editing for text blocks: click → edit in place (no modal).
function applyTextOutlines(doc) {
    doc.querySelectorAll('[data-editable="text"]').forEach(el => {
        el.style.cursor = 'text';
        el.style.outline = '1px dashed #818cf8';
        el.style.outlineOffset = '3px';
    });
}

function startInlineEdit(el) {
    if (el.isContentEditable) return;
    const doc = el.ownerDocument;
    const original = el.innerHTML;

    el.setAttribute('contenteditable', 'true');
    el.focus();
    try {
        const range = doc.createRange();
        range.selectNodeContents(el);
        const sel = doc.defaultView.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } catch(e) {}

    el.style.outline = '2px solid #6366f1';
    el.style.outlineOffset = '2px';
    el.style.cursor = 'text';

    let finished = false;
    function finish(revert) {
        if (finished) return;
        finished = true;
        el.querySelectorAll('.libro-inline-done').forEach(b => b.remove());
        el.removeAttribute('contenteditable');
        el.removeEventListener('blur', onBlur);
        el.removeEventListener('keydown', onKeydown);
        if (revert) el.innerHTML = original;
        syncIframeToEditor();                 // serialize (clears editor artifacts)
        injectBlockControls();                // re-add block control bars
        applyTextOutlines(doc);               // re-add dashed text outlines
        pushHistory();
    }
    function onBlur() { finish(false); }
    function onKeydown(e) {
        if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); finish(false); }
        else if (e.key === 'Escape') { e.preventDefault(); finish(true); }
    }
    el.addEventListener('blur', onBlur);
    el.addEventListener('keydown', onKeydown);

    // Mobile "Done" button — soft keyboards don't reliably blur contenteditable.
    const doneBtn = doc.createElement('button');
    doneBtn.type = 'button';
    doneBtn.innerHTML = iconSVG('check', 16);
    doneBtn.className = 'libro-inline-done';
    doneBtn.style.cssText = 'position:absolute;top:2px;right:2px;z-index:9999;width:34px;height:34px;background:#6366f1;color:#fff;border:none;border-radius:8px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,0.3);display:flex;align-items:center;justify-content:center;';
    el.style.setProperty('position', 'relative', 'important');
    el.appendChild(doneBtn);
    doneBtn.addEventListener('mousedown', e => e.preventDefault());
    doneBtn.addEventListener('click', e => { e.preventDefault(); e.stopPropagation(); finish(false); });
}

function attachEditListeners() {
    const doc = previewFrame.contentDocument;
    if (!doc) return;

    // Document-level guards are attached once per document — re-attaching on every
    // overlay refresh would double-fire them. A fresh document (iframe reload) resets
    // these flags naturally.
    if (!doc.__libroLinkGuard) {
        doc.__libroLinkGuard = true;
        // Все ссылки в предпросмотре неактивны: клик не должен уводить iframe
        // на другую страницу (например, href="#" перезагружает редактор).
        doc.addEventListener('click', function(e) {
            if (e.target && e.target.closest && e.target.closest('a[href]')) {
                e.preventDefault();
            }
        }, true);
    }

    doc.querySelectorAll('[data-editable]').forEach(el => {
        // Динамические блоки (<libro-… />) нередактируемы — пропускаем их содержимое.
        if (el.closest && el.closest('[data-libro-src]')) return;
        // Уже привязано (без перезагрузки iframe) — не дублируем обработчики.
        if (el.__libroEditBound) return;
        el.__libroEditBound = true;
        const editType = el.getAttribute('data-editable');

        if (editType === 'text') {
            el.addEventListener('click', function(e) {
                if (this.isContentEditable) return;   // let browser place the cursor
                e.preventDefault(); e.stopPropagation();
                startInlineEdit(this);
            });
            return;
        }

        if (editType === 'map') {
            el.style.cursor = 'pointer';
            el.addEventListener('click', function(e) {
                e.preventDefault(); e.stopPropagation();
                openMapPanel(this);
            });
            return;
        }

        el.style.cursor = 'pointer';
        el.addEventListener('click', function(e) {
            e.preventDefault(); e.stopPropagation();
            const type = this.getAttribute('data-editable');
            const field = this.getAttribute('data-field');
            const label = this.getAttribute('data-label') || field;

            // Store reference for the toolbar actions
            currentEdit = { el: this, field, type, label, doc: doc };

            // Show floating toolbar
            showToolbar(e, this, type, label);
            return;
        });

        if (editType === 'group') {
            el.addEventListener('mouseenter', function(){ this.style.outline='2px dashed #ef4444'; this.style.outlineOffset='2px'; });
            el.addEventListener('mouseleave', function(){ if (this === selectedEl) { this.style.outline='2px dashed #6366f1'; this.style.outlineOffset='2px'; } else { this.style.outline=''; this.style.outlineOffset=''; } });
        }
    });

    applyTextOutlines(doc);

    // Hide toolbar when clicking elsewhere
    if (!doc.__libroHideToolbarGuard) {
        doc.__libroHideToolbarGuard = true;
        doc.addEventListener('click', function(e) {
            if (!e.target.closest('.libro-toolbar') && !e.target.closest('[data-editable]')) {
                removeToolbar();
            }
        });
    }
}

// Initial attach after iframe loads
previewFrame.onload = () => {
    try { injectEditorStyles(); } catch(e) {}
    try { attachEditListeners(); } catch(e) {}
    try { renderEditorMaps(); } catch(e) {}
    try { injectBlockControls(); } catch(e) {}
};

// ==== Floating toolbar ====
function showToolbar(e, el, type, label) {
    removeToolbar();
    // Mark the edited block with a persistent dashed outline
    selectedEl = el;
    el.style.outline = '2px dashed #6366f1';
    el.style.outlineOffset = '2px';
    const doc = el.ownerDocument;
    const bar = doc.createElement('div');
    bar.className = 'libro-toolbar';
    bar.innerHTML = `
        <button class="toolbar-btn toolbar-edit">${iconSVG('edit')} Redaktə et</button>
        <button class="toolbar-btn toolbar-duplicate">${iconSVG('copy')} Dublikat</button>
        <button class="toolbar-btn toolbar-delete">${iconSVG('trash')} Sil</button>
    `;
    bar.style.cssText = 'z-index:999;display:flex;gap:6px;background:#1e1b4b;padding:4px 6px;border-radius:10px;box-shadow:0 4px 16px rgba(0,0,0,0.3);white-space:nowrap;';
    bar.querySelector('.toolbar-edit').style.cssText = 'color:#fff;background:transparent;border:none;font-size:12px;padding:6px 10px;border-radius:6px;cursor:pointer;font-family:system-ui;';
    bar.querySelector('.toolbar-edit').addEventListener('mouseenter', function(){this.style.background='#6366f1';});
    bar.querySelector('.toolbar-edit').addEventListener('mouseleave', function(){this.style.background='transparent';});
    bar.querySelector('.toolbar-delete').style.cssText = 'color:#f87171;background:transparent;border:none;font-size:12px;padding:6px 10px;border-radius:6px;cursor:pointer;font-family:system-ui;';
    bar.querySelector('.toolbar-delete').addEventListener('mouseenter', function(){this.style.background='rgba(248,113,113,0.2)';});
    bar.querySelector('.toolbar-delete').addEventListener('mouseleave', function(){this.style.background='transparent';});
    bar.querySelector('.toolbar-duplicate').style.cssText = 'color:#a5b4fc;background:transparent;border:none;font-size:12px;padding:6px 10px;border-radius:6px;cursor:pointer;font-family:system-ui;';
    bar.querySelector('.toolbar-duplicate').addEventListener('mouseenter', function(){this.style.background='rgba(165,180,252,0.2)';});
    bar.querySelector('.toolbar-duplicate').addEventListener('mouseleave', function(){this.style.background='transparent';});

    bar.querySelector('.toolbar-edit').addEventListener('mousedown', e => e.stopPropagation());
    bar.querySelector('.toolbar-edit').addEventListener('click', e => {
        e.stopPropagation(); e.preventDefault();
        removeToolbar();
        openEditModal();
    });
    bar.querySelector('.toolbar-delete').addEventListener('mousedown', e => e.stopPropagation());
    bar.querySelector('.toolbar-delete').addEventListener('click', e => {
        e.stopPropagation(); e.preventDefault();
        removeToolbar();
        if (currentEdit.el.hasAttribute('data-watermark') && !window.canRemoveWatermark) {
            alert('Bu tarifdə su nişanının silinməsi əlçatan deyil. Zəhmət olmasa tarifi dəyişdirin.');
            currentEdit = null;
            return;
        }
        if (confirm('Bu elementi silmək istədiyinizə əminsiniz?')) {
            currentEdit.el.remove();
            syncIframeToEditor();
            pushHistory();
            currentEdit = null;
        }
    });
    bar.querySelector('.toolbar-duplicate').addEventListener('mousedown', e => e.stopPropagation());
    bar.querySelector('.toolbar-duplicate').addEventListener('click', e => {
        e.stopPropagation(); e.preventDefault();
        removeToolbar();
        const clone = currentEdit.el.cloneNode(true);
        currentEdit.el.parentNode.insertBefore(clone, currentEdit.el.nextSibling);
        syncIframeToEditor();
        previewCode();
        pushHistory();
        currentEdit = null;
    });

    // Void elements (img, input, ...) can't hold children — wrap them in a span and put the toolbar inside.
    const VOID_TAGS = new Set(['IMG', 'INPUT', 'BR', 'HR', 'SOURCE', 'VIDEO', 'AUDIO', 'AREA', 'EMBED', 'LINK', 'META', 'PARAM', 'TRACK', 'WBR']);
    bar.style.position = 'absolute';
    bar.style.bottom = '100%';
    bar.style.left = '0';
    bar.style.marginBottom = '6px';
    if (VOID_TAGS.has(el.tagName)) {
        const wrapper = doc.createElement('span');
        wrapper.className = 'libro-image-wrapper';
        wrapper.style.display = 'inline-block';
        wrapper.style.setProperty('position', 'relative', 'important');
        el.parentNode.insertBefore(wrapper, el);
        wrapper.appendChild(el);
        wrapper.appendChild(bar);
    } else {
        // Append toolbar inside the block; make the block a positioning context
        el.style.setProperty('position', 'relative', 'important');
        el.appendChild(bar);
    }

    // Clamp toolbar within the iframe viewport so it never overflows on mobile.
    const barRect = bar.getBoundingClientRect();
    const vw = doc.documentElement ? doc.documentElement.clientWidth : (doc.defaultView && doc.defaultView.innerWidth);
    if (vw && barRect.right > vw) {
        bar.style.left = (parseInt(bar.style.left || '0', 10) - (barRect.right - vw) - 6) + 'px';
    }
}

function unwrapImages(doc) {
    doc.querySelectorAll('.libro-image-wrapper').forEach(wrapper => {
        const parent = wrapper.parentNode;
        while (wrapper.firstChild) parent.insertBefore(wrapper.firstChild, wrapper);
        wrapper.remove();
    });
}

// Вернуть <object data-editable> к чистому исходнику: восстановить data-атрибут
// (на превью он скрыт, чтобы показать fallback-превью и кнопку), вернуть исходный
// inline-style и убрать редакторские дочерние элементы.
function restoreMediaObjects(doc) {
    doc.querySelectorAll('object[data-editable]').forEach(obj => {
        if (obj.hasAttribute('data-libro-media-src')) {
            obj.setAttribute('data', obj.getAttribute('data-libro-media-src'));
            obj.removeAttribute('data-libro-media-src');
        }
        const style = obj.getAttribute('data-libro-media-style');
        if (style !== null) {
            if (style === '') obj.removeAttribute('style');
            else obj.setAttribute('style', style);
            obj.removeAttribute('data-libro-media-style');
        }
        obj.querySelectorAll('.libro-media-preview, .libro-media-edit-btn').forEach(c => c.remove());
    });
}

function removeToolbar() {
    try {
        const doc = currentEdit?.doc || previewFrame.contentDocument;
        if (doc) {
            doc.querySelectorAll('.libro-toolbar').forEach(t => t.remove());
            unwrapImages(doc);
            doc.querySelectorAll('[data-field]').forEach(el => {
                el.style.setProperty('position', '', 'important');
            });
        }
        if (selectedEl) {
            selectedEl.style.outline = '';
            selectedEl.style.outlineOffset = '';
        }
        selectedEl = null;
    } catch(e) {}
}

function openEditModal() {
    if (!currentEdit) return;
    const { el, type, label } = currentEdit;
    document.getElementById('modalTitle').textContent = label;
    document.getElementById('modalIcon').innerHTML = iconSVG(type==='image'?'image':type==='video'?'video':type==='audio'?'music':type==='link'?'link':type==='group'?'folder':type==='css'?'css':'filePen', 16);

    // Reset the apply button (the `group` branch replaces it with a delete button).
    const _applyBtn = document.getElementById('editModal').querySelector('.btn-primary');
    if (_applyBtn) { _applyBtn.innerHTML = iconSVG('check') + ' Tətbiq et'; _applyBtn.className = 'btn btn-primary flex-1'; _applyBtn.onclick = () => applyEdit(); }

    let body = '';
    if (type === 'text') {
        body = `<textarea class="input w-full text-sm min-h-[120px]" id="editValue">${el.textContent||''}</textarea>`;
    } else if (type === 'image' || type === 'audio' || type === 'video' || type === 'media') {
        const src = mediaSrc(el);
        // Если медиа обёрнуто в ссылку <a href> — рядом даём редактировать и URL ссылки.
        const wrapLink = el.closest ? el.closest('a[href]') : null;
        const linkField = wrapLink
            ? `<div class="space-y-2 mt-3"><label class="label">Link (URL)</label><input type="text" class="input w-full text-sm" id="editLinkValue" value="${wrapLink.getAttribute('href')||''}" placeholder="https://"></div>`
            : '';
        const preview = type === 'image'
            ? `<img src="${escAttr(src)}" class="w-full rounded-lg border mb-2" style="max-height:220px;object-fit:contain;background:#f8fafc;">`
            : `<div class="w-full rounded-lg border mb-2 p-4 text-center" style="background:#f8fafc;color:#64748b;font-size:13px;word-break:break-all;">${iconSVG(type==='video'?'video':'music', 20)} ${escapeHtml(src || label)}</div>`;
        body = preview + `<input type="text" class="input w-full text-sm" id="editValue" value="${escAttr(src)}" placeholder="URL"><button onclick="uploadMedia('${type}')" class="btn btn-secondary w-full text-sm mt-2">${iconSVG('camera')} Yeni fayl yüklə</button>${linkField}`;
    } else if (type === 'link') {
        body = buildLinkEditor(el.getAttribute('href') || '', el.textContent || '');
    } else if (type === 'css') {
        const style = el.getAttribute('style')||'';
        body = `<div class="space-y-2"><label class="label">İnline CSS (style atributu)</label><textarea class="input w-full text-sm min-h-[140px] font-mono" id="editValue">${style}</textarea><p class="text-xs text-muted">Məs: background:#000;color:#fff;padding:20px;border-radius:12px;</p></div>`;
    } else if (type === 'group') {
        body = `<p class="text-sm text-muted">Bu qrup redaktə edilə bilməz.</p>`;
        // Replace apply button with delete for groups
        setTimeout(() => {
            const applyBtn = document.querySelector('#editModal .btn-primary');
            const cancelBtn = document.querySelector('#editModal .btn-secondary');
            if (applyBtn) { applyBtn.innerHTML = iconSVG('trash') + ' Sil'; applyBtn.className = 'btn btn-danger flex-1'; applyBtn.onclick = () => { if(confirm('Bu qrupu silmək istədiyinizə əminsiniz?')){ currentEdit.el.remove(); syncIframeToEditor(); pushHistory(); closeModal(); } }; }
        }, 50);
    }
    document.getElementById('modalBody').innerHTML = body;
    if (type === 'link') selectLinkType(linkState.type);
    document.getElementById('editModal').style.display = 'flex';
    updateApplyButton();
}

function closeModal() { document.getElementById('editModal').style.display = 'none'; currentEdit = null; }

function applyEdit() {
    if (!currentEdit) return;
    const val = document.getElementById('editValue')?.value;
    const textVal = document.getElementById('editText')?.value;

    if (currentEdit.type === 'text') {
        currentEdit.el.textContent = val;
    } else if (currentEdit.type === 'image' || currentEdit.type === 'audio' || currentEdit.type === 'video' || currentEdit.type === 'media') {
        // <object data="…"> — храним источник в data (и в служебном атрибуте превью).
        currentEdit.el.setAttribute('data', val);
        currentEdit.el.setAttribute('data-libro-media-src', val);
        // Если медиа обёрнуто в ссылку — обновляем и её URL.
        const linkVal = document.getElementById('editLinkValue')?.value;
        if (linkVal !== undefined) {
            const link = currentEdit.el.closest && currentEdit.el.closest('a[href]');
            if (link) link.setAttribute('href', linkVal);
        }
    } else if (currentEdit.type === 'link') {
        currentEdit.el.setAttribute('href', buildLinkHref());
        if (textVal) currentEdit.el.textContent = textVal;
    } else if (currentEdit.type === 'css') {
        if (val && val.trim()) currentEdit.el.setAttribute('style', val);
        else currentEdit.el.removeAttribute('style');
    }

    syncIframeToEditor();
    previewCode();
    pushHistory();
    closeModal();
}

// ==== Link növü seçimi (URL / tel: / mailto: / sosial şəbəkələr) ====
const LINK_TYPES = [
    { id: 'url',       label: 'Link' },
    { id: 'phone',     label: 'Telefon' },
    { id: 'email',     label: 'E-poçt' },
    { id: 'whatsapp',  label: 'WhatsApp' },
    { id: 'telegram',  label: 'Telegram' },
    { id: 'instagram', label: 'Instagram' },
    { id: 'tiktok',    label: 'TikTok' },
    { id: 'facebook',  label: 'Facebook' },
    { id: 'youtube',   label: 'YouTube' },
];
let linkState = { type: 'url', url: '', phone: '', email: '', waPhone: '', waText: '', tgUser: '', igUser: '', ttUser: '', fbUser: '', ytUser: '' };

function escapeAttr(s) {
    return String(s == null ? '' : s).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
}

function handleFromUrl(h) {
    try {
        const u = new URL(/^https?:\/\//i.test(h) ? h : 'https://' + h);
        const seg = u.pathname.split('/').filter(Boolean);
        return seg.length ? seg[seg.length - 1].replace(/^@/, '') : '';
    } catch (e) { return String(h || '').replace(/^@/, ''); }
}

function detectLinkType(href) {
    const h = (href || '').trim();
    if (!h) return { type: 'url', url: '' };
    if (/^tel:/i.test(h)) return { type: 'phone', phone: h.replace(/^tel:/i, '') };
    if (/^mailto:/i.test(h)) return { type: 'email', email: h.replace(/^mailto:/i, '') };
    if (/wa\.me|whatsapp/i.test(h)) {
        try {
            const u = new URL(/^https?:\/\//i.test(h) ? h : 'https://' + h);
            const phone = (u.pathname || '').replace(/\//g, '');
            const msg = u.searchParams.get('text') || '';
            return { type: 'whatsapp', waPhone: phone, waText: msg };
        } catch (e) { return { type: 'url', url: h }; }
    }
    if (/t\.me|telegram/i.test(h)) return { type: 'telegram', tgUser: handleFromUrl(h) };
    if (/instagram\.com/i.test(h)) return { type: 'instagram', igUser: handleFromUrl(h) };
    if (/tiktok\.com/i.test(h)) return { type: 'tiktok', ttUser: handleFromUrl(h) };
    if (/facebook\.com|fb\.com/i.test(h)) return { type: 'facebook', fbUser: handleFromUrl(h) };
    if (/youtube\.com|youtu\.be/i.test(h)) return { type: 'youtube', ytUser: handleFromUrl(h) };
    return { type: 'url', url: h };
}

function buildLinkEditor(href, text) {
    linkState = Object.assign({ type: 'url', url: '', phone: '', email: '', waPhone: '', waText: '', tgUser: '', igUser: '', ttUser: '', fbUser: '', ytUser: '' }, detectLinkType(href));
    const btnStyle = 'padding:8px 6px;border-radius:10px;border:1px solid var(--border);background:transparent;color:var(--text);font-size:13px;line-height:1.2;cursor:pointer;text-align:center;font-family:inherit;';
    const grid = LINK_TYPES.map(t =>
        `<button type="button" data-type="${t.id}" onclick="selectLinkType('${t.id}')" style="${btnStyle}">${t.label}</button>`
    ).join('');
    return `<div class="space-y-2">
        <div><label class="label">Link növü</label><div style="display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;">${grid}</div></div>
        <div id="linkFields"></div>
        <div><label class="label">Mətn</label><input type="text" class="input w-full text-sm" id="editText" value="${escapeAttr(text)}"></div>
    </div>`;
}

function selectLinkType(type) {
    linkState.type = type;
    document.querySelectorAll('#editModal [data-type]').forEach(b => {
        const active = b.dataset.type === type;
        b.style.background = active ? 'var(--primary)' : 'transparent';
        b.style.color = active ? '#fff' : 'var(--text)';
        b.style.borderColor = active ? 'var(--primary)' : 'var(--border)';
    });
    renderLinkFields();
}

function renderLinkFields() {
    const f = document.getElementById('linkFields');
    if (!f) return;
    const st = linkState;
    const t = (id, val, ph) => `<input type="text" class="input w-full text-sm" id="${id}" value="${escapeAttr(val)}" placeholder="${ph}">`;
    let html = '';
    if (st.type === 'url') {
        html = `<label class="label">URL</label>` + t('fldUrl', st.url, 'https://example.com');
    } else if (st.type === 'phone') {
        html = `<label class="label">Telefon nömrəsi</label>` + t('fldPhone', st.phone, '+994501234567');
    } else if (st.type === 'email') {
        html = `<label class="label">E-poçt</label>` + t('fldEmail', st.email, 'info@example.com');
    } else if (st.type === 'whatsapp') {
        html = `<label class="label">Telefon nömrəsi</label>` + t('fldWaPhone', st.waPhone, '+994501234567')
             + `<label class="label" style="display:block;margin-top:8px;">Mesaj (boş buraxıla bilər)</label><textarea class="input w-full text-sm" id="fldWaText" rows="2" placeholder="Salam, məhsul barədə məlumat almaq istəyirəm">${escapeAttr(st.waText)}</textarea>`;
    } else if (st.type === 'telegram') {
        html = `<label class="label">İstifadəçi adı (@)</label>` + t('fldTgUser', st.tgUser, 'username');
    } else if (st.type === 'instagram') {
        html = `<label class="label">İstifadəçi adı (@)</label>` + t('fldIgUser', st.igUser, 'username');
    } else if (st.type === 'tiktok') {
        html = `<label class="label">İstifadəçi adı (@)</label>` + t('fldTtUser', st.ttUser, 'username');
    } else if (st.type === 'facebook') {
        html = `<label class="label">Səhifə / istifadəçi</label>` + t('fldFbUser', st.fbUser, 'username');
    } else if (st.type === 'youtube') {
        html = `<label class="label">Kanal / link</label>` + t('fldYtUser', st.ytUser, '@channel');
    }
    f.innerHTML = html;
}

function buildLinkHref() {
    const v = id => (document.getElementById(id) ? document.getElementById(id).value : '').trim();
    const digits = s => s.replace(/[^\d+]/g, '');
    const handle = (s, prefix) => {
        s = (s || '').trim().replace(/^@+/, '');
        if (!s) return '';
        return /^https?:\/\//i.test(s) ? s : prefix + s;
    };
    switch (linkState.type) {
        case 'url': {
            let u = v('fldUrl');
            if (u && !/^[a-z][a-z0-9+.-]*:/i.test(u)) u = 'https://' + u;
            return u;
        }
        case 'phone': { const p = digits(v('fldPhone')); return p ? 'tel:' + p : ''; }
        case 'email': { const e = v('fldEmail'); return e ? 'mailto:' + e : ''; }
        case 'whatsapp': {
            const p = digits(v('fldWaPhone')); const m = v('fldWaText');
            return p ? ('https://wa.me/' + p + (m ? '?text=' + encodeURIComponent(m) : '')) : '';
        }
        case 'telegram': return handle(v('fldTgUser'), 'https://t.me/');
        case 'instagram': return handle(v('fldIgUser'), 'https://instagram.com/');
        case 'tiktok': return handle(v('fldTtUser'), 'https://tiktok.com/@');
        case 'facebook': return handle(v('fldFbUser'), 'https://facebook.com/');
        case 'youtube': return handle(v('fldYtUser'), 'https://youtube.com/');
        default: return v('fldUrl');
    }
}

function updateApplyButton() {
    // Button always shows 'Tətbiq et' now
}

function mediaSrc(el) {
    return el.getAttribute('data-libro-media-src') || el.getAttribute('data') || el.getAttribute('src') || '';
}

async function uploadMedia(kind) {
    const accept = kind === 'image' ? 'image/*' : kind === 'video' ? 'video/*' : kind === 'audio' ? 'audio/*' : 'image/*,video/*,audio/*';
    const input = document.createElement('input'); input.type='file'; input.accept=accept;
    input.onchange = async e => {
        const fd = new FormData(); fd.append('file', e.target.files[0]);
        const r = await fetch('/profile/{{ $profileUser->id }}/pages/{{ $page->id }}/upload', { method:'POST', headers:{'X-CSRF-TOKEN':'{{ csrf_token() }}'}, body:fd });
        const d = await r.json();
        if (d.url) document.getElementById('editValue').value = d.url;
    };
    input.click();
}

// ==== Per-block inline controls (injected into the iframe preview) ====
// Each top-level <section> (a "block") gets a small floating bar with:
// up / down / duplicate / delete / edit CSS.

function blockElements(doc) {
    // Динамические блоки (<libro-… />) не являются редактируемыми блоками.
    const isDynamic = el => el.closest && el.closest('[data-libro-src]');
    // Blocks = top-level <section> children of body, or any top-level group.
    let blocks = Array.from(doc.body.children).filter(c =>
        (c.tagName === 'SECTION' || c.getAttribute('data-editable') === 'group') && !isDynamic(c)
    );
    if (!blocks.length) {
        blocks = Array.from(doc.querySelectorAll('section[data-editable], [data-editable="group"]'))
            .filter(el => !isDynamic(el));
    }
    return blocks;
}

function blockSiblings(el) {
    return Array.from(el.parentNode.children).filter(c =>
        c.tagName === 'SECTION' || c.getAttribute('data-editable') === 'group'
    );
}

function afterMutation() {
    syncIframeToEditor();   // serialize the mutated DOM back to editor.value
    refreshOverlays();      // re-inject bars + listeners in place (keeps scroll position)
    pushHistory();
}

// Re-attach editor overlays (block bars, click-to-edit listeners) without reloading
// the iframe. Reloading (via previewCode) resets the preview scroll to the top, so
// mutations must re-inject in place instead. Both injectBlockControls() and
// attachEditListeners() are idempotent and safe to call repeatedly.
function refreshOverlays() {
    try { injectBlockControls(); } catch (e) {}
    try { attachEditListeners(); } catch (e) {}
}

function moveBlock(el, dir) {
    const sibs = blockSiblings(el);
    const idx = sibs.indexOf(el);
    const j = dir === 'up' ? idx - 1 : idx + 1;
    if (j < 0 || j >= sibs.length) return;
    el.parentNode.insertBefore(el, dir === 'up' ? sibs[j] : sibs[j].nextSibling);
    afterMutation();
}

function duplicateBlock(el) {
    const clone = el.cloneNode(true);
    const bar = clone.querySelector('.libro-block-ctrls');
    if (bar) bar.remove();
    clone.querySelectorAll('.libro-spacing-panel').forEach(p => p.remove());
    el.parentNode.insertBefore(clone, el.nextSibling);
    afterMutation();
}

function deleteBlockEl(el) {
    if (el.hasAttribute('data-watermark') && !window.canRemoveWatermark) {
        alert('Bu tarifdə su nişanının silinməsi əlçatan deyil. Zəhmət olmasa tarifi dəyişdirin.');
        return;
    }
    if (!confirm('Bu bloku silmək istədiyinizə əminsiniz?')) return;
    el.remove();
    afterMutation();
}

function editBlockCss(el) {
    currentEdit = { el: el, field: null, type: 'css', label: el.getAttribute('data-label') || 'CSS', doc: el.ownerDocument };
    openEditModal();
}

// ==== Vertical spacing (padding-top / padding-bottom) ====
function blockSpacing(sec) {
    const px = (v) => { const m = /^(\d+(?:\.\d+)?)px$/.exec(v || ''); return m ? Math.round(parseFloat(m[1])) : 0; };
    return { top: px(sec.style.paddingTop), bottom: px(sec.style.paddingBottom) };
}

function setBlockSpacing(sec, top, bottom) {
    sec.style.paddingTop = top > 0 ? top + 'px' : '';
    sec.style.paddingBottom = bottom > 0 ? bottom + 'px' : '';
    syncIframeToEditor();
    pushHistory();
}

function openSpacingPanel(sec) {
    const doc = sec.ownerDocument;
    // Toggle: close if already open on this block.
    if (sec.querySelector('.libro-spacing-panel')) { sec.querySelector('.libro-spacing-panel').remove(); return; }
    // Close any other open panel.
    doc.querySelectorAll('.libro-spacing-panel').forEach(p => p.remove());

    const STEP = 8, MAX = 200;
    const panel = doc.createElement('div');
    panel.className = 'libro-spacing-panel';
    panel.style.cssText = 'position:absolute;top:36px;right:1px;z-index:9999;background:rgba(30,27,75,0.96);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:8px;box-shadow:0 4px 16px rgba(0,0,0,0.35);min-width:160px;font-family:system-ui,-apple-system,sans-serif;';

    const refreshFns = [];

    function buildRow(label, side) {
        const row = doc.createElement('div');
        row.style.cssText = 'display:flex;align-items:center;gap:8px;';
        const lbl = doc.createElement('span');
        lbl.textContent = label;
        lbl.style.cssText = 'flex:1;font-size:12px;color:#fff;';
        const val = doc.createElement('span');
        val.style.cssText = 'min-width:44px;text-align:center;font-size:12px;color:#fff;font-variant-numeric:tabular-nums;';
        const btnStyle = 'width:26px;height:26px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.14);color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:16px;line-height:1;';
        const minus = doc.createElement('button');
        minus.type = 'button';
        minus.textContent = '−';
        minus.style.cssText = btnStyle;
        const plus = doc.createElement('button');
        plus.type = 'button';
        plus.textContent = '+';
        plus.style.cssText = btnStyle;

        function get() { return side === 'top' ? blockSpacing(sec).top : blockSpacing(sec).bottom; }
        function set(v) {
            const sp = blockSpacing(sec);
            setBlockSpacing(sec, side === 'top' ? v : sp.top, side === 'top' ? sp.bottom : v);
        }
        function refresh() { val.textContent = get() + 'px'; }

        minus.addEventListener('mousedown', e => e.stopPropagation());
        minus.addEventListener('click', e => { e.stopPropagation(); set(Math.max(0, get() - STEP)); refresh(); });
        plus.addEventListener('mousedown', e => e.stopPropagation());
        plus.addEventListener('click', e => { e.stopPropagation(); set(Math.min(MAX, get() + STEP)); refresh(); });

        refreshFns.push(refresh);
        row.appendChild(lbl); row.appendChild(minus); row.appendChild(val); row.appendChild(plus);
        refresh();
        return row;
    }

    panel.appendChild(buildRow('Yuxarı', 'top'));
    panel.appendChild(buildRow('Aşağı', 'bottom'));

    const reset = doc.createElement('button');
    reset.type = 'button';
    reset.textContent = 'Sıfırla';
    reset.style.cssText = 'width:100%;height:26px;background:rgba(255,255,255,0.1);color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:12px;';
    reset.addEventListener('mousedown', e => e.stopPropagation());
    reset.addEventListener('click', e => { e.stopPropagation(); setBlockSpacing(sec, 0, 0); refreshFns.forEach(f => f()); });
    panel.appendChild(reset);

    sec.appendChild(panel);

    // Close the panel when clicking anywhere outside of it.
    const close = (e) => {
        if (panel.contains(e.target)) return;
        doc.removeEventListener('click', close, true);
        panel.remove();
    };
    setTimeout(() => doc.addEventListener('click', close, true), 0);
}

function injectBlockControls() {
    let doc;
    try { doc = previewFrame.contentDocument; } catch(e) { return; }
    if (!doc || !doc.body) return;

    // Idempotent: remove previously injected bars before re-adding.
    doc.querySelectorAll('.libro-block-ctrls').forEach(el => el.remove());
    doc.querySelectorAll('.libro-spacing-panel').forEach(el => el.remove());

    blockElements(doc).forEach(sec => {
        sec.style.setProperty('position', 'relative', 'important');

        const bar = doc.createElement('div');
        bar.className = 'libro-block-ctrls';
        bar.innerHTML = [
            '<button type="button" data-act="up" title="Yuxarı">' + iconSVG('up') + '</button>',
            '<button type="button" data-act="down" title="Aşağı">' + iconSVG('down') + '</button>',
            '<button type="button" data-act="spacing" title="Boşluq (yuxarı/aşağı)">' + iconSVG('spacing') + '</button>',
            '<button type="button" data-act="dup" title="Dublikat">' + iconSVG('copy') + '</button>',
            '<button type="button" data-act="del" title="Sil">' + iconSVG('trash') + '</button>',
            '<button type="button" data-act="add" title="Blok əlavə et">' + iconSVG('plus') + '</button>'
        ].join('');
        bar.style.cssText = 'position:absolute;top:1px;right:1px;z-index:9999;display:flex;flex-direction:row;gap:2px;background:rgba(30,27,75,0.9);padding:3px 4px;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,0.35);';
        bar.querySelectorAll('button').forEach(btn => {
            btn.style.cssText = 'color:#fff;background:transparent;border:none;font-size:14px;line-height:1;padding:7px 8px;min-width:30px;min-height:30px;border-radius:5px;cursor:pointer;';
            btn.addEventListener('mouseenter', function(){ this.style.background = '#6366f1'; });
            btn.addEventListener('mouseleave', function(){ this.style.background = 'transparent'; });
        });

        sec.insertBefore(bar, sec.firstChild);

        bar.addEventListener('click', (e) => {
            const btn = e.target.closest('button');
            if (!btn) return;
            e.preventDefault(); e.stopPropagation();
            const act = btn.dataset.act;
            if (act === 'up') moveBlock(sec, 'up');
            else if (act === 'down') moveBlock(sec, 'down');
            else if (act === 'spacing') openSpacingPanel(sec);
            else if (act === 'dup') duplicateBlock(sec);
            else if (act === 'del') deleteBlockEl(sec);
            else if (act === 'add') openBlockModal(sec);
        });
    });

    // Inject persistent "change media" buttons for <object> blocks.
    injectMediaButtons(doc);

    // Inject "edit form" buttons for <libro-form> dynamic blocks.
    injectFormEditButtons(doc);
}

// Persistent "change media" button for each <object data-editable> block.
// Кнопка кладётся ВНУТРЬ <object> (fallback-контент). Чтобы fallback реально
// показывался, data-атрибут скрывается (сохраняется в data-libro-media-src),
// а вместо него выводится миниатюра/заглушка. restoreMediaObjects() возвращает
// всё обратно к чистому <object data="…"></object>.
function injectMediaButtons(doc) {
    doc.querySelectorAll('object[data-editable]').forEach(obj => {
        if (obj.closest && obj.closest('[data-libro-src]')) return;
        const kind = obj.getAttribute('data-editable') || 'media';
        if (!obj.hasAttribute('data-libro-media-src')) {
            obj.setAttribute('data-libro-media-src', obj.getAttribute('data') || '');
            // Запоминаем исходный inline-style, чтобы вернуть его при сохранении.
            obj.setAttribute('data-libro-media-style', obj.getAttribute('style') || '');
        }
        obj.removeAttribute('data');

        if (obj.querySelector('.libro-media-edit-btn')) return;

        obj.style.setProperty('position', 'relative', 'important');
        obj.style.setProperty('display', 'inline-block', 'important');
        obj.style.setProperty('overflow', 'hidden', 'important');

        const src = obj.getAttribute('data-libro-media-src') || '';
        const preview = doc.createElement('span');
        preview.className = 'libro-media-preview';
        if (kind === 'image') {
            preview.innerHTML = '<img src="' + escAttr(src) + '" alt="" style="width:100%;min-width:120px;max-width:100%;display:block;background:#f1f5f9;"/>';
        } else {
            preview.style.cssText = 'width:100%;min-width:120px;min-height:80px;display:flex;align-items:center;justify-content:center;gap:8px;background:#eef2f7;color:#64748b;font-size:12px;padding:16px;box-sizing:border-box;';
            preview.innerHTML = iconSVG(kind === 'video' ? 'video' : 'music', 20) + '<span>' + escapeHtml(src.split('/').pop() || 'media') + '</span>';
        }
        obj.appendChild(preview);

        const btn = doc.createElement('button');
        btn.type = 'button';
        btn.className = 'libro-media-edit-btn';
        btn.innerHTML = iconSVG('camera') + ' ' + (kind === 'image' ? 'Şəkli dəyiş' : 'Faylı dəyiş');
        btn.style.cssText = 'position:absolute;bottom:0px;left:0px;z-index:9998;width:100%;height:100%;background:rgba(30,27,75,0.3);color:#fff;border:none;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;';
        btn.addEventListener('mouseenter', function(){ this.style.background = 'rgba(99,102,241,0.7)'; });
        btn.addEventListener('mouseleave', function(){ this.style.background = 'rgba(30,27,75,0.3)'; });
        btn.addEventListener('click', e => {
            e.preventDefault(); e.stopPropagation();
            currentEdit = { el: obj, field: obj.getAttribute('data-field'), type: kind, label: obj.getAttribute('data-label') || (kind === 'image' ? 'Şəkil' : 'Media'), doc: obj.ownerDocument };
            openEditModal();
        });
        obj.appendChild(btn);
    });
}

// ==== <libro-form> редактирование (поля, labels, title, button) ====

// Доступные поля формы и их подписи по умолчанию (совпадает с renderFormTag).
const FORM_FIELD_DEFS = [
    { key: 'name',     name: 'Ad',        placeholder: 'Adınız' },
    { key: 'phone',    name: 'Telefon',   placeholder: 'Telefon nömrəniz' },
    { key: 'email',    name: 'Email',     placeholder: 'Email' },
    { key: 'address',  name: 'Ünvan',     placeholder: 'Ünvan' },
    { key: 'notes',    name: 'Qeydlər',   placeholder: 'Qeydlər' },
];
let formEditWrapper = null;

// Разобрать <libro-form ...> из data-libro-src в объект { title, button, fields, labels }.
function parseFormTag(src) {
    const tmp = document.createElement('div');
    tmp.innerHTML = (src || '').trim();
    const el = tmp.querySelector('libro-form');
    if (!el) return null;

    // Если fields не задан — используем дефолт рендера (без email).
    let fields;
    if (el.hasAttribute('fields')) {
        fields = el.getAttribute('fields').split(',').map(s => s.trim()).filter(Boolean);
    } else {
        fields = ['name', 'phone', 'address', 'notes'];
    }

    const labels = {};
    (el.getAttribute('labels') || '').split(',').forEach(pair => {
        const i = pair.indexOf(':');
        if (i > 0) labels[pair.slice(0, i).trim()] = pair.slice(i + 1).trim();
    });

    return {
        title: el.getAttribute('title') || '',
        button: el.getAttribute('button') || '',
        fields,
        labels,
    };
}

function escAttr(s) {
    return String(s).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');
}

// Собрать тег <libro-form ... /> из объекта.
function buildFormTag(data) {
    const parts = ['<libro-form'];
    if (data.title) parts.push('title="' + escAttr(data.title) + '"');
    if (data.button) parts.push('button="' + escAttr(data.button) + '"');
    parts.push('fields="' + data.fields.join(',') + '"');
    const pairs = data.fields.map(k => data.labels[k] ? k + ':' + data.labels[k] : null).filter(Boolean);
    if (pairs.length) parts.push('labels="' + escAttr(pairs.join(',')) + '"');
    return parts.join(' ') + ' />';
}

function openFormModal(wrapper) {
    formEditWrapper = wrapper;
    const src = wrapper.getAttribute('data-libro-src') || '';
    const data = parseFormTag(src) || { title: '', button: '', fields: [], labels: {} };

    document.getElementById('formTitleInput').value = data.title;
    document.getElementById('formButtonInput').value = data.button;

    const container = document.getElementById('formFieldsContainer');
    container.innerHTML = '';
    FORM_FIELD_DEFS.forEach(def => {
        const row = document.createElement('div');
        row.className = 'form-field-row flex items-center gap-2';
        row.dataset.field = def.key;
        const checked = data.fields.includes(def.key);
        const labelVal = data.labels[def.key] || '';
        row.innerHTML =
            '<input type="checkbox" class="rounded shrink-0" ' + (checked ? 'checked' : '') + '>' +
            '<span class="w-24 text-sm shrink-0 text-ink">' + escAttr(def.name) + '</span>' +
            '<input type="text" class="form-label-input input flex-1 text-sm" value="' + escAttr(labelVal) + '" placeholder="' + escAttr(def.placeholder) + '">';
        container.appendChild(row);
    });

    document.getElementById('formModal').style.display = 'flex';
}

function applyFormEdit() {
    if (!formEditWrapper) return;
    const title = document.getElementById('formTitleInput').value.trim();
    const button = document.getElementById('formButtonInput').value.trim();

    const fields = [];
    const labels = {};
    document.querySelectorAll('#formFieldsContainer .form-field-row').forEach(row => {
        const key = row.dataset.field;
        if (row.querySelector('input[type=checkbox]').checked) fields.push(key);
        const lbl = row.querySelector('.form-label-input').value.trim();
        if (lbl) labels[key] = lbl;
    });

    formEditWrapper.setAttribute('data-libro-src', buildFormTag({ title, button, fields, labels }));
    syncIframeToEditor();
    previewCode();
    pushHistory();
    closeFormModal();
}

function closeFormModal() {
    document.getElementById('formModal').style.display = 'none';
    formEditWrapper = null;
}

// Кнопка «редактировать форму» поверх каждого <libro-form> динамического блока.
function injectFormEditButtons(doc) {
    doc.querySelectorAll('[data-libro-src]').forEach(wrapper => {
        const src = wrapper.getAttribute('data-libro-src') || '';
        if (!/^<libro-form[\s>\/]/i.test(src.trim())) return;
        if (wrapper.querySelector('.libro-form-edit-btn')) return; // idempotent

        const btn = doc.createElement('button');
        btn.type = 'button';
        btn.className = 'libro-form-edit-btn';
        btn.innerHTML = iconSVG('edit', 14) + ' Formu redaktə et';
        btn.style.cssText = 'position:absolute;top:6px;right:6px;z-index:9999;pointer-events:auto;display:flex;align-items:center;gap:5px;background:rgba(30,27,75,0.92);color:#fff;border:none;font-size:12px;padding:6px 10px;border-radius:6px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,0.35);font-family:system-ui,sans-serif;';
        btn.addEventListener('mouseenter', function(){ this.style.background = '#6366f1'; });
        btn.addEventListener('mouseleave', function(){ this.style.background = 'rgba(30,27,75,0.92)'; });
        btn.addEventListener('click', e => {
            e.preventDefault(); e.stopPropagation();
            openFormModal(wrapper);
        });
        wrapper.appendChild(btn);
    });
}

// Poll the iframe document until it's ready, then inject the controls.
// The iframe `load` event can be missed (srcdoc unchanged / already loaded),
// so this provides a reliable fallback.
let _blTries = 0;
function refreshBlockControls() {
    let doc = null;
    try { doc = previewFrame.contentDocument; } catch(e) {}
    if (doc && doc.body) {
        _blTries = 0;
        try { injectBlockControls(); } catch(e) {}
        return;
    }
    if (_blTries++ < 60) setTimeout(refreshBlockControls, 100);
}

// ==== Предпросмотр динамических блоков и карт (неинтерактивно) ====

// CSS: динамические блоки и карты видимы, но не реагируют на клики.
const EDITOR_PREVIEW_CSS = `
[data-libro-src]{position:relative;pointer-events:none;outline:2px dashed rgba(168,85,247,.6);outline-offset:5px;border-radius:10px;}
[data-libro-src]::after{content:attr(data-libro-label);position:absolute;top:-12px;left:10px;z-index:1;background:#a855f7;color:#fff;font-family:system-ui,-apple-system,sans-serif;font-size:11px;font-weight:600;line-height:1;padding:4px 8px;border-radius:6px;box-shadow:0 2px 8px rgba(168,85,247,.4);}
[data-editable="map"] .leaflet-container,[data-editable="map"] .leaflet-container *{pointer-events:none !important;}
a[href]{cursor:default;}
.libro-spacing-panel button:hover{background:rgba(99,102,241,0.9) !important;}
`;

function injectEditorStyles() {
    const doc = previewFrame.contentDocument;
    if (!doc || !doc.head) return;
    let st = doc.getElementById('libro-editor-styles');
    if (!st) {
        st = doc.createElement('style');
        st.id = 'libro-editor-styles';
        doc.head.appendChild(st);
    }
    st.textContent = EDITOR_PREVIEW_CSS;
}

// Вернуть динамические блоки (маркеры) к исходным тегам <libro-… />.
function reverseDynamicBlocks(doc) {
    doc.querySelectorAll('[data-libro-src]').forEach(el => {
        const src = el.getAttribute('data-libro-src') || '';
        const tmp = doc.createElement('div');
        tmp.innerHTML = src;
        const node = tmp.firstChild;
        if (node) el.parentNode.replaceChild(node, el);
        else el.remove();
    });
}

// Собрать HTML плейсхолдера карты из data-* атрибутов.
function buildMapPlaceholderHTML(sec) {
    let points = [];
    try { points = JSON.parse(sec.getAttribute('data-points') || '[]') || []; } catch (e) { points = []; }
    if (!points.length) {
        const lat = parseFloat(sec.getAttribute('data-lat'));
        const lng = parseFloat(sec.getAttribute('data-lng'));
        if (lat && lng) points = [{ lat: lat, lng: lng, name: '', address: sec.getAttribute('data-address') || '' }];
    }
    const boxStyle = 'height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,#eef2ff,#e0e7ff);border-radius:16px;color:#6366f1;font-size:15px;font-weight:600;';
    if (!points.length) {
        return '<div class="libro-map-placeholder" style="' + boxStyle + '">📍 Xəritə</div>';
    }
    const label = points[0].name || points[0].address || 'Xəritə';
    const more = points.length > 1 ? '<div style="font-size:12px;opacity:.75;margin-top:2px;">+ ' + (points.length - 1) + ' nöqtə</div>' : '';
    return '<div class="libro-map-placeholder" style="' + boxStyle + '">📍 ' + escapeHtml(label) + more + '</div>';
}

// Вернуть карты к плейсхолдеру (перед сериализацией в editor.value).
function restoreMapPlaceholders(doc) {
    doc.querySelectorAll('section[data-editable="map"]').forEach(sec => {
        sec.innerHTML = buildMapPlaceholderHTML(sec);
    });
}

// Pin-иконка для карты внутри iframe (использует Leaflet, загруженный в iframe).
function iframePinIcon(L, number) {
    const color = '#6366f1';
    return L.divIcon({
        className: 'libro-map-pin',
        html: '<svg width="40" height="40" viewBox="0 0 24 24" fill="' + color + '" stroke="#ffffff" stroke-width="1.3" style="filter:drop-shadow(0 3px 6px rgba(0,0,0,0.35));">'
            + '<path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/>'
            + '<circle cx="12" cy="10" r="3.2" fill="#ffffff" stroke="none"/>'
            + '<text x="12" y="10.5" text-anchor="middle" font-size="10.5" font-weight="700" fill="' + color + '" stroke="none" style="font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;">' + number + '</text>'
            + '</svg>',
        iconSize: [40, 40],
        iconAnchor: [20, 38]
    });
}

// Рендер read-only карт внутри iframe предпросмотра.
function renderEditorMaps() {
    let doc;
    try { doc = previewFrame.contentDocument; } catch (e) { return; }
    if (!doc || !doc.body) return;

    const sections = Array.from(doc.querySelectorAll('section[data-editable="map"]'));
    if (!sections.length) return;

    const done = () => { try { injectBlockControls(); } catch (e) {} };

    // Leaflet уже загружен внутри iframe?
    if (doc.defaultView && doc.defaultView.L) {
        sections.forEach(sec => renderOneMap(doc, sec));
        done();
        return;
    }

    const css = doc.createElement('link');
    css.rel = 'stylesheet';
    css.href = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css';
    doc.head.appendChild(css);
    const js = doc.createElement('script');
    js.src = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js';
    js.onload = () => {
        try { sections.forEach(sec => renderOneMap(doc, sec)); } catch (e) {}
        done();
    };
    js.onerror = done;
    doc.head.appendChild(js);
}

function renderOneMap(doc, sec) {
    const L = doc.defaultView && doc.defaultView.L;
    if (!L) return;

    let points = [];
    try { points = JSON.parse(sec.getAttribute('data-points') || '[]') || []; } catch (e) { points = []; }
    if (!points.length) {
        const lat = parseFloat(sec.getAttribute('data-lat'));
        const lng = parseFloat(sec.getAttribute('data-lng'));
        if (lat && lng) points = [{ lat: lat, lng: lng, name: '', address: sec.getAttribute('data-address') || '' }];
    }
    points = points.filter(p => p && isFinite(parseFloat(p.lat)) && isFinite(parseFloat(p.lng)));
    if (!points.length) return;

    let holder = sec.querySelector('.libro-map-placeholder');
    if (!holder) {
        holder = doc.createElement('div');
        holder.className = 'libro-map-placeholder';
        sec.appendChild(holder);
    }
    // Уже отрендерено (повторный вызов на том же документе).
    if (holder.classList.contains('leaflet-container')) return;

    holder.innerHTML = '';
    holder.style.height = '280px';
    holder.style.width = '100%';
    holder.style.minHeight = '280px';

    const zoom = parseInt(sec.getAttribute('data-zoom'), 10) || 13;
    const map = L.map(holder, {
        dragging: false, scrollWheelZoom: false, touchZoom: false, doubleClickZoom: false,
        boxZoom: false, keyboard: false, zoomControl: false, attributionControl: false, tap: false
    });

    if (JAWG_ACCESS_TOKEN) {
        L.tileLayer('https://{s}.tile.jawg.io/jawg-sunny/{z}/{x}/{y}{r}.png?access-token=' + JAWG_ACCESS_TOKEN, {
            maxZoom: 20, subdomains: 'abcd', detectRetina: true,
            attribution: '&copy; Jawg &copy; OpenStreetMap contributors'
        }).addTo(map);
    } else {
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19, attribution: '&copy; OpenStreetMap contributors'
        }).addTo(map);
    }

    const latLngs = [];
    points.forEach((pt, i) => {
        const ll = [parseFloat(pt.lat), parseFloat(pt.lng)];
        latLngs.push(ll);
        L.marker(ll, { icon: iframePinIcon(L, i + 1), interactive: false }).addTo(map);
    });

    if (latLngs.length === 1) map.setView(latLngs[0], zoom);
    else map.fitBounds(L.latLngBounds(latLngs), { padding: [40, 40] });
}

// ==== Map block (Leaflet) ====
function escapeHtml(s) {
    return String(s == null ? '' : s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
}

let leafletPromise = null;
function ensureLeaflet() {
    if (window.L) return Promise.resolve(window.L);
    if (leafletPromise) return leafletPromise;
    leafletPromise = new Promise((resolve, reject) => {
        const css = document.createElement('link');
        css.rel = 'stylesheet';
        css.href = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css';
        document.head.appendChild(css);

        const js = document.createElement('script');
        js.src = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js';
        js.onload = () => resolve(window.L);
        js.onerror = () => reject(new Error('Leaflet yüklənmədi'));
        document.head.appendChild(js);
    });
    return leafletPromise;
}

const JAWG_ACCESS_TOKEN = @json(config('services.jawg.access_token') ?: '');

const mapState = { map: null, el: null, zoom: 13, points: [], activeId: null, markers: {} };
let pointSeq = 0;
function nextPointId() { return 'p' + (++pointSeq); }
function findPoint(id) { return mapState.points.find(p => p.id === id); }

function mapIcon(number, active) {
    const color = active ? '#7c3aed' : '#6366f1';
    return L.divIcon({
        className: 'libro-map-pin',
        html: '<svg width="40" height="40" viewBox="0 0 24 24" fill="' + color + '" stroke="#ffffff" stroke-width="1.3" style="filter:drop-shadow(0 3px 6px rgba(0,0,0,0.35));">'
            + '<path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/>'
            + '<circle cx="12" cy="10" r="3.2" fill="#ffffff" stroke="none"/>'
            + '<text x="12" y="10.5" text-anchor="middle" font-size="10.5" font-weight="700" fill="' + color + '" stroke="none" style="font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;">' + number + '</text>'
            + '</svg>',
        iconSize: [40, 40],
        iconAnchor: [20, 38],
        popupAnchor: [0, -36],
    });
}

async function openMapPanel(el) {
    removeToolbar();
    closeModal();
    closeMapPanel();

    currentEdit = { el, field: null, type: 'map', label: el.getAttribute('data-label') || 'Xəritə', doc: el.ownerDocument };

    let points = [];
    const raw = el.getAttribute('data-points');
    if (raw) { try { points = JSON.parse(raw) || []; } catch (e) { points = []; } }
    if (!points.length) {
        points = [{
            lat: parseFloat(el.getAttribute('data-lat')) || 40.4093,
            lng: parseFloat(el.getAttribute('data-lng')) || 49.8671,
            name: '',
            address: el.getAttribute('data-address') || '',
        }];
    }
    mapState.points = points.map(p => ({
        id: nextPointId(),
        lat: parseFloat(p.lat) || 0,
        lng: parseFloat(p.lng) || 0,
        name: (p.name || '').toString(),
        address: (p.address || '').toString(),
    }));
    mapState.activeId = mapState.points.length ? mapState.points[0].id : null;
    mapState.zoom = parseInt(el.getAttribute('data-zoom'), 10) || 13;
    mapState.el = el;

    document.getElementById('mapSearchInput').value = '';
    hideMapResults();
    document.getElementById('mapPanel').style.display = 'flex';

    try {
        await ensureLeaflet();
    } catch (e) {
        alert('Xəritə yüklənmədi. İnternet bağlantısını yoxlayın.');
        return;
    }

    const canvas = document.getElementById('mapCanvas');
    if (!mapState.map) {
        mapState.map = L.map(canvas, { scrollWheelZoom: false, touchZoom: true });
        if (JAWG_ACCESS_TOKEN) {
            L.tileLayer('https://{s}.tile.jawg.io/jawg-sunny/{z}/{x}/{y}{r}.png?access-token=' + JAWG_ACCESS_TOKEN, {
                maxZoom: 20,
                subdomains: 'abcd',
                detectRetina: true,
                attribution: '&copy; <a href="https://www.jawg.io/" target="_blank">Jawg</a> &copy; OpenStreetMap contributors'
            }).addTo(mapState.map);
        } else {
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 19,
                attribution: '&copy; OpenStreetMap contributors'
            }).addTo(mapState.map);
        }

        mapState.map.on('click', e => {
            addPoint(e.latlng.lat, e.latlng.lng, '', '');
            reverseGeocodeActive();
        });
    }

    renderAll();
    fitToPoints();
    setTimeout(() => mapState.map.invalidateSize(), 60);
}

function addPoint(lat, lng, name, address) {
    const p = { id: nextPointId(), lat: lat, lng: lng, name: name || '', address: address || '' };
    mapState.points.push(p);
    mapState.activeId = p.id;
    renderAll();
    if (mapState.map) mapState.map.panTo([lat, lng]);
}

function removePoint(id) {
    const idx = mapState.points.findIndex(p => p.id === id);
    if (idx === -1) return;
    mapState.points.splice(idx, 1);
    mapState.activeId = mapState.points.length ? mapState.points[0].id : null;
    renderAll();
}

function removeActivePoint() {
    if (mapState.activeId) removePoint(mapState.activeId);
}

function activatePoint(id) {
    mapState.activeId = id;
    const p = findPoint(id);
    renderAll();
    if (p && mapState.map) mapState.map.panTo([p.lat, p.lng]);
}

function onPointNameInput() {
    const p = findPoint(mapState.activeId);
    if (!p) return;
    p.name = document.getElementById('mapAddressInput').value;
    renderPointsList();
}

function reverseGeocodeActive() {
    const p = findPoint(mapState.activeId);
    if (!p) return;
    fetch('/api/geocode/reverse?lat=' + encodeURIComponent(p.lat) + '&lng=' + encodeURIComponent(p.lng))
        .then(r => r.json())
        .then(j => {
            if (j && j.address) {
                p.address = j.address;
                renderAll();
            }
        })
        .catch(() => {});
}

function syncMarkers() {
    if (!mapState.map) return;
    const seen = {};
    mapState.points.forEach((p, i) => {
        seen[p.id] = true;
        const active = p.id === mapState.activeId;
        const icon = mapIcon(i + 1, active);
        if (mapState.markers[p.id]) {
            const m = mapState.markers[p.id];
            m.setLatLng([p.lat, p.lng]);
            m.setIcon(icon);
        } else {
            const m = L.marker([p.lat, p.lng], { draggable: true, icon: icon }).addTo(mapState.map);
            m.on('click', () => activatePoint(p.id));
            m.on('dragend', () => {
                const pos = m.getLatLng();
                p.lat = pos.lat;
                p.lng = pos.lng;
                mapState.activeId = p.id;
                renderAll();
                reverseGeocodeActive();
            });
            mapState.markers[p.id] = m;
        }
    });
    Object.keys(mapState.markers).forEach(id => {
        if (!seen[id]) {
            mapState.map.removeLayer(mapState.markers[id]);
            delete mapState.markers[id];
        }
    });
}

function renderActiveEditor() {
    const p = findPoint(mapState.activeId);
    const nameInput = document.getElementById('mapAddressInput');
    const addrEl = document.getElementById('mapActiveAddress');
    const removeBtn = document.getElementById('mapRemoveActive');
    const countEl = document.getElementById('mapPointsCount');
    if (nameInput) {
        const v = p ? p.name : '';
        if (nameInput.value !== v) nameInput.value = v;
        nameInput.placeholder = 'Nöqtənin adı...';
    }
    if (addrEl) addrEl.textContent = p ? (p.address || 'Ünvan avtomatik müəyyən olunacaq') : '';
    if (removeBtn) removeBtn.style.display = p ? 'flex' : 'none';
    if (countEl) countEl.textContent = mapState.points.length;
}

function renderPointsList() {
    const list = document.getElementById('mapPointsList');
    if (!list) return;
    if (!mapState.points.length) {
        list.innerHTML = '<div style="padding:14px;text-align:center;font-size:13px;color:var(--muted);border:1px dashed var(--border);border-radius:12px;">Xəritəyə klikləyin və ya axtarışdan seçin</div>';
        return;
    }
    list.innerHTML = mapState.points.map((p, i) => {
        const active = p.id === mapState.activeId;
        const label = p.name || ('Nöqtə ' + (i + 1));
        const rowStyle = 'display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:12px;border:1px solid ' + (active ? '#6366f1' : 'var(--border)') + ';background:' + (active ? 'rgba(99,102,241,0.08)' : 'var(--surface)') + ';';
        const badge = '<span style="width:22px;height:22px;border-radius:7px;background:linear-gradient(135deg,#6366f1,#a855f7);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;">' + (i + 1) + '</span>';
        const texts = '<span style="flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;">'
            + '<span style="font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">' + escapeHtml(label) + '</span>'
            + (p.address ? '<span style="font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">' + escapeHtml(p.address) + '</span>' : '')
            + '</span>';
        const actBtn = '<button type="button" data-pid="' + p.id + '" class="map-activate" style="flex:1;display:flex;align-items:center;gap:8px;border:none;background:transparent;padding:0;cursor:pointer;min-width:0;">' + badge + texts + '</button>';
        const rmBtn = '<button type="button" data-pid="' + p.id + '" class="map-remove" title="Sil" style="width:26px;height:26px;border-radius:8px;border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:15px;flex-shrink:0;">✕</button>';
        return '<div style="' + rowStyle + '">' + actBtn + rmBtn + '</div>';
    }).join('');

    list.querySelectorAll('.map-activate').forEach(b => b.addEventListener('click', () => activatePoint(b.getAttribute('data-pid'))));
    list.querySelectorAll('.map-remove').forEach(b => b.addEventListener('click', () => removePoint(b.getAttribute('data-pid'))));
}

function renderAll() {
    syncMarkers();
    renderActiveEditor();
    renderPointsList();
}

function fitToPoints() {
    if (!mapState.map || !mapState.points.length) return;
    if (mapState.points.length === 1) {
        const p = mapState.points[0];
        mapState.map.setView([p.lat, p.lng], mapState.zoom);
    } else {
        const bounds = L.latLngBounds(mapState.points.map(p => [p.lat, p.lng]));
        mapState.map.fitBounds(bounds, { padding: [40, 40] });
    }
}

let mapSearchTimer = null;
function onMapSearchInput() {
    clearTimeout(mapSearchTimer);
    mapSearchTimer = setTimeout(doMapSearch, 400);
}

function doMapSearch() {
    const q = document.getElementById('mapSearchInput').value.trim();
    if (q.length < 2) { hideMapResults(); return; }
    fetch('/api/geocode/search?q=' + encodeURIComponent(q) + '&limit=6')
        .then(r => r.json())
        .then(j => renderMapResults(j.results || []))
        .catch(() => {});
}

function renderMapResults(results) {
    const box = document.getElementById('mapSearchResults');
    if (!results.length) {
        box.innerHTML = '<div style="padding:12px 14px;font-size:13px;color:var(--muted);">Nəticə tapılmadı</div>';
        box.style.display = 'block';
        return;
    }
    box.innerHTML = results.map((r, i) => {
        const name = r.name || '';
        const addr = r.address || '';
        const title = name || addr || '—';
        const sub = (name && addr && addr.indexOf(name) !== 0) ? addr : '';
        const pinStyle = 'width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#6366f1,#a855f7);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;';
        const titleStyle = 'font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;';
        const subStyle = 'display:block;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;';
        return '<button type="button" data-i="' + i + '" style="display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px 12px;background:none;border:none;border-bottom:1px solid var(--border);cursor:pointer;">'
            + '<span style="' + pinStyle + '">📍</span>'
            + '<span style="flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;"><span style="' + titleStyle + '">' + escapeHtml(title) + '</span>'
            + (sub ? '<span style="' + subStyle + '">' + escapeHtml(sub) + '</span>' : '')
            + '</span></button>';
    }).join('');
    box.style.display = 'block';
    box.querySelectorAll('button').forEach(b => b.addEventListener('click', () => {
        chooseMapResult(results[parseInt(b.dataset.i, 10)]);
    }));
}

function chooseMapResult(r) {
    addPoint(r.lat, r.lng, r.name || '', r.address || '');
    hideMapResults();
    document.getElementById('mapSearchInput').value = '';
    if (mapState.map) mapState.map.setView([r.lat, r.lng], 15);
}

function hideMapResults() {
    const box = document.getElementById('mapSearchResults');
    box.style.display = 'none';
    box.innerHTML = '';
}

function applyMap() {
    if (!mapState.el) return;
    const el = mapState.el;
    const zoom = mapState.map ? Math.round(mapState.map.getZoom()) : mapState.zoom;

    const pts = mapState.points
        .filter(p => p && isFinite(p.lat) && isFinite(p.lng) && !(p.lat === 0 && p.lng === 0))
        .map(p => ({ lat: p.lat, lng: p.lng, name: (p.name || '').trim(), address: (p.address || '').trim() }));

    el.setAttribute('data-points', JSON.stringify(pts));
    if (pts.length) {
        el.setAttribute('data-lat', String(pts[0].lat));
        el.setAttribute('data-lng', String(pts[0].lng));
        el.setAttribute('data-address', pts[0].address);
    } else {
        el.removeAttribute('data-lat');
        el.removeAttribute('data-lng');
        el.removeAttribute('data-address');
    }
    el.setAttribute('data-zoom', String(zoom));

    updateMapPlaceholder(el, pts);

    closeMapPanel();
    syncIframeToEditor();
    previewCode();
    pushHistory();
}

function updateMapPlaceholder(el, pts) {
    const ph = el.querySelector('.libro-map-placeholder');
    if (!ph) return;
    if (!pts.length) {
        ph.innerHTML = '<span style="font-size:30px;line-height:1;">📍</span><div style="padding:0 16px;text-align:center;">Xəritə</div>';
        return;
    }
    const label = pts[0].name || pts[0].address || 'Xəritə';
    const more = pts.length > 1 ? '<div style="font-size:12px;opacity:.75;margin-top:2px;">+ ' + (pts.length - 1) + ' nöqtə</div>' : '';
    ph.innerHTML = '<span style="font-size:30px;line-height:1;">📍</span><div style="padding:0 16px;text-align:center;">' + escapeHtml(label) + more + '</div>';
}

function closeMapPanel() {
    const panel = document.getElementById('mapPanel');
    if (panel) panel.style.display = 'none';
    if (mapState.map) {
        Object.values(mapState.markers).forEach(m => mapState.map.removeLayer(m));
        mapState.markers = {};
    }
    mapState.el = null;
    mapState.points = [];
    mapState.activeId = null;
    currentEdit = null;
}

function insertMap(afterEl) {
    const doc = previewFrame.contentDocument;
    if (!doc || !doc.body) return;

    const sec = doc.createElement('section');
    sec.className = 'libro-block-map';
    sec.setAttribute('data-editable', 'map');
    sec.setAttribute('data-label', 'Xəritə');
    sec.setAttribute('data-lat', '40.4093');
    sec.setAttribute('data-lng', '49.8671');
    sec.setAttribute('data-zoom', '13');
    sec.setAttribute('data-points', '[]');
    sec.innerHTML = '<div class="libro-map-placeholder" style="height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,#eef2ff,#e0e7ff);border-radius:16px;color:#6366f1;font-size:15px;font-weight:600;">📍 Xəritə</div>';

    // Insert after the block whose «+» was clicked, otherwise append to the end.
    if (afterEl && afterEl.parentNode) {
        afterEl.parentNode.insertBefore(sec, afterEl.nextSibling);
    } else {
        doc.body.appendChild(sec);
    }

    syncIframeToEditor();
    pushHistory();

    setTimeout(() => openMapPanel(sec), 120);
}

// ==== Add block modal ====
let blockInsertAfter = null;

function openBlockModal(afterEl) {
    blockInsertAfter = afterEl || null;
    document.getElementById('blockModal').style.display = 'flex';
}

function closeBlockModal() {
    document.getElementById('blockModal').style.display = 'none';
    blockInsertAfter = null;
}

function insertBlock(type) {
    const doc = previewFrame.contentDocument;
    if (!doc || !doc.body) { closeBlockModal(); return; }

    if (type === 'map') {
        const afterEl = blockInsertAfter;
        closeBlockModal();
        insertMap(afterEl);
        return;
    }

    const sec = doc.createElement('section');
    if (type === 'text') {
        sec.setAttribute('data-editable', 'text');
        sec.setAttribute('data-label', 'Mətn');
        sec.textContent = 'Mətninizi buraya yazın';
    } else if (type === 'image') {
        sec.setAttribute('data-editable', 'group');
        sec.setAttribute('data-label', 'Şəkil');
        const obj = doc.createElement('object');
        obj.setAttribute('data-editable', 'image');
        obj.setAttribute('data', 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="800" height="420"><rect width="100%" height="100%" fill="#eef2f6"/><text x="50%" y="50%" font-family="sans-serif" font-size="20" fill="#94a3b8" text-anchor="middle" dominant-baseline="middle">Şəkil</text></svg>'));
        obj.style.cssText = 'width:100%;max-width:100%;border-radius:12px;display:block;';
        sec.appendChild(obj);
    } else if (type === 'divider') {
        sec.setAttribute('data-editable', 'group');
        sec.setAttribute('data-label', 'Ayırıcı');
        const hr = doc.createElement('hr');
        hr.style.cssText = 'border:none;border-top:1px solid #e2e8f0;margin:16px 0;';
        sec.appendChild(hr);
    } else {
        closeBlockModal();
        return;
    }

    // Insert after the block whose «+» was clicked, otherwise append to the end.
    if (blockInsertAfter && blockInsertAfter.parentNode) {
        blockInsertAfter.parentNode.insertBefore(sec, blockInsertAfter.nextSibling);
    } else {
        doc.body.appendChild(sec);
    }

    syncIframeToEditor();
    pushHistory();
    closeBlockModal();
    refreshOverlays(); // re-attach listeners + bars in place (keeps scroll position)
}

// Bind map search input events.
const mapSearchEl = document.getElementById('mapSearchInput');
if (mapSearchEl) {
    mapSearchEl.addEventListener('input', onMapSearchInput);
    mapSearchEl.addEventListener('keydown', e => {
        if (e.key === 'Enter') { e.preventDefault(); doMapSearch(); }
    });
}

// Initial preview
previewCode();
refreshBlockControls();
</script>
@endpush