@extends('layouts.adminlte')

@section('title', 'Route Editor')
@section('page_title', 'Route Editor')

@push('styles')
    <style>
        #routeEditor {
            height: calc(100vh - 280px);
            min-height: 420px;
            border: 1px solid #ced4da;
            border-radius: 0.375rem;
        }
        .backup-item {
            border: 1px solid #dee2e6;
            border-radius: .5rem;
            padding: .65rem .75rem;
        }
    </style>
@endpush

@section('content')
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="card-title m-0">Route & Config Editor (Core + Module)</h3>
            <div class="d-flex gap-2">
                <a href="{{ route('route_editor.guide') }}" target="_blank" class="btn btn-outline-dark btn-sm">
                    <i class="fas fa-book me-1"></i>User Guide
                </a>
                <input type="text" id="backupNameInput" class="form-control form-control-sm" style="width: 220px;" placeholder="Backup name (opsional)" />
                <button class="btn btn-outline-info btn-sm" id="btnValidate">
                    <i class="fas fa-check-double me-1"></i>Validate
                </button>
                <button class="btn btn-outline-warning btn-sm" id="btnBackups">
                    <i class="fas fa-clock-rotate-left me-1"></i>Backups
                </button>
                <button class="btn btn-outline-secondary btn-sm" id="btnReload">
                    <i class="fas fa-rotate me-1"></i>Reload
                </button>
                <button class="btn btn-primary btn-sm" id="btnSave">
                    <i class="fas fa-save me-1"></i>Save
                </button>
            </div>
        </div>
        <div class="card-body">
            <div class="row g-2 mb-3">
                <div class="col-lg-4">
                    <label class="form-label mb-1">Target File</label>
                    <select id="targetSelect" class="form-select form-select-sm">
                        <option value="core_web">Core: routes/web.php</option>
                        <option value="core_db_config">Core: config/database.php (DB Connection)</option>
                    </select>
                </div>
                <div class="col-lg-4">
                    <label class="form-label mb-1">Controller</label>
                    <input type="text" id="controllerSearch" class="form-control form-control-sm mb-1" placeholder="Search controller..." />
                    <div class="input-group input-group-sm">
                        <select id="controllerSelect" class="form-select">
                            <option value="">Pilih controller...</option>
                        </select>
                        <button class="btn btn-outline-secondary" type="button" id="btnInsertControllerUse">use</button>
                        <button class="btn btn-outline-secondary" type="button" id="btnInsertControllerRoute">route</button>
                    </div>
                </div>
                <div class="col-lg-4">
                    <label class="form-label mb-1">Model</label>
                    <input type="text" id="modelSearch" class="form-control form-control-sm mb-1" placeholder="Search model..." />
                    <div class="input-group input-group-sm">
                        <select id="modelSelect" class="form-select">
                            <option value="">Pilih model...</option>
                        </select>
                        <button class="btn btn-outline-secondary" type="button" id="btnInsertModelUse">use</button>
                    </div>
                </div>
                <div class="col-lg-4">
                    <label class="form-label mb-1">View</label>
                    <input type="text" id="viewSearch" class="form-control form-control-sm mb-1" placeholder="Search view..." />
                    <div class="input-group input-group-sm">
                        <select id="viewSelect" class="form-select">
                            <option value="">Pilih view...</option>
                        </select>
                        <button class="btn btn-outline-secondary" type="button" id="btnInsertView">view()</button>
                    </div>
                </div>
            </div>
            <div class="d-flex justify-content-between align-items-center mb-2">
                <small class="text-muted">Path: <span id="routePath">-</span></small>
                <small class="text-muted">Last update: <span id="routeUpdatedAt">-</span></small>
            </div>
            <div id="routeEditor"></div>
        </div>
    </div>

    <div class="modal fade" id="backupModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Route Backups</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div id="backupList" class="d-flex flex-column gap-2"></div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('vendor/ace/src-min-noconflict') }}/ace.min.js"></script>
    <script src="{{ asset('vendor/ace/src-min-noconflict') }}/mode-php.min.js"></script>
    <script src="{{ asset('vendor/ace/src-min-noconflict') }}/theme-monokai.min.js"></script>
    <script>
        $(function () {
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
            if (csrfToken) {
                $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': csrfToken } });
            }

            const editor = ace.edit('routeEditor');
            editor.session.setMode('ace/mode/php');
            editor.setTheme('ace/theme/monokai');
            editor.setOptions({
                fontSize: '13px',
                useSoftTabs: true,
                tabSize: 4,
                showPrintMargin: false,
                wrap: false,
            });

            const routePath = $('#routePath');
            const routeUpdatedAt = $('#routeUpdatedAt');
            const btnSave = $('#btnSave');
            const btnValidate = $('#btnValidate');
            const backupModal = new bootstrap.Modal(document.getElementById('backupModal'));
            const backupList = $('#backupList');
            const controllerSelect = $('#controllerSelect');
            const modelSelect = $('#modelSelect');
            const viewSelect = $('#viewSelect');
            const controllerSearch = $('#controllerSearch');
            const modelSearch = $('#modelSearch');
            const viewSearch = $('#viewSearch');
            const targetSelect = $('#targetSelect');
            let currentTarget = 'core_web';
            let controllerOptions = [];
            let modelOptions = [];
            let viewOptions = [];

            const buildOptionsHtml = (placeholder, rows, query = '') => {
                const q = (query || '').toString().trim().toLowerCase();
                const filtered = !q
                    ? rows
                    : rows.filter((item) => (item || '').toString().toLowerCase().includes(q));
                return ['<option value="">' + placeholder + '</option>']
                    .concat(filtered.map((item) => `<option value="${item}">${item}</option>`))
                    .join('');
            };

            const renderSearchableOptions = () => {
                const ctrlVal = controllerSelect.val();
                const modelVal = modelSelect.val();
                const viewVal = viewSelect.val();

                controllerSelect.html(buildOptionsHtml('Pilih controller...', controllerOptions, controllerSearch.val()));
                modelSelect.html(buildOptionsHtml('Pilih model...', modelOptions, modelSearch.val()));
                viewSelect.html(buildOptionsHtml('Pilih view...', viewOptions, viewSearch.val()));

                if (ctrlVal && controllerSelect.find(`option[value="${ctrlVal}"]`).length) {
                    controllerSelect.val(ctrlVal);
                }
                if (modelVal && modelSelect.find(`option[value="${modelVal}"]`).length) {
                    modelSelect.val(modelVal);
                }
                if (viewVal && viewSelect.find(`option[value="${viewVal}"]`).length) {
                    viewSelect.val(viewVal);
                }
            };

            const loadContent = () => {
                $.getJSON('{{ route('route_editor.content') }}', { target: currentTarget })
                    .done((resp) => {
                        editor.setValue(resp.content || '', -1);
                        routePath.text(resp.path || '-');
                        routeUpdatedAt.text(resp.updated_at || '-');
                    })
                    .fail((xhr) => {
                        Swal.fire('Error', xhr.responseJSON?.message || 'Failed to load route file', 'error');
                    });
            };

            const loadOptions = () => {
                $.getJSON('{{ route('route_editor.options') }}')
                    .done((resp) => {
                        controllerOptions = resp.controllers || [];
                        modelOptions = resp.models || [];
                        viewOptions = resp.views || [];
                        renderSearchableOptions();

                        const targets = resp.targets || [];
                        if (targets.length) {
                            targetSelect.html(
                                targets.map((item) => `<option value="${item.key}">${item.label}</option>`).join('')
                            );
                            targetSelect.val(currentTarget);
                            if (!targetSelect.val()) {
                                currentTarget = targets[0].key;
                                targetSelect.val(currentTarget);
                            }
                        }
                    })
                    .fail((xhr) => {
                        Swal.fire('Error', xhr.responseJSON?.message || 'Failed load options', 'error');
                    });
            };

            const insertAtCursor = (text) => {
                if (!text) return;
                editor.session.insert(editor.getCursorPosition(), text);
                editor.focus();
            };

            const validateContent = async () => {
                const resp = await $.ajax({
                    url: '{{ route('route_editor.validate') }}',
                    type: 'POST',
                    data: { content: editor.getValue(), target: currentTarget }
                });
                return resp;
            };

            const loadBackups = () => {
                $.getJSON('{{ route('route_editor.backups') }}', { target: currentTarget })
                    .done((resp) => {
                        const items = resp.data || [];
                        if (!items.length) {
                            backupList.html('<div class="text-muted">Belum ada backup.</div>');
                            return;
                        }

                        backupList.html(items.map((item) => `
                            <div class="backup-item d-flex justify-content-between align-items-center gap-2">
                                <div>
                                    <div class="fw-semibold">${item.display_name || item.name}</div>
                                    <small class="text-muted">Updated: ${item.updated_at} | Size: ${item.size} bytes</small>
                                </div>
                                <div class="d-flex gap-1">
                                    <button class="btn btn-sm btn-outline-secondary btn-rename-backup" data-name="${item.name}">
                                        <i class="fas fa-pen me-1"></i>Rename
                                    </button>
                                    <button class="btn btn-sm btn-outline-danger btn-rollback" data-name="${item.name}">
                                        <i class="fas fa-rotate-left me-1"></i>Rollback
                                    </button>
                                </div>
                            </div>
                        `).join(''));
                    })
                    .fail((xhr) => {
                        backupList.html(`<div class="text-danger">${xhr.responseJSON?.message || 'Failed load backups'}</div>`);
                    });
            };

            $('#btnReload').on('click', loadContent);
            targetSelect.on('change', function () {
                currentTarget = ($(this).val() || 'core_web').toString();
                loadContent();
            });
            controllerSearch.on('input', renderSearchableOptions);
            modelSearch.on('input', renderSearchableOptions);
            viewSearch.on('input', renderSearchableOptions);
            $('#btnInsertControllerUse').on('click', function () {
                const selected = controllerSelect.val();
                if (!selected) return;
                insertAtCursor(`use ${selected};\n`);
            });
            $('#btnInsertControllerRoute').on('click', function () {
                const selected = controllerSelect.val();
                if (!selected) return;
                const className = selected.split('\\').pop();
                const resource = className.replace(/Controller$/, '').toLowerCase();
                insertAtCursor(`Route::resource('${resource}', ${className}::class);\n`);
            });
            $('#btnInsertModelUse').on('click', function () {
                const selected = modelSelect.val();
                if (!selected) return;
                insertAtCursor(`use ${selected};\n`);
            });
            $('#btnInsertView').on('click', function () {
                const selected = viewSelect.val();
                if (!selected) return;
                insertAtCursor(`Route::view('/path', '${selected}');\n`);
            });
            $('#btnBackups').on('click', function () {
                backupModal.show();
                loadBackups();
            });
            backupList.on('click', '.btn-rename-backup', function () {
                const backup = $(this).data('name');
                Swal.fire({
                    title: 'Rename backup',
                    input: 'text',
                    inputValue: backup,
                    showCancelButton: true,
                    confirmButtonText: 'Rename',
                    inputValidator: (value) => !value ? 'Nama backup wajib diisi' : null
                }).then((result) => {
                    if (!result.isConfirmed || !result.value) return;
                    $.ajax({
                        url: '{{ route('route_editor.rename_backup') }}',
                        type: 'POST',
                        data: { backup, new_name: result.value, target: currentTarget }
                    }).done((resp) => {
                        Swal.fire('Success', resp?.message || 'Backup renamed', 'success');
                        loadBackups();
                    }).fail((xhr) => {
                        Swal.fire('Error', xhr.responseJSON?.message || 'Rename failed', 'error');
                    });
                });
            });
            backupList.on('click', '.btn-rollback', function () {
                const backup = $(this).data('name');
                Swal.fire({
                    title: `Rollback ke ${backup}?`,
                    text: 'File route target saat ini akan dibackup dulu sebelum rollback.',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, rollback'
                }).then((result) => {
                    if (!result.isConfirmed) return;
                    $.ajax({
                        url: '{{ route('route_editor.rollback') }}',
                        type: 'POST',
                        data: { backup, target: currentTarget }
                    }).done((resp) => {
                        Swal.fire('Success', `${resp?.message || 'Rollback completed'}\nSafety backup: ${resp?.safety_backup || '-'}`, 'success');
                        loadContent();
                        loadBackups();
                    }).fail((xhr) => {
                        const details = xhr.responseJSON?.details;
                        const message = xhr.responseJSON?.message || 'Rollback failed';
                        Swal.fire('Error', details ? `${message}\n${details}` : message, 'error');
                    });
                });
            });

            btnValidate.on('click', async function () {
                btnValidate.prop('disabled', true);
                try {
                    const resp = await validateContent();
                    Swal.fire('Valid', resp?.details || 'No syntax error', 'success');
                } catch (xhr) {
                    const details = xhr.responseJSON?.details;
                    const message = xhr.responseJSON?.message || 'Validation failed';
                    Swal.fire('Error', details ? `${message}\n${details}` : message, 'error');
                } finally {
                    btnValidate.prop('disabled', false);
                }
            });

            btnSave.on('click', async function () {
                btnSave.prop('disabled', true);
                try {
                    await validateContent();
                    const result = await Swal.fire({
                        title: 'Save changes?',
                        text: 'File akan divalidasi dan backup otomatis dibuat.',
                        icon: 'question',
                        showCancelButton: true,
                        confirmButtonText: 'Save'
                    });
                    if (!result.isConfirmed) {
                        return;
                    }

                    const resp = await $.ajax({
                        url: '{{ route('route_editor.save') }}',
                        type: 'POST',
                        data: {
                            content: editor.getValue(),
                            backup_name: ($('#backupNameInput').val() || '').toString().trim(),
                            target: currentTarget
                        }
                    });
                    Swal.fire('Success', `${resp?.message || 'Saved'}\nBackup: ${resp?.backup || '-'}`, 'success');
                    loadContent();
                } catch (xhr) {
                    const details = xhr.responseJSON?.details;
                    const message = xhr.responseJSON?.message || 'Save failed';
                    Swal.fire('Error', details ? `${message}\n${details}` : message, 'error');
                } finally {
                    btnSave.prop('disabled', false);
                }
            });

            loadContent();
            loadOptions();
        });
    </script>
@endpush