@extends('layouts.dashboard.inface', ['section' => 'contracts'])

@section('extra-styles')
    <style>
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }

        .contract-variable {
            background-color: #e0e7ff;
            color: #4338ca;
            padding: 2px 6px;
            border-radius: 4px;
            font-family: monospace;
            font-weight: 600;
            border: 1px solid #c7d2fe;
            display: inline-block;
        }

        .contract-editor strong>.contract-variable,
        .contract-editor b>.contract-variable {
            font-weight: 700;
        }

        .contract-editor em>.contract-variable,
        .contract-editor i>.contract-variable {
            font-style: italic;
        }

        .contract-editor u>.contract-variable {
            text-decoration: underline;
        }

        .contract-editor {
            outline: none;
        }

        .contract-editor:empty::before {
            content: attr(data-placeholder);
            color: #94a3b8;
        }

        [x-cloak] {
            display: none !important;
        }
    </style>
@endsection

@section('navbar-buttons')
    <div class="flex items-center gap-3">
        <button id="open-contract-history" type="button"
            class="flex items-center gap-2 rounded-lg bg-[#f0f2f4] px-3 py-1.5 text-sm font-medium text-[#111318] hover:bg-[#e5e7eb] disabled:cursor-not-allowed disabled:opacity-50"
            @disabled(!$selectedTemplate)>
            <span class="material-symbols-outlined text-[18px]">history</span>
            Historial de Versiones
        </button>

        @if ($selectedTemplate)
            <button form="contract-preview-form"
                class="flex items-center gap-2 rounded-lg bg-[#f0f2f4] px-3 py-1.5 text-sm font-medium text-[#111318] hover:bg-[#e5e7eb]">
                <span class="material-symbols-outlined text-[18px]">picture_as_pdf</span>
                Vista Previa PDF
            </button>
        @else
            <button type="button"
                class="flex items-center gap-2 rounded-lg bg-[#f0f2f4] px-3 py-1.5 text-sm font-medium text-[#111318] opacity-50"
                disabled>
                <span class="material-symbols-outlined text-[18px]">picture_as_pdf</span>
                Vista Previa PDF
            </button>
        @endif

        <button form="contract-editor-form"
            class="rounded-lg bg-primary px-4 py-1.5 text-sm font-bold text-white shadow-sm hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-50"
            @disabled(!$selectedTemplate)>
            Guardar Plantilla
        </button>
    </div>
@endsection

