@extends('backend.layouts.app')

@section('title', 'Edit Site')

@push('styles')
<style>
#editor-modal { display: none; position: fixed; inset: 0; z-index: 9999999; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); }
#editor-modal.open { display: flex !important; align-items: center; justify-content: center; }
#editor-modal .modal-inner { width: 90vw; height: 85vh; background: #1e1e1e; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 25px 60px rgba(0,0,0,0.5); }
#editor-modal .modal-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: #252526; border-bottom: 1px solid #3c3c3c; }
#editor-modal .modal-toolbar span { color: #ccc; font-size: 13px; font-weight: 600; }
#editor-modal .modal-body { flex: 1; overflow: hidden; }
#editor-trigger { cursor: pointer; min-height: 120px; border: 2px dashed #d1d5db; border-radius: 10px; display: flex; align-items: center; justify-content: center; transition: all .2s; }
#editor-trigger:hover { border-color: #3b82f6; background: #f0f7ff; }
#editor-trigger.has-content { border-style: solid; border-color: #d1d5db; background: #1e1e1e; min-height: 200px; }
#editor-trigger .preview-code { width: 100%; height: 200px; overflow: auto; padding: 14px; font-family: 'Fira Code', 'Cascadia Code', monospace; font-size: 13px; line-height: 1.6; color: #d4d4d4; white-space: pre-wrap; word-break: break-all; }
.var-scroll::-webkit-scrollbar { height: 4px; }
.var-scroll::-webkit-scrollbar-track { background: #2a2a2a; }
.var-scroll::-webkit-scrollbar-thumb { background: #555; border-radius: 2px; }
.var-scroll::-webkit-scrollbar-thumb:hover { background: #777; }
</style>
@endpush

@section('content')
@php
$pageTitle = 'Edit Site'; $indexRoute = 'frontend-site.sites.index'; $indexLabel = 'Sites';
$siteVariables = [['code' => 'siteName', 'name' => 'Site name'], ['code' => '__header__', 'name' => 'Header component'], ['code' => '__page__', 'name' => 'Page content'], ['code' => '__footer__', 'name' => 'Footer component']];
$componentCodes = $components->pluck('code')->toArray();
$componentBlocks = $components->map(fn($c) => ['code' => $c->code, 'name' => $c->name])->values()->toArray();
@endphp
@include('backend.layouts.partials._page_header')

<div class="space-y-6">
    <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
        <div class="px-5 py-5">
            <p class="text-sm text-gray-500 dark:text-gray-400">Update your frontend site settings.</p>
        </div>

        <form action="{{ route('frontend-site.sites.update', $site->id) }}" method="POST" id="site-form">
            @csrf @method('PUT')
            <div class="space-y-5 border-t border-gray-100 p-6 dark:border-gray-800">
                <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1.5">Name <span class="text-error-500">*</span></label>
                        <input type="text" name="name" id="site-name" value="{{ old('name', $site->name) }}"
                            oninput="var s = this.value.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, ''); document.getElementById('site-slug').value = s; document.getElementById('site-slug-hidden').value = s;"
                            class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 focus:ring-3 focus:outline-hidden @error('name') border-error-300 @else border-gray-300 @enderror dark:border-gray-700 dark:bg-gray-900 dark:text-white/90">
                        @error('name')<p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1.5">Slug <span class="text-error-500">*</span></label>
                        <input type="text" id="site-slug" value="{{ old('slug', $site->slug) }}" readonly tabindex="-1"
                            class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 focus:ring-3 focus:outline-hidden font-mono @error('slug') border-error-300 @else border-gray-300 @enderror dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 opacity-70 cursor-not-allowed">
                        <input type="hidden" name="slug" id="site-slug-hidden" value="{{ old('slug', $site->slug) }}">
                        @error('slug')<p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>@enderror
                    </div>
                </div>

                <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1.5">Header Component</label>
                        <select name="header_fk"
                            class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm text-gray-800 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90">
                            <option value="">-- None --</option>
                            @foreach($headers as $comp)
                                <option value="{{ $comp->id }}" {{ old('header_fk', $site->header_fk) == $comp->id ? 'selected' : '' }}>{{ $comp->name }} ({{ $comp->code }})</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1.5">Footer Component</label>
                        <select name="footer_fk"
                            class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm text-gray-800 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90">
                            <option value="">-- None --</option>
                            @foreach($footers as $comp)
                                <option value="{{ $comp->id }}" {{ old('footer_fk', $site->footer_fk) == $comp->id ? 'selected' : '' }}>{{ $comp->name }} ({{ $comp->code }})</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="rounded-xl border border-gray-200 bg-gray-50/50 p-4 dark:border-gray-700 dark:bg-gray-900/30">
                    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                        <div class="flex flex-wrap items-center gap-4">
                            <div x-data="{ toggle: {{ old('status', $site->status) ? 'true' : 'false' }} }" class="flex items-center gap-3">
                                <span class="text-sm font-medium text-gray-700 dark:text-gray-400">Status</span>
                                <button type="button" @click="toggle = !toggle"
                                    :class="toggle ? 'bg-brand-500' : 'bg-gray-300 dark:bg-gray-600'"
                                    class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200">
                                    <span :class="toggle ? 'translate-x-full' : ''"
                                        class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200"></span>
                                </button>
                                <span class="text-sm text-gray-500 dark:text-gray-400" x-text="toggle ? 'Active' : 'Inactive'"></span>
                                <input type="hidden" name="status" x-bind:value="toggle ? '1' : '0'">
                            </div>

                            <div x-data="{ toggle: {{ old('is_default', $site->is_default) ? 'true' : 'false' }} }" class="flex items-center gap-3">
                                <span class="text-sm font-medium text-gray-700 dark:text-gray-400">Default Site</span>
                                <button type="button" @click="toggle = !toggle"
                                    :class="toggle ? 'bg-brand-500' : 'bg-gray-300 dark:bg-gray-600'"
                                    class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200">
                                    <span :class="toggle ? 'translate-x-full' : ''"
                                        class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200"></span>
                                </button>
                                <span class="text-sm text-gray-500 dark:text-gray-400" x-text="toggle ? 'Default' : 'Not Default'"></span>
                                <input type="hidden" name="is_default" x-bind:value="toggle ? '1' : '0'">
                            </div>
                        </div>

                        <div class="flex items-center gap-3">
                            <label class="text-sm font-medium text-gray-700 dark:text-gray-400 whitespace-nowrap">Sort</label>
                            <input type="number" name="sort_order" value="{{ old('sort_order', $site->sort_order) }}"
                                class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-10 w-32 rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-800 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 text-center">
                        </div>
                    </div>
                </div>

                <div>
                    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 mb-2">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-400">Layout</label>
                        <select id="layout-lang" class="text-xs border border-gray-300 rounded-md px-2 py-1 bg-white dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300 w-full sm:w-auto">
                            <option value="php">All Language (PHP)</option>
                            <option value="html">HTML</option>
                            <option value="css">CSS</option>
                            <option value="javascript">JavaScript</option>
                        </select>
                    </div>
                    <div class="mb-3 space-y-1.5 rounded-lg border border-info-200 bg-info-50 p-3 text-xs text-info-600 dark:border-info-800 dark:bg-info-900/20 dark:text-info-400">
                        <div><strong>Variables:</strong> Type <code class="bg-white/50 px-1 py-0.5 rounded dark:bg-gray-800/50">$</code> in editor for autocomplete, or drag from editor toolbar.</div>
                        <div class="flex flex-wrap gap-2 mt-1.5">
                            @foreach($siteVariables as $sv)
                            <code class="rounded bg-white/50 px-1.5 py-0.5 font-mono text-info-700 dark:bg-gray-800/50">{{ '@{!! $' . $sv['code'] . ' !!}' }}</code>
                            @endforeach
                        </div>
                    </div>
                    <div id="editor-trigger" onclick="openEditor()">
                        <div class="text-center text-gray-400">
                            <svg width="32" height="32" fill="none" stroke="currentColor" viewBox="0 0 24 24" class="mx-auto mb-2"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg>
                            <p class="text-sm font-medium">Click to open code editor</p>
                        </div>
                    </div>
                    <textarea name="layout" id="layout-input" class="hidden">{{ old('layout', $site->layout) }}</textarea>
                    @error('layout')<p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>@enderror
                    <button type="button" onclick="openGrapesBuilder()" class="mt-3 inline-flex items-center gap-2 rounded-lg border border-brand-300 px-4 py-2 text-sm font-medium text-brand-600 hover:bg-brand-50 dark:border-brand-700 dark:text-brand-400 dark:hover:bg-brand-900/20 transition-colors">
                        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                        Open Visual Builder
                    </button>
                </div>
            </div>

            <div class="flex flex-wrap justify-end gap-3 border-t border-gray-100 px-6 py-4 dark:border-gray-800">
                <a href="{{ route('frontend-site.sites.index') }}" class="rounded-lg border border-gray-300 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-white/[0.03]">Cancel</a>
                <button type="submit" class="rounded-lg bg-brand-500 px-4 py-2 text-sm text-white hover:bg-brand-600">Update</button>
            </div>
        </form>
    </div>
</div>
@endsection

{{-- Editor Modal --}}
<div id="editor-modal" style="display:none">
    <div class="modal-inner">
        <div class="modal-toolbar">
            <span>Monaco Editor — <span id="modal-lang">PHP</span></span>
            <div style="display:flex;gap:8px;align-items:center;">
                <button type="button" onclick="formatCode()" style="padding:6px 12px;background:#3c3c3c;color:#ccc;border:none;border-radius:6px;font-size:12px;cursor:pointer;">Format</button>
                <button type="button" onclick="saveAndClose()" style="padding:6px 16px;background:#10b981;color:#fff;border:none;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;">Save</button>
                <button type="button" onclick="closeEditor()" style="padding:6px 16px;background:#6b7280;color:#fff;border:none;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;">Close</button>
            </div>
        </div>
        <div style="display:flex;align-items:center;gap:8px;padding:6px 16px;background:#2a2a2a;border-bottom:1px solid #3c3c3c;">
            <span style="color:#888;font-size:11px;white-space:nowrap;">Variables:</span>
            <div style="display:flex;gap:6px;overflow-x:auto;flex:1;scrollbar-width:thin;scrollbar-color:#555 #2a2a2a;" class="var-scroll">
                @foreach($siteVariables as $sv)
                <div draggable="true" data-site-var="{{ $sv['code'] }}" class="inline-flex items-center gap-1.5 cursor-grab active:cursor-grabbing rounded px-2 py-1 text-xs font-mono hover:bg-white/10 transition-colors shrink-0" style="color:#9cdcfe;background:#3c3c3c;">
                    <svg class="h-3 w-3 shrink-0 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h16M4 16h16"/></svg>
                    {{ '@{!! $' . $sv['code'] . ' !!}' }}
                </div>
                @endforeach
            </div>
            <span style="color:#666;font-size:10px;white-space:nowrap;">drag ↓</span>
        </div>
        <div class="modal-body">
            <div id="modal-editor" style="width:100%;height:100%;"></div>
        </div>
    </div>
</div>

@push('scripts')
<script src="{{ asset('vendor/monaco-editor/min/vs/loader.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    require.config({ paths: { vs: '/vendor/monaco-editor/min/vs' } });

    var input = document.getElementById('layout-input');
    var typeSelect = document.getElementById('layout-lang');
    var trigger = document.getElementById('editor-trigger');
    var modalEditor = null;
    var currentLang = typeSelect ? typeSelect.value : 'php';

    var componentCodes = @json($componentCodes);
    var siteVariableCodes = @json(collect($siteVariables)->pluck('code'));
    var allCodes = siteVariableCodes.concat(componentCodes);

    function updatePreview() {
        var val = input.value;
        if (val && val.trim()) {
            trigger.classList.add('has-content');
            trigger.innerHTML = '<div class="preview-code">' + escapeHtml(val.substring(0, 1500)) + (val.length > 1500 ? '\n...' : '') + '</div>';
        } else {
            trigger.classList.remove('has-content');
            trigger.innerHTML = '<div class="text-center text-gray-400"><svg width="32" height="32" fill="none" stroke="currentColor" viewBox="0 0 24 24" class="mx-auto mb-2"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg><p class="text-sm font-medium">Click to open code editor</p></div>';
        }
    }

    function escapeHtml(str) {
        return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    }

    updatePreview();

    function registerAutocomplete(editor) {
        ['php', 'html', 'css', 'javascript'].forEach(function (lang) {
            monaco.languages.registerCompletionItemProvider(lang, {
                triggerCharacters: ['$'],
                provideCompletionItems: function (model, position) {
                    var word = model.getWordUntilPosition(position);
                    var range = new monaco.Range(
                        position.lineNumber, word.startColumn,
                        position.lineNumber, word.endColumn
                    );
                    return {
                        suggestions: allCodes.map(function (code) {
                            return {
                                label: '$' + code,
                                kind: monaco.languages.CompletionItemKind.Variable,
                                insertText: '{' + '!! $' + code + ' !!}',
                                detail: 'Variable: ' + code,
                                range: range
                            };
                        })
                    };
                }
            });
        });
    }

    window.openEditor = function() {
        document.getElementById('editor-modal').classList.add('open');
        document.body.style.overflow = 'hidden';
        document.getElementById('modal-lang').textContent = typeSelect ? typeSelect.options[typeSelect.selectedIndex].text : 'PHP';

        require(['vs/editor/editor.main'], function () {
            if (!modalEditor) {
                registerAutocomplete();

                modalEditor = monaco.editor.create(document.getElementById('modal-editor'), {
                    value: input.value,
                    language: currentLang,
                    theme: 'hc-black',
                    automaticLayout: true,
                    fontSize: 14,
                    lineNumbers: 'on',
                    wordWrap: 'on',
                    minimap: { enabled: true },
                    scrollBeyondLastLine: false,
                    tabSize: 4,
                    insertSpaces: true,
                    bracketPairColorization: { enabled: true },
                    autoIndent: 'full',
                    formatOnPaste: true,
                    formatOnType: true,
                    padding: { top: 10 },
                });
                window.layoutEditor = modalEditor;

                modalEditor.addAction({
                    id: 'format-document',
                    label: 'Format Document',
                    contextMenuGroupId: 'modification',
                    contextMenuOrder: 1.5,
                    keybindings: [monaco.KeyMod.Shift | monaco.KeyMod.Alt | monaco.KeyCode.KeyF],
                    run: function (ed) {
                        ed.getAction('editor.action.formatDocument').run();
                    }
                });

                // Drag site variables into editor
                document.querySelectorAll('[data-site-var]').forEach(function (el) {
                    el.addEventListener('dragstart', function (e) {
                        var code = this.dataset.siteVar;
                        e.dataTransfer.setData('text/plain', '{' + '!! $' + code + ' !!}');
                        e.dataTransfer.effectAllowed = 'copy';
                    });
                });

                // Drop handler for modal editor
                var modalBody = document.querySelector('#editor-modal .modal-body');
                modalBody.addEventListener('dragover', function (e) { e.preventDefault(); });
                modalBody.addEventListener('drop', function (e) {
                    e.preventDefault();
                    var text = e.dataTransfer.getData('text/plain');
                    if (!text || !modalEditor) return;
                    var pos = modalEditor.getPosition();
                    modalEditor.executeEdits('drop', [{
                        range: new monaco.Range(pos.lineNumber, pos.column, pos.lineNumber, pos.column),
                        text: text,
                        forceMoveMarkers: true
                    }]);
                    modalEditor.focus();
                });
            } else {
                modalEditor.setValue(input.value);
                monaco.editor.setModelLanguage(modalEditor.getModel(), currentLang);
            }

            setTimeout(function() { modalEditor.focus(); }, 100);
        });
    };

    window.closeEditor = function() {
        if (modalEditor) {
            input.value = modalEditor.getValue();
        }
        document.getElementById('editor-modal').classList.remove('open');
        document.body.style.overflow = '';
        updatePreview();
    };

    window.formatCode = function() {
        if (modalEditor) {
            modalEditor.getAction('editor.action.formatDocument').run();
        }
    };

    window.saveAndClose = function() {
        if (modalEditor) {
            input.value = modalEditor.getValue();
        }

        var form = document.getElementById('site-form');
        var formData = new FormData(form);
        formData.set('layout', input.value);
        formData.set('_method', 'PUT');

        fetch(form.action, {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json',
            },
        })
        .then(function(res) { return res.json(); })
        .then(function(data) {
            showToast(data.message || 'Layout saved successfully!');
        })
        .catch(function() {
            showToast('Failed to save. Please try again.', true);
        });
    };

    function showToast(message, isError) {
        var existing = document.getElementById('editor-toast');
        if (existing) existing.remove();

        var toast = document.createElement('div');
        toast.id = 'editor-toast';
        toast.style.cssText = 'position:fixed;top:20px;right:20px;z-index:99999999;padding:12px 20px;border-radius:8px;font-size:13px;font-weight:600;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,0.3);animation:slideIn .3s ease;transition:opacity .3s;';
        toast.style.background = isError ? '#ef4444' : '#10b981';
        toast.textContent = message;
        document.body.appendChild(toast);

        setTimeout(function() {
            toast.style.opacity = '0';
            setTimeout(function() { toast.remove(); }, 300);
        }, 2500);
    }

    if (typeSelect) {
        typeSelect.addEventListener('change', function () {
            currentLang = this.value;
            document.getElementById('modal-lang').textContent = this.options[this.selectedIndex].text;
            if (modalEditor) {
                monaco.editor.setModelLanguage(modalEditor.getModel(), currentLang);
            }
        });
    }

    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && document.getElementById('editor-modal').classList.contains('open')) {
            closeEditor();
        }
        if ((e.ctrlKey || e.metaKey) && e.key === 's' && document.getElementById('editor-modal').classList.contains('open')) {
            e.preventDefault();
            saveAndClose();
        }
    });

    document.getElementById('editor-modal').addEventListener('click', function(e) {
        if (e.target === this) {
            closeEditor();
        }
    });

    document.getElementById('site-form').addEventListener('submit', function () {
        if (modalEditor) {
            input.value = modalEditor.getValue();
        }
    });
});
</script>

<script>
function openGrapesBuilder() {
    if (window.layoutEditor) {
        try {
            localStorage.setItem('grapesjs_layout_input', window.layoutEditor.getValue());
            localStorage.setItem('grapesjs_components', JSON.stringify(@json($componentBlocks)));
        } catch (e) {}
    }
    window.open('{{ route('frontend-site.pages.layout-builder') }}', '_blank');
}

function insertGrapesLayout(html) {
    if (window.layoutEditor) {
        window.layoutEditor.setValue(html);
    }
}

window.addEventListener('message', function (e) {
    if (e.data && e.data.type === 'grapesjs-layout') {
        insertGrapesLayout(e.data.html);
    }
});

window.addEventListener('storage', function (e) {
    if (e.key === 'grapesjs_layout_result' && e.newValue) {
        insertGrapesLayout(e.newValue);
        localStorage.removeItem('grapesjs_layout_result');
        localStorage.removeItem('grapesjs_layout_ts');
    }
});
</script>
@endpush