@extends('layouts.app')

@section('title', 'Document Editor - ' . $fileName)

@section('plugin-styles')
    @php $u = request()->user();@endphp
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-documenteditor/styles/material.css" rel="stylesheet" />
@stop

@section('content')
    <div class="content">
        <div
            style="
            background-color: {{ isset($isPreviewMode) && $isPreviewMode ? 'rgb(108 117 125)' : 'rgb(255 216 192)' }};
            color: white;
            padding: 15px 20px;
            display: flex;
            gap: 10px;
            align-items: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            justify-content: flex-start;
        ">
            @if($canEdit && (!isset($isPreviewMode) || !$isPreviewMode))
                <button id="save-btn" class="btn-primary-sm">Opslaan</button>
            @endif

            <button id="back-btn" class="btn-tertiary-sm">Terug</button>

            <button id="close-btn" class="btn-secondary-sm">Sluiten</button>

            <div class="badge-pill-tertiary px-5 py-2 mx-5 rounded-pill">
                {{ $fileName }}
                @if(isset($isPreviewMode) && $isPreviewMode)
                    <span class="badge badge-secondary ml-2">Voorvertoning</span>
                @endif
            </div>

            @if(isset($isPreviewMode) && $isPreviewMode)
                <div
                    style="
                display: flex;
                align-items: center;
                gap: 8px;
                font-size: 12px;
                color: rgba(255, 255, 255, 0.94);
                font-weight: 500;
                margin-left: auto;
                margin-right: 20px;
            ">
                    <div
                        style="
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                    background: #6c757d;
                ">
                    </div>
                    <span>Alleen-lezen modus</span>
                </div>
            @else
                <div
                    style="
                display: flex;
                align-items: center;
                gap: 8px;
                font-size: 12px;
                color: rgba(255, 255, 255, 0.94);
                font-weight: 500;
                margin-left: auto;
                margin-right: 20px;
            ">
                    <div id="save-status"
                        style="
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                    background: #28a745;
                ">
                    </div>
                    <span id="save-text">Opgeslagen</span>
                </div>
            @endif
        </div>

        <div id="documenteditor" style="height: calc(100vh - 80px); background: white; position: relative;">
            <div id="loading">
                <div
                    style="position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(255,255,255,0.95) !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        z-index: 9999 !important;
        flex-direction: column;
        ">
                    <div class="spinner"></div>
                    <p style="margin-top: 20px; color: #666; font-size: 16px;">Bestand wordt verwerkt...</p>

                </div>
            </div>
        </div>
    </div>
@stop

