@extends('layouts.admin')
@section('styles')
    <style>
        .terminal-container {
            background: #1e1e1e;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            margin: 20px 0;
            overflow: hidden;
        }

        .terminal-header {
            background: #323232;
            padding: 10px 15px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #424242;
        }

        .terminal-dots {
            display: flex;
            gap: 8px;
            margin-right: 15px;
        }

        .terminal-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
        }

        .dot-red { background: #ff5f56; }
        .dot-yellow { background: #ffbd2e; }
        .dot-green { background: #27c93f; }

        .terminal-title {
            color: #fff;
            font-size: 14px;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        .terminal-body {
            padding: 20px;
        }

        .command-input-group {
            display: flex;
            align-items: center;
            background: #2d2d2d;
            border-radius: 6px;
            padding: 8px 12px;
            margin-bottom: 15px;
        }

        .prompt-symbol {
            color: #27c93f;
            margin-right: 10px;
            font-family: monospace;
            font-weight: bold;
            font-size: 16px;
        }

        #commandInput {
            background: transparent;
            border: none;
            color: #fff;
            font-family: 'Fira Code', monospace;
            font-size: 14px;
            flex-grow: 1;
            padding: 5px;
        }

        #commandInput:focus {
            outline: none;
        }

        #commandInput::placeholder {
            color: #666;
        }

        #executeBtn {
            background: #27c93f;
            border: none;
            border-radius: 4px;
            color: #000;
            font-weight: 500;
            padding: 6px 12px;
            transition: all 0.3s ease;
        }

        #executeBtn:hover {
            background: #2ee649;
            transform: translateY(-1px);
        }

        #executeBtn:disabled {
            background: #1a7b27;
            color: #666;
        }

        #outputArea {
            background: #2d2d2d;
            border-radius: 6px;
            color: #fff;
            font-family: 'Fira Code', monospace;
            font-size: 14px;
            line-height: 1.6;
            margin: 0;
            padding: 15px;
            min-height: 300px;
            max-height: 600px;
            overflow-y: auto;
        }

        .command-hint {
            color: #666;
            font-size: 12px;
            margin-top: 8px;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        /* Custom Scrollbar */
        #outputArea::-webkit-scrollbar {
            width: 8px;
        }

        #outputArea::-webkit-scrollbar-track {
            background: #1e1e1e;
        }

        #outputArea::-webkit-scrollbar-thumb {
            background: #444;
            border-radius: 4px;
        }

        #outputArea::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

        /* Output text colors */
        .output-success {
            color: #27c93f;
        }

        .output-error {
            color: #ff5f56;
        }

        .output-info {
            color: #58a6ff;
        }

        .command-suggestions {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: #2d2d2d;
            border-radius: 0 0 6px 6px;
            border-top: 1px solid #424242;
            max-height: 200px;
            overflow-y: auto;
            z-index: 1000;
            display: none;
        }

        .command-input-wrapper {
            position: relative;
        }

        .suggestion-item {
            padding: 8px 12px;
            color: #fff;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .suggestion-item:hover,
        .suggestion-item.selected {
            background: #3d3d3d;
        }

        .suggestion-count {
            color: #666;
            font-size: 12px;
            margin-left: auto;
        }

        .suggestion-icon {
            color: #58a6ff;
            font-size: 14px;
        }

        .suggestion-text {
            flex-grow: 1;
            font-family: 'Fira Code', monospace;
        }

        .suggestion-description {
            color: #666;
            font-size: 12px;
            margin-left: 24px;
        }

        .editor-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.8);
            z-index: 1050;
        }

        .editor-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 90%;
            max-width: 1000px;
            background: #1e1e1e;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .editor-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px;
            background: #323232;
            border-radius: 8px 8px 0 0;
            border-bottom: 1px solid #424242;
        }

        .editor-title {
            color: #fff;
            font-size: 16px;
            font-weight: 500;
        }

        .editor-actions {
            display: flex;
            gap: 10px;
        }

        .editor-btn {
            padding: 8px 16px;
            border-radius: 4px;
            border: none;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .editor-btn-save {
            background: #27c93f;
            color: #000;
        }

        .editor-btn-close {
            background: #666;
            color: #fff;
        }

        .editor-btn:hover {
            transform: translateY(-1px);
            opacity: 0.9;
        }

        .editor-content {
            padding: 20px;
        }

        #fileEditor {
            width: 100%;
            height: 500px;
            background: #2d2d2d;
            color: #fff;
            font-family: 'Fira Code', monospace;
            font-size: 14px;
            border: none;
            border-radius: 4px;
            padding: 15px;
            resize: vertical;
        }

        /* SQL Mode Panel Toggle Buttons */
        .panel-toggle-btn {
            background: #444;
            color: #ccc;
            border: none;
            padding: 6px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 24px;
            transition: background-color 0.3s, box-shadow 0.3s;
            box-shadow: none;
        }
        .panel-toggle-btn.active {
            background: #232323;
            color: #27c93f;
            box-shadow: 0 0 0 3px #27c93f44;
        }
        .panel-toggle-btn.inactive {
            background: #444;
            color: #888;
            box-shadow: none;
        }

        /* SQL Validation Styles */
        .sql-input-error {
            border: 2px solid #ff4444 !important;
        }

        .sql-input-valid {
            border: 2px solid #44ff44 !important;
        }

        .validation-message {
            font-size: 12px;
            margin-top: 5px;
            padding: 8px;
            border-radius: 4px;
            font-weight: bold;
        }

        .validation-error {
            color: #fff;
            background-color: #ff4444;
        }

        .validation-success {
            color: #fff;
            background-color: #44ff44;
        }

        /* Database Search Styles */
        .database-search {
            background: #2d2d2d;
            border: 1px solid #444;
            color: #fff;
            padding: 8px 12px;
            border-radius: 4px;
            font-size: 12px;
            width: 100%;
            margin: 5px 0;
        }

        .database-search:focus {
            outline: none;
            border-color: #007bff;
        }

        .table-item {
            display: flex;
            align-items: center;
            padding: 5px 10px;
            cursor: pointer;
            border-radius: 3px;
            transition: background-color 0.2s;
        }

        .table-item:hover {
            background-color: #3a3a3a;
        }

        .table-item.hidden {
            display: none;
        }

        /* Full Screen Styles */
        .fullscreen-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: #1a1a1a;
            z-index: 9999;
            display: none;
        }

        .fullscreen-overlay.active {
            display: block;
        }

        .fullscreen-content {
            width: 100%;
            height: 100%;
            padding: 20px;
            box-sizing: border-box;
        }

        .fullscreen-close {
            position: absolute;
            top: 20px;
            right: 20px;
            background: #ff4444;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            z-index: 10000;
        }
    </style>
