{% extends 'base.html' %}

{% block title %}Edit Asset{% endblock %}

{% block content_title %}Edit Asset{% endblock %}
{% block content_description %}Edit Asset: <b>{{ asset.name }}</b>{% endblock %}
{% block content_class %}<div class="col-xl-10 col-lg-8 col-md-10 mx-auto"></div>{% endblock %}

{% block content %}
<div class="card">
    <div class="card-header">
        <div class="row">
            <div class="col-md-8">
                <h4 class="card-title">Asset Details</h4>
            </div>
        </div>
    </div>
    <div class="card-body">
        <!-- Asset Information -->
        <div class="row mb-4">
            <div class="col-md-6">
                <p><strong>ID:</strong> {{ asset.id }}</p>
                <p><strong>Name:</strong> {{ asset.name }}</p>
                <p><strong>Type:</strong> {{ asset.type }}</p>
            </div>
            <div class="col-md-6">
                <p><strong>Type Version:</strong> {{ asset.type_version }}</p>
                <p><strong>File Type:</strong> {{ asset.file_type }}</p>
                <p><strong>File Size:</strong> {{ asset.file_size or 'N/A' }} MiB</p>
            </div>
        </div>

        <hr>

        <!-- JSON Editor Form -->
        <form method="POST" id="editAssetForm">
            <div class="row">
                <div class="col-12">
                    <h5>JSON Content</h5>

                    <!-- JSON Editor - gebruik het eveai_json_editor patroon -->
                    <div class="form-group">
                        <textarea name="json_content" id="json_content" class="json-editor" style="display: none;">{{ json_content }}</textarea>
                        <div id="json_content-editor" class="json-editor-container" style="height: 500px; border: 1px solid #ddd; border-radius: 5px;"></div>
                    </div>
                </div>
            </div>

            <hr>

            <!-- Action Buttons -->
            <div class="row">
                <div class="col-12">
                    <div class="d-flex justify-content-between">
                        <div>
                            <a href="{{ url_for('interaction_bp.assets') }}" class="btn btn-secondary">
                                <i class="material-icons">cancel</i> Annuleren
                            </a>
                        </div>
                        <div>
                            <button type="submit" class="btn btn-primary">
                                <i class="material-icons">save</i> Opslaan
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
{% endblock %}


{% block scripts %}
{{ super() }}

<script>
document.addEventListener('DOMContentLoaded', function() {
    const textareaElement = document.getElementById('json_content');
    let currentEditor = null;

    // Wacht even en probeer dan de editor te krijgen via de EveAI namespace
    setTimeout(function() {
        currentEditor = window.EveAI?.JsonEditors?.get('json_content-editor');
        if (currentEditor) {
            console.log('JSON Editor gevonden en gekoppeld');
        } else {
            console.log('JSON Editor nog niet beschikbaar, probeer handmatige initialisatie');

            // Probeer handmatige initialisatie als fallback
            if (window.EveAI?.JsonEditors?.initialize) {
                try {
                    const initialContent = JSON.parse(textareaElement.value);
                    currentEditor = window.EveAI.JsonEditors.initialize('json_content-editor', initialContent, {
                        mode: 'tree',
                        readOnly: false,
                        mainMenuBar: true,
                        navigationBar: false,
                        statusBar: true,
                        onChange: (updatedContent, previousContent, { contentErrors, patchResult }) => {
                            console.log('Editor content changed');
                            // Automatisch de textarea updaten bij wijzigingen
                            syncEditorToTextarea();
                        }
                    });
                } catch (e) {
                    console.error('Error bij handmatige initialisatie:', e);
                }
            }
        }
    }, 500);

    // Functie om editor inhoud naar textarea te synchroniseren
    function syncEditorToTextarea() {
        if (currentEditor && currentEditor.get) {
            try {
                const content = currentEditor.get();
                if (content.json !== undefined) {
                    textareaElement.value = JSON.stringify(content.json, null, 2);
                } else if (content.text !== undefined) {
                    textareaElement.value = content.text;
                }
                console.log('Editor content gesynchroniseerd naar textarea');
            } catch (e) {
                console.error('Error bij synchronisatie:', e);
            }
        }
    }

    // Sync knop
    document.getElementById('getEditorContentBtn').addEventListener('click', function() {
        syncEditorToTextarea();
        alert('Editor inhoud gesynchroniseerd naar textarea');
    });

    // Validate JSON button
    document.getElementById('validateJsonBtn').addEventListener('click', function() {
        // Eerst synchroniseren
        syncEditorToTextarea();

        try {
            const content = textareaElement.value;
            JSON.parse(content);

            // Show success message
            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    title: 'Geldig JSON',
                    text: 'De JSON syntax is correct!',
                    icon: 'success',
                    timer: 2000,
                    showConfirmButton: false
                });
            } else {
                alert('De JSON syntax is correct!');
            }
        } catch (e) {
            // Show error message
            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    title: 'Ongeldig JSON',
                    text: 'JSON syntax fout: ' + e.message,
                    icon: 'error',
                    confirmButtonText: 'OK'
                });
            } else {
                alert('JSON syntax fout: ' + e.message);
            }
        }
    });

    // Form submission validation
    document.getElementById('editAssetForm').addEventListener('submit', function(e) {
        // Eerst de editor content synchroniseren
        syncEditorToTextarea();

        try {
            const content = textareaElement.value;
            JSON.parse(content);
            
            // JSON is valid, allow submission
            return true;
        } catch (error) {
            e.preventDefault();
            
            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    title: 'Ongeldig JSON',
                    text: 'Kan het formulier niet verzenden: JSON syntax fout - ' + error.message,
                    icon: 'error',
                    confirmButtonText: 'OK'
                });
            } else {
                alert('Kan het formulier niet verzenden: JSON syntax fout - ' + error.message);
            }
            return false;
        }
    });
});
</script>
{% endblock %}