@section('footer-script')

    {{-- Syncfusion JavaScript --}}
    <script src="https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2.min.js"></script>

    <script>
        // ============ CONFIGURATION ============
        const licenseKey = '{{ config('app.syncfusion_license_key') }}';
        const documentId = {{ $document->id }};
        const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
        const isPreviewMode = {{ isset($isPreviewMode) && $isPreviewMode ? 'true' : 'false' }};

        // ============ GLOBAL VARIABLES ============
        let documentEditor;
        let isDocumentModified = false;
        let autoSaveTimer;
        let lastSaveTime = Date.now();

        // ============ INITIALIZATION ============
        document.addEventListener('DOMContentLoaded', function() {
    console.log('🚀 Document ' + (isPreviewMode ? 'Preview' : 'Editor') + ' v3.1 initializing...');
    registerLicense();
    initializeDocumentEditor();
    setupEventListeners();
    loadDocument();
    
    if (!isPreviewMode) {
        setupAutoSave();
    }
});

        function registerLicense() {
            try {
                console.log('🔐 License registering...');
                ej.base.registerLicense(licenseKey);
                console.log('✅ SyncFusion License successfully registered!');
            } catch (error) {
                console.error('❌ License registration error:', error);
                showNotification('Licentiefout: ' + error.message, 'error');
            }
        }

        function initializeDocumentEditor() {
    try {
        console.log('📝 Creating Syncfusion Document Editor...');

        documentEditor = new ej.documenteditor.DocumentEditorContainer({
            restrictEditing: {{ $canEdit ? 'false' : 'true' }},
            enableToolbar: {{ $canEdit && (!isset($isPreviewMode) || !$isPreviewMode) ? 'true' : 'false' }},
            isReadOnly: {{ $canEdit && (!isset($isPreviewMode) || !$isPreviewMode) ? 'false' : 'true' }},
            height: 'calc(100vh - 80px)',
            serviceUrl: 'https://ej2services.syncfusion.com/production/web-services/api/documenteditor/',

            documentChange: function() {
                if (!isPreviewMode && documentEditor && documentEditor.documentEditor) {
                    setDocumentModified(true);
                    console.log('📝 Document changed');
                }
            },

            created: function() {
                console.log('✅ Document ' + (isPreviewMode ? 'Preview' : 'Editor') + ' created');
            }
        });

        documentEditor.appendTo('#documenteditor');

    } catch (error) {
        console.error('❌ Document Editor creation error:', error);
        showNotification('Het initialiseren van de documenteditor is mislukt', 'error');
    }
}

        // ============ FILE OPERATIONS ============

        /**
            * Load document from server - Improved version
            */
        function loadDocument() {
            console.log('📖 Loading document... ID:', documentId);
            showLoading(true);

            fetch(`{{ route('organizational-documents.load-document', ':id') }}`.replace(':id', documentId), {
                    method: 'GET',
                    headers: {
                        'X-CSRF-TOKEN': csrfToken,
                        'Content-Type': 'application/json'
                    }
                })
                .then(response => {
                    console.log('🔍 Response status:', response.status);
                    if (!response.ok) {
                        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                    }
                    return response.json();
                })
                .then(data => {
                    console.log('📄 API Response received:', data);

                    if (data.success) {
                        try {
                            // First ensure editor is ready
                            if (!documentEditor || !documentEditor.documentEditor) {
                                throw new Error('Document editor not ready');
                            }

                            // Clear the document
                            documentEditor.documentEditor.openBlank();

                            // Wait a bit and then load
                            setTimeout(() => {
                                try {
                                    let documentContent = data.document;

                                    // String validation
                                    if (typeof documentContent !== 'string') {
                                        documentContent = JSON.stringify(documentContent);
                                    }

                                    // Open document
                                    documentEditor.documentEditor.open(documentContent);

                                    // Reset selection
                                    if (documentEditor.documentEditor.selection) {
                                        documentEditor.documentEditor.selection.moveToDocumentStart();
                                    }

                                    setDocumentModified(false);
                                    showNotification(`"${data.fileName}" succesvol geladen!`, 'success');
                                    console.log('✅ Document opened successfully');

                                } catch (editorError) {
                                    console.error('❌ SyncFusion Editor error:', editorError);
                                    showNotification('Editor fout: ' + editorError.message, 'error');
                                }
                            }, 100);

                        } catch (error) {
                            console.error('❌ Document open error:', error);
                            showNotification('Fout bij het openen van document: ' + error.message, 'error');
                        }
                    } else {
                        console.error('❌ API returned error:', data.message);
                        showNotification('Laadfout: ' + data.message, 'error');
                    }
                })
                .catch(error => {
                    console.error('❌ Network/Fetch Error:', error);
                    showNotification('Netwerkfout: ' + error.message, 'error');
                })
                .finally(() => {
                    showLoading(false);
                });
        }

        /**
            * Save document to server - Improved version
            */
        function saveDocument(saveOption) {
            console.log('💾 Saving document... Option:', saveOption);
            setSaveStatus('saving');
            showLoading(true);

            try {
                // Check if editor is ready
                if (!documentEditor || !documentEditor.documentEditor) {
                    throw new Error('Document editor not ready');
                }

                // Save selection
                const selectionStart = documentEditor.documentEditor.selection ?
                    documentEditor.documentEditor.selection.startOffset : null;

                // Get SFDT content
                const documentContent = documentEditor.documentEditor.serialize();
                console.log('📋 Serialized document length:', documentContent.length);

                // Empty content check
                if (!documentContent || documentContent.length < 10) {
                    throw new Error('Document content is empty');
                }

                // Send to API
                fetch(`{{ route('organizational-documents.save-document', ':id') }}`.replace(':id', documentId), {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': csrfToken,
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            content: documentContent, // Send as string
                            saveOption: saveOption
                        })
                    })
                    .then(response => {
                        console.log('💾 Save response status:', response.status);

                        if (!response.ok) {
                            return response.text().then(text => {
                                throw new Error(`HTTP ${response.status}: ${text}`);
                            });
                        }
                        return response.json();
                    })
                    .then(data => {
                        console.log('💾 Save response:', data);

                        if (data.success) {
                            setDocumentModified(false);
                            setSaveStatus('saved');

                            // Restore selection
                            if (selectionStart !== null && documentEditor.documentEditor.selection) {
                                try {
                                    documentEditor.documentEditor.selection.select(selectionStart, selectionStart);
                                } catch (e) {
                                    console.warn('Could not restore selection:', e);
                                }
                            }

                            showNotification(data.message || 'Document succesvol opgeslagen', 'success');
                            lastSaveTime = Date.now();
                            console.log('✅ Document saved successfully');
                        } else {
                            setSaveStatus('unsaved');
                            showNotification(`Opslagfout: ${data.message}`, 'error');
                        }
                    })
                    .catch(error => {
                        console.error('❌ Save API error:', error);
                        setSaveStatus('unsaved');
                        showNotification('Opslagfout: ' + error.message, 'error');
                    })
                    .finally(() => {
                        showLoading(false);
                    });

            } catch (error) {
                console.error('❌ Save preparation error:', error);
                setSaveStatus('unsaved');
                showNotification('Opslagfout: ' + error.message, 'error');
                showLoading(false);
            }
        }
        /**
            * Export document in different formats
            */
        function exportDocument(format) {
            console.log('📥 Starting export... Format:', format);
            showLoading(true);

            try {
                // First save so latest changes are saved
                if (isDocumentModified) {
                    console.log('📝 Saving changes before export...');
                    saveDocument('overwrite');

                    // Wait for save operation to complete
                    setTimeout(() => {
                        performExport(format);
                    }, 1000);
                } else {
                    performExport(format);
                }

            } catch (error) {
                console.error('❌ Export error:', error);
                showNotification('Exportfout: ' + error.message, 'error');
                showLoading(false);
            }
        }

        function performExport(format) {
            try {
                const documentContent = documentEditor.documentEditor.serialize();
                const parsedContent = JSON.parse(documentContent);

                fetch(`{{ route('organizational-documents.export-document', ':id') }}`.replace(':id', documentId), {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': csrfToken,
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            content: parsedContent,
                            format: format
                        })
                    })
                    .then(response => {
                        if (response.ok) {
                            return response.blob();
                        } else {
                            throw new Error(`Export failed: HTTP ${response.status}`);
                        }
                    })
                    .then(blob => {
                        const url = URL.createObjectURL(blob);
                        const a = document.createElement('a');
                        a.href = url;
                        a.download = `{{ pathinfo($fileName, PATHINFO_FILENAME) }}_${Date.now()}.${format}`;
                        document.body.appendChild(a);
                        a.click();
                        URL.revokeObjectURL(url);
                        document.body.removeChild(a);

                        showNotification(`${format.toUpperCase()} bestand gedownload!`, 'success');
                    })
                    .catch(error => {
                        console.error('❌ Export error:', error);
                        showNotification('Exportfout: ' + error.message, 'error');
                    })
                    .finally(() => {
                        showLoading(false);
                    });

            } catch (error) {
                console.error('❌ Export serialization error:', error);
                showNotification('Exportfout: ' + error.message, 'error');
                showLoading(false);
            }
        }

        // ============ AUTO-SAVE FUNCTIONALITY ============
        function setupAutoSave() {
            setInterval(() => {
                if (isDocumentModified && (Date.now() - lastSaveTime) > 30000) {
                    console.log('🔄 Auto-save triggered');
                    saveDocument('overwrite');
                }
            }, 30000); // 30 seconds
        }

        // ============ UI STATE MANAGEMENT ============
        function setDocumentModified(modified) {
            isDocumentModified = modified;
            setSaveStatus(modified ? 'unsaved' : 'saved');
        }

        function setSaveStatus(status) {
            const statusElement = document.getElementById('save-status');
            const textElement = document.getElementById('save-text');

            if (statusElement && textElement) {

                statusElement.classList.remove('saving-animation');

                switch (status) {
                    case 'saving':
                        textElement.textContent = 'Bezig met opslaan...';

                        statusElement.style.backgroundColor = '#ffc107';

                        statusElement.classList.add('saving-animation');
                        break;

                    case 'saved':
                        textElement.textContent = 'Opgeslagen';

                        statusElement.style.backgroundColor = '#28a745';
                        break;

                    case 'unsaved':
                        textElement.textContent = 'Niet opgeslagen';

                        statusElement.style.backgroundColor = '#dc3545';
                        break;
                }
            }
        }

        // ============ NAVIGATION ============
        function goBack() {
            if (isDocumentModified) {
                if (confirm('Er zijn niet-opgeslagen wijzigingen. Weet u zeker dat u terug wilt gaan?')) {
                    window.history.back();
                }
            } else {
                window.history.back();
            }
        }

        function closeEditor() {
            if (isDocumentModified) {
                if (confirm('Er zijn niet-opgeslagen wijzigingen. Weet u zeker dat u wilt sluiten?')) {
                    window.close() || window.history.back();
                }
            } else {
                window.close() || window.history.back();
            }
        }

        // ============ UI HELPERS ============
        function showLoading(show) {
            const loadingEl = document.getElementById('loading');
            if (loadingEl) {
                loadingEl.style.display = show ? 'flex' : 'none';
            }
        }

        function showNotification(message, type = 'info') {
            console.log(`📢 ${type.toUpperCase()}: ${message}`);

            const notification = document.createElement('div');
            notification.className = `notification ${type}`;
            notification.textContent = message;

            document.body.appendChild(notification);

            setTimeout(() => {
                if (notification.parentNode) {
                    notification.style.animation = 'slideIn 0.3s ease reverse';
                    setTimeout(() => {
                        if (notification.parentNode) {
                            notification.parentNode.removeChild(notification);
                        }
                    }, 300);
                }
            }, 4000);
        }

        function showDebugInfo(info) {
            console.error('🐛 Debug Info:', info);

            const debugPanel = document.createElement('div');
            debugPanel.style.cssText = `
    position: fixed;
    bottom: 20px;
    right: 20px;
    max-width: 400px;
    background: #ff6600;
    color: white;
    padding: 15px;
    border-radius: 8px;
    font-family: monospace;
    font-size: 12px;
    z-index: 10001;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
`;

            debugPanel.innerHTML = `
    <strong>Debug Info:</strong><br>
    <pre style="margin: 10px 0; white-space: pre-wrap;">${JSON.stringify(info, null, 2)}</pre>
    <button onclick="this.parentElement.remove()" style="background: white; color: #ff6600; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer;">Sluiten</button>
`;

            document.body.appendChild(debugPanel);

            setTimeout(() => {
                if (debugPanel.parentNode) {
                    debugPanel.remove();
                }
            }, 10000);
        }

        // ============ EVENT LISTENERS ============
        function setupEventListeners() {
    // Save buttons (only in edit mode)
    @if($canEdit && (!isset($isPreviewMode) || !$isPreviewMode))
        if (document.getElementById('save-btn')) {
            document.getElementById('save-btn').addEventListener('click', () => saveDocument('overwrite'));
        }
    @endif

    // Navigation buttons
    document.getElementById('back-btn').addEventListener('click', goBack);
    document.getElementById('close-btn').addEventListener('click', closeEditor);

    // Keyboard shortcuts (only in edit mode)
    if (!isPreviewMode) {
        document.addEventListener('keydown', function(e) {
            if (e.ctrlKey || e.metaKey) {
                if (e.key === 's') {
                    e.preventDefault();
                    saveDocument('overwrite');
                } else if (e.key === 'e') {
                    e.preventDefault();
                    exportDocument('docx');
                }
            }
        });

        // Before unload warning (only in edit mode)
        window.addEventListener('beforeunload', function(e) {
            if (isDocumentModified) {
                e.preventDefault();
                e.returnValue = 'Er zijn niet-opgeslagen wijzigingen. Weet u zeker dat u de pagina wilt verlaten?';
            }
        });
    }
}


        /**
            * Handle file import from user's computer
            */
        function handleFileImport(event) {
            const file = event.target.files[0];
            if (!file) return;

            console.log('📥 Importing file:', file.name);
            showLoading(true);

            const formData = new FormData();
            formData.append('files', file);

            fetch('{{ route('organizational-documents.import-document') }}', {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': csrfToken
                    },
                    body: formData
                })
                .then(response => {
                    console.log('📤 Import response status:', response.status);
                    if (!response.ok) {
                        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                    }
                    return response.json();
                })
                .then(data => {
                    console.log('📄 Import response data:', data);

                    if (data && !data.error) {
                        try {
                            documentEditor.documentEditor.open(JSON.stringify(data));
                            setDocumentModified(true);
                            showNotification(`"${file.name}" succesvol geïmporteerd!`, 'success');
                        } catch (editorError) {
                            console.error('❌ Editor error:', editorError);
                            showNotification('Kon geïmporteerd bestand niet openen', 'error');
                        }
                    } else {
                        throw new Error(data.error || 'Import mislukt');
                    }
                })
                .catch(error => {
                    console.error('❌ Import error:', error);
                    showNotification('Importfout: ' + error.message, 'error');
                })
                .finally(() => {
                    showLoading(false);
                    event.target.value = '';
                });
        }

        // ============ STARTUP ============
        console.log('🎨 Document Editor v3.1 READY!');
        console.log('✨ Features: Optimized SFDT, Auto-save, Better error handling');
        console.log('⌨️ Shortcuts: Ctrl+S (Save), Ctrl+E (Export)');
        console.log('📋 Document ID:', documentId);
    </script>

@stop