@endsection

@section('content')

<div class="card">
    <div class="card-header">
        <h3 class="card-title">Command Panel</h3>
    </div>

    <div class="card-body">
        <div class="terminal-container" id="terminalContainer">
            <div class="terminal-header">
                <div class="terminal-dots">
                    <span class="terminal-dot dot-red"></span>
                    <span class="terminal-dot dot-yellow"></span>
                    <span class="terminal-dot dot-green"></span>
                </div>
                <span class="terminal-title">Terminal</span>
            </div>

            <div class="terminal-body" id="terminalBody">
                <div class="command-input-group">
                    <span class="prompt-symbol">$</span>
                    <input type="text" id="commandInput"
                        placeholder="Enter command (e.g., php artisan migrate)"
                        autocomplete="off"
                        spellcheck="false">
                    <button id="executeBtn">Execute</button>
                </div>

                <pre id="outputArea"></pre>

                <div class="command-hint">
                    <span class="output-info">ℹ</span> Common commands:
                    <code>php artisan migrate</code>,
                    <code>php artisan cache:clear</code>,
                    <code>php artisan route:list</code>
                </div>
            </div>
        </div>

        <!-- SQL Mode UI -->
        <div class="terminal-container" id="sqlModeContainer" style="display:none;">
            <div class="terminal-header">
                <div class="terminal-dots">
                    <span class="terminal-dot dot-red"></span>
                    <span class="terminal-dot dot-yellow"></span>
                    <span class="terminal-dot dot-green"></span>
                </div>
                <span class="terminal-title">SQL Mode</span>
                <div style="margin-left:auto;display:flex;gap:8px;align-items:center;">
                    <button id="fullscreenBtn" class="panel-toggle-btn mr-1" title="Full Screen Mode" style="width: 50px;">
                        <i class="fas fa-expand"></i>
                    </button>
                    <button id="toggleLeftPanel" class="panel-toggle-btn mr-1" data-panel="left" style="background:#444;color:#ccc;border:none;padding:6px;border-radius:4px;cursor:pointer;font-size:16px;width:45px;height:47px;" title="Toggle Database Panel"><i class="fas fa-database"></i></button>
                    <button id="toggleTopPanel" class="panel-toggle-btn mr-1" data-panel="top" style="background:#444;color:#ccc;border:none;padding:6px;border-radius:4px;cursor:pointer;font-size:16px;width:45px;height:47px;" title="Toggle SQL Input Panel"><i class="fas fa-edit"></i></button>
                    <button id="toggleBottomPanel" class="panel-toggle-btn mr-1" data-panel="bottom" style="background:#444;color:#ccc;border:none;padding:6px;border-radius:4px;cursor:pointer;font-size:16px;width:45px;height:47px;" title="Toggle Results Panel"><i class="fas fa-table"></i></button>
                </div>
            </div>
            <div class="terminal-body" style="padding:0;">
                <div id="sqlModeLayout" style="display:flex;height:500px;position:relative;">
                    <!-- Left Panel: Database Browser -->
                    <div id="databasePanel" style="width:300px;min-width:200px;max-width:500px;border-right:1px solid #444;background:#1a1a1a;overflow-y:auto;position:relative;">
                        <div style="padding:15px;border-bottom:1px solid #444;">
                            <h4 style="color:#fff;margin:0 0 10px 0;font-size:14px;">Databases</h4>
                            <div id="databaseList" style="color:#ccc;font-size:13px;">Loading databases...</div>
                        </div>
                        <!-- Resize handle for width -->
                        <div id="widthResizeHandle" style="position:absolute;right:-3px;top:0;bottom:0;width:6px;cursor:col-resize;background:transparent;z-index:10;"></div>
                    </div>

                    <!-- Right Panel: SQL Input and Results -->
                    <div id="sqlPanel" style="flex:1;display:flex;flex-direction:column;min-width:400px;">
                        <!-- Top Section: SQL Input -->
                        <div id="sqlInputSection" style="padding:15px;border-bottom:1px solid #444;background:#1e1e1e;position:relative;height:300px;flex-shrink:0;flex-grow:0;display:flex;flex-direction:column;min-height:120px;">
                            <div style="flex:1;display:flex;flex-direction:column;min-height:60px;">
                                <label for="sqlInput" style="color:#fff;font-weight:500;margin-bottom:8px;flex-shrink:0;">SQL Command</label>
                                <textarea id="sqlInput" style="flex:1;background:#2d2d2d;color:#fff;font-family:'Fira Code',monospace;font-size:14px;border-radius:6px;padding:10px;border:none;resize:none;min-height:60px;height:100%;" placeholder="Write your SELECT query here..."></textarea>
                                <div id="validationMessage" class="validation-message" style="display: none;"></div>
                            </div>
                            <div class="flex items-center gap-3" style="margin-top:10px;flex-shrink:0;">
                                <button id="runSqlBtn" style="background:#27c93f;color:#000;padding:6px 16px;border-radius:4px;font-weight:500;border:none;">Run SQL</button>
                                <button id="exitSqlBtn" style="background:#ff5f56;color:#fff;padding:6px 16px;border-radius:4px;font-weight:500;border:none;">Exit SQL Mode</button>
                            </div>
                            <!-- Resize handle for height -->
                            <div id="heightResizeHandle" style="position:absolute;bottom:-3px;left:0;right:0;height:6px;cursor:row-resize;background:transparent;z-index:10;"></div>
                        </div>

                        <!-- Bottom Section: SQL Results -->
                        <div id="sqlOutputSection" style="padding:15px;overflow:hidden;height:200px;min-height:260px;flex-shrink:0;flex-grow:0;">
                            <div id="sqlOutputArea" style="background:#2d2d2d;border-radius:6px;color:#fff;font-family:'Fira Code',monospace;font-size:14px;line-height:1.6;padding:15px;height:100%;overflow:auto;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </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 -->
