@extends('layout.app')

@section('title')
    SQLite Explorer
@endsection

@section('style')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/theme/dracula.min.css">
    <style>
        /* ── DESIGN SYSTEM ── */
        :root {
            --explorer-bg:       #0f1117;
            --panel-bg:          #161b27;
            --panel-border:      #252d3d;
            --accent:            #4f8ef7;
            --accent-glow:       rgba(79,142,247,.18);
            --accent2:           #38d9a9;
            --danger:            #ff6b6b;
            --warning:           #ffd43b;
            --text-primary:      #e8eaf2;
            --text-muted:        #6b7799;
            --text-dim:          #3d4a66;
            --table-head:        #1a2236;
            --table-row-odd:     #161b27;
            --table-row-even:    #1a2033;
            --table-row-hover:   #1f2b44;
            --badge-table:       rgba(79,142,247,.15);
            --badge-view:        rgba(56,217,169,.12);
            --radius:            10px;
            --radius-sm:         6px;
            --font-mono:         'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
            --font-ui:           'DM Sans', 'Segoe UI', sans-serif;
        }

        /* ── LAYOUT WRAPPER ── */
        #sqlite-explorer-root {
            font-family: var(--font-ui);
            color: var(--text-primary);
            min-height: 100vh;
        }

        /* ── UPLOAD ZONE ── */
        #upload-zone {
            border: 2px dashed var(--panel-border);
            border-radius: var(--radius);
            background: var(--panel-bg);
            padding: 36px 24px;
            text-align: center;
            cursor: pointer;
            transition: border-color .25s, background .25s, box-shadow .25s;
            position: relative;
        }
        #upload-zone:hover,
        #upload-zone.drag-over {
            border-color: var(--accent);
            background: #1a2236;
            box-shadow: 0 0 0 4px var(--accent-glow);
        }
        #upload-zone .upload-icon {
            font-size: 2.8rem;
            margin-bottom: 12px;
            display: block;
            opacity: .7;
        }
        #upload-zone h6 {
            color: var(--text-primary);
            font-weight: 600;
            margin-bottom: 4px;
        }
        #upload-zone p {
            color: var(--text-muted);
            font-size: .82rem;
            margin: 0;
        }
        #upload-zone input[type=file] {
            position: absolute; inset: 0;
            opacity: 0; cursor: pointer;
        }

        /* DB Info bar (shown after upload) */
        #db-info-bar {
            background: linear-gradient(135deg, #1a2236 0%, #131928 100%);
            border: 1px solid var(--panel-border);
            border-left: 3px solid var(--accent2);
            border-radius: var(--radius-sm);
            padding: 10px 16px;
            display: flex;
            align-items: center;
            gap: 20px;
            flex-wrap: wrap;
        }
        #db-info-bar .info-chip {
            display: flex; align-items: center; gap: 6px;
            font-size: .78rem; color: var(--text-muted);
        }
        #db-info-bar .info-chip strong { color: var(--text-primary); font-size: .82rem; }
        #db-info-bar .db-name { font-weight: 700; color: var(--accent2); font-family: var(--font-mono); font-size: .85rem; }

        /* Progress bar */
        #upload-progress { height: 3px; border-radius: 99px; overflow: hidden; background: var(--panel-border); }
        #upload-progress-bar { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .3s ease; }

        /* ── TWO COLUMN LAYOUT ── */
        #explorer-layout { display: grid; grid-template-columns: 260px 1fr; gap: 16px; align-items: start; }
        @media (max-width: 900px) { #explorer-layout { grid-template-columns: 1fr; } }

        /* ── TABLE SIDEBAR ── */
        #table-sidebar {
            background: var(--panel-bg);
            border: 1px solid var(--panel-border);
            border-radius: var(--radius);
            overflow: hidden;
        }
        #table-sidebar .sidebar-header {
            padding: 12px 14px;
            border-bottom: 1px solid var(--panel-border);
            display: flex; align-items: center; justify-content: space-between;
        }
        #table-sidebar .sidebar-header h6 {
            margin: 0; font-size: .78rem; font-weight: 700;
            text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted);
        }
        #table-count-badge {
            background: var(--badge-table);
            color: var(--accent);
            font-size: .7rem; font-weight: 700;
            padding: 2px 8px; border-radius: 99px;
        }
        #table-list { list-style: none; padding: 6px; margin: 0; max-height: 520px; overflow-y: auto; }
        #table-list::-webkit-scrollbar { width: 4px; }
        #table-list::-webkit-scrollbar-thumb { background: var(--panel-border); border-radius: 99px; }
        #table-list li {
            border-radius: var(--radius-sm);
            padding: 8px 10px;
            cursor: pointer;
            display: flex; align-items: center; justify-content: space-between;
            transition: background .15s;
            margin-bottom: 2px;
        }
        #table-list li:hover { background: #1e2a40; }
        #table-list li.active { background: var(--accent-glow); border: 1px solid rgba(79,142,247,.3); }
        #table-list li .tbl-name {
            font-family: var(--font-mono); font-size: .78rem;
            color: var(--text-primary); white-space: nowrap;
            overflow: hidden; text-overflow: ellipsis; max-width: 140px;
        }
        #table-list li.active .tbl-name { color: var(--accent); }
        #table-list li .tbl-meta {
            font-size: .65rem; color: var(--text-muted);
            text-align: right; flex-shrink: 0; margin-left: 6px;
        }
        #table-list li .tbl-type-badge {
            font-size: .6rem; padding: 1px 6px; border-radius: 99px;
            font-weight: 700; letter-spacing: .05em; display: block; margin-bottom: 2px;
        }
        .badge-table-type { background: var(--badge-table); color: var(--accent); }
        .badge-view-type  { background: var(--badge-view);  color: var(--accent2); }

        /* sidebar search */
        #table-search {
            width: 100%; background: #1a2236; border: 1px solid var(--panel-border);
            border-radius: var(--radius-sm); color: var(--text-primary);
            font-size: .78rem; padding: 6px 10px; outline: none;
            font-family: var(--font-ui);
        }
        #table-search:focus { border-color: var(--accent); }
        #table-search::placeholder { color: var(--text-dim); }

        /* loading state */
        #sidebar-loader {
            padding: 32px; text-align: center; color: var(--text-muted); font-size: .8rem;
        }

        /* ── RIGHT PANEL ── */
        #right-panel { display: flex; flex-direction: column; gap: 14px; }

        /* ── SQL EDITOR CARD ── */
        #sql-editor-card {
            background: var(--panel-bg);
            border: 1px solid var(--panel-border);
            border-radius: var(--radius);
            overflow: hidden;
        }
        #sql-editor-card .editor-header {
            padding: 10px 14px;
            border-bottom: 1px solid var(--panel-border);
            display: flex; align-items: center; justify-content: space-between; gap: 10px;
        }
        #sql-editor-card .editor-header h6 {
            margin: 0; font-size: .78rem; font-weight: 700;
            text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted);
            display: flex; align-items: center; gap: 8px;
        }
        #sql-editor-card .editor-header h6 span.dot {
            width: 7px; height: 7px; border-radius: 50%;
            background: var(--accent); display: inline-block;
            box-shadow: 0 0 6px var(--accent);
        }
        #sql-editor-body { padding: 0; }

        /* CodeMirror overrides */
        .CodeMirror {
            height: 160px !important;
            font-family: var(--font-mono) !important;
            font-size: 13px !important;
            background: #12161f !important;
            border: none !important;
        }
        .CodeMirror-scroll { padding: 6px 0; }

        /* Editor footer */
        #editor-footer {
            padding: 8px 14px;
            border-top: 1px solid var(--panel-border);
            display: flex; align-items: center; justify-content: space-between;
            flex-wrap: wrap; gap: 8px;
        }
        #editor-footer .shortcuts { font-size: .7rem; color: var(--text-dim); }
        #editor-footer .shortcuts kbd {
            background: #1e2a40; border: 1px solid var(--panel-border);
            border-radius: 3px; padding: 1px 5px; font-size: .68rem;
            font-family: var(--font-mono); color: var(--text-muted);
        }

        /* Quick SQL buttons */
        .quick-sql-btn {
            background: #1e2a40; border: 1px solid var(--panel-border);
            color: var(--text-muted); font-size: .72rem; font-family: var(--font-mono);
            padding: 3px 10px; border-radius: var(--radius-sm); cursor: pointer;
            transition: all .15s; white-space: nowrap;
        }
        .quick-sql-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-glow); }

        /* Buttons */
        .btn-run {
            background: linear-gradient(135deg, #3a7bd5, var(--accent));
            border: none; color: #fff; font-weight: 700;
            padding: 7px 22px; border-radius: var(--radius-sm); font-size: .82rem;
            cursor: pointer; transition: opacity .2s, transform .15s;
            display: inline-flex; align-items: center; gap: 7px;
            font-family: var(--font-ui);
        }
        .btn-run:hover { opacity: .88; transform: translateY(-1px); }
        .btn-run:active { transform: translateY(0); }
        .btn-run:disabled { opacity: .45; cursor: not-allowed; transform: none; }

        .btn-clear-sql {
            background: transparent; border: 1px solid var(--panel-border);
            color: var(--text-muted); font-size: .78rem; font-family: var(--font-ui);
            padding: 6px 14px; border-radius: var(--radius-sm); cursor: pointer;
            transition: all .2s;
        }
        .btn-clear-sql:hover { border-color: var(--danger); color: var(--danger); }

        .btn-eject {
            background: transparent; border: 1px solid rgba(255,107,107,.3);
            color: var(--danger); font-size: .75rem; font-family: var(--font-ui);
            padding: 4px 12px; border-radius: var(--radius-sm); cursor: pointer;
            transition: all .2s;
        }
        .btn-eject:hover { background: rgba(255,107,107,.1); border-color: var(--danger); }

        /* ── RESULTS CARD ── */
        #results-card {
            background: var(--panel-bg);
            border: 1px solid var(--panel-border);
            border-radius: var(--radius);
            overflow: hidden;
        }
        #results-card .results-header {
            padding: 10px 14px;
            border-bottom: 1px solid var(--panel-border);
            display: flex; align-items: center; justify-content: space-between; gap: 10px;
        }
        #results-card .results-header h6 {
            margin: 0; font-size: .78rem; font-weight: 700;
            text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted);
        }
        #result-meta { font-size: .72rem; color: var(--text-muted); display: flex; align-items: center; gap: 12px; }
        #result-meta .meta-chip {
            background: #1e2a40; border: 1px solid var(--panel-border);
            padding: 2px 10px; border-radius: 99px; font-family: var(--font-mono);
        }
        #result-meta .meta-chip.success { color: var(--accent2); border-color: rgba(56,217,169,.25); background: rgba(56,217,169,.08); }
        #result-meta .meta-chip.error   { color: var(--danger);  border-color: rgba(255,107,107,.25); background: rgba(255,107,107,.08); }

        /* Results table */
        #results-table-wrap { max-height: 420px; overflow: auto; }
        #results-table-wrap::-webkit-scrollbar { width: 5px; height: 5px; }
        #results-table-wrap::-webkit-scrollbar-thumb { background: var(--panel-border); border-radius: 99px; }
        #results-table-wrap::-webkit-scrollbar-corner { background: transparent; }

        #results-table {
            width: 100%; border-collapse: collapse;
            font-size: .78rem; font-family: var(--font-mono);
        }
        #results-table thead th {
            background: var(--table-head);
            color: var(--accent);
            padding: 8px 12px;
            text-align: left;
            border-bottom: 1px solid var(--panel-border);
            position: sticky; top: 0; z-index: 5;
            white-space: nowrap;
            font-weight: 700; font-size: .72rem; letter-spacing: .04em;
        }
        #results-table tbody tr:nth-child(odd)  { background: var(--table-row-odd); }
        #results-table tbody tr:nth-child(even) { background: var(--table-row-even); }
        #results-table tbody tr:hover           { background: var(--table-row-hover); }
        #results-table tbody td {
            padding: 6px 12px;
            border-bottom: 1px solid rgba(255,255,255,.03);
            color: var(--text-primary);
            max-width: 320px;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        #results-table tbody td.null-val { color: var(--text-dim); font-style: italic; }
        #results-table tbody td.num-val  { color: #a5d6ff; }

        /* Result states */
        #results-placeholder {
            padding: 48px 24px; text-align: center; color: var(--text-muted);
        }
        #results-placeholder .ph-icon { font-size: 2.5rem; display: block; margin-bottom: 12px; opacity: .4; }
        #results-placeholder p { font-size: .82rem; margin: 0; }
        #result-error-box {
            padding: 16px 18px; background: rgba(255,107,107,.07);
            border-left: 3px solid var(--danger); margin: 12px;
            border-radius: var(--radius-sm);
            font-family: var(--font-mono); font-size: .78rem; color: var(--danger);
        }
        #result-write-box {
            padding: 16px 18px; background: rgba(56,217,169,.07);
            border-left: 3px solid var(--accent2); margin: 12px;
            border-radius: var(--radius-sm);
            font-family: var(--font-ui); font-size: .82rem; color: var(--accent2);
        }

        /* Column info panel (when clicking a table) */
        #col-info-panel {
            background: var(--panel-bg); border: 1px solid var(--panel-border);
            border-radius: var(--radius); padding: 14px;
            font-size: .78rem;
        }
        #col-info-panel .col-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
        .col-chip {
            background: #1e2a40; border: 1px solid var(--panel-border);
            color: var(--text-muted); font-family: var(--font-mono);
            font-size: .72rem; padding: 3px 10px; border-radius: var(--radius-sm);
            cursor: pointer; transition: all .15s;
        }
        .col-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-glow); }

        /* Spinner */
        .sq-spinner {
            width: 18px; height: 18px; border-radius: 50%;
            border: 2px solid var(--panel-border);
            border-top-color: var(--accent);
            animation: sq-spin .7s linear infinite; display: inline-block;
        }
        @keyframes sq-spin { to { transform: rotate(360deg); } }

        /* Disabled overlay */
        .explorer-disabled { opacity: .38; pointer-events: none; user-select: none; }

        /* Toast */
        #sq-toast {
            position: fixed; bottom: 24px; right: 24px;
            background: var(--panel-bg); border: 1px solid var(--panel-border);
            border-radius: var(--radius-sm); padding: 10px 18px;
            color: var(--text-primary); font-size: .8rem;
            box-shadow: 0 8px 32px rgba(0,0,0,.5);
            z-index: 9999; display: none; max-width: 320px;
            font-family: var(--font-ui);
        }
        #sq-toast.show { display: flex; align-items: center; gap: 10px; animation: toastIn .2s ease; }
        @keyframes toastIn { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform: translateY(0); } }

        /* Result count badge */
        .row-count-badge {
            background: var(--accent-glow); color: var(--accent);
            border: 1px solid rgba(79,142,247,.3);
            font-size: .7rem; font-weight: 700;
            padding: 2px 8px; border-radius: 99px;
            font-family: var(--font-mono);
        }
    </style>
