@extends('layouts-v2.app')

@section('title', 'Database Explorer & Safe SQL Runner')

@section('content')
<!-- CDN Dependencies: CodeMirror & Lucide & SweetAlert2 -->
<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>
    .CodeMirror {
        height: 220px;
        font-family: 'JetBrains Mono', 'Fira Code', Consolas, Monaco, monospace;
        font-size: 13.5px;
        border-radius: 0.75rem;
        border: 1px solid #334155;
    }
    .table-container {
        max-height: calc(100vh - 460px);
        min-height: 280px;
    }
    .custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
    .custom-scrollbar::-webkit-scrollbar-track { background: #f1f5f9; }
    .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
</style>

<div class="space-y-5 pb-10">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 pb-3 border-b border-slate-200">
        <div>
            <h1 class="text-2xl font-bold text-slate-900 tracking-tight flex items-center gap-2.5">
                <div class="w-8 h-8 rounded-lg bg-blue-600 text-white flex items-center justify-center shadow-sm">
                    <i data-lucide="database" class="w-5 h-5"></i>
                </div>
                <span>Database Explorer & Safe SQL Runner</span>
                <span class="text-xs font-semibold px-2.5 py-0.5 rounded-full bg-emerald-100 text-emerald-800 border border-emerald-200 flex items-center gap-1">
                    <i data-lucide="shield-check" class="w-3 h-3 text-emerald-600"></i>
                    Read-Only Protected
                </span>
            </h1>
        </div>
        <div class="flex items-center gap-3">
            <button type="button" onclick="openHistoryModal()" class="inline-flex items-center gap-1.5 px-3 py-2 text-xs font-medium text-slate-700 bg-white border border-slate-200 rounded-lg hover:bg-slate-50 transition-colors shadow-sm">
                <i data-lucide="history" class="w-4 h-4 text-slate-500"></i>
                <span>Lịch sử truy vấn</span>
            </button>
            <button type="button" onclick="openBookmarksModal()" class="inline-flex items-center gap-1.5 px-3 py-2 text-xs font-medium text-slate-700 bg-white border border-slate-200 rounded-lg hover:bg-slate-50 transition-colors shadow-sm">
                <i data-lucide="bookmark" class="w-4 h-4 text-amber-500"></i>
                <span>Query mẫu & Đã lưu</span>
            </button>
        </div>
    </div>

    <!-- Main Workspace -->
    <div class="grid grid-cols-12 gap-5 items-start">
        <!-- Left Sidebar: Tables List (3 cols) -->
        <div class="col-span-12 lg:col-span-4 xl:col-span-3 bg-white rounded-2xl border border-slate-200 shadow-sm p-4 space-y-4">
            <div>
                <label class="text-xs font-bold uppercase tracking-wider text-slate-600 mb-1.5 flex items-center gap-1.5">
                    <i data-lucide="server" class="w-3.5 h-3.5 text-blue-600"></i>
                    <span>Kết nối Database</span>
                </label>
                <select id="dbConnectionSelect" onchange="onConnectionChange()" class="w-full text-sm rounded-xl border-slate-300 shadow-sm focus:border-blue-500 py-2 px-3 bg-slate-50 font-medium text-slate-800">
                    @foreach($connections as $conn)
                        <option value="{{ $conn['id'] }}" {{ $loop->first ? 'selected' : '' }}>
                            {{ $conn['name'] }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="space-y-2 pt-2 border-t border-slate-100">
                <div class="flex items-center justify-between">
                    <span class="text-xs font-bold uppercase tracking-wider text-slate-600 flex items-center gap-1.5">
                        <i data-lucide="table" class="w-3.5 h-3.5 text-indigo-600"></i>
                        <span>Danh sách Bảng</span>
                    </span>
                    <div class="flex items-center gap-1.5">
                        <span id="tableCountBadge" class="text-xs font-semibold px-2 py-0.5 rounded-full bg-slate-100 text-slate-600">0 bảng</span>
                        <button type="button" onclick="loadTables()" title="Tải lại bảng" class="p-1 rounded-lg text-slate-400 hover:text-slate-600 hover:bg-slate-100 transition-colors">
                            <i data-lucide="refresh-cw" class="w-3.5 h-3.5" id="refreshTablesIcon"></i>
                        </button>
                    </div>
                </div>
                <div class="relative">
                    <i data-lucide="search" class="w-4 h-4 absolute left-3 top-2.5 text-slate-400"></i>
                    <input type="text" id="tableSearchInput" oninput="filterTables()" placeholder="Tìm nhanh tên bảng..." class="w-full pl-9 pr-3 py-1.5 text-xs rounded-xl border border-slate-200 bg-slate-50/50">
                </div>
            </div>

            <div id="tableListContainer" class="custom-scrollbar overflow-y-auto space-y-1 max-h-[520px] pr-1">
                <div class="text-center py-8 text-slate-400 text-xs flex flex-col items-center gap-2">
                    <div class="w-6 h-6 border-2 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
                    <span>Đang tải danh sách bảng...</span>
                </div>
            </div>
        </div>

        <!-- Right Main: 2-Tab Area & Data Grid (9 cols) -->
        <div class="col-span-12 lg:col-span-8 xl:col-span-9 space-y-4">
            <!-- Tabs -->
            <div class="flex items-center justify-between gap-3 border-b border-slate-200 pb-2">
                <div class="flex items-center gap-2">
                    <button type="button" id="tabBtnVisual" onclick="switchMainTab('visual')" class="inline-flex items-center gap-2 px-4 py-2 text-xs font-bold rounded-xl transition-all text-blue-700 bg-blue-50 border border-blue-200 shadow-sm">
                        <i data-lucide="filter" class="w-4 h-4 text-blue-600"></i>
                        <span>Tìm kiếm Trực quan (No-SQL)</span>
                    </button>
                    <button type="button" id="tabBtnSql" onclick="switchMainTab('sql')" class="inline-flex items-center gap-2 px-4 py-2 text-xs font-semibold rounded-xl transition-all text-slate-600 hover:text-slate-800 hover:bg-slate-100 border border-transparent">
                        <i data-lucide="terminal" class="w-4 h-4 text-slate-500"></i>
                        <span>SQL Runner (Raw SQL)</span>
                    </button>
                </div>
            </div>

            <!-- TAB 1: Visual Search Builder -->
            <div id="visualSearchPanel" class="bg-white rounded-2xl border border-slate-200 shadow-sm p-5 space-y-4">
                <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 pb-3 border-b border-slate-100">
                    <div class="flex items-center gap-2">
                        <div class="w-7 h-7 rounded-lg bg-blue-100 text-blue-700 flex items-center justify-center font-bold">
                            <i data-lucide="sliders-horizontal" class="w-4 h-4"></i>
                        </div>
                        <div>
                            <h3 class="text-sm font-bold text-slate-800">Bộ lọc & Tra cứu dữ liệu trực quan</h3>
                            <p class="text-xs text-slate-500">Chọn bảng, lọc điều kiện và sắp xếp mà không cần gõ câu lệnh SQL</p>
                        </div>
                    </div>
                    <div class="flex items-center gap-2">
                        <button type="button" onclick="resetVisualFilters()" class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium text-slate-600 hover:bg-slate-100 rounded-lg">
                            <i data-lucide="rotate-ccw" class="w-3.5 h-3.5"></i>
                            <span>Đặt lại</span>
                        </button>
                        <button type="button" onclick="executeVisualSearch()" id="btnVisualSearch" class="inline-flex items-center gap-1.5 px-4 py-1.5 text-xs font-bold text-white bg-blue-600 hover:bg-blue-700 rounded-lg shadow-sm">
                            <i data-lucide="search" class="w-3.5 h-3.5" id="visualSearchIcon"></i>
                            <span>Tìm kiếm ngay</span>
                        </button>
                    </div>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3.5">
                    <div>
                        <label class="text-xs font-bold text-slate-700 mb-1 flex items-center gap-1">
                            <i data-lucide="table" class="w-3.5 h-3.5 text-indigo-600"></i>
                            <span>1. Chọn Bảng <span class="text-rose-500">*</span></span>
                        </label>
                        <select id="visualTableSelect" onchange="onVisualTableChange()" class="w-full text-xs font-medium rounded-xl border-slate-300 py-2 px-3 bg-slate-50">
                            <option value="">-- Chọn bảng --</option>
                        </select>
                    </div>
                    <div>
                        <label class="text-xs font-bold text-slate-700 mb-1 flex items-center gap-1">
                            <i data-lucide="columns" class="w-3.5 h-3.5 text-blue-600"></i>
                            <span>2. Cột hiển thị</span>
                        </label>
                        <select id="visualColumnsSelect" onchange="updateVisualSqlPreview()" class="w-full text-xs font-medium rounded-xl border-slate-300 py-2 px-3 bg-slate-50">
                            <option value="*">Tất cả các cột (*)</option>
                        </select>
                    </div>
                    <div>
                        <label class="text-xs font-bold text-slate-700 mb-1 flex items-center gap-1">
                            <i data-lucide="arrow-up-down" class="w-3.5 h-3.5 text-amber-600"></i>
                            <span>3. Sắp xếp theo</span>
                        </label>
                        <div class="flex items-center gap-1.5">
                            <select id="visualOrderByColumn" onchange="updateVisualSqlPreview()" class="w-2/3 text-xs font-medium rounded-xl border-slate-300 py-2 px-2 bg-slate-50">
                                <option value="">(Mặc định)</option>
                            </select>
                            <select id="visualOrderDirection" onchange="updateVisualSqlPreview()" class="w-1/3 text-xs font-medium rounded-xl border-slate-300 py-2 px-2 bg-slate-50">
                                <option value="DESC">DESC</option>
                                <option value="ASC">ASC</option>
                            </select>
                        </div>
                    </div>
                    <div>
                        <label class="text-xs font-bold text-slate-700 mb-1 flex items-center gap-1">
                            <i data-lucide="hash" class="w-3.5 h-3.5 text-emerald-600"></i>
                            <span>4. Giới hạn số dòng</span>
                        </label>
                        <select id="visualLimitSelect" onchange="updateVisualSqlPreview()" class="w-full text-xs font-medium rounded-xl border-slate-300 py-2 px-3 bg-slate-50">
                            <option value="25">25 dòng</option>
                            <option value="50" selected>50 dòng</option>
                            <option value="100">100 dòng</option>
                            <option value="250">250 dòng</option>
                            <option value="500">500 dòng</option>
                            <option value="1000">1000 dòng</option>
                        </select>
                    </div>
                </div>

                <!-- WHERE Conditions -->
                <div class="space-y-2 pt-2 border-t border-slate-100">
                    <div class="flex items-center justify-between">
                        <label class="text-xs font-bold uppercase tracking-wider text-slate-700 flex items-center gap-1.5">
                            <i data-lucide="filter" class="w-3.5 h-3.5 text-indigo-600"></i>
                            <span>Điều kiện lọc (WHERE Conditions)</span>
                        </label>
                        <button type="button" onclick="addFilterConditionRow()" class="inline-flex items-center gap-1 px-2.5 py-1 text-xs font-semibold text-blue-600 bg-blue-50 hover:bg-blue-100 rounded-lg border border-blue-200">
                            <i data-lucide="plus" class="w-3.5 h-3.5"></i>
                            <span>Thêm điều kiện</span>
                        </button>
                    </div>
                    <div id="filterConditionsContainer" class="space-y-2"></div>
                </div>

                <!-- Live Preview -->
                <div class="bg-slate-900 rounded-xl p-3 text-white space-y-1.5">
                    <div class="flex items-center justify-between text-[11px] text-slate-400">
                        <span class="flex items-center gap-1 font-semibold text-emerald-400">
                            <i data-lucide="terminal" class="w-3.5 h-3.5"></i>
                            <span>Câu lệnh SQL được tự động tạo:</span>
                        </span>
                        <button type="button" onclick="copyVisualSqlToEditor()" class="text-xs text-blue-400 hover:text-blue-300 underline flex items-center gap-1">
                            <span>Chuyển sang SQL Editor để sửa tiếp</span>
                            <i data-lucide="arrow-right" class="w-3 h-3"></i>
                        </button>
                    </div>
                    <pre id="visualSqlPreview" class="font-mono text-xs text-slate-200 bg-slate-950 p-2.5 rounded-lg overflow-x-auto whitespace-pre-wrap break-all border border-slate-800">SELECT * FROM users LIMIT 50;</pre>
                </div>
            </div>

            <!-- TAB 2: SQL Editor -->
            <div id="sqlEditorPanel" class="hidden bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
                <div class="px-4 py-2.5 bg-slate-900 text-white flex flex-wrap items-center justify-between gap-3 border-b border-slate-800">
                    <div class="flex items-center gap-2 flex-wrap">
                        <span class="text-xs font-semibold text-slate-400 mr-2">SQL Query</span>
                        <div class="flex items-center gap-1">
                            <button type="button" onclick="insertSnippet('SELECT * FROM ')" class="px-2 py-0.5 text-[11px] font-mono bg-slate-800 hover:bg-slate-700 text-slate-300 rounded border border-slate-700">SELECT *</button>
                            <button type="button" onclick="insertSnippet('SELECT COUNT(*) FROM ')" class="px-2 py-0.5 text-[11px] font-mono bg-slate-800 hover:bg-slate-700 text-slate-300 rounded border border-slate-700">COUNT(*)</button>
                            <button type="button" onclick="insertSnippet(' WHERE ')" class="px-2 py-0.5 text-[11px] font-mono bg-slate-800 hover:bg-slate-700 text-slate-300 rounded border border-slate-700">WHERE</button>
                            <button type="button" onclick="insertSnippet(' ORDER BY id DESC')" class="px-2 py-0.5 text-[11px] font-mono bg-slate-800 hover:bg-slate-700 text-slate-300 rounded border border-slate-700">ORDER BY</button>
                        </div>
                    </div>
                    <div class="flex items-center gap-2.5">
                        <select id="queryLimit" class="bg-slate-800 text-slate-200 text-xs rounded border border-slate-700 px-2 py-1">
                            <option value="25">25</option>
                            <option value="50" selected>50</option>
                            <option value="100">100</option>
                            <option value="250">250</option>
                            <option value="500">500</option>
                            <option value="1000">1000</option>
                        </select>
                        <label class="inline-flex items-center gap-1.5 text-xs text-slate-400 cursor-pointer">
                            <input type="checkbox" id="maskSensitiveCheck" class="rounded bg-slate-800 border-slate-700 text-blue-600">
                            <span>Ẩn Password/Token</span>
                        </label>
                        <button type="button" onclick="saveCurrentQueryBookmark()" title="Lưu bookmark" class="p-1.5 text-slate-400 hover:text-amber-400 rounded"><i data-lucide="bookmark-plus" class="w-4 h-4"></i></button>
                        <button type="button" onclick="clearEditor()" title="Xóa trắng" class="p-1.5 text-slate-400 hover:text-rose-400 rounded"><i data-lucide="trash-2" class="w-4 h-4"></i></button>
                        <button type="button" id="btnRunQuery" onclick="executeQuery()" class="inline-flex items-center gap-1.5 px-4 py-1.5 text-xs font-semibold text-white bg-blue-600 hover:bg-blue-500 rounded-lg shadow-sm">
                            <i data-lucide="play" class="w-3.5 h-3.5 fill-current" id="runQueryIcon"></i>
                            <span>Chạy (Ctrl+Enter)</span>
                        </button>
                    </div>
                </div>
                <div class="p-0">
                    <textarea id="sqlCodeEditor" placeholder="Nhập câu lệnh SELECT..."></textarea>
                </div>
            </div>

            <!-- Result Grid Card -->
            <div class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden flex flex-col">
                <div class="px-4 py-2.5 bg-slate-50 border-b border-slate-200 flex flex-wrap items-center justify-between gap-3">
                    <div class="flex items-center gap-2.5 flex-wrap">
                        <span class="text-xs font-bold text-slate-700 flex items-center gap-1.5">
                            <i data-lucide="layers" class="w-4 h-4 text-blue-600"></i>
                            <span>Kết quả truy vấn</span>
                        </span>
                        <span id="resultStatsBadge" class="hidden text-xs font-medium px-2 py-0.5 rounded-full bg-slate-200 text-slate-700">
                            <span id="resultStatsText">0 dòng</span>
                        </span>
                        <span id="execTimeBadge" class="hidden text-xs font-medium px-2 py-0.5 rounded-full bg-blue-50 text-blue-700 border border-blue-200">
                            <span id="execTimeText">0 ms</span>
                        </span>
                    </div>
                    <div class="flex items-center gap-2">
                        <button type="button" id="btnExportCsv" onclick="exportData('csv')" disabled class="inline-flex items-center gap-1.5 px-3 py-1 text-xs font-medium text-slate-700 bg-white border border-slate-200 rounded-lg hover:bg-slate-50 disabled:opacity-50 transition-colors shadow-sm">
                            <i data-lucide="file-spreadsheet" class="w-3.5 h-3.5 text-emerald-600"></i>
                            <span>Xuất CSV</span>
                        </button>
                        <button type="button" id="btnExportJson" onclick="exportData('json')" disabled class="inline-flex items-center gap-1.5 px-3 py-1 text-xs font-medium text-slate-700 bg-white border border-slate-200 rounded-lg hover:bg-slate-50 disabled:opacity-50 transition-colors shadow-sm">
                            <i data-lucide="file-code" class="w-3.5 h-3.5 text-amber-600"></i>
                            <span>Xuất JSON</span>
                        </button>
                    </div>
                </div>

                <div id="queryErrorAlert" class="hidden m-4 p-4 rounded-xl bg-rose-50 border border-rose-200 text-rose-800 text-xs">
                    <span class="font-bold">Lỗi thực thi SQL:</span>
                    <div id="queryErrorMessage" class="mt-1 font-mono break-all whitespace-pre-wrap"></div>
                </div>

                <div class="table-container custom-scrollbar overflow-auto relative">
                    <div id="emptyState" class="py-16 text-center text-slate-400 flex flex-col items-center justify-center">
                        <div class="w-14 h-14 rounded-2xl bg-slate-100 flex items-center justify-center text-slate-400 mb-3">
                            <i data-lucide="search-code" class="w-7 h-7"></i>
                        </div>
                        <h4 class="text-sm font-semibold text-slate-600">Chưa có dữ liệu hiển thị</h4>
                        <p class="text-xs text-slate-400 mt-1 max-w-sm">Chọn một bảng hoặc nhập câu lệnh SQL để xem dữ liệu.</p>
                    </div>

                    <div id="tableLoading" class="hidden py-16 text-center text-blue-600 flex flex-col items-center justify-center gap-3">
                        <div class="w-8 h-8 border-3 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
                        <span class="text-xs font-medium text-slate-600">Đang thực thi truy vấn an toàn...</span>
                    </div>

                    <table id="resultsTable" class="hidden w-full text-left border-collapse text-xs">
                        <thead class="sticky top-0 bg-slate-100 text-slate-700 font-semibold border-b border-slate-200 z-10">
                            <tr id="tableHeaderRow"></tr>
                        </thead>
                        <tbody id="tableBody" class="divide-y divide-slate-100 font-mono text-slate-700"></tbody>
                    </table>
                </div>

                <div id="tableFooterInfo" class="hidden px-4 py-2 bg-slate-50 border-t border-slate-200 text-slate-500 text-xs flex items-center justify-between">
                    <span id="footerSummary">Hiển thị 0 dòng</span>
                    <span class="text-[11px] text-slate-400">Click vào ô bất kỳ để copy nội dung</span>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- ================= MODALS ================= -->
@include('tools.db-viewer.modal.schema-modal')
@include('tools.db-viewer.modal.history-modal')
@include('tools.db-viewer.modal.bookmarks-modal')

<!-- CodeMirror Scripts -->
<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>
    window.dbViewerRoutes = {
        tables: "{{ route('tools.db-viewer.tables') }}",
        schema: "{{ route('tools.db-viewer.schema') }}",
        execute: "{{ route('tools.db-viewer.execute') }}",
        export: "{{ route('tools.db-viewer.export') }}",
    };
</script>
<script src="{{ asset('js/tools/db-viewer.js') }}"></script>
@endsection