<div id="fullscreenOverlay" class="fullscreen-overlay">
    <button id="fullscreenCloseBtn" class="fullscreen-close" style="display:none;">
        <i class="fas fa-times"></i> Exit Full Screen
    </button>
    <div class="fullscreen-content" id="fullscreenContent">
        <!-- Content will be moved here dynamically -->
    </div>
</div>

@endsection

@section('scripts')
@parent

<!-- SQL Parser Library -->
<script src="{{ asset('assets/js/sql-parser/0.5.0/sql-parser.min.js') }}"></script>

<script>
    // Global function for table actions
    function handleTableAction(action, database, table) {
        window.reopenRightPanels && window.reopenRightPanels();

        if (action === 'data') {
            const sqlInput = document.getElementById('sqlInput');
            const sqlOutputArea = document.getElementById('sqlOutputArea');
            if (sqlInput) {
                sqlInput.value = `SELECT * FROM \`${database}\`.\`${table}\` LIMIT 100`;

                // Show loading message for data action
                if (sqlOutputArea) {
                    sqlOutputArea.innerHTML = '<div style="padding: 20px; text-align: center; color: #007bff; font-style: italic;">Loading data...</div>';
                    window.updateBottomPanelVisibility && window.updateBottomPanelVisibility();
                }

                document.getElementById('runSqlBtn').click();
            }
        } else if (action === 'structure') {
            // Show loading message
            const sqlOutputArea = document.getElementById('sqlOutputArea');
            if (sqlOutputArea) {
                sqlOutputArea.innerHTML = '<div style="padding: 20px; text-align: center; color: #007bff; font-style: italic;">Loading table structure...</div>';
                window.updateBottomPanelVisibility && window.updateBottomPanelVisibility();
            }

            // Find and disable the structure button that was clicked
            const clickedButton = event.target;
            let originalText = '';
            let originalStyle = '';

            if (clickedButton && clickedButton.tagName === 'BUTTON') {
                originalText = clickedButton.innerHTML;
                originalStyle = clickedButton.style.cssText;

                // Change button appearance to show loading
                clickedButton.innerHTML = '⏳';
                clickedButton.style.opacity = '0.6';
                clickedButton.disabled = true;
                clickedButton.title = 'Loading...';
            }

            fetch('{{ route("admin.dev-tool.sql-mode.table-structure") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({ database: database, table: table })
            })
            .then(response => response.json())
            .then(data => {
                // Restore button appearance
                if (clickedButton && originalText) {
                    clickedButton.innerHTML = originalText;
                    clickedButton.style.cssText = originalStyle;
                    clickedButton.disabled = false;
                    clickedButton.title = 'View Structure';
                }

                if (data.success) {
                    window.sqlTableData = data;
                    window.renderSqlTable && window.renderSqlTable();
                    window.updateBottomPanelVisibility && window.updateBottomPanelVisibility();
                } else {
                    const sqlOutputArea = document.getElementById('sqlOutputArea');
                    if (sqlOutputArea) {
                        sqlOutputArea.innerHTML = `<span class="output-error">Error: ${data.error}</span>`;
                        window.updateBottomPanelVisibility && window.updateBottomPanelVisibility();
                    }
                }
            })
            .catch(error => {
                // Restore button appearance
                if (clickedButton && originalText) {
                    clickedButton.innerHTML = originalText;
                    clickedButton.style.cssText = originalStyle;
                    clickedButton.disabled = false;
                    clickedButton.title = 'View Structure';
                }

                const sqlOutputArea = document.getElementById('sqlOutputArea');
                if (sqlOutputArea) {
                    sqlOutputArea.innerHTML = `<span class="output-error">Error: ${error.message}</span>`;
                    window.updateBottomPanelVisibility && window.updateBottomPanelVisibility();
                }
            });
        }
    }

    // Global function for table sorting
    function sortTable(column) {
        if (!window.sqlSort) window.sqlSort = { col: null, dir: 1 };

        if (window.sqlSort.col === column) {
            window.sqlSort.dir = -window.sqlSort.dir;
        } else {
            window.sqlSort.col = column;
            window.sqlSort.dir = 1;
        }

        window.renderSqlTable && window.renderSqlTable();
    }

    // Global function for rendering SQL table
    function renderSqlTable() {
        if (!window.sqlTableData || !window.sqlTableData.columns) return;

        const { columns, rows } = window.sqlTableData;
        const filteredRows = rows.filter(row => {
            if (!window.sqlSearch) return true;
            return Object.values(row).some(value =>
                String(value).toLowerCase().includes(window.sqlSearch.toLowerCase())
            );
        });

        const sortedRows = [...filteredRows].sort((a, b) => {
            if (!window.sqlSort || !window.sqlSort.col) return 0;
            const aVal = a[window.sqlSort.col];
            const bVal = b[window.sqlSort.col];
            const direction = window.sqlSort.dir || 1;
            return direction * (aVal > bVal ? 1 : -1);
        });

        const limitedRows = sortedRows.slice(0, window.sqlLimit || 25);

        let tableHTML = `
            <div style="margin-bottom: 15px; display: flex; gap: 10px; align-items: center;">
                <input type="text" id="sqlTableSearch" placeholder="Search..." style="flex: 1; padding: 8px; border: 1px solid #444; border-radius: 4px; background: #2d2d2d; color: #fff;">
                <select id="sqlTableLimit" style="padding: 8px; border: 1px solid #444; border-radius: 4px; background: #2d2d2d; color: #fff;">
                    <option value="25">25 rows</option>
                    <option value="50">50 rows</option>
                    <option value="100">100 rows</option>
                    <option value="250">250 rows</option>
                </select>
            </div>
            <div style="overflow-x: auto;">
                <table style="width: 100%; border-collapse: collapse; background: #2d2d2d; color: #fff;">
                    <thead>
                        <tr style="background: #1a1a1a;">
            `;

        columns.forEach((col, index) => {
            const isSorted = window.sqlSort && window.sqlSort.col === col;
            const sortIcon = isSorted ? (window.sqlSort.dir === 1 ? ' ▲' : ' ▼') : '';
            tableHTML += `
                <th style="padding: 12px 8px; text-align: left; border: 1px solid #444; cursor: pointer; user-select: none;"
                     onclick="sortTable('${col}')">
                    ${col}${sortIcon}
                </th>
            `;
        });

        tableHTML += '</tr></thead><tbody>';

        if (limitedRows.length === 0) {
            // Show "No data available" row
            tableHTML += `
                <tr>
                    <td colspan="${columns.length}" style="padding: 20px; text-align: center; color: #888; font-style: italic; border: 1px solid #444;">
                        No data available
                    </td>
                </tr>
            `;
        } else {
            limitedRows.forEach(row => {
                tableHTML += '<tr>';
                columns.forEach(col => {
                    const value = row[col] !== null ? row[col] : '<span style="color: #666; font-style: italic;">null</span>';
                    tableHTML += `<td style="padding: 8px; border: 1px solid #444;">${value}</td>`;
                });
                tableHTML += '</tr>';
            });
        }

        tableHTML += '</tbody></table></div>';

        const sqlOutputArea = document.getElementById('sqlOutputArea');
        if (sqlOutputArea) {
            sqlOutputArea.innerHTML = tableHTML;
        }

        // Restore search focus and cursor position
        const searchInput = document.getElementById('sqlTableSearch');
        if (searchInput) {
            searchInput.value = window.sqlSearch || '';
            searchInput.focus();
            if (window.sqlSearchCursor) {
                searchInput.setSelectionRange(window.sqlSearchCursor, window.sqlSearchCursor);
            }
        }

        // Set limit dropdown value
        const limitSelect = document.getElementById('sqlTableLimit');
        if (limitSelect) {
            limitSelect.value = window.sqlLimit || 25;
        }

        // Add event listeners
        if (searchInput) {
            searchInput.addEventListener('input', function() {
                window.sqlSearch = this.value;
                window.sqlSearchCursor = this.selectionStart;
                renderSqlTable();
            });
        }

        if (limitSelect) {
            limitSelect.addEventListener('change', function() {
                window.sqlLimit = parseInt(this.value);
                renderSqlTable();
            });
        }

        // Update bottom panel visibility
        window.updateBottomPanelVisibility && window.updateBottomPanelVisibility();
    }

    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 = '';

        // SQL Mode elements
        const terminalContainer = document.getElementById('terminalContainer');
        const sqlModeContainer = document.getElementById('sqlModeContainer');
        const sqlInput = document.getElementById('sqlInput');
        const runSqlBtn = document.getElementById('runSqlBtn');
        const exitSqlBtn = document.getElementById('exitSqlBtn');
        const sqlOutputArea = document.getElementById('sqlOutputArea');
        let isSqlMode = false;

        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 = '';
                sqlOutputArea.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();
            });
        }

        // SQL Mode logic
        if (runSqlBtn && sqlInput && sqlOutputArea) {
            // Table state for sorting, filtering, limiting
            let sqlTableData = { columns: [], rows: [] };
            let sqlSort = { col: null, dir: 1 };
            let sqlSearch = '';
            let sqlLimit = 25;

            // Database browser functions
            function loadDatabases() {
                fetch('{{ route("admin.dev-tool.sql-mode.databases") }}', {
                    method: 'GET',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        const databaseList = document.getElementById('databaseList');
                        databaseList.innerHTML = '';
                        data.databases.forEach(db => {
                            const dbDiv = document.createElement('div');
                            dbDiv.className = 'database-item';
                            dbDiv.style.cssText = 'padding:8px;cursor:pointer;border-bottom:1px solid #333;position:relative;';
                            dbDiv.innerHTML = `
                                <div style="display:flex;align-items:center;justify-content:space-between;">
                                    <span style="color:#58a6ff;"><i class="fas fa-database text-white mr-1"></i> ${db}</span>
                                    <span class="db-toggle" style="color:#666;">▶</span>
                                </div>
                                <div class="table-list" style="display:none;margin-left:15px;margin-top:8px;"></div>
                            `;

                            const toggle = dbDiv.querySelector('.db-toggle');
                            const tableList = dbDiv.querySelector('.table-list');
                            const dbName = dbDiv.querySelector('span:first-child');

                            // Add click events to specific elements only
                            const handleDatabaseClick = function(e) {
                                if (tableList.style.display === 'none') {
                                    loadTables(db, tableList);
                                    toggle.textContent = '▼';
                                    tableList.style.display = 'block';
                                } else {
                                    toggle.textContent = '▶';
                                    tableList.style.display = 'none';
                                }
                            };

                            // Click on database name
                            dbName.addEventListener('click', handleDatabaseClick);

                            // Click on toggle icon
                            toggle.addEventListener('click', function(e) {
                                e.stopPropagation();
                                handleDatabaseClick(e);
                            });

                            databaseList.appendChild(dbDiv);
                        });
                    } else {
                        document.getElementById('databaseList').innerHTML = `<span style="color:#ff5f56;">Error: ${data.error}</span>`;
                    }
                })
                .catch(error => {
                    document.getElementById('databaseList').innerHTML = `<span style="color:#ff5f56;">Error: ${error.message}</span>`;
                });
            }

            function loadTables(database, container) {
                container.innerHTML = '<span style="color:#666;">Loading tables...</span>';
                fetch('{{ route("admin.dev-tool.sql-mode.tables") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({ database: database })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        container.innerHTML = '';
                        // Add search input
                        const searchInput = document.createElement('input');
                        searchInput.type = 'text';
                        searchInput.placeholder = 'Search tables...';
                        searchInput.className = 'database-search';
                        searchInput.id = `search-${database}`;

                        container.appendChild(searchInput);

                        // Create tables list
                        const tablesList = document.createElement('div');
                        tablesList.className = 'tables-list';

                        data.tables.forEach(table => {
                            const tableItem = document.createElement('div');
                            tableItem.className = 'table-item';
                            tableItem.style.cssText = 'display: flex; align-items: center; padding: 6px 8px; cursor: pointer; border-radius: 3px; transition: background-color 0.2s; min-height: 32px;';
                            tableItem.innerHTML = `
                                <span style="margin-right: 8px; flex-shrink: 0;">📋</span>
                                <span style="flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;">${table}</span>
                                <div class="table-actions" style="margin-left: 8px; display: none; flex-shrink: 0;">
                                    <button onclick="handleTableAction('data', '${database}', '${table}')" style="background: #007bff; color: white; border: none; padding: 4px 6px; border-radius: 3px; font-size: 12px; margin-right: 5px; cursor: pointer; flex-shrink: 0;" title="View Data">📄</button>
                                    <button onclick="handleTableAction('structure', '${database}', '${table}')" style="background: #28a745; color: white; border: none; padding: 4px 6px; border-radius: 3px; font-size: 12px; cursor: pointer; flex-shrink: 0;" title="View Structure">ℹ️</button>
                                </div>
                            `;

                            // Show actions on hover
                            tableItem.addEventListener('mouseenter', function() {
                                const actions = this.querySelector('.table-actions');
                                if (actions) actions.style.display = 'flex';
                            });

                            tableItem.addEventListener('mouseleave', function() {
                                const actions = this.querySelector('.table-actions');
                                if (actions) actions.style.display = 'none';
                            });

                            tablesList.appendChild(tableItem);
                        });

                        container.appendChild(tablesList);

                        // Add search functionality AFTER tables are created
                        searchInput.addEventListener('input', function() {
                            const searchTerm = this.value.toLowerCase();
                            const tableItems = tablesList.querySelectorAll('.table-item');

                            tableItems.forEach(item => {
                                const tableName = item.querySelector('span:nth-child(2)').textContent.toLowerCase();
                                if (tableName.includes(searchTerm)) {
                                    item.style.display = 'flex';
                                } else {
                                    item.style.display = 'none';
                                }
                            });
                        });
                    }
                })
                .catch(error => {
                    console.error('Error loading tables:', error);
                    container.innerHTML = '<span style="color: #ff4444;">Error loading tables</span>';
                });
            }

            // Resizable panels functionality
            function initializeResizablePanels() {
                const widthResizeHandle = document.getElementById('widthResizeHandle');
                const databasePanel = document.getElementById('databasePanel');
                const sqlPanel = document.getElementById('sqlPanel');
                const heightResizeHandle = document.getElementById('heightResizeHandle');
                const sqlInputSection = document.getElementById('sqlInputSection');
                const sqlOutputSection = document.getElementById('sqlOutputSection');

                if (!widthResizeHandle || !databasePanel || !sqlPanel) return;

                let isWidthResizing = false;
                let startX = 0;
                let startWidth = 0;

                widthResizeHandle.addEventListener('mousedown', function(e) {
                    isWidthResizing = true;
                    startX = e.clientX;
                    startWidth = databasePanel.offsetWidth;
                    document.body.style.cursor = 'col-resize';
                    e.preventDefault();
                });

                document.addEventListener('mousemove', function(e) {
                    if (!isWidthResizing) return;

                    const deltaX = e.clientX - startX;
                    const newWidth = Math.max(200, Math.min(500, startWidth + deltaX));

                    databasePanel.style.width = newWidth + 'px';
                    databasePanel.style.flex = 'none';
                    sqlPanel.style.flex = '1';
                });

                document.addEventListener('mouseup', function() {
                    if (isWidthResizing) {
                        isWidthResizing = false;
                        document.body.style.cursor = '';
                    }
                });

                // Height resizing for SQL panels
                if (!heightResizeHandle || !sqlInputSection || !sqlOutputSection) return;

                let isHeightResizing = false;
                let startY = 0;
                let startInputHeight = 0;
                let startOutputHeight = 0;

                heightResizeHandle.addEventListener('mousedown', function(e) {
                    isHeightResizing = true;
                    startY = e.clientY;
                    startInputHeight = sqlInputSection.offsetHeight;
                    startOutputHeight = sqlOutputSection.offsetHeight;
                    document.body.style.cursor = 'row-resize';
                    e.preventDefault();
                });

                document.addEventListener('mousemove', function(e) {
                    if (!isHeightResizing) return;

                    const deltaY = e.clientY - startY;
                    const totalHeight = startInputHeight + startOutputHeight;
                    const newInputHeight = Math.max(totalHeight * 0.4, Math.min(totalHeight * 0.6, startInputHeight + deltaY));
                    const newOutputHeight = totalHeight - newInputHeight;

                    sqlInputSection.style.height = newInputHeight + 'px';
                    sqlOutputSection.style.height = newOutputHeight + 'px';
                });

                document.addEventListener('mouseup', function() {
                    if (isHeightResizing) {
                        isHeightResizing = false;
                        document.body.style.cursor = '';
                    }
                });
            }

            // Initialize SQL layout with proper heights
            function initializeSqlLayout() {
                const sqlPanel = document.getElementById('sqlPanel');
                const sqlInputSection = document.getElementById('sqlInputSection');
                const sqlOutputSection = document.getElementById('sqlOutputSection');

                const totalHeight = sqlPanel.offsetHeight;
                const padding = 30;
                const availableHeight = totalHeight - padding;
                const inputHeight = Math.floor(availableHeight * 0.6); // 60%
                const outputHeight = availableHeight - inputHeight; // 40%

                sqlInputSection.style.height = inputHeight + 'px';
                sqlOutputSection.style.height = outputHeight + 'px';
            }

            // Panel toggle functionality
            function initializePanelToggles() {
                const toggleLeftBtn = document.getElementById('toggleLeftPanel');
                const toggleTopBtn = document.getElementById('toggleTopPanel');
                const toggleBottomBtn = document.getElementById('toggleBottomPanel');
                const databasePanel = document.getElementById('databasePanel');
                const sqlInputSection = document.getElementById('sqlInputSection');
                const sqlOutputSection = document.getElementById('sqlOutputSection');
                const sqlOutputArea = document.getElementById('sqlOutputArea');

                if (!toggleLeftBtn || !toggleTopBtn || !toggleBottomBtn || !databasePanel || !sqlInputSection || !sqlOutputSection) return;

                // Remove existing event listeners to prevent duplicates
                toggleLeftBtn.replaceWith(toggleLeftBtn.cloneNode(true));
                toggleTopBtn.replaceWith(toggleTopBtn.cloneNode(true));
                toggleBottomBtn.replaceWith(toggleBottomBtn.cloneNode(true));

                // Get fresh references after cloning
                const freshToggleLeftBtn = document.getElementById('toggleLeftPanel');
                const freshToggleTopBtn = document.getElementById('toggleTopPanel');
                const freshToggleBottomBtn = document.getElementById('toggleBottomPanel');

                // Set initial states (all panels visible)
                freshToggleLeftBtn.classList.add('active');
                freshToggleTopBtn.classList.add('active');
                freshToggleBottomBtn.classList.add('inactive'); // Start as inactive
                freshToggleBottomBtn.classList.remove('active');
                sqlOutputSection.style.display = 'none'; // Hide bottom panel initially

                function updateIconState(btn, isActive) {
                    if (isActive) {
                        btn.classList.add('active');
                        btn.classList.remove('inactive');
                    } else {
                        btn.classList.remove('active');
                        btn.classList.add('inactive');
                    }
                }

                function updateLayout() {
                    const isLeftVisible = databasePanel.style.display !== 'none';
                    const isTopVisible = sqlInputSection.style.display !== 'none';
                    const isBottomVisible = sqlOutputSection.style.display !== 'none';
                    updateIconState(freshToggleLeftBtn, isLeftVisible);
                    updateIconState(freshToggleTopBtn, isTopVisible);
                    updateIconState(freshToggleBottomBtn, isBottomVisible);

                    databasePanel.style.width = '300px';
                    databasePanel.style.maxWidth = '500px';

                    // If one panel is off, the other takes full height
                    if (!isTopVisible && isBottomVisible) {
                        sqlOutputSection.style.height = '100%';
                        sqlOutputSection.style.flex = '1 1 auto';
                    } else if (isTopVisible && !isBottomVisible) {
                        sqlInputSection.style.height = '100%';
                        sqlInputSection.style.flex = '1 1 auto';
                        setTimeout(() => {
                            const textarea = document.getElementById('sqlInput');
                            if (textarea) {
                                textarea.style.height = '100%';
                                textarea.offsetHeight;
                            }
                        }, 10);
                    } else if (isTopVisible && isBottomVisible) {
                        sqlInputSection.style.flex = '';
                        sqlOutputSection.style.flex = '';
                        initializeSqlLayout();
                    }
                }

                freshToggleLeftBtn.addEventListener('click', function() {
                    const isVisible = databasePanel.style.display !== 'none';
                    const isTopVisible = sqlInputSection.style.display !== 'none';
                    const isBottomVisible = sqlOutputSection.style.display !== 'none';
                    // Prevent all three from being inactive
                    if (isVisible && !isTopVisible && !isBottomVisible) {
                        return;
                    }
                    if (isVisible) {
                        databasePanel.style.display = 'none';
                    } else {
                        databasePanel.style.display = 'block';
                    }
                    updateLayout();
                });

                freshToggleTopBtn.addEventListener('click', function() {
                    const isVisible = sqlInputSection.style.display !== 'none';
                    const isLeftVisible = databasePanel.style.display !== 'none';
                    const isBottomVisible = sqlOutputSection.style.display !== 'none';
                    // Prevent all three from being inactive
                    if (isVisible && !isLeftVisible && !isBottomVisible) {
                        return;
                    }
                    if (isVisible) {
                        sqlInputSection.style.display = 'none';
                        sqlInputSection.style.height = '0';
                        sqlInputSection.style.flex = '0 0 0';
                    } else {
                        sqlInputSection.style.display = 'flex';
                        sqlInputSection.style.flexDirection = 'column';
                        sqlInputSection.style.flexShrink = '0';
                        sqlInputSection.style.flexGrow = '0';
                        sqlInputSection.style.minHeight = '120px';
                        sqlInputSection.style.height = '';
                        sqlInputSection.style.flex = '';
                        const inputFlex = sqlInputSection.querySelector('textarea');
                        if (inputFlex) {
                            inputFlex.style.flex = '1';
                            inputFlex.style.height = '100%';
                        }
                    }
                    updateLayout();
                    initializeSqlLayout();
                });

                freshToggleBottomBtn.addEventListener('click', function() {
                    const isVisible = sqlOutputSection.style.display !== 'none';
                    const isLeftVisible = databasePanel.style.display !== 'none';
                    const isTopVisible = sqlInputSection.style.display !== 'none';
                    // Prevent all three from being inactive
                    if (isVisible && !isLeftVisible && !isTopVisible) {
                        return;
                    }
                    if (isVisible) {
                        sqlOutputSection.style.display = 'none';
                        sqlOutputSection.style.height = '0';
                        sqlOutputSection.style.flex = '0 0 0';
                    } else {
                        // Only show if there is output
                        if (sqlOutputArea.innerHTML.trim() !== '') {
                            sqlOutputSection.style.display = 'block';
                            sqlOutputSection.style.height = '';
                            sqlOutputSection.style.flex = '';
                        }
                    }
                    updateLayout();
                    initializeSqlLayout();
                });

                // Function to show/hide bottom panel based on output
                window.updateBottomPanelVisibility = function() {
                    if (sqlOutputArea.innerHTML.trim() === '') {
                        sqlOutputSection.style.display = 'none';
                        freshToggleBottomBtn.classList.remove('active');
                        freshToggleBottomBtn.classList.add('inactive');
                    } else {
                        sqlOutputSection.style.display = 'block';
                        freshToggleBottomBtn.classList.add('active');
                        freshToggleBottomBtn.classList.remove('inactive');
                    }
                    updateLayout();
                };

                // Function to reopen right panels if they're closed
                window.reopenRightPanels = function() {
                    if (sqlInputSection.style.display === 'none') {
                        sqlInputSection.style.display = 'flex';
                        sqlInputSection.style.flexDirection = 'column';
                        sqlInputSection.style.flexShrink = '0';
                        sqlInputSection.style.flexGrow = '0';
                        sqlInputSection.style.minHeight = '120px';
                        sqlInputSection.style.height = '';
                        sqlInputSection.style.flex = '';
                        const inputFlex = sqlInputSection.querySelector('textarea');
                        if (inputFlex) {
                            inputFlex.style.flex = '1';
                            inputFlex.style.height = '100%';
                        }
                    }
                    if (sqlOutputSection.style.display === 'none') {
                        sqlOutputSection.style.display = 'block';
                        sqlOutputSection.style.height = '';
                        sqlOutputSection.style.flex = '';
                    }
                    updateLayout();
                    initializeSqlLayout();
                };

                // Hide bottom panel if no output on load
                window.updateBottomPanelVisibility();
            }

            runSqlBtn.addEventListener('click', function() {
                const query = sqlInput.value.trim();
                if (!query) {
                    toastr.error('Please enter a SQL query');
                    return;
                }

                // Validate SQL before execution
                const validation = validateSqlSyntax(query);
                if (!validation.isValid) {
                    alert(`SQL Validation Error: ${validation.message}`);
                    return;
                }

                // Show loading message in output area
                sqlOutputArea.innerHTML = '<div style="padding: 20px; text-align: center; color: #007bff; font-style: italic;">Loading data...</div>';
                window.updateBottomPanelVisibility && window.updateBottomPanelVisibility();

                // Show loading state
                runSqlBtn.disabled = true;
                runSqlBtn.textContent = 'Executing...';

                fetch('{{ route("admin.dev-tool.sql-mode.execute-sql") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({ query: query })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        window.sqlTableData = { columns: data.columns, rows: data.rows };
                        window.sqlSort = { col: null, dir: 1 };
                        window.sqlSearch = '';
                        window.sqlLimit = 25;
                        renderSqlTable();
                    } else {
                        sqlOutputArea.innerHTML = `<span class=\"output-error\">${data.error}</span>`;
                    }
                })
                .catch(error => {
                    sqlOutputArea.innerHTML = `<span class=\"output-error\">Error: ${error.message}</span>`;
                })
                .finally(() => {
                    runSqlBtn.disabled = false;
                    runSqlBtn.textContent = 'Run SQL';
                    // After output is set, update bottom panel visibility
                    window.updateBottomPanelVisibility && window.updateBottomPanelVisibility();
                });
            });
        }
        if (exitSqlBtn) {
            exitSqlBtn.addEventListener('click', function() {
                isSqlMode = false;
                sqlModeContainer.style.display = 'none';
                terminalContainer.style.display = '';
                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();

        // Initialize fullscreen functionality
        initializeFullscreen();

        // SQL validation variables
        let sqlValidationTimeout;
        let currentSqlQuery = '';

        // SQL validation function
        function validateSqlSyntax(sql) {
            if (!sql || sql.trim() === '') {
                return { isValid: true, message: '' };
            }

            const trimmed = sql.trim().toLowerCase();

            // Check if it starts with SELECT (with or without space)
            if (!trimmed.startsWith('select')) {
                return {
                    isValid: false,
                    message: '❌ Only SELECT queries are allowed'
                };
            }

            // Check for forbidden keywords (but allow them if they're part of a SELECT query)
            const forbiddenKeywords = [
                'insert', 'update', 'delete', 'drop', 'alter', 'truncate',
                'create', 'replace', 'grant', 'revoke', 'exec', 'execute',
                'call', 'set', 'use', 'show', 'describe', 'desc'
            ];

            for (const keyword of forbiddenKeywords) {
                // Only block if it's not part of a SELECT query
                if (trimmed.includes(keyword) && !trimmed.startsWith('select')) {
                    return {
                        isValid: false,
                        message: `❌ Forbidden keyword: ${keyword.toUpperCase()}`
                    };
                }
            }

            // Check for dangerous patterns
            const dangerousPatterns = ['--', '/*', '*/', ';'];
            for (const pattern of dangerousPatterns) {
                if (trimmed.includes(pattern)) {
                    return {
                        isValid: false,
                        message: `❌ Dangerous pattern: ${pattern}`
                    };
                }
            }

            // Basic structure validation - only check FROM if query is longer than just "select"
            if (trimmed.length > 6) {
                const hasFrom = trimmed.includes('from');
                if (!hasFrom) {
                    return {
                        isValid: false,
                        message: '❌ Missing FROM clause'
                    };
                }
            }

            return { isValid: true, message: '' };
        }

        // Update SQL input validation
        function updateSqlValidation() {
            const sqlInput = document.getElementById('sqlInput');
            const validationMessage = document.getElementById('validationMessage');

            if (!sqlInput || !validationMessage) return;

            const sql = sqlInput.value;
            const validation = validateSqlSyntax(sql);

            // Remove existing validation classes
            sqlInput.classList.remove('sql-input-error', 'sql-input-valid');
            validationMessage.className = 'validation-message';

            if (sql.trim() === '') {
                validationMessage.style.display = 'none';
                return;
            }

            if (validation.isValid) {
                sqlInput.classList.add('sql-input-valid');
                // validationMessage.classList.add('validation-success');
            } else {
                sqlInput.classList.add('sql-input-error');
                validationMessage.classList.add('validation-error');
            }

            validationMessage.textContent = validation.message;
            validationMessage.style.display = 'block';
        }

        // Debounced validation
        function debouncedSqlValidation() {
            clearTimeout(sqlValidationTimeout);
            sqlValidationTimeout = setTimeout(updateSqlValidation, 300);
        }

        sqlInput.addEventListener('input', debouncedSqlValidation);

        // Full Screen functionality
        function initializeFullscreen() {
            const fullscreenBtn = document.getElementById('fullscreenBtn');
            const fullscreenOverlay = document.getElementById('fullscreenOverlay');
            const fullscreenContent = document.getElementById('fullscreenContent');
            const fullscreenCloseBtn = document.getElementById('fullscreenCloseBtn');
            const terminalContainer = document.getElementById('terminalContainer');
            const sqlModeContainer = document.getElementById('sqlModeContainer');

            if (!fullscreenBtn || !fullscreenOverlay || !fullscreenContent || !fullscreenCloseBtn) return;

            let originalContainer = null;
            let originalParent = null;
            let originalNextSibling = null;
            let isFullscreen = false;

            fullscreenBtn.addEventListener('click', function() {
                if (isFullscreen) {
                    exitFullscreen();
                } else {
                    enterFullscreen();
                }
            });

            fullscreenCloseBtn.addEventListener('click', function() {
                exitFullscreen();
            });

            // Also allow ESC key to exit fullscreen
            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape' && isFullscreen) {
                    exitFullscreen();
                }
            });

            function enterFullscreen() {
                // Determine which container is currently active
                const activeContainer = terminalContainer.style.display !== 'none' ? terminalContainer : sqlModeContainer;

                if (activeContainer) {
                    // Store original position
                    originalContainer = activeContainer;
                    originalParent = activeContainer.parentNode;
                    originalNextSibling = activeContainer.nextSibling;

                    // Move container to fullscreen
                    fullscreenContent.appendChild(activeContainer);
                    fullscreenOverlay.classList.add('active');

                    // Update button icon
                    fullscreenBtn.innerHTML = '<i class="fas fa-compress"></i>';
                    fullscreenBtn.title = 'Exit Full Screen';

                    isFullscreen = true;

                    // Reinitialize functionality for the moved container
                    setTimeout(() => {
                        if (activeContainer === sqlModeContainer) {
                            initializeResizablePanels();
                            initializeSqlLayout();
                            initializePanelToggles();
                        }
                    }, 100);
                }
            }

            function exitFullscreen() {
                if (originalContainer && originalParent) {
                    // Restore container to original position
                    if (originalNextSibling) {
                        originalParent.insertBefore(originalContainer, originalNextSibling);
                    } else {
                        originalParent.appendChild(originalContainer);
                    }

                    fullscreenOverlay.classList.remove('active');

                    // Reset button
                    fullscreenBtn.innerHTML = '<i class="fas fa-expand"></i>';
                    fullscreenBtn.title = 'Full Screen Mode';

                    isFullscreen = false;

                    // Reinitialize functionality after restoration
                    setTimeout(() => {
                        if (originalContainer === sqlModeContainer) {
                            initializeResizablePanels();
                            initializeSqlLayout();
                            initializePanelToggles();
                        }
                    }, 100);

                    // Clear references
                    originalContainer = null;
                    originalParent = null;
                    originalNextSibling = null;
                }
            }
        }
    });
</script>
@endsection