@section('content')
    @php
        $editorName = old('name', $selectedTemplate['name'] ?? '');
        $editorContent = old('content', $selectedTemplate['content'] ?? '');
        $selectedDevelopmentName = collect($developmentOptions)->firstWhere('id', $selectedDevelopmentId)['name'] ?? null;
        $selectedContractId = $selectedTemplate['id'] ?? null;
    @endphp

    <div class="flex flex-1 overflow-hidden">
        <div class="w-80 border-r border-[#dbdfe6] bg-white flex flex-col">
            <div class="border-b border-[#dbdfe6] p-4">
                <div class="mb-3 flex items-center justify-between">
                    <h3 class="text-sm font-bold">Variables Dinamicas</h3>
                    <span class="material-symbols-outlined cursor-help text-[#616f89]"
                        title="Haz clic en una variable para insertarla en el documento">info</span>
                </div>
                <form action="{{ route('realEstate.contracts') }}" method="GET" class="mb-3">
                    <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-[#616f89]">
                        Fraccionamiento
                    </label>
                    <select name="development_id"
                        class="w-full rounded-lg border border-[#dbdfe6] bg-[#f0f2f4] px-3 py-2 text-xs focus:border-primary focus:ring-1 focus:ring-primary"
                        onchange="this.form.submit()">
                        @forelse ($developmentOptions as $development)
                            <option value="{{ $development['id'] }}" @selected($development['id'] === $selectedDevelopmentId)>
                                {{ $development['name'] }}
                            </option>
                        @empty
                            <option value="">Sin fraccionamientos</option>
                        @endforelse
                    </select>
                    @if ($selectedContractId)
                        <input type="hidden" name="contract_id" value="{{ $selectedContractId }}">
                    @endif
                </form>
                <div class="relative">
                    <span
                        class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-sm text-[#616f89]">search</span>
                    <input id="contract-variable-search"
                        class="w-full rounded-lg border-none bg-[#f0f2f4] py-1.5 pl-9 text-xs focus:ring-1 focus:ring-primary"
                        placeholder="Buscar variable..." type="text" />
                </div>
            </div>

            <div class="flex-1 overflow-y-auto p-4 flex flex-col gap-6">
                @forelse ($variableGroups as $group)
                    <div class="contract-variable-group">
                        <div class="mb-2 flex items-center gap-2 text-[#616f89]">
                            <span class="material-symbols-outlined text-xs">{{ $group['icon'] }}</span>
                            <span class="text-[10px] font-bold uppercase tracking-widest">{{ $group['title'] }}</span>
                        </div>
                        <div class="flex flex-col gap-2">
                            @foreach ($group['items'] as $item)
                                <button type="button"
                                    class="contract-variable-item group flex items-center justify-between rounded border border-dashed border-[#dbdfe6] bg-[#f6f6f8] p-2 text-left hover:border-primary/50 disabled:cursor-not-allowed disabled:opacity-50"
                                    data-token="{{ $item['token'] }}" data-label="{{ $item['label'] }}"
                                    @disabled(!$selectedTemplate)>
                                    <div class="min-w-0">
                                        <span class="block truncate text-xs font-mono font-medium text-indigo-700">
                                            {{ $item['token'] }}
                                        </span>
                                        <span class="block truncate text-[10px] text-[#616f89]">
                                            {{ $item['label'] }}
                                        </span>
                                    </div>
                                    <span
                                        class="material-symbols-outlined text-sm text-[#616f89] opacity-0 group-hover:opacity-100">add</span>
                                </button>
                            @endforeach
                        </div>
                    </div>
                @empty
                    <div class="rounded-xl border border-dashed border-[#dbdfe6] bg-[#f6f6f8] p-4 text-xs text-[#616f89]">
                        No hay variables configuradas.
                    </div>
                @endforelse
            </div>
        </div>

        <div class="flex-1 overflow-y-auto bg-background-light dark:bg-[#1a212e]">
            <div class="mx-auto max-w-4xl px-8 py-12">
                @if (session('success'))
                    <div class="mb-6 rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700">
                        {{ session('success') }}
                    </div>
                @endif

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

                @if (!$selectedDevelopmentId)
                    <div class="rounded-2xl border border-dashed border-[#dbdfe6] bg-white p-12 text-center shadow-sm">
                        <p class="text-sm font-semibold text-[#111318]">No hay fraccionamientos disponibles</p>
                        <p class="mt-2 text-sm text-[#616f89]">Crea primero un fraccionamiento para administrar plantillas de contrato.</p>
                    </div>
                @elseif (!$selectedTemplate)
                    <div class="rounded-2xl border border-dashed border-[#dbdfe6] bg-white p-12 text-center shadow-sm">
                        <p class="text-sm font-semibold text-[#111318]">Aun no existen plantillas para {{ $selectedDevelopmentName }}</p>
                        <p class="mt-2 text-sm text-[#616f89]">Crea una plantilla base y comienza a editarla desde este panel.</p>
                        <form action="{{ route('realEstate.contracts.store') }}" method="POST" enctype="multipart/form-data"
                            class="mt-6 mx-auto max-w-lg text-left">
                            @csrf
                            <input type="hidden" name="development_id" value="{{ $selectedDevelopmentId }}">
                            <div class="grid gap-4">
                                <div>
                                    <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-[#616f89]">
                                        Nombre de la plantilla
                                    </label>
                                    <input name="name"
                                        class="w-full rounded-lg border border-[#dbdfe6] px-3 py-2 text-sm focus:border-primary focus:ring-1 focus:ring-primary"
                                        placeholder="Contrato base de compraventa" value="{{ old('name') }}" />
                                </div>
                                <div>
                                    <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-[#616f89]">
                                        Importar archivo DOCX
                                    </label>
                                    <input name="template_file" type="file"
                                        accept=".docx,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
                                        class="w-full rounded-lg border border-[#dbdfe6] bg-white px-3 py-2 text-sm file:mr-3 file:rounded-md file:border-0 file:bg-primary/10 file:px-3 file:py-2 file:text-xs file:font-semibold file:text-primary focus:border-primary focus:ring-1 focus:ring-primary" />
                                    <p class="mt-2 text-xs text-[#616f89]">
                                        Opcional. Si cargas un Word, la plantilla se crea con el formato del documento.
                                    </p>
                                </div>
                                <button
                                    class="inline-flex items-center justify-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-bold text-white shadow-sm hover:bg-primary/90">
                                    <span class="material-symbols-outlined text-[18px]">add_circle</span>
                                    Crear primera plantilla
                                </button>
                            </div>
                        </form>
                    </div>
                @else
                    <form id="contract-editor-form"
                        action="{{ route('realEstate.contracts.update', ['contract' => $selectedTemplate['id']]) }}"
                        method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')

                        <div class="mb-4 rounded-xl border border-[#dbdfe6] bg-white p-4 shadow-sm">
                            <div class="grid gap-4 md:grid-cols-[minmax(0,1fr)_220px]">
                                <div>
                                    <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-[#616f89]">
                                        Nombre de la plantilla
                                    </label>
                                    <input name="name"
                                        class="w-full rounded-lg border border-[#dbdfe6] px-3 py-2 text-sm focus:border-primary focus:ring-1 focus:ring-primary"
                                        value="{{ $editorName }}" />
                                </div>
                                <div>
                                    <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-[#616f89]">
                                        Fraccionamiento
                                    </label>
                                    <div class="rounded-lg border border-[#dbdfe6] bg-[#f6f6f8] px-3 py-2 text-sm text-[#111318]">
                                        {{ $selectedDevelopmentName }}
                                    </div>
                                </div>
                            </div>
                            <div class="mt-4 grid gap-4 md:grid-cols-[minmax(0,1fr)_minmax(260px,320px)]">
                                <div class="rounded-xl border border-primary/15 bg-primary/5 px-4 py-3 text-xs text-[#42526b]">
                                    <p class="font-semibold text-[#111318]">Importar desde DOCX</p>
                                    <p class="mt-1">
                                        Si cargas un Word y guardas, el contenido actual se reemplaza usando el formato del documento.
                                    </p>
                                    @if (($selectedTemplate['source_type'] ?? null) === 'docx' && !empty($selectedTemplate['source_name']))
                                        <p class="mt-2 font-medium text-primary">
                                            Ultimo DOCX importado: {{ $selectedTemplate['source_name'] }}
                                        </p>
                                    @endif
                                </div>
                                <div>
                                    <label class="mb-1 block text-[10px] font-bold uppercase tracking-widest text-[#616f89]">
                                        Reemplazar con archivo DOCX
                                    </label>
                                    <input name="template_file" type="file"
                                        accept=".docx,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
                                        class="w-full rounded-lg border border-[#dbdfe6] bg-white px-3 py-2 text-sm file:mr-3 file:rounded-md file:border-0 file:bg-primary/10 file:px-3 file:py-2 file:text-xs file:font-semibold file:text-primary focus:border-primary focus:ring-1 focus:ring-primary" />
                                    <p class="mt-2 text-[11px] text-[#616f89]">
                                        Se aceptan plantillas Word .docx y se conservan alineaciones, estilos y tablas compatibles.
                                    </p>
                                </div>
                            </div>
                        </div>

                        <div
                            class="sticky top-0 z-10 mb-6 flex flex-wrap items-center gap-1 rounded-lg border border-[#dbdfe6] bg-white p-1.5 shadow-sm">
                            <button type="button" data-command="bold"
                                class="rounded p-1.5 text-[#111318] hover:bg-[#f0f2f4]">
                                <span class="material-symbols-outlined">format_bold</span>
                            </button>
                            <button type="button" data-command="italic"
                                class="rounded p-1.5 text-[#111318] hover:bg-[#f0f2f4]">
                                <span class="material-symbols-outlined">format_italic</span>
                            </button>
                            <button type="button" data-command="underline"
                                class="rounded p-1.5 text-[#111318] hover:bg-[#f0f2f4]">
                                <span class="material-symbols-outlined">format_underlined</span>
                            </button>
                            <div class="mx-1 h-6 w-px bg-[#dbdfe6]"></div>
                            <button type="button" data-command="justifyLeft"
                                class="rounded p-1.5 text-[#111318] hover:bg-[#f0f2f4]">
                                <span class="material-symbols-outlined">format_align_left</span>
                            </button>
                            <button type="button" data-command="justifyCenter"
                                class="rounded p-1.5 text-[#111318] hover:bg-[#f0f2f4]">
                                <span class="material-symbols-outlined">format_align_center</span>
                            </button>
                            <button type="button" data-command="justifyFull" title="Justificar"
                                aria-label="Justificar parrafo"
                                class="rounded p-1.5 text-[#111318] hover:bg-[#f0f2f4]">
                                <span class="material-symbols-outlined">format_align_justify</span>
                            </button>
                            <button type="button" data-command="insertUnorderedList"
                                class="rounded p-1.5 text-[#111318] hover:bg-[#f0f2f4]">
                                <span class="material-symbols-outlined">format_list_bulleted</span>
                            </button>
                            <div class="mx-1 h-6 w-px bg-[#dbdfe6]"></div>
                            <select id="contract-font-family" title="Fuente"
                                aria-label="Seleccionar fuente"
                                class="rounded border-none px-2 py-1.5 text-xs font-medium text-[#111318] hover:bg-[#f0f2f4] focus:ring-1 focus:ring-primary">
                                <option value="">Fuente</option>
                                <option value="Arial">Arial</option>
                            </select>
                            <select id="contract-block-format"
                                class="rounded border-none px-2 py-1.5 text-xs font-medium text-[#111318] hover:bg-[#f0f2f4] focus:ring-1 focus:ring-primary">
                                <option value="p">Normal</option>
                                <option value="h3">Subtitulo</option>
                                <option value="h2">Titulo</option>
                            </select>
                        </div>

                        <div class="rounded-sm border border-[#dbdfe6] bg-white p-20 shadow-xl">
                            <div id="contract-editor" class="contract-editor min-h-[1056px]"
                                contenteditable="true"
                                data-placeholder="Escribe aqui la plantilla del contrato o inserta variables desde la barra lateral.">{!! $editorContent !!}</div>
                        </div>

                        <textarea id="contract-editor-content" name="content" class="hidden">{{ $editorContent }}</textarea>
                    </form>

                    <form id="contract-preview-form"
                        action="{{ route('realEstate.contracts.preview', ['contract' => $selectedTemplate['id']]) }}"
                        method="POST" target="_blank" class="hidden">
                        @csrf
                        <input id="contract-preview-name" name="name" type="hidden" value="{{ $editorName }}">
                        <textarea id="contract-preview-content" name="content" class="hidden">{{ $editorContent }}</textarea>
                    </form>
                @endif
            </div>
        </div>

        <div class="w-72 shrink-0 border-l border-[#dbdfe6] bg-white flex flex-col">
            <div class="flex items-center justify-between border-b border-[#dbdfe6] p-4">
                <h3 class="text-sm font-bold">Mis Plantillas</h3>
                <form action="{{ route('realEstate.contracts.store') }}" method="POST">
                    @csrf
                    <input type="hidden" name="development_id" value="{{ $selectedDevelopmentId }}">
                    <button class="rounded p-1 text-primary hover:bg-primary/10 disabled:cursor-not-allowed disabled:opacity-50"
                        @disabled(!$selectedDevelopmentId)>
                        <span class="material-symbols-outlined text-lg">add_circle</span>
                    </button>
                </form>
            </div>

            <div class="flex-1 overflow-y-auto">
                @forelse ($templates as $template)
                    @php
                        $statusClass = match ($template['status_tone']) {
                            'success' => 'bg-green-100 text-green-700',
                            'warning' => 'bg-amber-100 text-amber-700',
                            default => 'bg-[#f0f2f4] text-[#616f89]',
                        };
                    @endphp
                    <div
                        class="{{ $template['selected'] ? 'border-l-4 border-primary bg-primary/5' : 'border-b border-[#dbdfe6] hover:bg-[#f6f6f8]' }} p-4">
                        <a class="block" href="{{ route('realEstate.contracts', ['development_id' => $selectedDevelopmentId, 'contract_id' => $template['id']]) }}">
                            <div class="mb-1 flex items-start justify-between gap-3">
                                <span class="text-xs font-bold text-[#111318]">{{ $template['name'] }}</span>
                                <span class="{{ $statusClass }} rounded px-1.5 py-0.5 text-[10px] font-bold uppercase">
                                    {{ $template['status_label'] }}
                                </span>
                            </div>
                            <p class="mb-2 text-[11px] text-[#616f89]">
                                Ultima edicion: {{ $template['updated_label'] ?? 'Sin cambios' }}
                            </p>
                            <p class="text-[11px] text-[#616f89]">{{ $template['excerpt'] ?: 'Sin resumen disponible.' }}</p>
                        </a>
                        <div class="mt-3 flex gap-3">
                            <form action="{{ route('realEstate.contracts.duplicate', ['contract' => $template['id']]) }}" method="POST">
                                @csrf
                                <button class="text-[10px] font-bold text-primary hover:underline">Duplicar</button>
                            </form>
                            <form action="{{ route('realEstate.contracts.archive', ['contract' => $template['id']]) }}" method="POST"
                                onsubmit="return confirm('Esta accion archivara la plantilla seleccionada.');">
                                @csrf
                                @method('DELETE')
                                <button class="text-[10px] font-bold text-red-600 hover:underline">Archivar</button>
                            </form>
                        </div>
                    </div>
                @empty
                    <div class="p-6 text-sm text-[#616f89]">
                        No hay plantillas registradas para este fraccionamiento.
                    </div>
                @endforelse
            </div>

            <div class="border-t border-[#dbdfe6] bg-[#f0f2f4] p-4">
                <div class="flex items-center gap-3">
                    <div class="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 text-primary">
                        <span class="material-symbols-outlined text-lg">description</span>
                    </div>
                    <div class="flex flex-col">
                        <p class="text-xs font-bold">Editor de Contratos</p>
                        <p class="text-[10px] text-[#616f89]">Plantillas por fraccionamiento</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="contract-history-modal"
        class="fixed inset-0 z-50 hidden items-center justify-center bg-slate-950/40 px-4 py-10">
        <div class="w-full max-w-3xl rounded-2xl bg-white shadow-2xl">
            <div class="flex items-center justify-between border-b border-[#dbdfe6] px-6 py-4">
                <div>
                    <h3 class="text-base font-bold text-[#111318]">Historial de Versiones</h3>
                    <p class="text-sm text-[#616f89]">Snapshots guardados de la plantilla seleccionada.</p>
                </div>
                <button id="close-contract-history" type="button"
                    class="rounded p-1 text-[#616f89] hover:bg-[#f0f2f4]">
                    <span class="material-symbols-outlined">close</span>
                </button>
            </div>
            <div class="max-h-[70vh] overflow-y-auto p-6">
                @forelse ($versionHistory as $version)
                    <div class="flex items-start justify-between gap-4 rounded-xl border border-[#dbdfe6] p-4 {{ !$loop->first ? 'mt-3' : '' }}">
                        <div class="min-w-0">
                            <div class="flex items-center gap-2">
                                <span class="rounded-full bg-primary/10 px-2 py-0.5 text-[10px] font-bold uppercase text-primary">
                                    {{ $version['action_label'] }}
                                </span>
                                <span class="text-[11px] text-[#616f89]">{{ $version['saved_at_label'] }}</span>
                            </div>
                            <p class="mt-2 text-sm font-semibold text-[#111318]">{{ $version['name'] }}</p>
                            <p class="mt-1 text-xs text-[#616f89]">Guardado por {{ $version['saved_by'] }}</p>
                            <p class="mt-2 text-sm text-[#616f89]">{{ $version['excerpt'] ?: 'Sin resumen disponible.' }}</p>
                        </div>
                        @if ($selectedTemplate)
                            <form action="{{ route('realEstate.contracts.restore', ['contract' => $selectedTemplate['id'], 'versionId' => $version['id']]) }}"
                                method="POST">
                                @csrf
                                <button class="rounded-lg border border-[#dbdfe6] px-3 py-2 text-xs font-bold text-[#111318] hover:bg-[#f6f6f8]">
                                    Restaurar
                                </button>
                            </form>
                        @endif
                    </div>
                @empty
                    <div class="rounded-xl border border-dashed border-[#dbdfe6] bg-[#f6f6f8] p-6 text-sm text-[#616f89]">
                        Aun no hay versiones guardadas para esta plantilla.
                    </div>
                @endforelse
            </div>
        </div>
    </div>
@endsection

@section('extra-scripts')
    <script>
        (() => {
            const editor = document.getElementById('contract-editor');
            const hiddenContent = document.getElementById('contract-editor-content');
            const editorForm = document.getElementById('contract-editor-form');
            const previewForm = document.getElementById('contract-preview-form');
            const previewName = document.getElementById('contract-preview-name');
            const previewContent = document.getElementById('contract-preview-content');
            const nameInput = editorForm?.querySelector('input[name="name"]');
            const searchInput = document.getElementById('contract-variable-search');
            const variableButtons = Array.from(document.querySelectorAll('.contract-variable-item'));
            const toolbarButtons = Array.from(document.querySelectorAll('[data-command]'));
            const fontFamily = document.getElementById('contract-font-family');
            const blockFormat = document.getElementById('contract-block-format');
            const openHistory = document.getElementById('open-contract-history');
            const closeHistory = document.getElementById('close-contract-history');
            const historyModal = document.getElementById('contract-history-modal');
            const inlineCommandTags = {
                bold: 'strong',
                italic: 'em',
                underline: 'u',
            };
            let savedRange = null;

            const escapeHtml = (value) => value
                .replaceAll('&', '&amp;')
                .replaceAll('<', '&lt;')
                .replaceAll('>', '&gt;')
                .replaceAll('"', '&quot;')
                .replaceAll("'", '&#039;');

            const resolveNode = (node) => {
                if (!(node instanceof Node)) {
                    return null;
                }

                return node.nodeType === Node.TEXT_NODE ? node.parentNode : node;
            };

            const isNodeInsideEditor = (node) => {
                if (!editor) {
                    return false;
                }

                const resolvedNode = resolveNode(node);

                return resolvedNode === editor || editor.contains(resolvedNode);
            };

            const getCurrentRange = () => {
                const selection = window.getSelection();

                if (!selection || selection.rangeCount === 0) {
                    return null;
                }

                const range = selection.getRangeAt(0);

                return isNodeInsideEditor(range.commonAncestorContainer) ? range : null;
            };

            const saveSelection = () => {
                const range = getCurrentRange();

                if (!range) {
                    return;
                }

                savedRange = range.cloneRange();
            };

            const restoreSelection = () => {
                if (!editor) {
                    return null;
                }

                const selection = window.getSelection();

                if (!selection) {
                    return null;
                }

                editor.focus();

                if (!savedRange) {
                    return getCurrentRange();
                }

                try {
                    selection.removeAllRanges();
                    selection.addRange(savedRange);
                } catch (error) {
                    savedRange = null;

                    return getCurrentRange();
                }

                return savedRange;
            };

            const selectNode = (node) => {
                if (!editor || !(node instanceof Node)) {
                    return;
                }

                const selection = window.getSelection();

                if (!selection) {
                    return;
                }

                const range = document.createRange();
                range.selectNode(node);
                selection.removeAllRanges();
                selection.addRange(range);
                savedRange = range.cloneRange();
            };

            const getSelectedVariableNodes = (range = getCurrentRange()) => {
                if (!editor || !range) {
                    return [];
                }

                return Array.from(editor.querySelectorAll('.contract-variable')).filter((node) => {
                    try {
                        return range.intersectsNode(node);
                    } catch (error) {
                        return false;
                    }
                });
            };

            const hasInlineFormat = (node, command) => {
                if (!(node instanceof HTMLElement) || !editor) {
                    return false;
                }

                const tagName = inlineCommandTags[command]?.toUpperCase();
                const alternateTagName = ({
                    bold: 'B',
                    italic: 'I',
                    underline: 'U',
                })[command];

                let current = node.parentElement;

                while (current && current !== editor) {
                    if (current.tagName === tagName || current.tagName === alternateTagName) {
                        return true;
                    }

                    current = current.parentElement;
                }

                return false;
            };

            const applyInlineFormatToVariables = (variables, command) => {
                const tagName = inlineCommandTags[command];

                if (!tagName || variables.length === 0) {
                    return;
                }

                variables.forEach((node) => {
                    if (!(node instanceof HTMLElement) || hasInlineFormat(node, command) || !node.parentNode) {
                        return;
                    }

                    const wrapper = document.createElement(tagName);
                    node.parentNode.insertBefore(wrapper, node);
                    wrapper.appendChild(node);
                });
            };

            const applyFontFamilyToVariables = (variables, family) => {
                if (variables.length === 0 || family.trim() === '') {
                    return;
                }

                variables.forEach((node) => {
                    if (!(node instanceof HTMLElement)) {
                        return;
                    }

                    node.style.fontFamily = family;
                });
            };

            const syncContent = () => {
                if (!editor || !hiddenContent) {
                    return;
                }

                const content = editor.innerHTML.trim();

                hiddenContent.value = content;

                if (previewContent) {
                    previewContent.value = content;
                }

                if (previewName && nameInput) {
                    previewName.value = nameInput.value.trim();
                }
            };

            const insertToken = (token) => {
                if (!editor) {
                    return;
                }

                restoreSelection();

                const html = `<span class="contract-variable" data-token="${escapeHtml(token)}" contenteditable="false">${escapeHtml(token)}</span>&nbsp;`;

                if (document.queryCommandSupported?.('insertHTML')) {
                    document.execCommand('insertHTML', false, html);
                } else {
                    editor.insertAdjacentHTML('beforeend', html);
                }

                syncContent();
                saveSelection();
            };

            toolbarButtons.forEach((button) => {
                button.addEventListener('mousedown', (event) => {
                    event.preventDefault();
                });

                button.addEventListener('click', () => {
                    if (!editor) {
                        return;
                    }

                    const command = button.dataset.command;
                    const restoredRange = restoreSelection();
                    const selectedVariables = getSelectedVariableNodes(restoredRange);

                    document.execCommand(command, false, null);
                    applyInlineFormatToVariables(selectedVariables, command);
                    syncContent();
                    saveSelection();
                });
            });

            blockFormat?.addEventListener('change', (event) => {
                if (!editor) {
                    return;
                }

                restoreSelection();
                document.execCommand('formatBlock', false, `<${event.target.value}>`);
                syncContent();
                saveSelection();
            });

            fontFamily?.addEventListener('change', (event) => {
                if (!editor) {
                    return;
                }

                const selectedFamily = event.target.value?.trim() ?? '';

                if (selectedFamily === '') {
                    return;
                }

                const restoredRange = restoreSelection();
                const selectedVariables = getSelectedVariableNodes(restoredRange);

                document.execCommand('fontName', false, selectedFamily);
                applyFontFamilyToVariables(selectedVariables, selectedFamily);
                syncContent();
                saveSelection();
                event.target.value = '';
            });

            variableButtons.forEach((button) => {
                button.addEventListener('mousedown', (event) => {
                    event.preventDefault();
                });

                button.addEventListener('click', () => insertToken(button.dataset.token || ''));
            });

            searchInput?.addEventListener('input', () => {
                const term = searchInput.value.trim().toLowerCase();

                variableButtons.forEach((button) => {
                    const haystack = `${button.dataset.token || ''} ${button.dataset.label || ''}`.toLowerCase();
                    button.classList.toggle('hidden', term !== '' && !haystack.includes(term));
                });

                document.querySelectorAll('.contract-variable-group').forEach((group) => {
                    const visibleItems = group.querySelectorAll('.contract-variable-item:not(.hidden)');
                    group.classList.toggle('hidden', visibleItems.length === 0);
                });
            });

            editor?.addEventListener('click', (event) => {
                const variable = event.target instanceof Element ? event.target.closest('.contract-variable') : null;

                if (variable) {
                    selectNode(variable);
                    return;
                }

                saveSelection();
            });

            editor?.addEventListener('mouseup', saveSelection);
            editor?.addEventListener('keyup', saveSelection);
            editor?.addEventListener('input', () => {
                syncContent();
                saveSelection();
            });
            nameInput?.addEventListener('input', syncContent);
            editorForm?.addEventListener('submit', syncContent);
            previewForm?.addEventListener('submit', syncContent);

            document.addEventListener('selectionchange', () => {
                saveSelection();
            });

            const closeModal = () => historyModal?.classList.add('hidden');
            const openModal = () => historyModal?.classList.remove('hidden');

            openHistory?.addEventListener('click', openModal);
            closeHistory?.addEventListener('click', closeModal);
            historyModal?.addEventListener('click', (event) => {
                if (event.target === historyModal) {
                    closeModal();
                }
            });

            document.addEventListener('keydown', (event) => {
                if (event.key === 'Escape') {
                    closeModal();
                }
            });

            syncContent();
        })();
    </script>
@endsection