@endsection

@section('main')

    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">

    <div id="sqlite-explorer-root">

        <!-- Breadcrumb -->
        <nav aria-label="breadcrumb" class="d-none d-md-inline-block mb-3">
            <ol class="breadcrumb breadcrumb-dark breadcrumb-transparent">
                <li class="breadcrumb-item"><a href="#"><svg class="icon icon-xxs" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg></a></li>
                <li class="breadcrumb-item"><a href="#">Tools</a></li>
                <li class="breadcrumb-item active" aria-current="page">SQLite Explorer</li>
            </ol>
        </nav>

        <!-- ══ UPLOAD SECTION ══ -->
        <div class="card mb-3" style="background:var(--panel-bg); border:1px solid var(--panel-border); border-radius:var(--radius);">
            <div class="card-body p-3">

                <!-- Upload zone (hidden once file is loaded) -->
                <div id="upload-zone-wrap">
                    <div id="upload-zone">
                        <input type="file" id="db-file-input" accept=".db,.sqlite,.sqlite3">
                        <span class="upload-icon">🗄️</span>
                        <h6>Drop your SQLite database here</h6>
                        <p>Supports <code style="color:var(--accent2);">.db</code> &nbsp;·&nbsp; <code style="color:var(--accent2);">.sqlite</code> &nbsp;·&nbsp; <code style="color:var(--accent2);">.sqlite3</code> &nbsp;·&nbsp; Max 100 MB</p>
                        <div id="upload-progress" class="mt-3" style="display:none;">
                            <div id="upload-progress-bar" style="width:0%;"></div>
                        </div>
                        <div id="upload-status" class="mt-2" style="font-size:.78rem; color:var(--text-muted);"></div>
                    </div>
                </div>

                <!-- DB info bar (shown after upload) -->
                <div id="db-info-bar" style="display:none;">
                <span class="info-chip">
                    🗄️ <span class="db-name" id="info-filename">—</span>
                </span>
                    <span class="info-chip">
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
                    <strong id="info-size">—</strong>
                </span>
                    <span class="info-chip">
                    📊 Tables: <strong id="info-tables">—</strong>
                </span>
                    <span class="info-chip">
                    🔤 Encoding: <strong id="info-encoding">—</strong>
                </span>
                    <span style="margin-left:auto;">
                    <button class="btn-eject" id="btn-eject">⏏ Eject DB</button>
                </span>
                </div>

            </div>
        </div>

        <!-- ══ EXPLORER LAYOUT (disabled until DB loaded) ══ -->
        <div id="explorer-layout" class="explorer-disabled">

            <!-- ── LEFT: TABLE SIDEBAR ── -->
            <div id="table-sidebar">
                <div class="sidebar-header">
                    <h6>Tables & Views</h6>
                    <span id="table-count-badge">0</span>
                </div>
                <div style="padding: 8px;">
                    <input type="text" id="table-search" placeholder="Search tables..." autocomplete="off">
                </div>
                <div id="sidebar-loader" style="display:none;">
                    <div class="sq-spinner" style="margin: 0 auto 8px;"></div>
                    <div>Loading tables…</div>
                </div>
                <ul id="table-list"></ul>
            </div>

            <!-- ── RIGHT: EDITOR + RESULTS ── -->
            <div id="right-panel">

                <!-- Column info strip (shown when a table is clicked) -->
                <div id="col-info-panel" style="display:none;">
                    <div style="display:flex; align-items:center; justify-content:space-between;">
                    <span style="font-size:.75rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.08em;">
                        📋 Columns — <span id="col-info-table-name" style="color:var(--accent2); font-family:var(--font-mono);"></span>
                    </span>
                        <span style="font-size:.7rem; color:var(--text-dim);">Click a column to insert into SQL</span>
                    </div>
                    <div class="col-chips" id="col-chips-list"></div>
                </div>

                <!-- SQL Editor Card -->
                <div id="sql-editor-card">
                    <div class="editor-header">
                        <h6><span class="dot"></span> SQL Query</h6>
                        <div style="display:flex; align-items:center; gap:8px; flex-wrap:wrap;">
                            <span style="font-size:.7rem; color:var(--text-muted);">Quick:</span>
                            <button class="quick-sql-btn" data-sql="SELECT * FROM {table} LIMIT 100">SELECT *</button>
                            <button class="quick-sql-btn" data-sql="SELECT COUNT(*) FROM {table}">COUNT</button>
                            <button class="quick-sql-btn" data-sql="SELECT * FROM {table} WHERE rowid = 1">By rowid</button>
                            <button class="quick-sql-btn" data-sql="PRAGMA table_info('{table}')">PRAGMA info</button>
                        </div>
                    </div>
                    <div id="sql-editor-body">
                        <textarea id="sql-input">SELECT * FROM sqlite_master LIMIT 20;</textarea>
                    </div>
                    <div id="editor-footer">
                        <div class="shortcuts">
                            <kbd>Ctrl</kbd>+<kbd>Enter</kbd> Run &nbsp;·&nbsp;
                            <kbd>Ctrl</kbd>+<kbd>L</kbd> Clear
                        </div>
                        <div style="display:flex; gap:8px; align-items:center;">
                            <button class="btn-clear-sql" id="btn-clear-sql">Clear</button>
                            <button class="btn-run" id="btn-run-sql">
                                <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>
                                Run Query
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Results Card -->
                <div id="results-card">
                    <div class="results-header">
                        <h6>Results</h6>
                        <div id="result-meta"></div>
                    </div>
                    <div id="results-body">
                        <div id="results-placeholder">
                            <span class="ph-icon">⚡</span>
                            <p>Run a query to see results here</p>
                        </div>
                        <div id="result-error-box"   style="display:none;"></div>
                        <div id="result-write-box"   style="display:none;"></div>
                        <div id="results-table-wrap" style="display:none;">
                            <table id="results-table">
                                <thead><tr id="results-thead-row"></tr></thead>
                                <tbody id="results-tbody"></tbody>
                            </table>
                        </div>
                    </div>
                </div>

            </div><!-- /right-panel -->
        </div><!-- /explorer-layout -->

    </div>

    <!-- Toast -->
    <div id="sq-toast"></div>
