@extends('layouts.adminlte')

@section('title', 'Module File Editor')
@section('page_title', 'Module File Editor')

@push('styles')
    <style>
        #moduleFileEditor {
            height: calc(100vh - 320px);
            min-height: 420px;
            border: 1px solid var(--bs-border-color);
            border-radius: .375rem;
        }
        #moduleFileTextarea {
            height: calc(100vh - 320px);
            min-height: 420px;
            resize: vertical;
            white-space: pre;
        }
        .mono-path {
            font-family: Consolas, Monaco, monospace;
            font-size: .85rem;
        }
    </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">Editor: {{ $moduleName }}</h3>
            <a href="{{ route('module_manager.index', ['module' => $moduleName]) }}" class="btn btn-outline-secondary btn-sm">
                <i class="fas fa-arrow-left me-1"></i>Kembali
            </a>
        </div>
        <div class="card-body">
            <div class="row g-2 mb-2">
                <div class="col-md-6">
                    <label class="form-label mb-1">Module Path</label>
                    <input class="form-control form-control-sm mono-path" value="{{ $moduleBasePath }}" readonly />
                </div>
                <div class="col-md-6">
                    <label class="form-label mb-1">File</label>
                    <input id="relativePath" class="form-control form-control-sm mono-path" value="{{ $relativePath }}" readonly />
                </div>
            </div>
            <textarea id="moduleFileTextarea" class="form-control mono-path">{{ $content }}</textarea>
            <div id="moduleFileEditor" class="d-none"></div>
            <div class="d-flex justify-content-end gap-2 mt-3">
                <button id="btnValidate" class="btn btn-outline-primary btn-sm">
                    <i class="fas fa-check-circle me-1"></i>Validasi
                </button>
                <button id="btnSaveFile" class="btn btn-success btn-sm">
                    <i class="fas fa-save me-1"></i>Simpan
                </button>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        (function () {
            const moduleName = @json($moduleName);
            const relativePath = @json($relativePath);
            const textarea = document.getElementById('moduleFileTextarea');
            const editorEl = document.getElementById('moduleFileEditor');
            let aceEditor = null;

            const ext = (relativePath.split('.').pop() || '').toLowerCase();
            const modeMap = {
                php: 'php',
                js: 'javascript',
                json: 'json',
                css: 'css',
                blade: 'php',
                html: 'html',
                md: 'markdown',
                txt: 'text',
                yml: 'yaml',
                yaml: 'yaml',
                xml: 'xml',
            };
            const mode = modeMap[ext] || 'text';

            function getEditorValue() {
                if (aceEditor) {
                    return aceEditor.getValue();
                }
                return textarea ? textarea.value : '';
            }

            function initAceEditor() {
                if (!window.ace || !editorEl || !textarea) {
                    return false;
                }
                aceEditor = window.ace.edit('moduleFileEditor');
                aceEditor.setTheme('ace/theme/monokai');
                aceEditor.session.setMode('ace/mode/' + mode);
                aceEditor.setOptions({
                    fontSize: '13px',
                    showPrintMargin: false,
                    tabSize: 4,
                    useSoftTabs: true,
                    wrap: false,
                });
                aceEditor.setValue(textarea.value || '', -1);
                textarea.classList.add('d-none');
                editorEl.classList.remove('d-none');
                return true;
            }

            function loadScript(src) {
                return new Promise((resolve, reject) => {
                    const s = document.createElement('script');
                    s.src = src;
                    s.async = true;
                    s.onload = () => resolve(true);
                    s.onerror = () => reject(new Error('Load failed: ' + src));
                    document.head.appendChild(s);
                });
            }

            async function ensureAceLoaded() {
                if (window.ace) {
                    initAceEditor();
                    return;
                }
                try {
                    await loadScript('{{ asset('vendor/ace/src-min-noconflict') }}/ace.min.js');
                    await loadScript('{{ asset('vendor/ace/src-min-noconflict') }}/mode-' + mode + '.min.js');
                    await loadScript('{{ asset('vendor/ace/src-min-noconflict') }}/theme-monokai.min.js');
                    initAceEditor();
                } catch (e) {
                    if (window.toastr) {
                        toastr.info('Ace editor tidak tersedia, pakai mode textarea.');
                    }
                }
            }
            ensureAceLoaded();

            function save(validateOnly) {
                const content = getEditorValue();
                return fetch('{{ route('module_manager.editor.save') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                        'Accept': 'application/json',
                    },
                    body: JSON.stringify({
                        module: moduleName,
                        file: relativePath,
                        content: content,
                        validate_only: validateOnly ? 1 : 0,
                    }),
                }).then(async (resp) => {
                    const data = await resp.json().catch(() => ({}));
                    if (!resp.ok) {
                        throw new Error(data?.details || data?.message || 'Gagal memproses file');
                    }
                    return data;
                });
            }

            document.getElementById('btnValidate')?.addEventListener('click', async function () {
                try {
                    await save(true);
                    Swal.fire('OK', 'Validasi sukses', 'success');
                } catch (e) {
                    Swal.fire('Error', e.message || 'Validasi gagal', 'error');
                }
            });

            document.getElementById('btnSaveFile')?.addEventListener('click', async function () {
                try {
                    const result = await save(false);
                    Swal.fire('Success', result?.message || 'File berhasil disimpan', 'success');
                } catch (e) {
                    Swal.fire('Error', e.message || 'Simpan gagal', 'error');
                }
            });
        })();
    </script>
@endpush