@props([
    'name' => 'catatan',
    'id' => null,
    'rows' => 4,
    'placeholder' => 'Tulis catatan...',
    'value' => '',
    'required' => false,
    'class' => '',
    'error' => null
])

@php
    $editorId = $id ?? 'catatan-editor-' . uniqid();
    $inputId = $editorId . '-input';
    // Calculate height based on rows (approx 24px per row)
    $editorHeight = ($rows * 24) + 20;
@endphp

<div class="catatan-quill-wrapper {{ $error ? 'has-error' : '' }}">
    {{-- Quill Editor Container --}}
    <div id="{{ $editorId }}" class="catatan-quill-editor" style="min-height: {{ $editorHeight }}px;"></div>

    {{-- Hidden input to store HTML content --}}
    <input type="hidden" name="{{ $name }}" id="{{ $inputId }}" value="{{ $value }}">

    @if($error)
        <div class="invalid-feedback d-block">{{ $error }}</div>
    @endif
</div>

@once
@push('styles')
{{-- Quill CSS --}}
<link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet">
<style>
.catatan-quill-wrapper {
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    overflow: hidden;
    background: #fff;
}

.catatan-quill-wrapper:focus-within {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.catatan-quill-wrapper.has-error {
    border-color: #dc3545;
}

.catatan-quill-wrapper .ql-toolbar {
    border: none !important;
    border-bottom: 1px solid #e9ecef !important;
    background: #f8f9fa;
    padding: 6px 8px;
}

.catatan-quill-wrapper .ql-container {
    border: none !important;
    font-size: 0.95rem;
    font-family: inherit;
}

.catatan-quill-wrapper .ql-editor {
    padding: 12px;
    min-height: 80px;
}

.catatan-quill-wrapper .ql-editor.ql-blank::before {
    color: #6c757d;
    font-style: normal;
}

/* Toolbar button styling */
.catatan-quill-wrapper .ql-toolbar button {
    width: 28px;
    height: 28px;
}

.catatan-quill-wrapper .ql-toolbar button:hover {
    background: #e9ecef;
    border-radius: 4px;
}

.catatan-quill-wrapper .ql-toolbar button.ql-active {
    background: #dee2e6;
    border-radius: 4px;
}

/* Custom styles for content */
.catatan-quill-wrapper .ql-editor ul,
.catatan-quill-wrapper .ql-editor ol {
    padding-left: 1.5em;
}

.catatan-quill-wrapper .ql-editor p {
    margin-bottom: 0.5em;
}

.catatan-quill-wrapper .ql-editor p:last-child {
    margin-bottom: 0;
}
</style>
@endpush

@push('scripts')
{{-- Quill JS --}}
<script src="https://cdn.quilljs.com/1.3.7/quill.min.js"></script>
<script>
// Global function to initialize Quill editors
window.initCatatanQuillEditors = function() {
    document.querySelectorAll('.catatan-quill-editor').forEach(function(container) {
        // Skip if already initialized
        if (container.classList.contains('ql-container')) return;
        if (container.querySelector('.ql-editor')) return;

        const editorId = container.id;
        const inputId = editorId + '-input';
        const input = document.getElementById(inputId);

        // Initialize Quill
        const quill = new Quill('#' + editorId, {
            theme: 'snow',
            placeholder: 'Tulis catatan...',
            modules: {
                toolbar: [
                    ['bold', 'italic', 'underline'],
                    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                    ['clean']
                ]
            }
        });

        // Set initial content
        if (input && input.value) {
            quill.root.innerHTML = input.value;
        }

        // Sync content to hidden input on change
        quill.on('text-change', function() {
            if (input) {
                // Get HTML content, but use empty string if only whitespace/empty tags
                const html = quill.root.innerHTML;
                const text = quill.getText().trim();
                input.value = text ? html : '';
            }
        });

        // Store quill instance on container for later access
        container.quillInstance = quill;
    });
};

// Initialize on DOM ready
document.addEventListener('DOMContentLoaded', window.initCatatanQuillEditors);

// Also initialize on Livewire updates if available
if (typeof Livewire !== 'undefined') {
    Livewire.hook('message.processed', function() {
        window.initCatatanQuillEditors();
    });
}
</script>
@endpush
@endonce

{{-- Inline script for this specific editor instance --}}
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const container = document.getElementById('{{ $editorId }}');
    const input = document.getElementById('{{ $inputId }}');

    // Skip if already has Quill
    if (container && !container.querySelector('.ql-editor')) {
        const quill = new Quill('#{{ $editorId }}', {
            theme: 'snow',
            placeholder: '{{ $placeholder }}',
            modules: {
                toolbar: [
                    ['bold', 'italic', 'underline'],
                    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                    ['clean']
                ]
            }
        });

        // Set initial content
        if (input && input.value) {
            quill.root.innerHTML = input.value;
        }

        // Sync to hidden input
        quill.on('text-change', function() {
            if (input) {
                const html = quill.root.innerHTML;
                const text = quill.getText().trim();
                input.value = text ? html : '';
            }
        });

        container.quillInstance = quill;
    }
});
</script>
@endpush