@php
$id = $id ?? ('cm-editor-' . uniqid());
$name = $name ?? '';
$value = $value ?? '';
$mode = $mode ?? 'htmlmixed';
$height = $height ?? '250px';
$label = $label ?? '';
$placeholder = $placeholder ?? '';
$disabled = $disabled ?? false;

$cmModes = [
    'htmlmixed' => 'htmlmixed',
    'css' => 'css',
    'javascript' => 'javascript',
    'php' => 'application/x-httpd-php',
];
$cmMode = $cmModes[$mode] ?? 'htmlmixed';
@endphp

@push('css')
<link rel="stylesheet" href="{{ asset('assets/vendor/codemirror/lib/codemirror.css') }}">
<link rel="stylesheet" href="{{ asset('assets/vendor/codemirror/theme/material.css') }}">
<style>
    #{{ $id }}-editor {
        resize: vertical;
        overflow: hidden;
        height: {{ $height }};
        min-height: 120px;
        border: 1px solid #dee2e6;
        border-radius: 4px;
        background: #fff;
    }
    #{{ $id }}-editor .CodeMirror {
        height: 100%;
        font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;
        font-size: 14px;
    }
    #{{ $id }}-editor .CodeMirror-gutters {
        background-color: #263238;
        border-right: 1px solid #37474f;
    }
    /* Remove barras de scroll fantasmas quando vazio */
    #{{ $id }}-editor .CodeMirror-scroll {
        overflow-x: hidden !important;
        overflow-y: auto;
        min-height: 120px;
    }
</style>
@endpush

@push('scripts')
<script src="{{ asset('assets/vendor/codemirror/lib/codemirror.js') }}"></script>
<script src="{{ asset('assets/vendor/codemirror/mode/xml/xml.js') }}"></script>
<script src="{{ asset('assets/vendor/codemirror/mode/javascript/javascript.js') }}"></script>
<script src="{{ asset('assets/vendor/codemirror/mode/css/css.js') }}"></script>
<script src="{{ asset('assets/vendor/codemirror/mode/htmlmixed/htmlmixed.js') }}"></script>
<script src="{{ asset('assets/vendor/codemirror/mode/clike/clike.js') }}"></script>
<script src="{{ asset('assets/vendor/codemirror/mode/php/php.js') }}"></script>
<script>
$(function() {
    var editorElement = document.getElementById('{{ $id }}-editor');
    var textareaElement = document.getElementById('{{ $id }}-source');

    if (!editorElement || !textareaElement) {
        return;
    }

    var editor = CodeMirror(editorElement, {
        value: textareaElement.value,
        mode: '{{ $cmMode }}',
        theme: 'material',
        lineNumbers: true,
        lineWrapping: true,
        indentUnit: 4,
        tabSize: 4,
        autoRefresh: true,
        readOnly: {{ $disabled ? 'true' : 'false' }}
    });

    editor.on('change', function() {
        textareaElement.value = editor.getValue();
    });

    // Notifica listeners externos (ex: monitor de alterações não salvas)
    editorElement.dispatchEvent(new CustomEvent('sle:editor-change', {
        detail: { editor: editor }
    }));

    // Sincroniza altura do CodeMirror com o wrapper redimensionável
    function syncHeight() {
        editor.getWrapperElement().style.height = editorElement.clientHeight + 'px';
        editor.refresh();
    }

    if (typeof ResizeObserver !== 'undefined') {
        var ro = new ResizeObserver(function () {
            syncHeight();
        });
        ro.observe(editorElement);
    }

    // Ajuste inicial após renderização
    setTimeout(syncHeight, 50);
});
</script>
@endpush

@if($label)
<div class="mb-3">
    <label for="{{ $id }}-editor" class="form-label">{{ $label }}</label>
    <textarea name="{{ $name }}" id="{{ $id }}-source" class="d-none">{{ $value }}</textarea>
    <div id="{{ $id }}-editor"></div>
</div>
@else
<textarea name="{{ $name }}" id="{{ $id }}-source" class="d-none">{{ $value }}</textarea>
<div id="{{ $id }}-editor"></div>
@endif