@endsection

@section('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/sql/sql.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/addon/edit/matchbrackets.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/addon/edit/closebrackets.min.js"></script>

    <script>
        /* =====================================================
           ROUTES (injected from Laravel)
        ===================================================== */
        const ROUTES = {
            upload:  '{{ route("sqlite.explorer.upload") }}',
            tables:  '{{ route("sqlite.explorer.tables") }}',
            execute: '{{ route("sqlite.explorer.execute") }}',
            clear:   '{{ route("sqlite.explorer.clear") }}',
        };
        const CSRF = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

        /* =====================================================
           STATE
        ===================================================== */
        let dbLoaded        = false;
        let allTables       = [];
        let activeTableName = null;

        /* =====================================================
           CODEMIRROR SETUP
        ===================================================== */
        const editor = CodeMirror.fromTextArea(document.getElementById('sql-input'), {
            mode:           'text/x-sql',
            theme:          'dracula',
            lineNumbers:    true,
            matchBrackets:  true,
            autoCloseBrackets: true,
            extraKeys: {
                'Ctrl-Enter': () => runQuery(),
                'Ctrl-L':     () => { editor.setValue(''); editor.focus(); }
            }
        });

        /* =====================================================
           DRAG & DROP on upload zone
        ===================================================== */
        const uploadZone = document.getElementById('upload-zone');
        uploadZone.addEventListener('dragover',  e => { e.preventDefault(); uploadZone.classList.add('drag-over'); });
        uploadZone.addEventListener('dragleave', ()  => uploadZone.classList.remove('drag-over'));
        uploadZone.addEventListener('drop', e => {
            e.preventDefault();
            uploadZone.classList.remove('drag-over');
            const file = e.dataTransfer.files[0];
            if (file) handleFileUpload(file);
        });
        document.getElementById('db-file-input').addEventListener('change', function() {
            if (this.files[0]) handleFileUpload(this.files[0]);
        });

        /* =====================================================
           FILE UPLOAD
        ===================================================== */
        function handleFileUpload(file) {
            const allowed = ['.db', '.sqlite', '.sqlite3'];
            const ext     = '.' + file.name.split('.').pop().toLowerCase();
            if (!allowed.includes(ext)) { sqToast('❌ Invalid file type. Use .db / .sqlite / .sqlite3', 'error'); return; }

            const formData = new FormData();
            formData.append('db_file', file);
            formData.append('_token', CSRF);

            // Show progress
            const progressWrap = document.getElementById('upload-progress');
            const progressBar  = document.getElementById('upload-progress-bar');
            const statusEl     = document.getElementById('upload-status');
            progressWrap.style.display = 'block';
            progressBar.style.width    = '5%';
            statusEl.textContent       = 'Uploading…';

            const xhr = new XMLHttpRequest();
            xhr.upload.addEventListener('progress', e => {
                if (e.lengthComputable) {
                    progressBar.style.width = Math.round((e.loaded / e.total) * 90) + '%';
                }
            });
            xhr.onload = () => {
                try {
                    const res = JSON.parse(xhr.responseText);
                    if (xhr.status === 200 && res.success) {
                        progressBar.style.width = '100%';
                        statusEl.textContent    = 'Processing…';
                        setTimeout(() => {
                            progressWrap.style.display = 'none';
                            onUploadSuccess(res);
                        }, 400);
                    } else {
                        showUploadError(res.message || 'Upload failed.');
                    }
                } catch(e) { showUploadError('Server error.'); }
            };
            xhr.onerror = () => showUploadError('Network error.');
            xhr.open('POST', ROUTES.upload);
            xhr.send(formData);
        }

        function showUploadError(msg) {
            const progressBar = document.getElementById('upload-progress-bar');
            const statusEl    = document.getElementById('upload-status');
            progressBar.style.background = '#ff6b6b';
            statusEl.style.color = '#ff6b6b';
            statusEl.textContent = '⚠ ' + msg;
            sqToast('❌ ' + msg, 'error');
        }

        function onUploadSuccess(res) {
            dbLoaded = true;
            // Show info bar, hide upload zone
            document.getElementById('upload-zone-wrap').style.display = 'none';
            const bar = document.getElementById('db-info-bar');
            bar.style.display  = 'flex';
            document.getElementById('info-filename').textContent = res.filename;
            document.getElementById('info-size').textContent     = res.size;
            // Enable explorer
            document.getElementById('explorer-layout').classList.remove('explorer-disabled');
            sqToast('✅ Database loaded: ' + res.filename);
            loadTables();
        }

        /* =====================================================
           EJECT DB
        ===================================================== */
        document.getElementById('btn-eject').addEventListener('click', () => {
            if (!confirm('Eject the current database? All temp data will be cleared.')) return;
            ajaxPost(ROUTES.clear, {}, () => {
                dbLoaded        = false;
                allTables       = [];
                activeTableName = null;
                // Reset UI
                document.getElementById('upload-zone-wrap').style.display = 'block';
                document.getElementById('db-info-bar').style.display       = 'none';
                document.getElementById('upload-progress').style.display   = 'none';
                document.getElementById('upload-status').textContent        = '';
                document.getElementById('upload-progress-bar').style.width  = '0%';
                document.getElementById('upload-progress-bar').style.background = '';
                document.getElementById('db-file-input').value              = '';
                document.getElementById('explorer-layout').classList.add('explorer-disabled');
                document.getElementById('table-list').innerHTML             = '';
                document.getElementById('table-count-badge').textContent    = '0';
                document.getElementById('col-info-panel').style.display     = 'none';
                resetResultsArea();
                sqToast('⏏ Database ejected.');
            });
        });

        /* =====================================================
           LOAD TABLES
        ===================================================== */
        function loadTables() {
            document.getElementById('sidebar-loader').style.display = 'block';
            document.getElementById('table-list').innerHTML          = '';

            ajaxGet(ROUTES.tables, res => {
                document.getElementById('sidebar-loader').style.display = 'none';
                if (!res.success) { sqToast('❌ ' + (res.message || 'Could not load tables'), 'error'); return; }

                allTables = res.tables || [];

                // DB info extras
                if (res.db_info) {
                    document.getElementById('info-tables').textContent   = allTables.length;
                    document.getElementById('info-encoding').textContent = res.db_info.encoding || '—';
                }

                document.getElementById('table-count-badge').textContent = allTables.length;
                renderTableList(allTables);
            });
        }

        function renderTableList(tables) {
            const ul = document.getElementById('table-list');
            ul.innerHTML = '';
            if (!tables.length) {
                ul.innerHTML = '<li style="color:var(--text-muted); font-size:.78rem; padding:16px; text-align:center;">No tables found</li>';
                return;
            }
            tables.forEach(t => {
                const li = document.createElement('li');
                li.dataset.name = t.name;
                li.innerHTML = `
            <span class="tbl-name" title="${t.name}">${t.name}</span>
            <span class="tbl-meta">
                <span class="tbl-type-badge ${t.type === 'view' ? 'badge-view-type' : 'badge-table-type'}">${t.type}</span>
                <span>${t.row_count >= 0 ? t.row_count.toLocaleString() + ' rows' : ''}</span>
            </span>`;
                li.addEventListener('click', () => onTableClick(t, li));
                ul.appendChild(li);
            });
        }

        /* Table search */
        document.getElementById('table-search').addEventListener('input', function() {
            const q       = this.value.trim().toLowerCase();
            const filtered = q ? allTables.filter(t => t.name.toLowerCase().includes(q)) : allTables;
            renderTableList(filtered);
        });

        /* =====================================================
           TABLE CLICK → populate column strip + quick SELECT
        ===================================================== */
        function onTableClick(table, liEl) {
            // Highlight sidebar item
            document.querySelectorAll('#table-list li').forEach(l => l.classList.remove('active'));
            liEl.classList.add('active');
            activeTableName = table.name;

            // Column strip
            const panel     = document.getElementById('col-info-panel');
            const chipsWrap = document.getElementById('col-chips-list');
            document.getElementById('col-info-table-name').textContent = table.name;
            chipsWrap.innerHTML = '';
            (table.columns || []).forEach(col => {
                const chip = document.createElement('span');
                chip.className   = 'col-chip';
                chip.textContent = col;
                chip.title       = 'Insert column name';
                chip.addEventListener('click', () => {
                    const cur = editor.getValue();
                    editor.replaceSelection(col);
                    editor.focus();
                });
                chipsWrap.appendChild(chip);
            });
            panel.style.display = 'block';

            // Auto-fill SELECT query
            editor.setValue(`SELECT * FROM "${table.name}" LIMIT 100;`);
            editor.focus();
        }

        /* =====================================================
           QUICK SQL BUTTONS
        ===================================================== */
        document.querySelectorAll('.quick-sql-btn').forEach(btn => {
            btn.addEventListener('click', () => {
                let sql = btn.dataset.sql;
                sql = sql.replace('{table}', activeTableName || 'your_table');
                editor.setValue(sql + ';');
                editor.focus();
            });
        });

        /* =====================================================
           RUN QUERY
        ===================================================== */
        document.getElementById('btn-run-sql').addEventListener('click', runQuery);
        document.getElementById('btn-clear-sql').addEventListener('click', () => {
            editor.setValue('');
            editor.focus();
            resetResultsArea();
        });

        function runQuery() {
            const sql = editor.getValue().trim();
            if (!sql) { sqToast('⚠ Query is empty.'); return; }
            if (!dbLoaded) { sqToast('⚠ No database loaded.', 'error'); return; }

            const btn = document.getElementById('btn-run-sql');
            btn.disabled    = true;
            btn.innerHTML   = '<span class="sq-spinner"></span> Running…';
            document.getElementById('result-meta').innerHTML = '';
            resetResultsArea('loading');

            ajaxPost(ROUTES.execute, { sql }, res => {
                btn.disabled  = false;
                btn.innerHTML = '<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg> Run Query';

                if (!res.success) {
                    showResultError(res.message || 'Query failed.');
                    return;
                }
                if (res.type === 'select') {
                    renderResultsTable(res);
                } else {
                    showResultWrite(res);
                }
            }, err => {
                btn.disabled  = false;
                btn.innerHTML = '<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg> Run Query';
                const msg = err.responseJSON?.message || 'Query failed.';
                showResultError(msg);
            });
        }

        /* =====================================================
           RESULTS RENDERING
        ===================================================== */
        function resetResultsArea(state) {
            document.getElementById('results-placeholder').style.display = state === 'loading' ? 'none' : 'block';
            document.getElementById('result-error-box').style.display    = 'none';
            document.getElementById('result-write-box').style.display    = 'none';
            document.getElementById('results-table-wrap').style.display  = 'none';
            document.getElementById('result-meta').innerHTML             = '';
            if (state === 'loading') {
                document.getElementById('results-placeholder').style.display = 'block';
                document.getElementById('results-placeholder').innerHTML = `
            <span class="ph-icon"><span class="sq-spinner" style="width:28px;height:28px;border-width:3px;"></span></span>
            <p>Executing query…</p>`;
            } else {
                document.getElementById('results-placeholder').innerHTML = `
            <span class="ph-icon">⚡</span>
            <p>Run a query to see results here</p>`;
            }
        }

        function showResultError(msg) {
            resetResultsArea();
            document.getElementById('results-placeholder').style.display = 'none';
            document.getElementById('result-error-box').textContent      = '⚠ ' + msg;
            document.getElementById('result-error-box').style.display    = 'block';
            document.getElementById('result-meta').innerHTML = '<span class="meta-chip error">Error</span>';
        }

        function showResultWrite(res) {
            resetResultsArea();
            document.getElementById('results-placeholder').style.display = 'none';
            document.getElementById('result-write-box').innerHTML =
                `✅ ${res.message || 'Query executed.'} &nbsp;<span style="color:var(--text-muted); font-size:.75rem;">(${res.elapsed_ms} ms)</span>`;
            document.getElementById('result-write-box').style.display = 'block';
            document.getElementById('result-meta').innerHTML =
                `<span class="meta-chip success">${res.affected_rows} rows affected</span>
         <span class="meta-chip">${res.elapsed_ms} ms</span>`;
        }

        function renderResultsTable(res) {
            resetResultsArea();
            document.getElementById('results-placeholder').style.display = 'none';

            const cols  = res.columns || [];
            const rows  = res.data    || [];

            // Header
            const theadRow = document.getElementById('results-thead-row');
            theadRow.innerHTML = '';
            const rowNumTh = document.createElement('th');
            rowNumTh.textContent = '#';
            rowNumTh.style.color = 'var(--text-dim)';
            rowNumTh.style.width = '40px';
            theadRow.appendChild(rowNumTh);
            cols.forEach(col => {
                const th = document.createElement('th');
                th.textContent = col;
                theadRow.appendChild(th);
            });

            // Body
            const tbody = document.getElementById('results-tbody');
            tbody.innerHTML = '';
            rows.forEach((row, idx) => {
                const tr = document.createElement('tr');
                const tdNum = document.createElement('td');
                tdNum.textContent = idx + 1;
                tdNum.style.color = 'var(--text-dim)';
                tr.appendChild(tdNum);

                cols.forEach(col => {
                    const td  = document.createElement('td');
                    const val = row[col];
                    if (val === null || val === undefined || val === '') {
                        td.textContent = val === '' ? '' : 'NULL';
                        td.className   = 'null-val';
                    } else if (!isNaN(val) && val !== '') {
                        td.textContent = val;
                        td.className   = 'num-val';
                        td.title       = val;
                    } else {
                        const str = String(val);
                        td.textContent = str.length > 200 ? str.slice(0, 200) + '…' : str;
                        td.title       = str;
                    }
                    tr.appendChild(td);
                });
                tbody.appendChild(tr);
            });

            document.getElementById('results-table-wrap').style.display = 'block';

            // Meta bar
            document.getElementById('result-meta').innerHTML = `
        <span class="row-count-badge">${rows.length.toLocaleString()} rows</span>
        <span class="meta-chip success">${cols.length} cols</span>
        <span class="meta-chip">${res.elapsed_ms} ms</span>`;
        }

        /* =====================================================
           AJAX HELPERS
        ===================================================== */
        function ajaxGet(url, onSuccess) {
            $.ajax({ url, type: 'GET', dataType: 'json',
                success: onSuccess,
                error: e => sqToast('❌ Request failed: ' + (e.responseJSON?.message || e.statusText), 'error')
            });
        }

        function ajaxPost(url, data, onSuccess, onError) {
            $.ajax({
                url, type: 'POST', dataType: 'json',
                data: { ...data, _token: CSRF },
                success: onSuccess,
                error: onError || (e => sqToast('❌ Request failed: ' + (e.responseJSON?.message || e.statusText), 'error'))
            });
        }

        /* =====================================================
           TOAST
        ===================================================== */
        let toastTimer = null;
        function sqToast(msg, type) {
            const el   = document.getElementById('sq-toast');
            const icon = type === 'error' ? '🔴' : '🟢';
            el.innerHTML = `<span>${icon}</span><span>${msg}</span>`;
            el.className = 'show';
            clearTimeout(toastTimer);
            toastTimer = setTimeout(() => { el.className = ''; }, 3200);
        }

        /* =====================================================
           INIT
        ===================================================== */
        // Check if a DB is already in session (page refresh case)
        $.ajax({
            url: ROUTES.tables, type: 'GET', dataType: 'json',
            success: function(res) {
                if (res.success && res.tables) {
                    // Session DB still alive — restore UI
                    document.getElementById('upload-zone-wrap').style.display = 'none';
                    document.getElementById('db-info-bar').style.display      = 'flex';
                    document.getElementById('info-filename').textContent      = 'Session DB';
                    document.getElementById('info-size').textContent          = res.db_info?.size || '—';
                    document.getElementById('info-encoding').textContent      = res.db_info?.encoding || '—';
                    document.getElementById('info-tables').textContent        = (res.tables || []).length;
                    document.getElementById('explorer-layout').classList.remove('explorer-disabled');
                    dbLoaded  = true;
                    allTables = res.tables;
                    document.getElementById('table-count-badge').textContent = allTables.length;
                    renderTableList(allTables);
                }
            },
            error: () => {} // No session DB — that's fine, just show upload
        });
    </script>
@endsection