@extends('layouts.admin')
@section('styles')
    @include('admin.dev-tool.assets.css.terminal')
@endsection

@section('content')

<div class="card">
    <div class="card-header">
        <h3 class="card-title">Dev Tool</h3>
    </div>

    <div class="card-body">
        <!-- Command Mode UI -->
        @include('admin.dev-tool.partials.command-ui')

        <!-- SQL Mode UI -->
        @include('admin.dev-tool.partials.sql-ui')
    </div>
</div>

<div class="editor-modal" id="editorModal">
    <div class="editor-container">
        <div class="editor-header">
            <div class="editor-title" id="editorTitle">Edit File</div>
            <div class="editor-actions">
                <button class="editor-btn editor-btn-save" id="saveFileBtn">Save</button>
                <button class="editor-btn editor-btn-close" id="closeEditorBtn">Close</button>
            </div>
        </div>
        <div class="editor-content">
            <textarea id="fileEditor" spellcheck="false"></textarea>
        </div>
    </div>
</div>

<!-- Full Screen Overlay -->
@include('admin.dev-tool.partials.fullscreen-overlay')

@endsection

@section('scripts')
@parent

@include('admin.dev-tool.assets.js.sql')

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const commandInput = document.getElementById('commandInput');
        const executeBtn = document.getElementById('executeBtn');
        const outputArea = document.getElementById('outputArea');
        let commandHistory = [];
        let historyIndex = -1;
        let currentDirectory = '';

        // Function to convert ANSI color codes to HTML
        function ansiToHtml(text) {
            // // Debug: Log the raw text to see what we're receiving
            // console.log('Raw text received:', text);
            // console.log('Text length:', text.length);

            // Check if text contains ANSI codes
            if (!text.includes('\x1b') && !text.includes('\u001b')) {
                // console.log('No ANSI codes found in text');
                return text;
            }

            // ANSI color code mappings
            const colors = {
                '30': 'color: #000000', // Black
                '31': 'color: #cd0000', // Red
                '32': 'color: #00cd00', // Green
                '33': 'color: #cdcd00', // Yellow
                '34': 'color: #0000cd', // Blue
                '35': 'color: #cd00cd', // Magenta
                '36': 'color: #00cdcd', // Cyan
                '37': 'color: #e5e5e5', // White
                '90': 'color: #666666', // Bright Black
                '91': 'color: #ff0000', // Bright Red
                '92': 'color: #00ff00', // Bright Green
                '93': 'color: #ffff00', // Bright Yellow
                '94': 'color: #0000ff', // Bright Blue
                '95': 'color: #ff00ff', // Bright Magenta
                '96': 'color: #00ffff', // Bright Cyan
                '97': 'color: #ffffff', // Bright White
            };

            // ANSI background color mappings
            const bgColors = {
                '40': 'background-color: #000000', // Black
                '41': 'background-color: #cd0000', // Red
                '42': 'background-color: #00cd00', // Green
                '43': 'background-color: #cdcd00', // Yellow
                '44': 'background-color: #0000cd', // Blue
                '45': 'background-color: #cd00cd', // Magenta
                '46': 'background-color: #00cdcd', // Cyan
                '47': 'background-color: #e5e5e5', // White
            };

            // Replace ANSI color codes with HTML spans - handle both \x1b and \u001b
            let result = text.replace(/\x1b\[(\d+(?:;\d+)*)?m/g, function(match, codes) {
                // console.log('Found ANSI code:', match, 'with codes:', codes);
                if (!codes) return '</span>'; // Reset

                const codeArray = codes.split(';');
                let styles = [];

                codeArray.forEach(code => {
                    if (colors[code]) {
                        styles.push(colors[code]);
                    }
                    if (bgColors[code]) {
                        styles.push(bgColors[code]);
                    }
                    // Handle bold (1), dim (2), italic (3), underline (4)
                    if (code === '1') styles.push('font-weight: bold');
                    if (code === '2') styles.push('opacity: 0.7');
                    if (code === '3') styles.push('font-style: italic');
                    if (code === '4') styles.push('text-decoration: underline');
                });

                if (styles.length > 0) {
                    return `<span style="${styles.join('; ')}">`;
                }
                return '';
            });

            // Also handle \u001b format
            result = result.replace(/\u001b\[(\d+(?:;\d+)*)?m/g, function(match, codes) {
                // console.log('Found ANSI code (unicode):', match, 'with codes:', codes);
                if (!codes) return '</span>'; // Reset

                const codeArray = codes.split(';');
                let styles = [];

                codeArray.forEach(code => {
                    if (colors[code]) {
                        styles.push(colors[code]);
                    }
                    if (bgColors[code]) {
                        styles.push(bgColors[code]);
                    }
                    // Handle bold (1), dim (2), italic (3), underline (4)
                    if (code === '1') styles.push('font-weight: bold');
                    if (code === '2') styles.push('opacity: 0.7');
                    if (code === '3') styles.push('font-style: italic');
                    if (code === '4') styles.push('text-decoration: underline');
                });

                if (styles.length > 0) {
                    return `<span style="${styles.join('; ')}">`;
                }
                return '';
            });

            // console.log('Converted result:', result);
            return result;
        }

        function appendOutput(text, type = 'normal') {
            const timestamp = new Date().toLocaleTimeString();
            let colorClass = '';

            switch(type) {
                case 'success':
                    colorClass = 'output-success';
                    break;
                case 'error':
                    colorClass = 'output-error';
                    break;
                case 'info':
                    colorClass = 'output-info';
                    break;
            }

            const output = `[${timestamp}] ${text}\n`;

            if (colorClass) {
                outputArea.innerHTML += `<span class="${colorClass}">${output}</span>`;
            } else {
                outputArea.textContent += output;
            }

            outputArea.scrollTop = outputArea.scrollHeight;
        }

        function executeCommand() {
            const command = commandInput.value.trim();
            if (!command) return;

            // Handle 'clear' command on frontend
            if (command === 'clear') {
                outputArea.innerHTML = '';
                commandInput.value = '';
                commandInput.focus();
                return;
            }

            // Enter SQL mode
            if (command === 'sql') {
                isSqlMode = true;
                terminalContainer.style.display = 'none';
                sqlModeContainer.style.display = '';
                sqlInput.value = '';

                // Clear any existing tabs and reset to initial state
                sqlTabs = [];
                activeTabId = null;
                tabCounter = 0;

                // Clear the tab content area
                const tabContent = document.getElementById('sqlTabContent');
                if (tabContent) {
                    tabContent.innerHTML = '<div style="text-align: center; color: #888; font-style: italic; padding: 40px;">Select a table to view data or run a SQL query</div>';
                }

                // Clear the tabs container
                const tabsContainer = document.getElementById('sqlTabs');
                if (tabsContainer) {
                    tabsContainer.innerHTML = '';
                }

                sqlInput.focus();
                commandInput.value = '';
                loadDatabases(); // <-- Initialize database browser
                initializeResizablePanels(); // <-- Initialize resizable panels
                initializeSqlLayout(); // <-- Initialize proper layout
                initializePanelToggles(); // <-- Initialize panel toggles
                return;
            }

            if (command.startsWith('edit ') || command.startsWith('nano ') || command.startsWith('vim ')) {
                const filePath = command.split(' ')[1];
                openFileEditor(filePath);
                return;
            }

            commandHistory.push(command);
            historyIndex = commandHistory.length;

            appendOutput(`$ ${currentDirectory ? currentDirectory + '$ ' : ''}${command}`, 'info');
            appendOutput('Executing command...', 'info');
            executeBtn.disabled = true;

            // fetch('{{ route("admin.dev-tool.terminal.execute") }}', {
            //     method: 'POST',
            //     headers: {
            //         'Content-Type': 'application/json',
            //         'X-CSRF-TOKEN': '{{ csrf_token() }}'
            //     },
            //     body: JSON.stringify({
            //         command,
            //         currentDirectory
            //     })
            // })
            // .then(response => response.json())
            // .then(data => {
            //     if (data.success) {
            //         if (data.currentDirectory !== undefined) {
            //             currentDirectory = data.currentDirectory;
            //         }
            //         appendOutput(data.output || 'Command executed successfully.', 'success');
            //     } else {
            //         appendOutput(`Error: ${data.error}`, 'error');
            //     }
            // })
            // .catch(error => {
            //     appendOutput(`Error: ${error.message}`, 'error');
            // })
            // .finally(() => {
            //     executeBtn.disabled = false;
            //     commandInput.value = '';
            //     commandInput.focus();
            // });

            fetch('{{ route("admin.dev-tool.terminal.execute-stream") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({
                    command,
                    currentDirectory
                })
            })
            .then(response => {
                // Check if response is successful
                if (!response.ok) {
                    // Handle HTTP error responses (like 403, 500, etc.)
                    return response.json().then(errorData => {
                        appendOutput(`Error: ${errorData.error || 'Command execution failed'}`, 'error');
                        executeBtn.disabled = false;
                        commandInput.value = '';
                        commandInput.focus();
                    });
                }

                // Check if response is streaming (text/event-stream)
                const contentType = response.headers.get('content-type');
                if (!contentType || !contentType.includes('text/event-stream')) {
                    // Handle non-streaming responses
                    return response.json().then(data => {
                        if (data.success) {
                            if (data.currentDirectory !== undefined) {
                                currentDirectory = data.currentDirectory;
                            }
                            appendOutput(data.output || 'Command executed successfully.', 'success');
                        } else {
                            appendOutput(`Error: ${data.error}`, 'error');
                        }
                        executeBtn.disabled = false;
                        commandInput.value = '';
                        commandInput.focus();
                    });
                }

                // Handle Server-Sent Events for real-time output
                const reader = response.body.getReader();
                const decoder = new TextDecoder();

                function readStream() {
                    return reader.read().then(({ done, value }) => {
                        if (done) {
                            return;
                        }

                        const chunk = decoder.decode(value);
                        const lines = chunk.split('\n');

                        lines.forEach(line => {
                            if (line.startsWith('data: ')) {
                                try {
                                    const data = JSON.parse(line.substring(6));

                                    switch (data.type) {
                                        case 'output':
                                            // Handle raw command output to preserve original formatting
                                            if (data.raw) {
                                                // Convert ANSI color codes to HTML and append
                                                const htmlOutput = ansiToHtml(data.data);
                                                outputArea.innerHTML += htmlOutput;
                                                outputArea.scrollTop = outputArea.scrollHeight;
                                            } else {
                                                // For regular output, use the styled format
                                                appendOutput(data.data, 'normal');
                                            }
                                            break;
                                        case 'error':
                                            // Handle raw error output to preserve original formatting
                                            if (data.raw) {
                                                // Convert ANSI color codes to HTML and append with error styling
                                                const htmlOutput = ansiToHtml(data.data);
                                                outputArea.innerHTML += `<span class="output-error">${htmlOutput}</span>`;
                                                outputArea.scrollTop = outputArea.scrollHeight;
                                            } else {
                                                // For regular errors, use the styled format
                                                appendOutput(data.data, 'error');
                                            }
                                            break;
                                        case 'download':
                                            // Handle file download
                                            if (data.url) {
                                                appendOutput(data.message || `Downloading: ${data.filename}`, 'info');
                                                // Create a temporary link and trigger download
                                                const link = document.createElement('a');
                                                link.href = data.url;
                                                link.download = data.filename || 'download';
                                                link.style.display = 'none';
                                                document.body.appendChild(link);
                                                link.click();
                                                document.body.removeChild(link);
                                            } else {
                                                appendOutput('Download URL not provided', 'error');
                                            }
                                            break;
                                        case 'complete':
                                            if (data.success) {
                                                if (data.currentDirectory !== undefined) {
                                                    currentDirectory = data.currentDirectory;
                                                }
                                                appendOutput('Command executed successfully.', 'success');
                                            } else {
                                                appendOutput(`Command failed: ${data.error}`, 'error');
                                            }
                                            executeBtn.disabled = false;
                                            commandInput.value = '';
                                            commandInput.focus();
                                            return; // Stop reading
                                            break;
                                    }
                                } catch (e) {
                                    // Ignore malformed JSON
                                }
                            }
                        });

                        // Continue reading
                        return readStream();
                    });
                }

                return readStream();
            })
            .catch(error => {
                appendOutput(`Error: ${error.message}`, 'error');
                executeBtn.disabled = false;
                commandInput.value = '';
                commandInput.focus();
            });
        }

        function openFileEditor(filePath) {
            const editorModal = document.getElementById('editorModal');
            const fileEditor = document.getElementById('fileEditor');
            const editorTitle = document.getElementById('editorTitle');
            const saveFileBtn = document.getElementById('saveFileBtn');
            const closeEditorBtn = document.getElementById('closeEditorBtn');

            fetch('{{ route("admin.dev-tool.terminal.get-file") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({ path: filePath })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    editorTitle.textContent = `Edit File: ${filePath}`;
                    fileEditor.value = data.content;

                    editorModal.style.display = 'block';
                    fileEditor.focus();

                    saveFileBtn.onclick = () => {
                        fetch('{{ route("admin.dev-tool.terminal.save-file") }}', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            },
                            body: JSON.stringify({
                                path: filePath,
                                content: fileEditor.value
                            })
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                appendOutput(`File ${filePath} saved successfully.`, 'success');
                                editorModal.style.display = 'none';
                            } else {
                                appendOutput(`Error saving file: ${data.error}`, 'error');
                            }
                        });
                    };

                    // Close editor handler
                    closeEditorBtn.onclick = () => {
                        editorModal.style.display = 'none';
                    };
                } else {
                    appendOutput(`Error opening file: ${data.error}`, 'error');
                }
            });
        }

        // Update the prompt to show current directory
        function updatePrompt() {
            const promptSymbol = document.querySelector('.prompt-symbol');
            promptSymbol.textContent = currentDirectory ? `${currentDirectory}$` : '$';
        }

        executeBtn.addEventListener('click', executeCommand);

        commandInput.addEventListener('keydown', function(e) {
            if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault();
                executeCommand();
            } else if (e.key === 'ArrowUp') {
                e.preventDefault();
                if (historyIndex > 0) {
                    historyIndex--;
                    commandInput.value = commandHistory[historyIndex];
                }
            } else if (e.key === 'ArrowDown') {
                e.preventDefault();
                if (historyIndex < commandHistory.length - 1) {
                    historyIndex++;
                    commandInput.value = commandHistory[historyIndex];
                } else {
                    historyIndex = commandHistory.length;
                    commandInput.value = '';
                }
            }
        });

        // Initial welcome message
        appendOutput('Welcome to Command Panel! Type your command and press Enter.', 'info');

        // Focus input on load
        commandInput.focus();
    });
</script>
@endsection