🐘 PostgreSQL (pgAdmin) Simulator v4.0 — by Adewale Samson Adeagbo

🐘 Query Editor

Ln 1, Col 1 0 chars PostgreSQL 15 Compatible

<span style="font-size:10px;color:var(--t2)" id="ef-rows">-</span>
<span class="ed-ft-sep"></span>
<span style="font-size:10px;color:var(--t2)" id="ef-timing"></span>
<span class="ed-ft-sep"></span>
<span style="font-size:10px;color:var(--grn)" id="ef-status"></span>
</div>
<div class="ed-rh" onmousedown="startEditorResize(event)"></div>
</div>
<div class="respane">
<div class="restabs">
<div class="restab on" id="rt-data" onclick="switchResTab('data')">📋 Data <span class="rb" id="row-badge">0</span></div>
<div class="restab" id="rt-messages" onclick="switchResTab('messages')">💬 Messages</div>
<div class="restab" id="rt-explain" onclick="switchResTab('explain')">📊 Explain</div>
<div class="restab" id="rt-chart" onclick="switchResTab('chart')">📈 Chart</div>
<div class="restab" id="rt-pivot" onclick="switchResTab('pivot')">📐 Pivot</div>
<div class="restab" id="rt-erd" onclick="switchResTab('erd')">🗺 ERD</div>
<div class="restab" id="rt-querybuilder" onclick="switchResTab('querybuilder')">🔧 Builder</div>
<div class="restab" id="rt-dashboard" onclick="switchResTab('dashboard')">🖥 Dashboard</div>
<div class="restab" id="rt-help" onclick="switchResTab('help')">📖 Guide</div>
<div class="resmeta">
<span style="font-size:11px;color:var(--grn);font-weight:600" id="res-timing"></span>
<button class="expbtn" id="ebtn-csv" onclick="exportCSV()" style="display:none">CSV</button>
<button class="expbtn" id="ebtn-json" onclick="exportJSON()" style="display:none">JSON</button>
<button class="expbtn" id="ebtn-sql2" onclick="exportSQLInserts()" style="display:none">SQL</button>
<button class="expbtn" id="ebtn-md" onclick="exportMarkdown()" style="display:none">MD</button>
</div>
</div>
<div class="filterbar" id="filterbar">
<span style="font-size:10px;color:var(--t3)">🔍 Filter:</span>
<input type="text" class="filterinput" id="filter-input" placeholder="Search any column..." oninput="filterRows(this.value)">
<span style="font-size:10px;color:var(--t2)" id="filter-count"></span>
<select id="filter-col" class="filterinput" style="width:130px" onchange="filterRows(document.getElementById('filter-input').value)"><option value="">All columns</option></select>
<button class="btn btns" style="padding:3px 8px;font-size:11px" onclick="clearFilter()">✕ Clear</button>
</div>
<div class="rescontent">
<div class="ldoverlay" id="ld-overlay"><div style="display:flex;flex-direction:column;align-items:center;gap:14px"><div class="ldspin"></div><div class="ldtxt" id="ld-msg">Executing...</div></div></div>
<div class="respanel on" id="rp-data">
<div class="empty" id="empty-state">
<div class="empty-ic">🐘</div>
<div class="empty-ttl">PostgreSQL (pgAdmin) Simulator</div>
<div class="empty-txt">Complete PostgreSQL pgAdmin workbench in your browser — no server, no install, no cost. Built by <strong style="color:var(--pg3)">Adewale Samson Adeagbo</strong>.</div>
<div class="empty-hint">💡 Press <strong>Ctrl+Enter</strong> to run the welcome query above, or use <strong>Samples</strong> menu for instant demo data.</div>
</div>
<div class="dgwrap" id="dgwrap" style="display:none"><table class="dg" id="dg"></table></div>
</div>
<div class="respanel" id="rp-messages"><div class="mpanel" id="msg-panel"><div style="color:var(--t3);font-size:12px">💬 Query messages will appear here. Run a query to get started.</div></div></div>
<div class="respanel" id="rp-explain"><div id="explain-content" style="padding:14px"></div></div>
<div class="respanel" id="rp-chart"><div class="chartcont"><div class="chartctrl" id="chart-ctrl" style="display:none"><select class="chsel" id="ch-type" onchange="drawChart()"><option value="bar">Bar Chart</option><option value="line">Line Chart</option><option value="pie">Pie Chart</option><option value="doughnut">Doughnut</option><option value="scatter">Scatter</option></select><span style="font-size:10px;color:var(--t3)">X:</span><select class="chsel" id="ch-x" onchange="drawChart()"><option>-</option></select><span style="font-size:10px;color:var(--t3)">Y:</span><select class="chsel" id="ch-y" onchange="drawChart()"><option>-</option></select></div><canvas id="chartCanvas" style="width:100%;max-height:320px"></canvas><div id="chart-empty" style="color:var(--t3);font-size:12px;padding:4px">Run a query with numeric columns to chart results here.</div></div></div>
<div class="respanel" id="rp-pivot"><div style="padding:14px"><div style="font-size:12px;color:var(--t2);margin-bottom:12px;line-height:1.7"><strong style="color:var(--pg3)">📊 Pivot Table</strong> — Cross-tabulate your query results. Select row field, column field, value field, and aggregation.</div><div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;align-items:center"><span style="font-size:11px;color:var(--t3)">Row:</span><select class="chsel" id="pv-row" onchange="renderPivot()"><option>-</option></select><span style="font-size:11px;color:var(--t3)">Col:</span><select class="chsel" id="pv-col" onchange="renderPivot()"><option>-</option></select><span style="font-size:11px;color:var(--t3)">Value:</span><select class="chsel" id="pv-val" onchange="renderPivot()"><option>-</option></select><select class="chsel" id="pv-agg" onchange="renderPivot()"><option value="sum">SUM</option><option value="count">COUNT</option><option value="avg">AVG</option><option value="min">MIN</option><option value="max">MAX</option></select></div><div id="pivot-output" style="overflow:auto;max-height:380px"></div></div></div>
<div class="respanel" id="rp-erd"><div class="erd-wrap"><div style="font-size:12px;color:var(--t2);margin-bottom:12px;line-height:1.7"><strong style="color:var(--pg3)">🗺 Entity Relationship Diagram</strong> — Visual overview of all loaded tables and their columns. Load sample data or import your own to see the schema here.</div><div class="erd-grid" id="erd-grid"><div style="color:var(--t3);font-size:12px">No tables loaded yet. Use Samples menu or Import button.</div></div></div></div>
<div class="respanel" id="rp-querybuilder"><div style="padding:14px" id="qb-content"><div style="font-size:12px;color:var(--t2);margin-bottom:12px;line-height:1.7"><strong style="color:var(--pg3)">🔧 Visual Query Builder</strong> — Click to build SELECT queries without typing SQL. Great for learners and quick exploration.</div><div id="qb-ui"><div style="color:var(--t3);font-size:12px">Load tables first (Samples or Import), then use the Query Builder to visually construct your query.</div></div></div></div>
<div class="respanel" id="rp-dashboard"><div class="dash-grid" id="dash-content"><div style="color:var(--t3);font-size:12px;grid-column:1/-1;padding:16px">Load tables via Samples or Import to see the server dashboard with live statistics.</div></div></div>
<div class="respanel" id="rp-activity"><div style="padding:14px"><div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px"><strong style="color:var(--pg3);font-size:13px">📜 Activity Log</strong><button class="btn btns" style="padding:3px 10px;font-size:11px" onclick="clearActivityLog()">Clear Log</button></div><div id="activity-log-list"><div style="color:var(--t3);font-size:12px">No activity yet.</div></div></div></div>
<div class="respanel" id="rp-monitor"><div class="monitor-grid" id="monitor-content"><div style="color:var(--t3);font-size:12px;grid-column:1/-1;padding:16px">📡 Server Activity Monitor — Run queries to see live session statistics.</div></div></div>
<div class="respanel" id="rp-macros"><div style="padding:14px"><div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px"><strong style="color:var(--pg3);font-size:13px">⏺ Query Macros</strong><div style="display:flex;gap:8px"><span class="recording-dot" id="recording-dot"></span><button class="btn btnp" id="macro-record-btn" onclick="toggleMacroRecord()" style="padding:4px 12px;font-size:11px">⏺ Record</button><button class="btn btns" id="macro-play-btn" onclick="playMacro()" style="padding:4px 12px;font-size:11px">▶ Play All</button><button class="btn btns" onclick="clearMacro()" style="padding:4px 12px;font-size:11px">✕ Clear</button></div></div><div id="macro-steps"><div style="color:var(--t3);font-size:12px">No macro steps yet. Click <strong>Record</strong> then run queries to capture them for replay.</div></div></div></div>
<div class="respanel" id="rp-generator"><div style="padding:14px"><div style="font-size:12px;color:var(--t2);margin-bottom:12px"><strong style="color:var(--pg3)">🧬 Data Generator</strong> — Generate realistic test data with custom patterns.</div><div id="gen-ui"><div style="color:var(--t3);font-size:12px">Configure generation parameters below.</div></div></div></div>
<div class="respanel" id="rp-health"><div style="padding:14px"><div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px"><strong style="color:var(--pg3);font-size:13px">🩺 Database Health Report</strong><button class="btn btnp" onclick="runHealthCheck()" style="padding:4px 12px;font-size:11px">🔄 Run Health Check</button></div><div id="health-content"><div style="color:var(--t3);font-size:12px">Load tables then click <strong>Run Health Check</strong> to generate a diagnostic report.</div></div></div></div>
<div class="respanel" id="rp-diff"><div style="padding:14px"><strong style="color:var(--pg3);font-size:13px">Δ Result Set Diff</strong><div id="rsdiff-ui" style="margin-top:10px"><div style="color:var(--t3);font-size:12px">Run a query first, snapshot results, then run another query to compare.</div></div></div></div>
<div class="respanel" id="rp-maintenance"><div style="padding:14px"><strong style="color:var(--pg3);font-size:13px">🔧 Table Maintenance</strong><div id="maint-ui" style="margin-top:10px"><div style="color:var(--t3);font-size:12px">Select a table to perform VACUUM, ANALYZE, or REINDEX.</div></div></div></div>

<div class="respanel" id="rp-benchmark"><div style="padding:14px"><div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px"><strong style="color:var(--pg3);font-size:13px">⏱ Query Performance Benchmark</strong><button class="btn btns" onclick="clearBenchmark()" style="padding:3px 10px;font-size:11px">Clear</button></div><div class="bench-config"><span style="font-size:11px;color:var(--t2)">Run</span><input type="number" id="bench-runs" value="10" min="1" max="100"><span style="font-size:11px;color:var(--t2)">times</span><button class="btn btnp" onclick="runBenchmark()" style="padding:4px 14px;font-size:11px">▶ Benchmark</button></div><div class="bench-results" id="bench-results"><div style="color:var(--t3);font-size:12px;grid-column:1/-1;text-align:center;padding:20px">Set iterations above and click <strong>Benchmark</strong> to measure query performance.</div></div><div class="bench-hist" id="bench-hist" style="display:none"></div></div></div>
<div class="respanel" id="rp-scheduler"><div style="padding:14px"><strong style="color:var(--pg3);font-size:13px">🔄 Auto-Refresh Scheduler</strong><div class="sched-row" style="margin-top:12px"><span style="font-size:11px;color:var(--t2)">Interval (seconds):</span><input type="number" id="sched-interval" value="30" min="5" max="3600" style="background:var(--bg3);border:1px solid var(--brd1);border-radius:4px;color:var(--t0);font-size:11px;padding:4px 8px;width:70px"><button class="btn btnp" id="sched-btn" onclick="toggleScheduler()" style="padding:4px 14px;font-size:11px">▶ Start</button><span class="sched-countdown" id="sched-countdown" style="display:none"></span></div><div id="sched-status" style="font-size:11px;color:var(--t2);margin-top:8px">Auto-refresh runs the current query at regular intervals — useful for monitoring dashboards.</div></div></div>
<div class="respanel" id="rp-snapshots"><div style="padding:14px"><div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px"><strong style="color:var(--pg3);font-size:13px">📸 Database Snapshots (Time Travel)</strong><button class="btn btnp" onclick="createSnapshot()" style="padding:4px 14px;font-size:11px">📸 Snapshot Now</button></div><div id="snapshots-list"><div style="color:var(--t3);font-size:12px">No snapshots yet. Create one to save your database state for later restoration.</div></div></div></div>
<div class="respanel" id="rp-masking"><div style="padding:14px"><strong style="color:var(--pg3);font-size:13px">🔒 Column Masking / Data Privacy</strong><div id="masking-ui" style="margin-top:10px"><div style="color:var(--t3);font-size:12px">Run a query first, then toggle columns to mask/hide sensitive data in results.</div></div></div></div>
<div class="respanel" id="rp-deadlock"><div style="padding:14px"><strong style="color:var(--pg3);font-size:13px">⚠ Deadlock Simulator (Educational)</strong><div style="font-size:11px;color:var(--t2);margin:10px 0;line-height:1.7">Simulates a transaction deadlock to demonstrate what happens when two transactions lock each other's resources. <strong>Educational tool — use with test data only.</strong></div><button class="btn btnp" onclick="runDeadlockSim()" style="padding:4px 14px;font-size:11px">▶ Run Deadlock Simulation</button><div class="deadlock-log" id="deadlock-log" style="margin-top:10px">Click Run to simulate a deadlock scenario.</div></div></div>
<div class="respanel" id="rp-formatter"><div style="padding:14px"><strong style="color:var(--pg3);font-size:13px">✨ Advanced SQL Formatter</strong><div style="font-size:11px;color:var(--t2);margin:10px 0;line-height:1.7">Choose a formatting style and apply it to the current query in the editor.</div><div class="format-preset" onclick="applyFormatPreset('compact')">📦 <strong>Compact</strong> — minimal whitespace, one-line keywords where possible</div><div class="format-preset" onclick="applyFormatPreset('expanded')">📐 <strong>Expanded</strong> — each clause on new line, 2-space indent (pgAdmin default)</div><div class="format-preset" onclick="applyFormatPreset('aligned')">📏 <strong>Aligned</strong> — columns and conditions aligned vertically for readability</div></div></div>
<div class="respanel" id="rp-bookmarks"><div style="padding:14px"><strong style="color:var(--pg3);font-size:13px">🔖 Result Bookmarks</strong><div style="font-size:11px;color:var(--t2);margin:8px 0">Bookmark interesting rows from query results for quick reference.</div><div id="bookmarks-list"><div style="color:var(--t3);font-size:12px">No bookmarks yet. Right-click a row to bookmark it, or click a cell → Bookmark.</div></div></div></div>

<div class="respanel" id="rp-help"><div id="help-content" style="padding:16px;overflow:auto;height:100%;box-sizing:border-box"></div></div>
</div>
</div>
</div>
<div class="resizer" id="resR" onmousedown="startResize(event,'R')"></div>

<div class="rpanel" id="rpanel">
<div class="rptabs">
<div class="rpt on" id="rpt-properties" onclick="switchRTab('properties')">Properties</div>
<div class="rpt" id="rpt-history" onclick="switchRTab('history')">History</div>
<div class="rpt" id="rpt-stats" onclick="switchRTab('stats')">Stats</div>
<div class="rpt" id="rpt-profiler" onclick="switchRTab('profiler')">Profiler</div>
<div class="rpt" id="rpt-docs" onclick="switchRTab('docs')">SQL Ref</div>
</div>
<div class="rpbody" id="rp-body"></div>
</div>
</div>

<div class="brand-bar">
<span>🐘 PostgreSQL (pgAdmin) Simulator v4.0</span>
<span style="margin:0 8px">·</span>
<span>Built by <a href="https://cssadewale.pages.dev" target="_blank" rel="noopener">Adewale Samson Adeagbo</a></span>
<span style="margin:0 8px">·</span>
<span>Data Scientist · EdTech Builder · AI-Augmented Solutions Developer</span>
<span style="margin:0 8px">·</span>
<a href="https://github.com/cssadewale" target="_blank" rel="noopener">GitHub</a>
<span style="margin:0 8px">·</span>
<a href="https://linkedin.com/in/adewalesamsonadeagbo" target="_blank" rel="noopener">LinkedIn</a>
<span style="margin:0 8px">·</span>
<a href="https://hmgacademy.pages.dev" target="_blank" rel="noopener">HMG Academy</a>
<span style="margin:0 8px">·</span>
<span>🇳🇬 Lagos, Nigeria</span>
</div>

<div class="sb">
<div class="sbi hl">🐘 pgAdmin Simulator</div><div class="sbsep"></div>
<div class="sbi" id="sb-db">queryforge</div><div class="sbsep"></div>
<div class="sbi" id="sb-tables">Tables: 0</div><div class="sbsep"></div>
<div class="sbi" id="sb-rows">Rows: —</div><div class="sbsep"></div>
<div class="sbi" id="sb-txn" style="display:none;color:var(--amb)">⟳ Transaction</div>
<div style="display:flex;align-items:center;gap:4px;margin-left:8px"><span style="font-size:10px;color:rgba(255,255,255,.6)">ms:</span><div class="sparkline-wrap" id="spark-wrap" title="Query timing history"></div></div>
<div class="sbr"><div class="sbi" id="sb-eng">PostgreSQL 15 Compatible</div><div class="sbsep"></div><div class="sbi" id="sb-time"></div></div>
</div>

<div class="ctxmenu" id="ctxmenu">
<div class="ctx-i" onclick="ctxDo('select')">SELECT * FROM table</div>
<div class="ctx-i" onclick="ctxDo('select10')">SELECT top 10 rows</div>
<div class="ctx-i" onclick="ctxDo('count')">COUNT(*) rows</div>
<div class="ctx-i" onclick="ctxDo('schema')">View schema info</div>
<div class="ctx-i" onclick="ctxDo('ddl')">Show CREATE statement</div>
<div class="ctx-sep"></div>
<div class="ctx-i dng" onclick="ctxDo('truncate')">TRUNCATE (delete all rows)</div>
<div class="ctx-i dng" onclick="ctxDo('drop')">DROP TABLE</div>
</div>
<div class="cell-ctx" id="cell-ctx">
<div class="cell-ctx-i" onclick="copyCellValue()">📋 Copy cell value</div>
<div class="cell-ctx-i" onclick="copyRowAsJSON()">📄 Copy row as JSON</div>
<div class="cell-ctx-i" onclick="filterByCellValue()">🔍 Filter by this value</div>
</div>

<div class="toaststack" id="toaststack"></div>


<div class="moverlay" id="modal-import"><div class="mbox" style="width:560px"><div class="mtbar"><div class="mtitle">📥 Import Dataset</div><button class="mclose" onclick="closeModal('modal-import')">✕</button></div><div class="mbody"><div class="minfo">Supported: CSV, TSV, JSON array. Types auto-detected. All data stays in your browser — nothing sent anywhere.</div><label class="mlbl">Table Name (a-z, 0-9, underscore)</label><input type="text" class="minput" id="imp-name" placeholder="e.g. sales_data"><label class="mlbl">If Table Exists</label><select class="mselect" id="imp-conflict"><option value="replace">Replace (DROP and recreate)</option><option value="append">Append rows</option><option value="skip">Skip if exists</option></select><label class="mlbl">Options</label><div style="display:flex;gap:18px;flex-wrap:wrap;margin-bottom:4px"><label style="display:flex;align-items:center;gap:6px;font-size:12px;cursor:pointer"><input type="checkbox" id="opt-hdr" checked> First row is header</label><label style="display:flex;align-items:center;gap:6px;font-size:12px;cursor:pointer"><input type="checkbox" id="opt-trim"> Trim whitespace</label><label style="display:flex;align-items:center;gap:6px;font-size:12px;cursor:pointer"><input type="checkbox" id="opt-infer" checked> Auto-detect types</label></div><div id="imp-prog-wrap" style="display:none;margin-top:10px"><div class="progwrap"><div class="progbar" id="imp-bar"></div></div><div class="proglbl" id="imp-lbl">Preparing...</div></div><div id="imp-preview-wrap" style="display:none;margin-top:12px"><label class="mlbl">Preview (first 5 rows)</label><div id="imp-preview" style="overflow-x:auto;border:1px solid var(--brd1);border-radius:var(--r)"></div></div></div><div class="mfoot"><button class="btn btns" onclick="closeModal('modal-import')">Cancel</button><button class="btn btnp" id="imp-confirm" onclick="confirmImport()">📥 Import</button></div></div></div>

<div class="moverlay" id="modal-prefs"><div class="mbox narrow"><div class="mtbar"><div class="mtitle">⚙ Preferences</div><button class="mclose" onclick="closeModal('modal-prefs')">✕</button></div><div class="mbody"><label class="mlbl">Editor Font Size</label><select class="mselect" id="pref-fs" onchange="applyPrefs()"><option value="11">11px</option><option value="12">12px</option><option value="13" selected>13px Default</option><option value="14">14px</option><option value="15">15px</option><option value="16">16px</option></select><label class="mlbl">Line Height</label><select class="mselect" id="pref-lh" onchange="applyPrefs()"><option value="1.5">Compact 1.5</option><option value="1.75" selected>Normal 1.75</option><option value="2.0">Spacious 2.0</option></select><label class="mlbl">Max Rows in Grid</label><select class="mselect" id="pref-limit" onchange="applyPrefs()"><option value="500">500</option><option value="1000" selected>1000</option><option value="5000">5000</option><option value="10000">10000</option></select><label class="mlbl">Tab Width</label><select class="mselect" id="pref-tw" onchange="applyPrefs()"><option value="2" selected>2 spaces</option><option value="4">4 spaces</option></select></div><div class="mfoot"><button class="btn btns" onclick="closeModal('modal-prefs')">Close</button><button class="btn btnp" onclick="applyPrefs();closeModal('modal-prefs')">Apply</button></div></div></div>

<div class="moverlay" id="modal-shortcuts"><div class="mbox wide"><div class="mtbar"><div class="mtitle">⌨ Keyboard Shortcuts</div><button class="mclose" onclick="closeModal('modal-shortcuts')">✕</button></div><div class="mbody"><div class="scgrid"><div class="scrow"><span class="scdesc">Execute Query</span><div class="sckeys"><span class="kbd">Ctrl</span><span class="kbd">Enter</span></div></div><div class="scrow"><span class="scdesc">Explain Plan</span><div class="sckeys"><span class="kbd">Ctrl</span><span class="kbd">E</span></div></div><div class="scrow"><span class="scdesc">Explain Analyze</span><div class="sckeys"><span class="kbd">Ctrl</span><span class="kbd">Shift</span><span class="kbd">E</span></div></div><div class="scrow"><span class="scdesc">New Tab</span><div class="sckeys"><span class="kbd">Ctrl</span><span class="kbd">T</span></div></div><div class="scrow"><span class="scdesc">Close Tab</span><div class="sckeys"><span class="kbd">Ctrl</span><span class="kbd">W</span></div></div><div class="scrow"><span class="scdesc">Format SQL</span><div class="sckeys"><span class="kbd">Ctrl</span><span class="kbd">Shift</span><span class="kbd">F</span></div></div><div class="scrow"><span class="scdesc">Toggle Comment</span><div class="sckeys"><span class="kbd">Ctrl</span><span class="kbd">/</span></div></div><div class="scrow"><span class="scdesc">Duplicate Line</span><div class="sckeys"><span class="kbd">Ctrl</span><span class="kbd">D</span></div></div><div class="scrow"><span class="scdesc">Delete Line</span><div class="sckeys"><span class="kbd">Ctrl</span><span class="kbd">Shift</span><span class="kbd">K</span></div></div><div class="scrow"><span class="scdesc">Find & Replace</span><div class="sckeys"><span class="kbd">Ctrl</span><span class="kbd">H</span></div></div><div class="scrow"><span class="scdesc">Go to Line</span><div class="sckeys"><span class="kbd">Ctrl</span><span class="kbd">G</span></div></div><div class="scrow"><span class="scdesc">Save Query</span><div class="sckeys"><span class="kbd">Ctrl</span><span class="kbd">S</span></div></div><div class="scrow"><span class="scdesc">Open SQL File</span><div class="sckeys"><span class="kbd">Ctrl</span><span class="kbd">O</span></div></div><div class="scrow"><span class="scdesc">UPPERCASE Keywords</span><div class="sckeys"><span class="kbd">Ctrl</span><span class="kbd">Shift</span><span class="kbd">U</span></div></div><div class="scrow"><span class="scdesc">Database Backup</span><div class="sckeys"><span class="kbd">Ctrl</span><span class="kbd">B</span></div></div><div class="scrow"><span class="scdesc">Close Modals</span><div class="sckeys"><span class="kbd">Esc</span></div></div></div><div style="margin-top:12px;font-size:11px;color:var(--t2);line-height:1.7;background:var(--bg3);padding:10px 12px;border-radius:var(--r)">💡 <strong>Pro tip:</strong> Select part of SQL then Ctrl+Enter to run only that selection. Right-click any table in the sidebar for quick actions. Arrow keys navigate the result grid.</div></div><div class="mfoot"><button class="btn btnp" onclick="closeModal('modal-shortcuts')">Close</button></div></div></div>

<div class="moverlay" id="modal-find"><div class="mbox narrow"><div class="mtbar"><div class="mtitle">🔍 Find & Replace</div><button class="mclose" onclick="closeModal('modal-find')">✕</button></div><div class="mbody"><label class="mlbl">Find</label><input type="text" class="minput" id="find-inp" placeholder="Search text..."><label class="mlbl">Replace with</label><input type="text" class="minput" id="repl-inp" placeholder="Replacement..."><div style="display:flex;gap:14px;margin-top:10px"><label style="display:flex;align-items:center;gap:6px;font-size:12px;cursor:pointer"><input type="checkbox" id="find-case"> Case sensitive</label><label style="display:flex;align-items:center;gap:6px;font-size:12px;cursor:pointer"><input type="checkbox" id="find-regex"> Regex</label></div><div id="find-result" style="font-size:11px;color:var(--t2);margin-top:8px;min-height:16px"></div></div><div class="mfoot"><button class="btn btns" onclick="closeModal('modal-find')">Cancel</button><button class="btn btns" onclick="doFind()">Find Next</button><button class="btn btnp" onclick="doReplace()">Replace All</button></div></div></div>

<div class="moverlay" id="modal-goto"><div class="mbox narrow"><div class="mtbar"><div class="mtitle">Go to Line</div><button class="mclose" onclick="closeModal('modal-goto')">✕</button></div><div class="mbody"><label class="mlbl">Line Number</label><input type="number" class="minput" id="goto-line" min="1" placeholder="Enter line number" onkeydown="if(event.key==='Enter')doGoto()"></div><div class="mfoot"><button class="btn btns" onclick="closeModal('modal-goto')">Cancel</button><button class="btn btnp" onclick="doGoto()">Go</button></div></div></div>

<div class="moverlay" id="modal-save-named"><div class="mbox narrow"><div class="mtbar"><div class="mtitle">💾 Save Query</div><button class="mclose" onclick="closeModal('modal-save-named')">✕</button></div><div class="mbody"><label class="mlbl">Query Name</label><input type="text" class="minput" id="save-qname" placeholder="e.g. Monthly Revenue Report"></div><div class="mfoot"><button class="btn btns" onclick="closeModal('modal-save-named')">Cancel</button><button class="btn btnp" onclick="saveNamedQuery()">💾 Save</button></div></div></div>

<div class="moverlay" id="modal-saved"><div class="mbox"><div class="mtbar"><div class="mtitle">💾 Saved Queries</div><button class="mclose" onclick="closeModal('modal-saved')">✕</button></div><div class="mbody"><div id="saved-list"><div style="color:var(--t3);font-size:12px">No saved queries yet. Use File → Save Query with Name.</div></div></div><div class="mfoot"><button class="btn btnp" onclick="closeModal('modal-saved')">Close</button></div></div></div>

<div class="moverlay" id="modal-compare"><div class="mbox"><div class="mtbar"><div class="mtitle">Compare Two Tables</div><button class="mclose" onclick="closeModal('modal-compare')">✕</button></div><div class="mbody"><div class="minfo">Generates SQL to compare row counts and schema between two tables.</div><label class="mlbl">Table A</label><select class="mselect" id="cmp-a"></select><label class="mlbl">Table B</label><select class="mselect" id="cmp-b"></select></div><div class="mfoot"><button class="btn btns" onclick="closeModal('modal-compare')">Cancel</button><button class="btn btnp" onclick="generateCompare()">🔍 Compare</button></div></div></div>

<div class="moverlay" id="modal-vars"><div class="mbox narrow"><div class="mtbar"><div class="mtitle">🔧 Query Variables</div><button class="mclose" onclick="closeModal('modal-vars')">✕</button></div><div class="mbody"><div class="minfo">Your query contains <strong>{{variable}}</strong> placeholders. Enter values below then click Run.</div><div id="var-fields"></div></div><div class="mfoot"><button class="btn btns" onclick="closeModal('modal-vars')">Cancel</button><button class="btn btnp" onclick="runWithVars()">▶ Run Query</button></div></div></div>

<div class="moverlay" id="modal-backup"><div class="mbox"><div class="mtbar"><div class="mtitle">🗄 Database Backup (pg_dump style)</div><button class="mclose" onclick="closeModal('modal-backup')">✕</button></div><div class="mbody"><div class="minfo">Exports the entire database as a SQL dump file — just like <strong>pg_dump</strong>. Contains CREATE TABLE and INSERT statements for every table. You can re-import this file to restore your data.</div><div id="backup-preview" style="font-size:11px;color:var(--t2);margin-top:8px"></div></div><div class="mfoot"><button class="btn btns" onclick="closeModal('modal-backup')">Cancel</button><button class="btn btnp" onclick="doBackup()">📥 Download SQL Dump</button></div></div></div>

<div class="moverlay" id="modal-features"><div class="mbox wide"><div class="mtbar"><div class="mtitle">⭐ Complete Feature Reference</div><button class="mclose" onclick="closeModal('modal-features')">✕</button></div><div class="mbody"><div id="feature-ref-content" style="font-size:12px;line-height:1.8;color:var(--t1)"></div></div><div class="mfoot"><button class="btn btnp" onclick="closeModal('modal-features')">Close</button></div></div></div>

<div class="moverlay" id="modal-about"><div class="mbox narrow"><div class="mtbar"><div class="mtitle">ℹ About pgAdmin Simulator</div><button class="mclose" onclick="closeModal('modal-about')">✕</button></div><div class="mbody"><div style="text-align:center;padding:10px 0 20px">
<div style="font-size:52px;line-height:1;margin-bottom:8px">🐘</div>
<div style="font:700 20px/1 var(--sans);color:var(--t0);margin-bottom:6px">PostgreSQL (pgAdmin) Simulator</div>
<div style="font-size:12px;color:var(--pg3);margin-bottom:4px;font-weight:600">Version 3.2 — "The Elephant Edition"</div>
<div style="font-size:11px;color:var(--t2);line-height:1.8;margin-top:12px">
A complete PostgreSQL pgAdmin workbench running entirely in your browser.<br><br>
<strong style="color:var(--pg3)">No server. No install. No cost. Works offline.</strong><br><br>
Engine: sql.js (SQLite WASM) + PostgreSQL compatibility layer<br>
Charts: Chart.js 4.4 | CSV: PapaParse 5.4<br><br>
All data stays 100% on your device. Nothing sent to any server.<br>
Built for data scientists, students, educators, and analysts.</div>
<div style="margin-top:16px;padding-top:16px;border-top:1px solid var(--brd1)">
<div style="font:700 14px/1 var(--sans);color:var(--t0);margin-bottom:6px">👤 Built by Adewale Samson Adeagbo</div>
<div style="font-size:12px;color:var(--pg3);margin-bottom:4px;font-weight:600">Data Scientist · EdTech Builder · Virtual Tutor · AI-Augmented Solutions Developer</div>
<div style="font-size:11px;color:var(--t2);line-height:1.8">
DataTech Builder | FaithTech Builder<br>
15+ Years Teaching · 12 ML/EdTech Projects · 7 Industries<br>
B.Sc.(Ed) Computer Science Education, Lagos State University (2023)<br>
Founder: HMG Concepts | HMG Academy | HMG Technologies<br><br>
<a href="https://cssadewale.pages.dev" target="_blank" style="color:var(--pg3)">cssadewale.pages.dev</a> · 
<a href="https://github.com/cssadewale" target="_blank" style="color:var(--pg3)">github.com/cssadewale</a><br>
<a href="https://linkedin.com/in/adewalesamsonadeagbo" target="_blank" style="color:var(--pg3)">linkedin.com/in/adewalesamsonadeagbo</a><br>
<a href="https://hmgacademy.pages.dev" target="_blank" style="color:var(--pg3)">hmgacademy.pages.dev</a> · 
<a href="https://hmgconcepts.pages.dev" target="_blank" style="color:var(--pg3)">hmgconcepts.pages.dev</a><br>
📱 +234 810 086 6322 | +234 809 448 1488<br>
📧 hismarvellousgrace@gmail.com · buildingmyictcareer@gmail.com<br>
🇳🇬 Lagos / Ogun State, Nigeria
</div></div></div></div><div class="mfoot"><button class="btn btnp" onclick="closeModal('modal-about')">Close</button></div></div></div>

<script>
'use strict';
// ═══════════════════════════════════════════════════════════════════════
// PostgreSQL (pgAdmin) Simulator v4.0 — Full Application Logic
// Engine: sql.js (SQLite WASM) with comprehensive PostgreSQL compat layer
// Author: Adewale Samson Adeagbo
// ═══════════════════════════════════════════════════════════════════════

// ── GLOBAL STATE ──────────────────────────────────────
let DB=null,DB_TYPE=null,TABLES={},VIEWS={};
let HISTORY=JSON.parse(localStorage.getItem('pgas_hist')||'[]');
let SAVED=JSON.parse(localStorage.getItem('pgas_saved')||'[]');
let ALL_ROWS=[],CUR_ROWS=[],CUR_COLS=[];
let TABS=[],ACTIVE_TAB=null,TAB_ID=1;
let CTX_TBL=null,CHART_OBJ=null;
let SORT_COL=null,SORT_DIR='asc';
let IN_TXN=false,RUNNING=false,PENDING=null;
let PREFS={fs:13,lh:1.75,limit:1000,tw:2};
let THEME=localStorage.getItem('pgas_theme')||'dark';
let FOCUSED_CELL=null;
let CELL_CTX_VAL=null,CELL_CTX_ROW_IDX=null,CELL_CTX_COL=null;
let PENDING_SQL='',PENDING_VARS=[];
const TIMING_HISTORY=[],MAX_SPARKS=10;

// ── INITIALIZATION ───────────────────────────────────
window.addEventListener('DOMContentLoaded',()=>{
  loadPrefs();applyPrefs();applyTheme();initTabs();renderSnippets();renderRPanel('properties');buildHelp();buildFeatureRef();
  setInterval(clockTick,1000);clockTick();
  document.addEventListener('dragover',e=>e.preventDefault());
  document.addEventListener('drop',e=>{e.preventDefault();if(e.dataTransfer.files.length)handleImport(e.dataTransfer.files);});
  document.addEventListener('keydown',globalKey);
  document.addEventListener('click',e=>{if(!e.target.closest('.ctxmenu'))document.getElementById('ctxmenu').classList.remove('on');if(!e.target.closest('.cell-ctx'))document.getElementById('cell-ctx').classList.remove('on');});
  initDB();
});

async function initDB(){
  setConn('busy','Connecting to PostgreSQL...');
  try{
    await new Promise((ok,fail)=>{
      const s=document.createElement('script');
      s.src='https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.11.0/sql-wasm.js';
      s.onload=ok;s.onerror=fail;document.head.appendChild(s);
    });
    const SQL=await window.initSqlJs({locateFile:f=>`https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.11.0/${f}`});
    DB=new SQL.Database();DB_TYPE='sqlite';
    setConn('ok','🐘 PostgreSQL 15 (localhost:5432)');
    setEng('🐘 PostgreSQL 15 Compatible');
    toast('PostgreSQL engine ready — pgAdmin Simulator v4.0','ok');
    renderRPanel('properties');
    renderDashboard();
  }catch(e){
    setConn('err','Connection Failed');
    setEng('Engine Failed');
    toast('Engine load failed. Check internet for first-time setup.','err');
  }
}

// ── POSTGRESQL TO SQLITE TRANSLATION ─────────────────
function pg2sq(sql){
  return sql
    .replace(/::(text|varchar($\d+$)?|char($\d+$)?|integer|int[248]?|bigint|smallint|numeric($\d+,\d+$)?|decimal($\d+,\d+$)?|real|float|double precision|boolean|bool|date|timestamp(\s+with(out)?\s+time\s+zone)?|jsonb?)/gi,'')
    .replace(/\bILIKE\b/gi,'LIKE')
    .replace(/\b(SERIAL|BIGSERIAL|SMALLSERIAL)\b/gi,'INTEGER')
    .replace(/\bBOOLEAN\b/gi,'INTEGER')
    .replace(/\bTRUE\b/g,'1').replace(/\bFALSE\b/g,'0')
    .replace(/NOW\s*$\s*$/gi,"datetime('now')")
    .replace(/CURRENT_TIMESTAMP/gi,"datetime('now')")
    .replace(/CURRENT_DATE/gi,"date('now')")
    .replace(/CURRENT_TIME/gi,"time('now')")
    .replace(/DATE_TRUNC\s*$\s*'(\w+)'\s*,\s*([^)]+)$/gi,(_,p,c)=>{
      const m={year:"'%Y-01-01'",month:"'%Y-%m-01'",day:"'%Y-%m-%d'",hour:"'%Y-%m-%d %H:00:00'"};
      return `strftime(${m[p.toLowerCase()]||"'%Y-%m-%d'"},${c})`;
    })
    .replace(/EXTRACT\s*$\s*(\w+)\s+FROM\s+([^)]+)$/gi,(_,p,c)=>{
      const m={year:'%Y',month:'%m',day:'%d',hour:'%H',minute:'%M',second:'%S',dow:'%w',week:'%W'};
      return m[p.toLowerCase()]?`CAST(strftime('${m[p.toLowerCase()]}',${c}) AS INTEGER)`:c;
    })
    .replace(/STRING_AGG\s*$([^,]+),\s*([^)]+)$/gi,'GROUP_CONCAT($1,$2)')
    .replace(/ARRAY_AGG\s*$([^)]+)$/gi,'GROUP_CONCAT($1)')
    .replace(/\bVARCHAR(\s*$\s*\d+\s*$)?\b/gi,'TEXT')
    .replace(/\bCHAR(\s*$\s*\d+\s*$)?\b/gi,'TEXT')
    .replace(/\b(DOUBLE PRECISION|NUMERIC(\s*$\d+,\d+$)?|DECIMAL(\s*$\d+,\d+$)?)\b/gi,'REAL')
    .replace(/STDDEV\s*$/gi,'STDEV(')
    .replace(/CONCAT\s*\(([^)]+)$/gi,(_,a)=>a.split(',').map(s=>s.trim()).join('||'))
    .replace(/ON\s+CONFLICT\s*$[^)]*$\s*DO\s+NOTHING/gi,'OR IGNORE')
    .replace(/RETURNING\s+[^;]+/gi,'');
}

// ── SQL EXECUTION ────────────────────────────────────
function runSQL(sql){
  if(!DB)throw new Error('Database engine not ready. Refresh the page.');
  try{
    const r=DB.exec(pg2sq(sql));
    if(!r.length)return{rows:[],fields:[],rowCount:0,ddl:true};
    const cols=r[0].columns;
    const rows=r[0].values.map(v=>{const o={};cols.forEach((c,i)=>o[c]=v[i]);return o;});
    return{rows,fields:cols.map(c=>({name:c})),rowCount:rows.length};
  }catch(e){throw new Error(e.message||String(e));}
}

// ── RUN QUERY ─────────────────────────────────────────
async function runQuery(){
  if(!DB){toast('Engine not ready — refresh the page','err');return;}
  if(RUNNING)return;
  const ed=document.getElementById('editor');
  const sel=ed.value.substring(ed.selectionStart,ed.selectionEnd).trim();
  const sql=sel||ed.value.trim();
  if(!sql){toast('No query to run','warn');return;}
  // Check for template variables
  const vars=extractVars(sql);
  if(vars.length>0){PENDING_SQL=sql;PENDING_VARS=vars;showVarDialog(vars);return;}
  RUNNING=true;setRunState(true);showLoading('Executing query...');
  const t0=performance.now();
  try{
    const stmts=splitSQL(sql);let last=null;
    for(let i=0;i<stmts.length;i++){
      if(stmts.length>1)setLoadMsg(`Statement ${i+1}/${stmts.length}...`);
      last=runSQL(stmts[i]);
    }
    const ms=(performance.now()-t0).toFixed(1);
    const res=last||{rows:[],fields:[]};
    addHistory(sql,true,ms);syncTables();
    addSparkTiming(ms);
    if(res.rows&&res.rows.length>0){
      ALL_ROWS=res.rows;CUR_ROWS=res.rows;
      CUR_COLS=res.fields.length?res.fields:Object.keys(res.rows[0]).map(n=>({name:n}));
      renderGrid(CUR_ROWS,CUR_COLS);showExports(true);showFilterBar(true);
      document.getElementById('res-timing').textContent=`${res.rows.length.toLocaleString()} rows in ${ms}ms`;
      document.getElementById('ef-timing').textContent=`Last: ${ms}ms`;
      document.getElementById('ef-status').textContent='✓ OK';
      switchResTab('data');setMsg(`✓ Query returned ${res.rows.length.toLocaleString()} rows in ${ms}ms`,'ok');
      populatePivot(CUR_COLS.map(f=>f.name||f));
      renderDashboard();
      setTimeout(()=>{setupGridContextMenu();setupGridKeyNav();},100);
    }else{
      showEmptyState('Query Executed Successfully',`Done in ${ms}ms. The query ran but returned 0 rows.`);
      setMsg(`✓ Done in ${ms}ms`,'ok');ALL_ROWS=[];CUR_ROWS=[];CUR_COLS=[];
      showExports(false);showFilterBar(false);switchResTab('messages');
      document.getElementById('ef-timing').textContent=`Last: ${ms}ms`;
      document.getElementById('ef-status').textContent='✓ OK';
    }
    SORT_COL=null;
  }catch(e){
    const ms=(performance.now()-t0).toFixed(1);
    addHistory(sql,false,ms);setMsg(e.message,'err');
    switchResTab('messages');toast('Query error — see Messages tab','err');
    document.getElementById('res-timing').textContent='Error';
    document.getElementById('ef-status').textContent='✕ ERROR';
    document.getElementById('ef-timing').textContent=`Last: ${ms}ms`;
  }finally{RUNNING=false;setRunState(false);hideLoading();renderRPanel('properties');renderDashboard();}
}

// ── EXPLAIN PLAN ──────────────────────────────────────
async function explainQuery(){
  const sql=getSQL();if(!sql){toast('No query','warn');return;}
  setRunState(true);showLoading('Generating Explain Plan...');
  try{
    let plan='';
    try{const r=runSQL(`EXPLAIN ${sql}`);plan=r.rows.map(row=>Object.values(row)[0]).join('\n');}
    catch(e){
      const tbls=(sql.match(/(?:FROM|JOIN)\s+"?(\w+)"?/gi)||[]).map(s=>s.replace(/(?:FROM|JOIN)\s+/i,'').replace(/"/g,''));
      plan=[
        '── EXPLAIN PLAN (Estimated) ──',
        `│ Statement: ${sql.trim().toUpperCase().startsWith('SELECT')?'SELECT (Read)':'WRITE'}`,
        `│ Tables:    ${[...new Set(tbls)].join(', ')||'none'}`,
        '│',
        '│ Optimization Tips:',
        '│  • Seq Scan on large table = slow → Add index on WHERE/JOIN columns',
        '│  • Index Scan = fast → Engine uses existing index',
        '│  • Use Ctrl+Shift+E (Explain Analyze) to measure actual runtime',
        '│',
        `│ ${/GROUP BY/i.test(sql)?'■ Hash Aggregate (GROUP BY)':'No aggregation'}`,
        `│ ${/ORDER BY/i.test(sql)?'■ Sort operation (ORDER BY)':'No sorting'}`,
        `│ ${/LIMIT/i.test(sql)?'■ LIMIT applied':'No row limit'}`,
      ].join('\n');
    }
    renderExplain(plan);switchResTab('explain');
  }finally{setRunState(false);hideLoading();}
}

async function explainAnalyze(){
  const sql=getSQL();if(!sql){toast('No query','warn');return;}
  setRunState(true);showLoading('Running EXPLAIN ANALYZE...');
  try{
    const t0=performance.now();let rows=0;
    try{const r=runSQL(sql);rows=r.rows.length;}catch(e){}
    const ms=(performance.now()-t0).toFixed(2);
    renderExplain([
      '── EXPLAIN ANALYZE (Actual Execution) ──',
      `│ Execution Time: ${ms}ms`,
      `│ Rows Returned:  ${rows.toLocaleString()}`,
      '│',
      '│ Legend:',
      '│  ⬜ Seq Scan    = Full table scan (slow on large tables)',
      '│  🟢 Index Scan  = Uses an index (fast)',
      '│  🔵 Hash Join   = Joining via hash table',
      '│  🟣 Nested Loop = Row-by-row join (can be slow)',
      '│  ⬛ Sort        = ORDER BY sorting',
    ].join('\n'),true);
    switchResTab('explain');
  }finally{setRunState(false);hideLoading();}
}

// ── TRANSACTIONS ──────────────────────────────────────
function beginTxn(){try{runSQL('BEGIN');IN_TXN=true;document.getElementById('txnbar').classList.add('on');document.getElementById('sb-txn').style.display='';toast('Transaction started — Commit or Rollback when done.','info');}catch(e){toast('Cannot begin: '+e.message,'err');}}
function commitTxn(){if(!IN_TXN){toast('No active transaction','warn');return;}try{runSQL('COMMIT');IN_TXN=false;document.getElementById('txnbar').classList.remove('on');document.getElementById('sb-txn').style.display='none';syncTables();toast('✓ Transaction committed successfully.','ok');}catch(e){toast('Commit failed: '+e.message,'err');}}
function rollbackTxn(){if(!IN_TXN){toast('No active transaction','warn');return;}try{runSQL('ROLLBACK');IN_TXN=false;document.getElementById('txnbar').classList.remove('on');document.getElementById('sb-txn').style.display='none';toast('↩ Transaction rolled back — all changes undone.','ok');}catch(e){toast('Rollback failed: '+e.message,'err');}}
function cancelQuery(){RUNNING=false;}

// ── SCHEMA OPERATIONS ────────────────────────────────
function listAllTables(){document.getElementById('editor').value="SELECT name AS table_name, type FROM sqlite_master WHERE type='table' AND name NOT LIKE 'sqlite_%' ORDER BY name;";updateGutter();runQuery();}
function listAllViews(){document.getElementById('editor').value="SELECT name AS view_name FROM sqlite_master WHERE type='view' ORDER BY name;";updateGutter();runQuery();}
function listIndexes(){document.getElementById('editor').value="SELECT name AS index_name, tbl_name AS table_name, sql FROM sqlite_master WHERE type='index' AND name NOT LIKE 'sqlite_%' ORDER BY tbl_name;";updateGutter();runQuery();}
function dbSize(){const tables=Object.keys(TABLES);if(!tables.length){toast('No tables loaded','warn');return;}const sql=tables.map(t=>`SELECT '${t}' AS table_name, COUNT(*) AS row_count FROM "${t}"`).join('\nUNION ALL\n');document.getElementById('editor').value=`-- Database Size Summary\n${sql}\nORDER BY row_count DESC;`;updateGutter();runQuery();}
function runSQL_pgCatalog(type){
  if(type==='tables'){
    document.getElementById('editor').value=`-- pg_catalog simulation: information_schema.tables\nSELECT name AS table_name, type FROM sqlite_master WHERE type IN ('table','view') AND name NOT LIKE 'sqlite_%' ORDER BY name;`;
  }else if(type==='columns'){
    document.getElementById('editor').value=`-- pg_catalog simulation: information_schema.columns\n-- Shows all columns across all tables\nSELECT tbl_name AS table_name, name AS column_name, type AS data_type\nFROM sqlite_master m\nJOIN pragma_table_info(m.name) ON 1=1\nWHERE m.type='table' AND m.name NOT LIKE 'sqlite_%'\nORDER BY m.name, name;`;
  }
  updateGutter();runQuery();
}

// ── IMPORT / EXPORT ──────────────────────────────────
function importData(){document.getElementById('file-data').click();}
function handleImport(files){
  if(!files||!files.length)return;
  const f=files[0];
  const sug=f.name.replace(/\.[^.]+$/,'').toLowerCase().replace(/[^a-z0-9_]/g,'_').replace(/^(\d)/,'t$1');
  document.getElementById('imp-name').value=sug;
  PENDING={file:f};
  document.getElementById('imp-prog-wrap').style.display='none';document.getElementById('imp-bar').style.width='0';
  document.getElementById('imp-preview-wrap').style.display='none';
  openModal('modal-import');
  readFile(f,{preview:5}).then(data=>{if(data&&data.length)showPreview(data.slice(0,5));}).catch(()=>{});
}

async function readFile(file,opts={}){
  const ext=file.name.split('.').pop().toLowerCase();
  if(ext==='json'){const t=await file.text();let d=JSON.parse(t);if(!Array.isArray(d))d=Object.values(d).find(v=>Array.isArray(v))||[d];return d;}
  return new Promise((ok,fail)=>{Papa.parse(file,{header:true,skipEmptyLines:true,dynamicTyping:true,preview:opts.preview||0,complete:r=>ok(r.data),error:e=>fail(e)});});
}

async function confirmImport(){
  if(!PENDING)return;
  let name=document.getElementById('imp-name').value.trim().toLowerCase().replace(/[^a-z0-9_]/g,'_');
  if(!name){toast('Enter table name','err');return;}
  if(/^\d/.test(name))name='t_'+name;
  const conflict=document.getElementById('imp-conflict').value;
  const hdr=document.getElementById('opt-hdr').checked;
  const trimWs=document.getElementById('opt-trim').checked;
  const infer=document.getElementById('opt-infer').checked;
  const pw=document.getElementById('imp-prog-wrap'),bar=document.getElementById('imp-bar'),lbl=document.getElementById('imp-lbl');
  pw.style.display='block';document.getElementById('imp-confirm').disabled=true;
  try{
    lbl.textContent='Reading file...';bar.style.width='10%';
    const data=await readFile(PENDING.file);
    if(!data||!data.length)throw new Error('No data found in file.');
    lbl.textContent=`Parsed ${data.length.toLocaleString()} rows`;bar.style.width='30%';
    if(conflict==='replace'){try{runSQL(`DROP TABLE IF EXISTS "${name}"`);}catch(e){}}
    else if(conflict==='skip'&&TABLES[name]){toast(`Table "${name}" exists — skipped.`,'warn');closeModal('modal-import');return;}
    const origCols=Object.keys(data[0]);
    const cleanCols=origCols.map(c=>String(trimWs?String(c).trim():c).toLowerCase().replace(/[^a-z0-9_]/g,'_').replace(/^(\d)/,'c$1')||'col');
    const types=infer?inferTypes(data,origCols,cleanCols):cleanCols.reduce((a,c)=>{a[c]='TEXT';return a;},{});
    if(conflict!=='append'||!TABLES[name]){
      const defs=cleanCols.map(c=>`"${c}" ${types[c]}`).join(',');
      runSQL(`CREATE TABLE IF NOT EXISTS "${name}" (${defs})`);
    }
    lbl.textContent='Inserting rows...';bar.style.width='45%';
    const BATCH=300;
    for(let i=0;i<data.length;i+=BATCH){
      bar.style.width=(45+((i/data.length)*50))+'%';
      lbl.textContent=`Rows ${i.toLocaleString()}-${Math.min(i+BATCH,data.length).toLocaleString()} of ${data.length.toLocaleString()}...`;
      const batch=data.slice(i,i+BATCH);
      const ph=batch.map(()=>'('+cleanCols.map(()=>'?').join(',')+')').join(',');
      const vals=batch.flatMap(row=>origCols.map((c,ci)=>{const v=row[c];if(v===null||v===undefined)return null;return trimWs&&typeof v==='string'?v.trim():v;}));
      try{const s=DB.prepare(`INSERT INTO "${name}" VALUES ${ph}`);s.run(vals);s.free();}catch(e){}
    }
    bar.style.width='100%';lbl.textContent='Import complete!';
    TABLES[name]={cols:cleanCols.map((c,i)=>({name:c,type:types[c]})),rows:data.length,file:PENDING.file.name};
    syncTables();closeModal('modal-import');
    autoSelect(name,cleanCols);
    toast(`✓ Table "${name}" created — ${data.length.toLocaleString()} rows, ${cleanCols.length} columns`,'ok');
  }catch(e){toast('Import error: '+e.message,'err');lbl.textContent='Error: '+e.message;}
  finally{document.getElementById('imp-confirm').disabled=false;PENDING=null;}
}

// ── TABLE TREE (Browser) ────────────────────────────
function renderTableTree(filter){
  const el=document.getElementById('browser-tables-inner');
  const names=Object.keys(TABLES).filter(n=>!filter||n.toLowerCase().includes(filter.toLowerCase())||(TABLES[n].cols||[]).some(c=>c.name.toLowerCase().includes(filter.toLowerCase())));
  if(!names.length){el.innerHTML=`<div style="padding:10px 8px;color:var(--t3);font-size:10px">${filter?`No match for "${eH(filter)}"`:'No tables yet. Use <strong style="color:var(--pg3)">Import</strong> or <strong style="color:var(--pg3)">Samples</strong>.'}</div>`;return;}
  el.innerHTML=names.map(name=>{
    const t=TABLES[name];
    const colsHtml=(t.cols||[]).map(c=>`<div class="colrow"><span class="pill ${pillClass(c.type)}">${shortType(c.type)}</span><span style="color:var(--t0)">${eH(c.name)}</span></div>`).join('');
    return `<div><div class="tgrp-hd" onclick="toggleGroup('${name}')"><span class="tgrp-arr" id="arr-${name}">▶</span><span style="font-size:12px;color:var(--pg3)">📋</span><span style="font-size:12px;color:var(--t0);flex:1">${eH(name)}</span><span style="font-size:10px;color:var(--t3)">${(t.rows||0).toLocaleString()}</span></div><div id="grp-${name}" style="display:none"><div class="tnode" oncontextmenu="openCtx(event,'${name}')" onclick="selectTable('${name}')"><div class="nacts"><button class="nab" onclick="event.stopPropagation();quickSelect('${name}')" title="SELECT *">▶</button><button class="nab" onclick="event.stopPropagation();countTable('${name}')" title="COUNT">N</button><button class="nab d" onclick="event.stopPropagation();dropTable('${name}')" title="Drop">✕</button></div></div>${colsHtml}</div></div>`;
  }).join('');
}

// ── RESULTS GRID ──────────────────────────────────────
function renderGrid(rows,fields){
  const wrap=document.getElementById('dgwrap');const grid=document.getElementById('dg');
  const cols=fields.map(f=>f.name||f);const max=PREFS.limit;
  setupChart(cols,rows);
  const fcol=document.getElementById('filter-col');
  fcol.innerHTML='<option value="">All columns</option>'+cols.map(c=>`<option value="${eH(c)}">${eH(c)}</option>`).join('');
  let h=`<thead><tr><th class="rnt">#</th>`;
  h+=cols.map((c,i)=>`<th id="th${i}" onclick="sortCol(${i})" title="Click to sort by ${eH(c)}">${eH(c)}</th>`).join('');
  h+=`</tr></thead><tbody>`;
  rows.slice(0,max).forEach((row,ri)=>{
    h+=`<tr onclick="this.classList.toggle('selrow')" ondblclick="showRowDetail(${ri})"><td class="rnc">${ri+1}</td>`;
    cols.forEach(c=>{h+=cellHtml(row[c]);});h+=`</tr>`;
  });
  h+=`</tbody>`;grid.innerHTML=h;
  document.getElementById('empty-state').style.display='none';wrap.style.display='block';
  document.getElementById('row-badge').textContent=rows.length.toLocaleString();
  document.getElementById('ef-rows').textContent=`${rows.length.toLocaleString()} rows`;
  document.getElementById('sb-rows').textContent=`Rows: ${rows.length.toLocaleString()}`;
  if(rows.length>max)toast(`Showing ${max.toLocaleString()} of ${rows.length.toLocaleString()} rows. Increase limit in Preferences.`,'warn');
}

// ── CELL CONTEXT MENU ─────────────────────────────────
function setupGridContextMenu(){
  document.getElementById('dg').addEventListener('contextmenu',function(e){
    const td=e.target.closest('td');if(!td)return;e.preventDefault();
    const tr=td.closest('tr');const colIdx=td.cellIndex-1;
    if(colIdx<0)return;const rowIdx=[...tr.parentElement.children].indexOf(tr);
    const col=CUR_COLS[colIdx]?CUR_COLS[colIdx].name||CUR_COLS[colIdx]:null;
    if(!col)return;
    CELL_CTX_VAL=CUR_ROWS[rowIdx]?CUR_ROWS[rowIdx][col]:null;
    CELL_CTX_ROW_IDX=rowIdx;CELL_CTX_COL=col;
    const m=document.getElementById('cell-ctx');
    m.style.left=e.clientX+'px';m.style.top=e.clientY+'px';m.classList.add('on');
  });
}

// ── GRID KEYBOARD NAVIGATION ─────────────────────────
function setupGridKeyNav(){
  const dg=document.getElementById('dg');
  dg.addEventListener('click',function(e){const td=e.target.closest('td');if(!td||td.classList.contains('rnc'))return;setFocusedCell(td);});
}
function setFocusedCell(td){
  document.querySelectorAll('.dg td.focused').forEach(el=>el.classList.remove('focused'));
  td.classList.add('focused');td.setAttribute('tabindex','0');td.focus();
  const tr=td.closest('tr');const rowIdx=[...tr.parentElement.children].indexOf(tr);
  const colIdx=td.cellIndex;FOCUSED_CELL={row:rowIdx,col:colIdx};
}
function handleGridKey(e){
  if(!FOCUSED_CELL)return;
  const dg=document.getElementById('dg');const rows=dg.querySelectorAll('tbody tr');
  if(!rows.length)return;let{row,col}=FOCUSED_CELL;
  if(e.key==='ArrowDown'){e.preventDefault();row=Math.min(row+1,rows.length-1);}
  else if(e.key==='ArrowUp'){e.preventDefault();row=Math.max(row-1,0);}
  else if(e.key==='ArrowRight'){e.preventDefault();col=Math.min(col+1,rows[0].cells.length-1);}
  else if(e.key==='ArrowLeft'){e.preventDefault();col=Math.max(col-1,1);}
  else if(e.key==='Enter'){
    const td=rows[FOCUSED_CELL.row]?.cells[FOCUSED_CELL.col];
    if(td){navigator.clipboard.writeText(td.title||td.textContent||'').then(()=>{td.classList.add('copied');setTimeout(()=>td.classList.remove('copied'),500);toast('Copied','ok');}).catch(()=>{});}return;
  }else return;
  const td=rows[row]?.cells[col];if(td)setFocusedCell(td);
}

// ── CHART ─────────────────────────────────────────────
function setupChart(cols,rows){
  const x=document.getElementById('ch-x'),y=document.getElementById('ch-y');
  const opts=cols.map(c=>`<option value="${eH(c)}">${eH(c)}</option>`).join('');
  x.innerHTML=opts;y.innerHTML=opts;
  const numCols=cols.filter(c=>rows.some(r=>typeof r[c]==='number'));
  if(numCols.length)y.value=numCols[0];if(cols.length>1)x.value=cols[0];
  document.getElementById('chart-ctrl').style.display='flex';document.getElementById('chart-empty').style.display='none';
}
function drawChart(){
  const type=document.getElementById('ch-type').value;
  const xc=document.getElementById('ch-x').value,yc=document.getElementById('ch-y').value;
  if(!ALL_ROWS.length||!xc||!yc)return;
  const canvas=document.getElementById('chartCanvas');
  if(CHART_OBJ)CHART_OBJ.destroy();
  const sample=ALL_ROWS.slice(0,200);
  const labels=sample.map(r=>String(r[xc]??''));
  const data=sample.map(r=>Number(r[yc])||0);
  const colors=data.map((_,i)=>`hsl(${(210+i*37)%360},65%,55%)`);
  CHART_OBJ=new Chart(canvas,{
    type:type==='scatter'?'scatter':type,
    data:{labels:type==='scatter'?undefined:labels,datasets:[{label:yc,data:type==='scatter'?sample.map(r=>({x:Number(r[xc])||0,y:Number(r[yc])||0})):data,backgroundColor:type==='line'?'rgba(51,103,145,.18)':colors,borderColor:type==='line'?'#4a85b5':colors,borderWidth:1.5,fill:type==='line',tension:.4,pointRadius:type==='line'?2:4}]},
    options:{responsive:true,plugins:{legend:{labels:{color:'#9baabf',font:{family:'IBM Plex Mono',size:11}}}},scales:type!=='pie'&&type!=='doughnut'?{x:{ticks:{color:'#5c6b80',maxRotation:45},grid:{color:'#1c2133'}},y:{ticks:{color:'#5c6b80'},grid:{color:'#1c2133'}}}:{}}
  });
}

// ── PIVOT TABLE ───────────────────────────────────────
function populatePivot(cols){
  ['pv-row','pv-col','pv-val'].forEach(id=>{const el=document.getElementById(id);el.innerHTML='<option value="-">-</option>'+cols.map(c=>`<option value="${eH(c)}">${eH(c)}</option>`).join('');});
}
function renderPivot(){
  const rF=document.getElementById('pv-row').value,cF=document.getElementById('pv-col').value,vF=document.getElementById('pv-val').value;
  const agg=document.getElementById('pv-agg').value;
  if(rF==='-'||cF==='-'||vF==='-')return;
  if(!ALL_ROWS.length){document.getElementById('pivot-output').innerHTML='<div style="color:var(--t3);font-size:12px">No data. Run a query first.</div>';return;}
  const rowVals=[...new Set(ALL_ROWS.map(r=>String(r[rF]??'')))].sort();
  const colVals=[...new Set(ALL_ROWS.map(r=>String(r[cF]??'')))].sort();
  const grouped={};
  ALL_ROWS.forEach(row=>{const rk=String(row[rF]??''),ck=String(row[cF]??''),v=Number(row[vF])||0;if(!grouped[rk])grouped[rk]={};if(!grouped[rk][ck])grouped[rk][ck]=[];grouped[rk][ck].push(v);});
  const agg_fn=(arr)=>{if(!arr||!arr.length)return'-';if(agg==='count')return arr.length;if(agg==='sum')return arr.reduce((a,b)=>a+b,0).toFixed(2);if(agg==='avg')return(arr.reduce((a,b)=>a+b,0)/arr.length).toFixed(2);if(agg==='min')return Math.min(...arr);if(agg==='max')return Math.max(...arr);return arr.length;};
  let h=`<table style="border-collapse:collapse;font-size:12px;width:100%"><thead><tr><th style="background:var(--bg2);border:1px solid var(--brd1);padding:7px 10px;text-align:left;color:var(--t2);font-weight:600">${eH(rF)}</th>`;
  colVals.forEach(c=>{h+=`<th style="background:var(--bg2);border:1px solid var(--brd1);padding:7px 10px;text-align:right;color:var(--pg3);font-weight:600">${eH(c)}</th>`;});
  h+=`<th style="background:var(--bg2);border:1px solid var(--brd1);padding:7px 10px;text-align:right;color:var(--amb);font-weight:600">Total</th></tr></thead><tbody>`;
  rowVals.forEach((rk,ri)=>{
    h+=`<tr${ri%2===1?' style="background:rgba(25,29,41,.5)"':''}><td style="border:1px solid var(--brd0);padding:6px 10px;color:var(--t0);font-weight:600">${eH(rk)}</td>`;
    let tot=0;colVals.forEach(ck=>{const arr=grouped[rk]?grouped[rk][ck]||[]:[];const val=agg_fn(arr);if(val!=='-')tot+=Number(val)||0;h+=`<td style="border:1px solid var(--brd0);padding:6px 10px;text-align:right;color:#79b8ff">${val}</td>`;});
    h+=`<td style="border:1px solid var(--brd0);padding:6px 10px;text-align:right;color:var(--amb);font-weight:600">${tot.toFixed(2)}</td></tr>`;
  });
  h+=`</tbody></table>`;document.getElementById('pivot-output').innerHTML=h;
}

// ── EXPORTS ───────────────────────────────────────────
function exportCSV(){if(!ALL_ROWS.length){toast('No data','warn');return;}const cols=Object.keys(ALL_ROWS[0]);const lines=[cols.join(',')];ALL_ROWS.forEach(row=>lines.push(cols.map(c=>{const v=row[c];if(v===null||v===undefined)return'';const s=String(v);return(s.includes(',')||s.includes('"')||s.includes('\n'))?`"${s.replace(/"/g,'""')}"`:s;}).join(',')));dl('results.csv',lines.join('\n'),'text/csv');toast('✓ CSV exported','ok');}
function exportJSON(){if(!ALL_ROWS.length){toast('No data','warn');return;}dl('results.json',JSON.stringify(ALL_ROWS,null,2),'application/json');toast('✓ JSON exported','ok');}
function exportExcel(){if(!ALL_ROWS.length){toast('No data','warn');return;}const cols=Object.keys(ALL_ROWS[0]);const lines=[cols.join('\t')];ALL_ROWS.forEach(row=>lines.push(cols.map(c=>String(row[c]??'')).join('\t')));dl('results.tsv',lines.join('\n'),'text/tab-separated-values');toast('✓ Excel TSV exported','ok');}
function exportSQLInserts(){if(!ALL_ROWS.length){toast('No data','warn');return;}const cols=Object.keys(ALL_ROWS[0]);const cl=cols.map(c=>`"${c}"`).join(', ');const lines=['-- Generated by pgAdmin Simulator',''];ALL_ROWS.forEach(row=>{const vals=cols.map(c=>{const v=row[c];if(v===null||v===undefined)return'NULL';if(typeof v==='number')return String(v);return`'${String(v).replace(/'/g,"''")}'`;}).join(', ');lines.push(`INSERT INTO "table_name" (${cl}) VALUES (${vals});`);});dl('results.sql',lines.join('\n'),'text/plain');toast('✓ SQL INSERTs exported','ok');}
function exportMarkdown(){if(!ALL_ROWS.length){toast('No data','warn');return;}const cols=Object.keys(ALL_ROWS[0]);const lines=['| '+cols.join(' | ')+' |','| '+cols.map(()=>'---').join(' | ')+' |'];ALL_ROWS.forEach(row=>lines.push('| '+cols.map(c=>String(row[c]??'').replace(/\|/g,'\\|')).join(' | ')+' |'));dl('results.md',lines.join('\n'),'text/markdown');toast('✓ Markdown exported','ok');}
function exportHTML(){if(!ALL_ROWS.length){toast('No data','warn');return;}const cols=Object.keys(ALL_ROWS[0]);let h='<!DOCTYPE html><html><head><meta charset="UTF-8"><title>pgAdmin Simulator - Results</title><style>table{border-collapse:collapse;font-family:monospace;font-size:13px}th{background:#336791;color:white;padding:7px 10px}td{padding:5px 10px;border-bottom:1px solid #ddd}tr:nth-child(even) td{background:#f5f7fa}</style></head><body><table><thead><tr>'+cols.map(c=>`<th>${eH(c)}</th>`).join('')+'</tr></thead><tbody>';ALL_ROWS.forEach(row=>{h+='<tr>'+cols.map(c=>{const v=row[c];return`<td>${v===null||v===undefined?'<em>NULL</em>':eH(String(v))}</td>`;}).join('')+'</tr>';});h+='</tbody></table>


<div class="moverlay" id="modal-favorites"><div class="mbox"><div class="mtbar"><div class="mtitle">⭐ Query Favorites</div><button class="mclose" onclick="closeModal('modal-favorites')">✕</button></div><div class="mbody"><div id="fav-list"><div style="color:var(--t3);font-size:12px">No favorites yet. Star queries from History tab (⭐ button).</div></div></div><div class="mfoot"><button class="btn btnp" onclick="closeModal('modal-favorites')">Close</button></div></div></div>

<div class="moverlay" id="modal-diff"><div class="mbox wide"><div class="mtbar"><div class="mtitle">🔄 Visual Schema Diff</div><button class="mclose" onclick="closeModal('modal-diff')">✕</button></div><div class="mbody"><label class="mlbl">Table A</label><select class="mselect" id="diff-a" onchange="renderSchemaDiff()"></select><label class="mlbl">Table B</label><select class="mselect" id="diff-b" onchange="renderSchemaDiff()"></select><div id="diff-output" style="margin-top:14px;font-size:12px;color:var(--t3)">Select two tables to compare their column structures.</div></div><div class="mfoot"><button class="btn btnp" onclick="closeModal('modal-diff')">Close</button></div></div></div>

<div class="moverlay" id="modal-cellview"><div class="mbox wide"><div class="mtbar"><div class="mtitle">🔍 Cell Content Viewer</div><button class="mclose" onclick="closeModal('modal-cellview')">✕</button></div><div class="mbody"><div id="cellview-info" style="font-size:11px;color:var(--t2);margin-bottom:10px"></div><div id="cellview-content" style="background:var(--bg5);border:1px solid var(--brd1);border-radius:var(--r);padding:14px;font-family:var(--mono);font-size:12px;line-height:1.7;overflow:auto;max-height:400px;white-space:pre-wrap;word-break:break-all;color:var(--t0)"></div></div><div class="mfoot"><button class="btn btns" onclick="copyCellToClipboard()">📋 Copy to Clipboard</button><button class="btn btnp" onclick="closeModal('modal-cellview')">Close</button></div></div></div>

</body></html>';dl('results.html',h,'text/html');toast('✓ HTML exported','ok');}
function printResults(){if(!ALL_ROWS.length){toast('No data','warn');return;}const cols=Object.keys(ALL_ROWS[0]);let h=`<!DOCTYPE html><html><head><meta charset="UTF-8"><title>pgAdmin Simulator - Results</title><style>body{font-family:Arial,sans-serif;font-size:12px;margin:20px}h2{color:#336791;margin-bottom:4px}p{color:#666;margin-bottom:12px;font-size:11px}table{border-collapse:collapse;width:100%}th{background:#336791;color:white;padding:7px 10px;text-align:left;font-size:11px}td{padding:6px 10px;border-bottom:1px solid #ddd;font-size:11px}tr:nth-child(even) td{background:#f5f7fa}@media print{@page{margin:15mm}}</style></head><body><h2>pgAdmin Simulator — Query Results</h2><p>Exported: ${new Date().toLocaleString()} | ${ALL_ROWS.length.toLocaleString()} rows</p><table><thead><tr>${cols.map(c=>`<th>${eH(c)}</th>`).join('')}</tr></thead><tbody>`;ALL_ROWS.forEach(row=>{h+=`<tr>${cols.map(c=>{const v=row[c];return`<td>${v===null||v===undefined?'NULL':eH(String(v))}</td>`;}).join('')}</tr>`;});h+=`</tbody></table><p style="text-align:center;color:#999;margin-top:20px;font-size:10px">Generated by pgAdmin Simulator — Built by Adewale Samson Adeagbo</p>


<div class="moverlay" id="modal-favorites"><div class="mbox"><div class="mtbar"><div class="mtitle">⭐ Query Favorites</div><button class="mclose" onclick="closeModal('modal-favorites')">✕</button></div><div class="mbody"><div id="fav-list"><div style="color:var(--t3);font-size:12px">No favorites yet. Star queries from History tab (⭐ button).</div></div></div><div class="mfoot"><button class="btn btnp" onclick="closeModal('modal-favorites')">Close</button></div></div></div>

<div class="moverlay" id="modal-diff"><div class="mbox wide"><div class="mtbar"><div class="mtitle">🔄 Visual Schema Diff</div><button class="mclose" onclick="closeModal('modal-diff')">✕</button></div><div class="mbody"><label class="mlbl">Table A</label><select class="mselect" id="diff-a" onchange="renderSchemaDiff()"></select><label class="mlbl">Table B</label><select class="mselect" id="diff-b" onchange="renderSchemaDiff()"></select><div id="diff-output" style="margin-top:14px;font-size:12px;color:var(--t3)">Select two tables to compare their column structures.</div></div><div class="mfoot"><button class="btn btnp" onclick="closeModal('modal-diff')">Close</button></div></div></div>

<div class="moverlay" id="modal-cellview"><div class="mbox wide"><div class="mtbar"><div class="mtitle">🔍 Cell Content Viewer</div><button class="mclose" onclick="closeModal('modal-cellview')">✕</button></div><div class="mbody"><div id="cellview-info" style="font-size:11px;color:var(--t2);margin-bottom:10px"></div><div id="cellview-content" style="background:var(--bg5);border:1px solid var(--brd1);border-radius:var(--r);padding:14px;font-family:var(--mono);font-size:12px;line-height:1.7;overflow:auto;max-height:400px;white-space:pre-wrap;word-break:break-all;color:var(--t0)"></div></div><div class="mfoot"><button class="btn btns" onclick="copyCellToClipboard()">📋 Copy to Clipboard</button><button class="btn btnp" onclick="closeModal('modal-cellview')">Close</button></div></div></div>

</body></html>`;const w=window.open('','_blank');w.document.write(h);w.document.close();w.focus();setTimeout(()=>w.print(),500);}
function saveQuery(){const sql=document.getElementById('editor').value;if(!sql.trim()){toast('Nothing to save','warn');return;}dl(`query_${Date.now()}.sql`,sql,'text/plain');toast('✓ Query saved as .sql file','ok');}
function saveNamedQuery(){const name=document.getElementById('save-qname').value.trim();const sql=document.getElementById('editor').value.trim();if(!name){toast('Enter a name','err');return;}if(!sql){toast('No query to save','warn');return;}SAVED.push({name,sql,time:new Date().toLocaleString()});try{localStorage.setItem('pgas_saved',JSON.stringify(SAVED));}catch(e){}closeModal('modal-save-named');document.getElementById('save-qname').value='';toast(`✓ Saved: ${name}`,'ok');renderSavedList();}
function renderSavedList(){const el=document.getElementById('saved-list');if(!SAVED.length){el.innerHTML='<div style="color:var(--t3);font-size:12px">No saved queries yet.</div>';return;}el.innerHTML=SAVED.map((q,i)=>`<div class="saved-item" onclick="loadSaved(${i})"><div style="flex:1;min-width:0"><div class="saved-name">${eH(q.name)}</div><div class="saved-sql">${eH(q.sql.substring(0,80))}</div><div style="font-size:10px;color:var(--t3);margin-top:2px">${q.time}</div></div><button class="nab d" onclick="event.stopPropagation();deleteSaved(${i})" title="Delete">✕</button></div>`).join('');}
function loadSaved(i){document.getElementById('editor').value=SAVED[i].sql;updateGutter();closeModal('modal-saved');toast(`Loaded: ${SAVED[i].name}`,'info');}
function deleteSaved(i){SAVED.splice(i,1);try{localStorage.setItem('pgas_saved',JSON.stringify(SAVED));}catch(e){}renderSavedList();}
function generateCompare(){const a=document.getElementById('cmp-a').value,b=document.getElementById('cmp-b').value;if(!a||!b){toast('Select two tables','warn');return;}document.getElementById('editor').value=`-- Compare "${a}" vs "${b}"\nSELECT '${a}' AS table_name, COUNT(*) AS row_count FROM "${a}"\nUNION ALL\nSELECT '${b}' AS table_name, COUNT(*) AS row_count FROM "${b}";`;updateGutter();closeModal('modal-compare');runQuery();}
function dl(name,content,type){const a=document.createElement('a');a.href=URL.createObjectURL(new Blob([content],{type}));a.download=name;a.click();setTimeout(()=>URL.revokeObjectURL(a.href),8000);}
function openFile(){document.getElementById('file-sql').click();}
function loadSQLFile(input){const f=input.files[0];if(!f)return;const r=new FileReader();r.onload=e=>{document.getElementById('editor').value=e.target.result;updateGutter();toast('Loaded: '+f.name,'ok');};r.readAsText(f);}

// ── EDITOR ────────────────────────────────────────────
function onEditorInput(){updateGutter();updateCursor();saveTab();}
function onEditorKey(e){
  const el=e.target;
  if((e.ctrlKey||e.metaKey)&&e.key==='Enter'){e.preventDefault();runQuery();return;}
  if(e.key==='Tab'){e.preventDefault();const sp=' '.repeat(PREFS.tw);const s=el.selectionStart,en=el.selectionEnd;if(s!==en){const before=el.value.slice(0,s),selected=el.value.slice(s,en),after=el.value.slice(en);const ind=selected.replace(/^/gm,sp);el.value=before+ind+after;el.selectionStart=s;el.selectionEnd=s+ind.length;}else{el.value=el.value.slice(0,s)+sp+el.value.slice(en);el.selectionStart=el.selectionEnd=s+PREFS.tw;}updateGutter();return;}
  const pairs={'(':')','{':'}','[':']',"'":"'",'"':'"'};
  if(pairs[e.key]&&!e.ctrlKey&&!e.metaKey){const s=el.selectionStart,en=el.selectionEnd;if(s===en){e.preventDefault();const cl=pairs[e.key];el.value=el.value.slice(0,s)+e.key+cl+el.value.slice(en);el.selectionStart=el.selectionEnd=s+1;return;}}
  setTimeout(updateCursor,0);
}
function toggleComment(){const el=document.getElementById('editor');const s=el.selectionStart;const ls=el.value.lastIndexOf('\n',s-1)+1;const line=el.value.slice(ls);el.value=/^-- ?/.test(line)?el.value.slice(0,ls)+line.replace(/^-- ?/,''):el.value.slice(0,ls)+'-- '+line;updateGutter();}
function duplicateLine(){const el=document.getElementById('editor');const s=el.selectionStart;const start=el.value.lastIndexOf('\n',s-1)+1;const end=el.value.indexOf('\n',s);const line=el.value.slice(start,end===-1?undefined:end);el.value=el.value.slice(0,end===-1?el.value.length:end)+'\n'+line+el.value.slice(end===-1?el.value.length:end);updateGutter();}
function deleteLine(){const el=document.getElementById('editor');const s=el.selectionStart;const ls=el.value.lastIndexOf('\n',s-1)+1;const le=el.value.indexOf('\n',s);if(le===-1)el.value=el.value.slice(0,ls>0?ls-1:0);else el.value=el.value.slice(0,ls)+el.value.slice(le+1);updateGutter();}
function formatSQL(){const el=document.getElementById('editor');let sql=el.value;const KW=['SELECT','FROM','WHERE','JOIN','INNER JOIN','LEFT JOIN','RIGHT JOIN','FULL OUTER JOIN','GROUP BY','ORDER BY','HAVING','LIMIT','OFFSET','ON','AND','OR','UNION','UNION ALL','EXCEPT','INTERSECT','INSERT INTO','VALUES','UPDATE','SET','DELETE FROM','CREATE TABLE','CREATE VIEW','DROP TABLE','WITH','RETURNING'];KW.forEach(k=>{sql=sql.replace(new RegExp(`\\b${k}\\b`,'gi'),k);});const NL=['FROM','WHERE','GROUP BY','ORDER BY','HAVING','LIMIT','OFFSET','JOIN','INNER JOIN','LEFT JOIN','RIGHT JOIN','UNION','UNION ALL'];NL.forEach(k=>{sql=sql.replace(new RegExp(`\\s+${k}\\b`,'g'),'\n'+k);});sql=sql.replace(/\n{3,}/g,'\n\n').trim();el.value=sql;updateGutter();toast('✓ SQL formatted','ok');}
function uppercaseSQL(){const el=document.getElementById('editor');const KW=['select','from','where','join','inner join','left join','right join','on','and','or','not','in','like','ilike','between','is null','is not null','exists','group by','order by','having','limit','offset','distinct','as','case','when','then','else','end','union','union all','with','over','partition by','insert into','values','update','set','delete from','create table','create view','drop table','alter table','returning','count','sum','avg','min','max','coalesce','nullif','cast','asc','desc','null','true','false'];let sql=el.value;KW.forEach(k=>{sql=sql.replace(new RegExp(`\\b${k}\\b`,'gi'),k.toUpperCase());});el.value=sql;updateGutter();toast('✓ Keywords uppercased','ok');}
function doFind(){const f=document.getElementById('find-inp').value;const cs=document.getElementById('find-case').checked;const rx_=document.getElementById('find-regex').checked;const el=document.getElementById('editor');let rx;try{rx=rx_?new RegExp(f,cs?'g':'gi'):new RegExp(f.replace(/[.*+?^${}()|[\]\\]/g,'\\$&'),cs?'g':'gi');}catch(e){document.getElementById('find-result').textContent='Invalid regex';return;}const m=[...el.value.matchAll(rx)];document.getElementById('find-result').textContent=`${m.length} match(es) found`;if(m.length){el.focus();el.setSelectionRange(m[0].index,m[0].index+m[0][0].length);}}
function doReplace(){const f=document.getElementById('find-inp').value,rep=document.getElementById('repl-inp').value;const cs=document.getElementById('find-case').checked;const rx_=document.getElementById('find-regex').checked;const el=document.getElementById('editor');let rx;try{rx=rx_?new RegExp(f,cs?'g':'gi'):new RegExp(f.replace(/[.*+?^${}()|[\]\\]/g,'\\$&'),cs?'g':'gi');}catch(e){toast('Invalid regex','err');return;}const n=(el.value.match(rx)||[]).length;el.value=el.value.replace(rx,rep);document.getElementById('find-result').textContent=`Replaced ${n} occurrence(s)`;updateGutter();toast(`Replaced ${n} occurrence(s)`,'ok');}
function doGoto(){const ln=parseInt(document.getElementById('goto-line').value);const el=document.getElementById('editor');const lines=el.value.split('\n');if(ln<1||ln>lines.length){toast('Line out of range','err');return;}const pos=lines.slice(0,ln-1).join('\n').length+(ln>1?1:0);el.focus();el.setSelectionRange(pos,pos+lines[ln-1].length);closeModal('modal-goto');}
function updateGutter(){const v=document.getElementById('editor').value;const n=v.split('\n').length;document.getElementById('gutter').textContent=Array.from({length:n},(_,i)=>i+1).join('\n');}
function syncGutter(){document.getElementById('gutter').scrollTop=document.getElementById('editor').scrollTop;}
function updateCursor(){const el=document.getElementById('editor');const before=el.value.slice(0,el.selectionStart);const lines=before.split('\n');document.getElementById('cursor-pos').textContent=`Ln ${lines.length}, Col ${lines[lines.length-1].length+1}`;document.getElementById('char-count').textContent=`${el.value.length} chars`;const sel=el.value.substring(el.selectionStart,el.selectionEnd);document.getElementById('sel-info').textContent=sel.length?`${sel.length} chars selected`:'';}
function saveTab(){if(ACTIVE_TAB)ACTIVE_TAB.content=document.getElementById('editor').value;}
function getSQL(){const el=document.getElementById('editor');return el.value.substring(el.selectionStart,el.selectionEnd).trim()||el.value.trim();}

// ── TABS ──────────────────────────────────────────────
function initTabs(){newTab('Query 1',"-- 🐘 PostgreSQL (pgAdmin) Simulator\n-- Load data: Samples menu OR Import button\n-- Run: Ctrl+Enter | Format: Ctrl+Shift+F | Explain: Ctrl+E\n\nSELECT '🐘 Welcome to PostgreSQL (pgAdmin) Simulator!' AS greeting,\n       'v4.0' AS version,\n       datetime('now') AS current_time,\n       'Built by Adewale Samson Adeagbo' AS author;");}
function newTab(name,content){const t={id:TAB_ID++,name:name||`Query ${TAB_ID-1}`,content:content||''};TABS.push(t);setActiveTab(t);renderTabs();if(!name)document.getElementById('editor').value='';document.getElementById('editor').focus();}
function setActiveTab(t){ACTIVE_TAB=t;document.getElementById('editor').value=t.content;updateGutter();updateCursor();}
function renderTabs(){const bar=document.getElementById('qtabs-bar');const btn=bar.querySelector('.newtab');bar.querySelectorAll('.qtab').forEach(el=>el.remove());TABS.forEach(t=>{const el=document.createElement('div');el.className='qtab'+(t===ACTIVE_TAB?' on':'');el.innerHTML=`<span class="tn" onclick="switchTab(${t.id})" title="${eH(t.name)}">${eH(t.name)}</span><button class="tc" onclick="closeTab(${t.id})">✕</button>`;bar.insertBefore(el,btn);});}
function switchTab(id){const t=TABS.find(t=>t.id===id);if(t){setActiveTab(t);renderTabs();}}
function closeTab(id){if(TABS.length===1){toast("Cannot close last tab",'warn');return;}const i=TABS.findIndex(t=>t.id===id);TABS.splice(i,1);if(ACTIVE_TAB&&ACTIVE_TAB.id===id)setActiveTab(TABS[Math.max(0,i-1)]);renderTabs();}

// ── SNIPPETS ──────────────────────────────────────────
function renderSnippets(){
  const CATS={
    'Core SELECT':[{n:'GROUP BY + Aggregates',s:'SELECT\n    category,\n    COUNT(*) AS total,\n    SUM(amount) AS total_amount,\n    AVG(amount) AS avg_amount,\n    MIN(amount) AS min_amount,\n    MAX(amount) AS max_amount\nFROM "your_table"\nGROUP BY category\nHAVING COUNT(*) > 5\nORDER BY total_amount DESC\nLIMIT 100;'},{n:'CASE Expression',s:'SELECT id, amount,\n    CASE\n        WHEN amount >= 10000 THEN \'Enterprise\'\n        WHEN amount >= 1000  THEN \'Pro\'\n        WHEN amount >= 100   THEN \'Starter\'\n        ELSE \'Free\'\n    END AS tier\nFROM "your_table";'},{n:'Correlated Subquery',s:'SELECT * FROM employees e\nWHERE salary > (\n    SELECT AVG(salary) FROM employees\n    WHERE department = e.department\n)\nORDER BY salary DESC;'}],
    'JOINs':[{n:'INNER JOIN',s:'SELECT a.id, a.name, b.value\nFROM "table_a" a\nINNER JOIN "table_b" b ON a.id = b.a_id\nWHERE a.active = 1;'},{n:'LEFT JOIN',s:'SELECT a.*, b.col\nFROM "table_a" a\nLEFT JOIN "table_b" b ON a.id = b.a_id;'},{n:'3-table JOIN',s:'SELECT o.id, c.name, p.title, o.quantity\nFROM orders o\nINNER JOIN customers c ON o.customer_id = c.id\nINNER JOIN products p  ON o.product_id  = p.id\nWHERE o.status = \'completed\';'},{n:'Self JOIN',s:'SELECT e.name AS employee, m.name AS manager\nFROM employees e\nLEFT JOIN employees m ON e.manager_id = m.id;'}],
    'Window Functions':[{n:'ROW_NUMBER / RANK',s:'SELECT id, department, salary,\n    ROW_NUMBER() OVER (PARTITION BY department ORDER BY salary DESC) AS row_num,\n    RANK()       OVER (PARTITION BY department ORDER BY salary DESC) AS rnk,\n    DENSE_RANK() OVER (ORDER BY salary DESC) AS dense_rnk\nFROM employees;'},{n:'Running Total',s:'SELECT date, amount,\n    SUM(amount) OVER (ORDER BY date) AS running_total,\n    AVG(amount) OVER (ORDER BY date ROWS BETWEEN 6 PRECEDING AND CURRENT ROW) AS ma7\nFROM sales ORDER BY date;'},{n:'LAG / LEAD',s:'SELECT date, amount,\n    LAG(amount,1)  OVER (ORDER BY date) AS prev_amount,\n    LEAD(amount,1) OVER (ORDER BY date) AS next_amount,\n    amount - LAG(amount,1) OVER (ORDER BY date) AS change\nFROM sales ORDER BY date;'},{n:'Top N per Group',s:'SELECT * FROM (\n    SELECT *, ROW_NUMBER() OVER (\n        PARTITION BY department ORDER BY salary DESC\n    ) AS rnk\n    FROM employees\n) ranked WHERE rnk <= 3 ORDER BY department, rnk;'}],
    'CTEs':[{n:'Simple CTE',s:'WITH dept_summary AS (\n    SELECT department, COUNT(*) AS headcount, SUM(salary) AS payroll\n    FROM employees GROUP BY department\n)\nSELECT * FROM dept_summary ORDER BY payroll DESC;'},{n:'Multi-CTE Pipeline',s:'WITH\nrevenue AS (SELECT strftime(\'%Y-%m\', date) AS month, SUM(amount) AS rev FROM sales GROUP BY month),\ncosts AS (SELECT strftime(\'%Y-%m\', date) AS month, SUM(amount) AS cst FROM expenses GROUP BY month)\nSELECT r.month, r.rev, c.cst, r.rev - c.cst AS profit\nFROM revenue r JOIN costs c ON r.month = c.month ORDER BY r.month;'}],
    'Analytics':[{n:'Monthly Trend',s:'SELECT strftime(\'%Y-%m\', date) AS month, COUNT(*) AS orders, SUM(amount) AS revenue, AVG(amount) AS aov\nFROM sales GROUP BY month ORDER BY month;'},{n:'Pivot Cross-tab',s:'SELECT strftime(\'%Y\', date) AS year,\n    SUM(CASE WHEN region=\'North\' THEN amount ELSE 0 END) AS north,\n    SUM(CASE WHEN region=\'South\' THEN amount ELSE 0 END) AS south,\n    SUM(amount) AS total\nFROM sales GROUP BY year ORDER BY year;'},{n:'NULL Analysis',s:'SELECT COUNT(*) AS total_rows, COUNT(col1) AS not_null, COUNT(*)-COUNT(col1) AS nulls, ROUND(COUNT(col1)*100.0/COUNT(*),1) AS pct_complete\nFROM "your_table";'}],
    'Advanced Analytics':[{n:'Cohort Retention',s:'WITH cohorts AS (SELECT customer_id, strftime(\'%Y-%m\', signup_date) AS cohort_month FROM customers),\nactivity AS (SELECT customer_id, strftime(\'%Y-%m\', date) AS activity_month FROM sales)\nSELECT c.cohort_month, a.activity_month, COUNT(DISTINCT a.customer_id) AS active_users\nFROM cohorts c INNER JOIN activity a ON c.customer_id = a.customer_id\nGROUP BY c.cohort_month, a.activity_month ORDER BY c.cohort_month, a.activity_month;'},{n:'RFM Segmentation',s:'WITH rfm AS (SELECT customer_id, MAX(date) AS last_purchase, COUNT(*) AS frequency, SUM(amount) AS monetary FROM sales GROUP BY customer_id),\nscored AS (SELECT *, NTILE(5) OVER (ORDER BY last_purchase DESC) AS r_score, NTILE(5) OVER (ORDER BY frequency) AS f_score, NTILE(5) OVER (ORDER BY monetary) AS m_score FROM rfm)\nSELECT *, r_score+f_score+m_score AS total_score,\n    CASE WHEN r_score>=4 AND f_score>=4 THEN \'Champions\' WHEN r_score>=3 AND f_score>=3 THEN \'Loyal\' ELSE \'At Risk\' END AS segment\nFROM scored ORDER BY total_score DESC;'},{n:'YoY Growth',s:'WITH yearly AS (SELECT strftime(\'%Y\', date) AS year, SUM(amount) AS revenue FROM sales GROUP BY year)\nSELECT year, revenue, LAG(revenue) OVER (ORDER BY year) AS prev_year, ROUND((revenue-LAG(revenue)OVER(ORDER BY year))*100.0/LAG(revenue)OVER(ORDER BY year),1) AS yoy_pct FROM yearly ORDER BY year;'}],
    'Data Quality':[{n:'Find Duplicates',s:'SELECT col1, col2, COUNT(*) AS occurrences FROM "your_table" GROUP BY col1, col2 HAVING COUNT(*) > 1 ORDER BY occurrences DESC;'},{n:'NULL Completeness',s:'SELECT COUNT(*) AS total, COUNT(col1) AS not_null, COUNT(*)-COUNT(col1) AS nulls, ROUND((COUNT(*)-COUNT(col1))*100.0/COUNT(*),1) AS null_pct FROM "your_table";'},{n:'Outlier Detection (IQR)',s:'WITH stats AS (SELECT NTILE(4) OVER (ORDER BY amount) AS quartile, amount FROM sales),\nbounds AS (SELECT MAX(CASE WHEN quartile=1 THEN amount END) AS q1, MAX(CASE WHEN quartile=3 THEN amount END) AS q3 FROM stats)\nSELECT *, CASE WHEN amount < q1-1.5*(q3-q1) OR amount > q3+1.5*(q3-q1) THEN \'OUTLIER\' ELSE \'normal\' END AS status FROM sales, bounds WHERE status=\'OUTLIER\';'}],
    'DDL & DML':[{n:'CREATE TABLE',s:'CREATE TABLE orders (\n    id          INTEGER PRIMARY KEY,\n    customer_id INTEGER NOT NULL,\n    amount      REAL,\n    status      TEXT DEFAULT \'pending\',\n    created_at  TEXT DEFAULT (datetime(\'now\'))\n);'},{n:'INSERT rows',s:'INSERT INTO "table_name" (col1, col2)\nVALUES (\'value1\', 100), (\'value2\', 200), (\'value3\', 300);\nSELECT * FROM "table_name" ORDER BY rowid DESC LIMIT 5;'},{n:'CREATE VIEW',s:'CREATE VIEW monthly_revenue AS\nSELECT strftime(\'%Y-%m\', date) AS month, SUM(amount) AS revenue, COUNT(*) AS transactions\nFROM sales GROUP BY month ORDER BY month;'}],
    'Template Variables':[{n:'Date Range Filter',s:'SELECT * FROM sales\nWHERE date BETWEEN \'{{start_date}}\' AND \'{{end_date}}\'\nORDER BY date;'},{n:'Region + Limit',s:'SELECT product, SUM(amount) AS revenue, COUNT(*) AS orders\nFROM sales\nWHERE region = \'{{region}}\'\nGROUP BY product ORDER BY revenue DESC LIMIT {{top_n}};'}]
  };
  const el=document.getElementById('snippets-tree');
  el.innerHTML=Object.entries(CATS).map(([cat,items])=>
    `<div class="snip-cat-ttl">${cat}</div>`+
    items.map(s=>`<div class="snip-item" onclick="insertSnippet(${JSON.stringify(s.s)})"><span style="color:var(--pg3);font-size:13px">📄</span><span class="snip-name">${s.n}</span></div>`).join('')
  ).join('');
}
function insertSnippet(sql){document.getElementById('editor').value=sql;updateGutter();toast('Snippet loaded — edit table/column names and run!','ok');}

// ── SAMPLE DATA GENERATORS ────────────────────────────
const R=(a,b)=>Math.round(Math.random()*(b-a)+a);
const P=a=>a[R(0,a.length-1)];
const D=(days,end=0)=>{const dt=new Date();dt.setDate(dt.getDate()-R(end,days));return dt.toISOString().slice(0,10);};
const GENERATORS={
  sales:()=>{const prods=['Widget Pro','Widget Lite','Gadget X','Gadget Y','SuperTool','MegaKit','ProSuite','BasicKit','Premium Plus','Starter Pack'];const regions=['North','South','East','West','Central'];const channels=['Online','Retail','Wholesale','Partner','Direct'];const reps=['Alice Chen','Bob Smith','Carol White','David Lee','Eve Garcia','Frank Miller'];const sales=Array.from({length:800},(_,i)=>({sale_id:i+1,date:D(730),product:P(prods),region:P(regions),channel:P(channels),sales_rep:P(reps),quantity:R(1,50),unit_price:+(R(10,500)+Math.random()).toFixed(2),discount_pct:P([0,0,0,5,10,15,20]),amount:+(R(50,10000)+Math.random()).toFixed(2),cost:+(R(30,5000)+Math.random()).toFixed(2),returned:P([0,0,0,0,1])}));const custs=Array.from({length:300},(_,i)=>({customer_id:i+1,name:`Customer ${i+1}`,region:P(regions),channel:P(channels),signup_date:D(1000),tier:P(['Bronze','Silver','Gold','Platinum']),lifetime_spend:+(R(100,50000)+Math.random()).toFixed(2),is_active:P([1,1,1,0])}));return[['sales',sales],['customers',custs]];},
  hr:()=>{const depts=['Engineering','Sales','Marketing','Finance','Operations','HR','Product','Design'];const roles=['Analyst','Senior Analyst','Lead','Manager','Senior Manager','Director','VP'];const locs=['Lagos','Abuja','Nairobi','Accra','Cairo','Johannesburg','London','New York'];const emps=Array.from({length:500},(_,i)=>({employee_id:i+1,name:`Employee ${i+1}`,department:P(depts),role:P(roles),location:P(locs),salary:R(25000,200000),bonus_pct:P([0,5,10,15,20,25]),years_exp:R(0,30),hire_date:D(3650),performance_score:+(R(50,100)/10).toFixed(1),is_remote:P([0,0,1]),manager_id:i>0?R(1,Math.max(1,i)):null}));return[['employees',emps]];},
  ecommerce:()=>{const cats=['Electronics','Clothing','Books','Sports','Home','Beauty','Toys','Food'];const statuses=['completed','pending','cancelled','refunded','processing'];const pays=['card','bank_transfer','mobile_money','cash','crypto'];const prods=Array.from({length:200},(_,i)=>({product_id:i+1,name:`Product ${i+1}`,category:P(cats),price:+(R(5,2000)+Math.random()).toFixed(2),cost_price:+(R(3,1000)+Math.random()).toFixed(2),stock_qty:R(0,500),rating:+(R(20,50)/10).toFixed(1),review_count:R(0,5000),is_active:P([1,1,1,0])}));const orders=Array.from({length:1000},(_,i)=>({order_id:i+1,customer_id:R(1,300),product_id:R(1,200),order_date:D(365),quantity:R(1,10),unit_price:+(R(5,2000)+Math.random()).toFixed(2),total_amount:+(R(5,10000)+Math.random()).toFixed(2),status:P(statuses),payment_method:P(pays),shipping_days:R(1,14)}));return[['products',prods],['orders',orders]];},
  inventory:()=>{const cats=['Raw Materials','Finished Goods','WIP','Supplies','Equipment'];const whs=['WH-Lagos','WH-Abuja','WH-PH','WH-Ibadan'];const supps=Array.from({length:30},(_,i)=>({supplier_id:i+1,name:`Supplier ${i+1}`,country:P(['Nigeria','Ghana','Kenya','Egypt']),lead_time_days:R(3,60),reliability_score:+(R(60,100)/10).toFixed(1)}));const items=Array.from({length:400},(_,i)=>({item_id:i+1,sku:`SKU-${String(i+1).padStart(5,'0')}`,name:`Item ${i+1}`,category:P(cats),warehouse:P(whs),supplier_id:R(1,30),unit_cost:+(R(1,500)+Math.random()).toFixed(2),stock_qty:R(0,1000),reorder_point:R(10,200),max_stock:R(200,2000),last_restocked:D(90),days_to_expiry:R(-30,365)}));return[['inventory_items',items],['suppliers',supps]];},
  finance:()=>{const months=Array.from({length:24},(_,i)=>{const d=new Date(2023,i,1);return d.toISOString().slice(0,7);});const ledger=[];let lid=1;months.forEach(m=>{const rev=R(500000,2000000),cogs=Math.round(rev*R(35,55)/100),opex=R(50000,400000),interest=R(5000,50000);ledger.push({id:lid++,period:m,account:'Revenue',amount:rev,category:'Income'});ledger.push({id:lid++,period:m,account:'COGS',amount:-cogs,category:'Cost'});ledger.push({id:lid++,period:m,account:'Gross Profit',amount:rev-cogs,category:'Derived'});ledger.push({id:lid++,period:m,account:'Operating Expenses',amount:-opex,category:'Expense'});ledger.push({id:lid++,period:m,account:'EBITDA',amount:rev-cogs-opex,category:'Derived'});});return[['financial_ledger',ledger]];},
  hospital:()=>{const depts=['Cardiology','Neurology','Orthopedics','Pediatrics','Emergency','Oncology','Surgery'];const diag=['Hypertension','Diabetes','Fracture','Appendicitis','Pneumonia','Malaria','Typhoid','Anemia'];const stat=['Discharged','Admitted','Under Observation','Critical'];const patients=Array.from({length:400},(_,i)=>({patient_id:i+1,name:`Patient ${i+1}`,age:R(1,90),gender:P(['Male','Female']),blood_type:P(['A+','A-','B+','B-','AB+','AB-','O+','O-']),admission_date:D(365),department:P(depts),diagnosis:P(diag),status:P(stat),bill_amount:+(R(5000,500000)+Math.random()).toFixed(2),insurance:P([1,1,0])}));const doctors=Array.from({length:50},(_,i)=>({doctor_id:i+1,name:`Dr. ${P(['Ahmed','Okonkwo','Mensah','Kimani','Hassan'])} ${i+1}`,department:P(depts),years_exp:R(2,35),patients_count:R(10,200),rating:+(R(35,50)/10).toFixed(1)}));return[['patients',patients],['doctors',doctors]];},
  education:()=>{const subjects=['Mathematics','English','Science','History','Geography','Physics','Chemistry'];const classes=['Grade 7','Grade 8','Grade 9','Grade 10','Grade 11','Grade 12'];const terms=['Term 1','Term 2','Term 3'];const students=Array.from({length:300},(_,i)=>({student_id:i+1,name:`Student ${i+1}`,class_name:P(classes),gender:P(['Male','Female']),age:R(12,18),enrollment_date:D(730),scholarship:P([0,0,0,1])}));const scores=[];students.slice(0,200).forEach(s=>{subjects.slice(0,5).forEach(sub=>{terms.forEach(t=>{scores.push({id:scores.length+1,student_id:s.student_id,subject:sub,term:t,score:R(30,100),grade:P(['A','B','C','D','E']),teacher:`Teacher ${R(1,20)}`});});});});return[['students',students],['scores',scores]];}
};

async function loadSample(type){
  if(!DB){toast('Engine not ready','err');return;}
  const gen=GENERATORS[type];if(!gen){toast('Unknown sample','err');return;}
  showLoading(`Generating ${type} dataset...`);
  try{
    const tables=gen();
    for(const [name,data] of tables){
      try{runSQL(`DROP TABLE IF EXISTS "${name}"`);}catch(e){}
      const cols=Object.keys(data[0]);const types=inferTypes(data,cols,cols);
      const defs=cols.map(c=>`"${c}" ${types[c]}`).join(',');runSQL(`CREATE TABLE "${name}" (${defs})`);
      const BATCH=300;
      for(let i=0;i<data.length;i+=BATCH){
        const batch=data.slice(i,i+BATCH);
        const ph=batch.map(()=>'('+cols.map(()=>'?').join(',')+')').join(',');
        const vals=batch.flatMap(row=>cols.map(c=>{const v=row[c];return(v===null||v===undefined)?null:v;}));
        try{const s=DB.prepare(`INSERT INTO "${name}" VALUES ${ph}`);s.run(vals);s.free();}catch(e){}
      }
      TABLES[name]={cols:cols.map(c=>({name:c,type:types[c]})),rows:data.length,file:type+'_sample'};
    }
    syncTables();const first=tables[0][0];autoSelect(first,TABLES[first]?TABLES[first].cols.map(c=>c.name):[]);
    hideLoading();toast(`✓ "${type}" loaded — ${tables.map(([n,d])=>`${n}: ${d.length} rows`).join(', ')}`,'ok');
  }catch(e){hideLoading();toast('Error: '+e.message,'err');}
}

// ── HISTORY ───────────────────────────────────────────
function addHistory(sql,ok,ms){HISTORY.unshift({sql,ok,ms,time:new Date().toLocaleTimeString()});if(HISTORY.length>200)HISTORY.pop();try{localStorage.setItem('pgas_hist',JSON.stringify(HISTORY.slice(0,50)));}catch(e){}}
function loadHistory(i){const h=HISTORY[i];if(!h)return;document.getElementById('editor').value=h.sql;updateGutter();toast('Loaded from history','info');}
function clearHistory(){if(!confirm('Clear all query history?'))return;HISTORY=[];localStorage.removeItem('pgas_hist');renderRPanel('history');toast('History cleared','ok');}

// ── RIGHT PANEL ───────────────────────────────────────
function switchRTab(t){document.querySelectorAll('.rpt').forEach(el=>el.classList.remove('on'));const el=document.getElementById('rpt-'+t);if(el)el.classList.add('on');renderRPanel(t);}

// ── QUERY BUILDER ─────────────────────────────────────
function renderQueryBuilder(){
  const el=document.getElementById('qb-ui');
  const tables=Object.keys(TABLES);
  if(!tables.length){el.innerHTML='<div style="color:var(--t3);font-size:12px">Load tables first (Samples or Import), then use the Query Builder to visually construct your query.</div>';return;}
  let currentQBTable=null,currentQBCols=[];
  const h=`<div class="qb-row"><span class="qb-lbl">Table:</span><div class="qb-chips" id="qb-tables">${tables.map(t=>`<span class="qb-chip" onclick="qbSelectTable('${t}')">📋 ${eH(t)}</span>`).join('')}</div></div><div id="qb-cols-area"></div><div id="qb-preview" style="margin-top:12px;padding:10px;background:var(--bg5);border:1px solid var(--brd0);border-radius:var(--r);font-size:12px;color:var(--t2);min-height:40px;font-family:var(--mono);white-space:pre-wrap">Select a table and columns above to build your query...</div><button class="btn btnp" style="margin-top:8px" onclick="qbRun()">▶ Run Generated Query</button>`;
  el.innerHTML=h;
  window._qbState={table:null,cols:[],where:'',limit:'100'};
}
function qbSelectTable(t){
  document.querySelectorAll('#qb-tables .qb-chip').forEach(c=>c.classList.remove('sel'));
  event.target.classList.add('sel');
  window._qbState.table=t;window._qbState.cols=[];
  const tdata=TABLES[t];if(!tdata)return;
  const colsArea=document.getElementById('qb-cols-area');
  colsArea.innerHTML=`<div class="qb-row"><span class="qb-lbl">Columns:</span><div class="qb-chips" id="qb-cols">${(tdata.cols||[]).map(c=>`<span class="qb-chip" onclick="qbToggleCol('${c.name}',this)">${eH(c.name)} <span class="pill ${pillClass(c.type)}" style="margin-left:3px">${shortType(c.type)}</span></span>`).join('')}</div></div>`;
  qbUpdatePreview();
}
function qbToggleCol(col,el){
  const idx=window._qbState.cols.indexOf(col);
  if(idx>=0){window._qbState.cols.splice(idx,1);el.classList.remove('sel');}else{window._qbState.cols.push(col);el.classList.add('sel');}
  qbUpdatePreview();
}
function qbUpdatePreview(){
  const s=window._qbState;
  const cols=s.cols.length?s.cols.map(c=>`  "${c}"`).join(',\n'):'  *';
  const sql=`SELECT\n${cols}\nFROM "${s.table||'??'}"\nLIMIT ${s.limit};`;
  document.getElementById('qb-preview').textContent=sql;
}
function qbRun(){
  const s=window._qbState;
  if(!s.table||!s.cols.length){toast('Select a table and at least one column','warn');return;}
  document.getElementById('editor').value=document.getElementById('qb-preview').textContent;updateGutter();runQuery();
}

// ── SERVER DASHBOARD ──────────────────────────────────
function renderDashboard(){
  const el=document.getElementById('dash-content');
  const tc=Object.keys(TABLES).length,tr=Object.values(TABLES).reduce((s,t)=>s+(t.rows||0),0);
  const avgCols=tc?Math.round(Object.values(TABLES).reduce((s,t)=>s+(t.cols||[]).length,0)/tc):0;
  el.innerHTML=`
<div class="dash-card"><div class="dash-card-ttl">🗄 Database</div><div class="dash-stat">${tc}</div><div class="dash-sub">Tables loaded<br>${Object.keys(VIEWS).length} views</div></div>
<div class="dash-card"><div class="dash-card-ttl">📊 Total Rows</div><div class="dash-stat">${tr.toLocaleString()}</div><div class="dash-sub">Across all tables<br>~${avgCols} avg columns/table</div></div>
<div class="dash-card"><div class="dash-card-ttl">🖥 Server Status</div><div class="dash-stat" style="color:var(--grn)">● Online</div><div class="dash-sub">PostgreSQL 15 Compatible<br>localhost:5432</div></div>
<div class="dash-card"><div class="dash-card-ttl">⏱ Last Query</div><div class="dash-stat" style="font-size:18px">${document.getElementById('ef-timing').textContent.replace('Last: ','')||'—'}</div><div class="dash-sub">${document.getElementById('ef-status').textContent||'—'}<br>${document.getElementById('ef-rows').textContent||'—'}</div></div>
<div class="dash-card" style="grid-column:1/-1"><div class="dash-card-ttl">📋 Table Summary</div>${tc?Object.entries(TABLES).map(([n,t])=>`<div class="dash-row"><span>📋 ${eH(n)}</span><span style="color:var(--t0)">${(t.rows||0).toLocaleString()} rows</span><span style="color:var(--t3)">${(t.cols||[]).length} cols</span></div>`).join(''):'<div style="color:var(--t3);font-size:11px">No tables loaded. Use Samples or Import to populate.</div>'}</div>
<div class="dash-card" style="grid-column:1/-1"><div class="dash-card-ttl">👤 Built by Adewale Samson Adeagbo</div><div class="dash-sub" style="line-height:2">Data Scientist · EdTech Builder · Virtual Tutor · AI-Augmented Solutions Developer · DataTech Builder · FaithTech Builder<br>📱 +234 810 086 6322 | +234 809 448 1488<br>🔗 <a href="https://cssadewale.pages.dev" target="_blank" style="color:var(--pg3)">cssadewale.pages.dev</a> | <a href="https://hmgacademy.pages.dev" target="_blank" style="color:var(--pg3)">hmgacademy.pages.dev</a> | <a href="https://hmgconcepts.pages.dev" target="_blank" style="color:var(--pg3)">hmgconcepts.pages.dev</a><br>🐘 PostgreSQL (pgAdmin) Simulator v4.0 — "The Elephant Edition"</div></div>`;
}

// ── TAB SWITCHING ─────────────────────────────────────
function switchSbTab(t){['browser','snippets','views'].forEach(x=>{document.getElementById('sbt-'+x).classList.toggle('on',x===t);document.getElementById('sbp-'+x).classList.toggle('on',x===t);});}
function switchResTab(t){
  ['data','messages','explain','chart','pivot','erd','querybuilder','dashboard','help'].forEach(x=>{
    const rt=document.getElementById('rt-'+x);const rp=document.getElementById('rp-'+x);
    if(rt)rt.classList.toggle('on',x===t);if(rp)rp.classList.toggle('on',x===t);
  });
  if(t==='chart'&&ALL_ROWS.length)drawChart();
  if(t==='erd')renderERD();
  if(t==='querybuilder')renderQueryBuilder();
  if(t==='dashboard')renderDashboard();
}

// ── ERD VIEW ──────────────────────────────────────────
function renderERD(){
  const grid=document.getElementById('erd-grid');
  const names=Object.keys(TABLES);
  if(!names.length){grid.innerHTML='<div style="color:var(--t3);font-size:12px">No tables loaded yet. Use Samples menu or Import button.</div>';return;}
  grid.innerHTML=names.map(name=>{
    const t=TABLES[name];const cols=(t.cols||[]);
    const colRows=cols.map((c,i)=>{
      const isPK=c.name==='id'||(c.name.endsWith('_id')&&i===0);
      return`<div class="erd-card-row">${isPK?'<span class="erd-pk" title="Primary/Foreign Key">PK</span>':'<span style="width:18px;display:inline-block"></span>'}<span class="pill ${pillClass(c.type)}">${shortType(c.type)}</span><span style="color:var(--t0)">${eH(c.name)}</span></div>`;
    }).join('');
    return`<div class="erd-card"><div class="erd-card-hd"><span>📋</span><span>${eH(name)}</span><span style="margin-left:auto;font-size:10px;opacity:.8">${(t.rows||0).toLocaleString()} rows</span></div>${colRows}</div>`;
  }).join('');
}

// ── THEME ─────────────────────────────────────────────
function applyTheme(){document.body.classList.toggle('light',THEME==='light');document.getElementById('theme-btn').textContent=THEME==='light'?'🌙 Dark':'☀ Light';}
function toggleTheme(){THEME=THEME==='dark'?'light':'dark';localStorage.setItem('pgas_theme',THEME);applyTheme();toast(`Theme: ${THEME}`,'info');}

// ── TEMPLATE VARIABLES ────────────────────────────────
function extractVars(sql){const matches=[...sql.matchAll(/\{\{(\w+)\}\}/g)];return[...new Set(matches.map(m=>m[1]))];}
function showVarDialog(vars){
  const fields=document.getElementById('var-fields');
  fields.innerHTML=vars.map(v=>`<div class="var-row"><span class="var-label"><strong>{{${eH(v)}}}</strong></span><input type="text" class="var-input" id="var_${v}" placeholder="Enter value for ${eH(v)}..." onkeydown="if(event.key==='Enter')runWithVars()"></div>`).join('');
  openModal('modal-vars');
  setTimeout(()=>{const first=document.getElementById('var_'+vars[0]);if(first)first.focus();},100);
}
function runWithVars(){
  let sql=PENDING_SQL;
  for(const v of PENDING_VARS){const el=document.getElementById('var_'+v);const val=el?el.value:'';sql=sql.replace(new RegExp(`\\{\\{${v}\\}\\}`,'g'),val);}
  closeModal('modal-vars');document.getElementById('editor').value=sql;runQuery();
}

// ── BACKUP / RESTORE ──────────────────────────────────
function openBackup(){
  const tables=Object.keys(TABLES);
  if(!tables.length){toast('No tables to backup','warn');return;}
  const preview=document.getElementById('backup-preview');
  const totalRows=Object.values(TABLES).reduce((s,t)=>s+(t.rows||0),0);
  preview.innerHTML=`<strong style="color:var(--t0)">${tables.length} tables, ${totalRows.toLocaleString()} total rows</strong><br>`+tables.map(n=>`  📋 ${eH(n)}: ${(TABLES[n].rows||0).toLocaleString()} rows`).join('<br>');
  openModal('modal-backup');
}
async function doBackup(){
  if(!DB){toast('No database','err');return;}
  showLoading('Generating pg_dump-style backup...');closeModal('modal-backup');
  try{
    const lines=['-- ============================================================','-- PostgreSQL (pgAdmin) Simulator — Database Backup (pg_dump style)','-- Generated: '+new Date().toISOString(),'-- Tables: '+Object.keys(TABLES).join(', '),'-- Built by: Adewale Samson Adeagbo','-- ============================================================','','BEGIN;',''];
    for(const name of Object.keys(TABLES)){
      const t=TABLES[name];
      lines.push(`-- ── Table: ${name} ──`);
      lines.push(`DROP TABLE IF EXISTS "${name}";`);
      const cols=(t.cols||[]);const defs=cols.map(c=>`  "${c.name}" ${c.type}`).join(',\n');
      lines.push(`CREATE TABLE "${name}" (\n${defs}\n);`);lines.push('');
      try{const r=DB.exec(`SELECT * FROM "${name}"`);if(r.length&&r[0].values.length){const colNames=r[0].columns.map(c=>`"${c}"`).join(', ');r[0].values.forEach(row=>{const vals=row.map(v=>{if(v===null||v===undefined)return'NULL';if(typeof v==='number')return String(v);return`'${String(v).replace(/'/g,"''")}'`;}).join(', ');lines.push(`INSERT INTO "${name}" (${colNames}) VALUES (${vals});`);});}}catch(e){}
      lines.push('');
    }
    lines.push('COMMIT;');lines.push('');lines.push('-- End of backup');
    dl('pgadmin_backup_'+Date.now()+'.sql',lines.join('\n'),'text/plain');
    toast('✓ Backup downloaded — '+Object.keys(TABLES).length+' tables','ok');
  }catch(e){toast('Backup error: '+e.message,'err');}
  finally{hideLoading();}
}

// ── PASTE-TO-SQL ──────────────────────────────────────
function generateFromPaste(){
  const raw=prompt('Paste your data here (CSV or TSV format, first row = column names):');
  if(!raw||!raw.trim())return;
  const lines=raw.trim().split('\n');if(lines.length<2){toast('Need at least 2 rows (header + data)','warn');return;}
  const sep=lines[0].includes('\t')?'\t':',';
  const headers=lines[0].split(sep).map(h=>h.trim().replace(/"/g,'').toLowerCase().replace(/[^a-z0-9_]/g,'_')||'col');
  const rows=lines.slice(1).map(l=>l.split(sep).map(v=>v.trim().replace(/^"|"$/g,'')));
  const types=headers.map((h,i)=>{const vals=rows.map(r=>r[i]).filter(v=>v!=='');if(vals.every(v=>!isNaN(Number(v))&&v!=='')){return vals.every(v=>Number.isInteger(Number(v)))?'INTEGER':'REAL';}return'TEXT';});
  const tname='pasted_data';
  const defs=headers.map((h,i)=>`    "${h}" ${types[i]}`).join(',\n');
  const inserts=rows.map(row=>{const vals=row.map((v,i)=>{if(!v||v==='')return'NULL';if(types[i]!=='TEXT')return isNaN(Number(v))?`'${v.replace(/'/g,"''")}'`:v;return`'${v.replace(/'/g,"''")}'`;}).join(', ');return`INSERT INTO "${tname}" (${headers.map(h=>`"${h}"`).join(', ')}) VALUES (${vals});`;}).join('\n');
  const sql=`-- Generated from pasted data\nDROP TABLE IF EXISTS "${tname}";\nCREATE TABLE "${tname}" (\n${defs}\n);\n\n${inserts}\n\n-- Preview\nSELECT * FROM "${tname}" LIMIT 20;`;
  document.getElementById('editor').value=sql;updateGutter();toast('✓ SQL generated — press Ctrl+Enter to run','ok');
}

// ── SPARKLINE ─────────────────────────────────────────
function addSparkTiming(ms){TIMING_HISTORY.push(parseFloat(ms));if(TIMING_HISTORY.length>MAX_SPARKS)TIMING_HISTORY.shift();renderSparkline();}
function renderSparkline(){const wrap=document.getElementById('spark-wrap');if(!wrap||!TIMING_HISTORY.length)return;const max=Math.max(...TIMING_HISTORY,1);wrap.innerHTML=TIMING_HISTORY.map((ms,i)=>{const h=Math.max(4,Math.round((ms/max)*18));const color=ms>1000?'var(--red)':ms>200?'var(--amb)':'var(--pg3)';return`<div class="spark-bar" style="height:${h}px;background:${color}" title="${ms}ms"></div>`;}).join('');}

// ── PREFERENCES ───────────────────────────────────────
function loadPrefs(){
  PREFS.fs=parseInt(localStorage.getItem('pgas_fs'))||13;PREFS.lh=parseFloat(localStorage.getItem('pgas_lh'))||1.75;
  PREFS.limit=parseInt(localStorage.getItem('pgas_limit'))||1000;PREFS.tw=parseInt(localStorage.getItem('pgas_tw'))||2;
  const g=id=>document.getElementById(id);
  if(g('pref-fs'))g('pref-fs').value=PREFS.fs;if(g('pref-lh'))g('pref-lh').value=PREFS.lh;
  if(g('pref-limit'))g('pref-limit').value=PREFS.limit;if(g('pref-tw'))g('pref-tw').value=PREFS.tw;
  renderSavedList();
}
function applyPrefs(){
  const fs=parseInt(document.getElementById('pref-fs')?.value)||PREFS.fs;
  const lh=parseFloat(document.getElementById('pref-lh')?.value)||PREFS.lh;
  const lim=parseInt(document.getElementById('pref-limit')?.value)||PREFS.limit;
  const tw=parseInt(document.getElementById('pref-tw')?.value)||PREFS.tw;
  PREFS={fs,lh,limit:lim,tw};
  const ed=document.getElementById('editor');ed.style.fontSize=fs+'px';ed.style.lineHeight=lh;
  document.getElementById('gutter').style.fontSize=fs+'px';document.getElementById('gutter').style.lineHeight=lh;
  localStorage.setItem('pgas_fs',fs);localStorage.setItem('pgas_lh',lh);localStorage.setItem('pgas_limit',lim);localStorage.setItem('pgas_tw',tw);
}

// ── PANEL RESIZING ────────────────────────────────────
function startResize(e,side){
  e.preventDefault();
  const panel=side==='L'?document.getElementById('sidebar'):document.getElementById('rpanel');
  const startX=e.clientX,startW=panel.offsetWidth;
  const rz=document.getElementById('res'+side);rz.classList.add('drag');
  function onMove(ev){const dx=ev.clientX-startX;const w=Math.max(170,Math.min(450,startW+(side==='L'?dx:-dx)));panel.style.width=w+'px';panel.style.minWidth=w+'px';}
  function onUp(){document.removeEventListener('mousemove',onMove);document.removeEventListener('mouseup',onUp);rz.classList.remove('drag');}
  document.addEventListener('mousemove',onMove);document.addEventListener('mouseup',onUp);
}
function startEditorResize(e){
  e.preventDefault();
  const pane=document.getElementById('edpane');const startY=e.clientY,startH=pane.offsetHeight;
  function onMove(ev){pane.style.height=Math.max(80,Math.min(600,startH+(ev.clientY-startY)))+'px';}
  function onUp(){document.removeEventListener('mousemove',onMove);document.removeEventListener('mouseup',onUp);}
  document.addEventListener('mousemove',onMove);document.addEventListener('mouseup',onUp);
}

// ── GLOBAL KEYBOARD ───────────────────────────────────
function globalKey(e){
  if(FOCUSED_CELL&&['ArrowUp','ArrowDown','ArrowLeft','ArrowRight','Enter'].includes(e.key)){const active=document.activeElement;if(active&&active.tagName==='TD'){handleGridKey(e);return;}}
  if(e.ctrlKey||e.metaKey){
    switch(e.key){
      case'Enter':e.preventDefault();runQuery();break;
      case'e':case'E':e.preventDefault();e.shiftKey?explainAnalyze():explainQuery();break;
      case't':case'T':e.preventDefault();newTab();break;
      case'w':case'W':e.preventDefault();if(ACTIVE_TAB)closeTab(ACTIVE_TAB.id);break;
      case's':case'S':e.preventDefault();saveQuery();break;
      case'o':case'O':e.preventDefault();openFile();break;
      case'/':e.preventDefault();toggleComment();break;
      case'd':case'D':e.preventDefault();duplicateLine();break;
      case'h':case'H':e.preventDefault();openModal('modal-find');break;
      case'g':case'G':e.preventDefault();openModal('modal-goto');break;
      case'b':case'B':e.preventDefault();openBackup();break;
      case'F':if(e.shiftKey){e.preventDefault();formatSQL();}break;
      case'U':if(e.shiftKey){e.preventDefault();uppercaseSQL();}break;
      case'K':if(e.shiftKey){e.preventDefault();deleteLine();}break;
    }
  }
  if(e.key==='Escape'){document.querySelectorAll('.moverlay.on').forEach(m=>m.classList.remove('on'));document.getElementById('ctxmenu').classList.remove('on');document.getElementById('cell-ctx').classList.remove('on');}
}

// ── HELP / FEATURE REF ───────────────────────────────
function buildHelp(){
  document.getElementById('help-content').innerHTML=`
<h2 style="font:700 18px/1 var(--sans);color:var(--pg3);margin-bottom:8px">🐘 PostgreSQL (pgAdmin) Simulator — Complete Guide</h2>
<p style="font-size:12px;color:var(--t2);line-height:1.75;margin-bottom:20px">A complete PostgreSQL pgAdmin workbench running entirely in your browser. <strong>No server. No installation. No cost. Works offline.</strong> Built by <strong style="color:var(--pg3)">Adewale Samson Adeagbo</strong>.</p>
<h3 style="font:700 14px/1 var(--sans);color:var(--t0);margin:0 0 10px">🚀 Getting Started</h3>
<div style="background:var(--bg2);border:1px solid var(--brd1);border-radius:var(--r);padding:14px;font-size:12px;color:var(--t1);line-height:2.1;margin-bottom:20px">
<strong style="color:var(--pg3)">Step 1</strong> — Load data: <strong>Samples menu</strong> for instant demo data, or <strong>Import button</strong> for your own CSV/JSON files<br>
<strong style="color:var(--pg3)">Step 2</strong> — Explore: Click any table in the left browser panel. Right-click for quick actions.<br>
<strong style="color:var(--pg3)">Step 3</strong> — Write SQL: Use the editor, or pick a template from the <strong>Snippets</strong> tab or use <strong>Query Builder</strong><br>
<strong style="color:var(--pg3)">Step 4</strong> — Run: Press <strong>Ctrl+Enter</strong>. Select text + Ctrl+Enter to run only that selection.<br>
<strong style="color:var(--pg3)">Step 5</strong> — Analyze: Sort columns, filter results, export to multiple formats, chart data, pivot table<br>
<strong style="color:var(--pg3)">Step 6</strong> — Learn: Use the <strong>Guide</strong> tab for SQL reference, <strong>Snippets</strong> for templates, and <strong>Dashboard</strong> for overview
</div>
<h3 style="font:700 14px/1 var(--sans);color:var(--t0);margin:0 0 10px">📖 Comprehensive Feature Reference</h3>
<table style="width:100%;border-collapse:collapse;font-size:12px;margin-bottom:20px">
<tr style="background:var(--bg2)"><th style="padding:8px 10px;text-align:left;color:var(--t2);font:600 11px/1 var(--sans);border:1px solid var(--brd1)">Feature</th><th style="padding:8px 10px;text-align:left;color:var(--t2);font:600 11px/1 var(--sans);border:1px solid var(--brd1)">Shortcut</th><th style="padding:8px 10px;text-align:left;color:var(--t2);font:600 11px/1 var(--sans);border:1px solid var(--brd1)">Description</th></tr>
<tr><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--pg3);font-weight:600">PostgreSQL Engine</td><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--t1)">—</td><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--t1)">Full SQL execution via sql.js WASM + PG compatibility layer</td></tr>
<tr style="background:rgba(25,29,41,.5)"><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--pg3);font-weight:600">Multi-Tab Editor</td><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--t1)">Ctrl+T / Ctrl+W</td><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--t1)">Work on multiple queries simultaneously like pgAdmin</td></tr>
<tr><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--pg3);font-weight:600">CSV/JSON Import</td><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--t1)">Import button or drag-and-drop</td><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--t1)">Load real datasets with type auto-detection and batch insert</td></tr>
<tr style="background:rgba(25,29,41,.5)"><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--pg3);font-weight:600">Run Selection</td><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--t1)">Select text + Ctrl+Enter</td><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--t1)">Execute only the selected SQL, not the whole editor</td></tr>
<tr><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--pg3);font-weight:600">Explain Plan</td><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--t1)">Ctrl+E</td><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--t1)">Shows how the engine processes your query with optimization tips</td></tr>
<tr style="background:rgba(25,29,41,.5)"><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--pg3);font-weight:600">Explain Analyze</td><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--t1)">Ctrl+Shift+E</td><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--t1)">Runs query AND measures actual execution time</td></tr>
<tr><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--pg3);font-weight:600">Transactions</td><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--t1)">Query menu: Begin / Commit / Rollback</td><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--t1)">Group writes; rollback to undo all changes atomically</td></tr>
<tr style="background:rgba(25,29,41,.5)"><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--pg3);font-weight:600">Chart Visualizer</td><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--t1)">Results → Chart tab</td><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--t1)">Bar, line, pie, doughnut, scatter charts from live query data</td></tr>
<tr><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--pg3);font-weight:600">Pivot Table</td><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--t1)">Results → Pivot tab</td><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--t1)">Cross-tabulate with SUM/COUNT/AVG/MIN/MAX</td></tr>
<tr style="background:rgba(25,29,41,.5)"><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--pg3);font-weight:600">Query Builder</td><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--t1)">Results → Builder tab</td><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--t1)">Visual click-to-build SELECT queries — no typing needed</td></tr>
<tr><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--pg3);font-weight:600">Server Dashboard</td><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--t1)">Results → Dashboard tab</td><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--t1)">Live server stats, table summary, query metrics</td></tr>
<tr style="background:rgba(25,29,41,.5)"><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--pg3);font-weight:600">ERD Viewer</td><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--t1)">Results → ERD tab</td><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--t1)">Visual entity-relationship diagram of all loaded tables</td></tr>
<tr><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--pg3);font-weight:600">Multiple Exports</td><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--t1)">CSV / JSON / SQL / MD / HTML / PDF</td><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--t1)">6 export formats including INSERT SQL and HTML tables</td></tr>
<tr style="background:rgba(25,29,41,.5)"><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--pg3);font-weight:600">pg_dump Backup</td><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--t1)">Tools → Backup (Ctrl+B)</td><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--t1)">Full database dump with CREATE TABLE + INSERT statements</td></tr>
<tr><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--pg3);font-weight:600">Saved Queries</td><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--t1)">File → Save with Name</td><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--t1)">Named queries stored in browser localStorage</td></tr>
<tr style="background:rgba(25,29,41,.5)"><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--pg3);font-weight:600">Query History</td><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--t1)">Right panel → History</td><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--t1)">Last 60 queries with timing and one-click reload</td></tr>
<tr><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--pg3);font-weight:600">Format SQL</td><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--t1)">Ctrl+Shift+F</td><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--t1)">Auto-indents and uppercases SQL keywords</td></tr>
<tr style="background:rgba(25,29,41,.5)"><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--pg3);font-weight:600">Template Variables</td><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--t1)">Use {{variable}} in SQL</td><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--t1)">Parameterized queries — dialog prompts for each value</td></tr>
<tr><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--pg3);font-weight:600">69 SQL Snippets</td><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--t1)">Snippets tab</td><td style="padding:7px 10px;border:1px solid var(--brd0);color:var(--t1)">Ready-made SQL templates in 10 categories</td></tr>
</table>
<h3 style="font:700 14px/1 var(--sans);color:var(--t0);margin:20px 0 10px">🌐 Deployment</h3>
<div style="font-size:12px;color:var(--t1);line-height:1.9;margin-bottom:20px">
<div style="background:var(--bg2);border:1px solid var(--brd1);border-radius:var(--r);padding:14px;margin-bottom:10px"><strong style="color:var(--pg3)">Option A — Open Locally:</strong> Download and open in Chrome. First load needs internet (~3MB engine). Works offline after.<br><strong style="color:var(--pg3)">Option B — GitHub Pages (FREE):</strong> Upload to a repo, enable Pages. URL: username.github.io/repo<br><strong style="color:var(--pg3)">Option C — Netlify (FREE):</strong> Drag index.html to Netlify dashboard. Instant deploy. URL: name.netlify.app</div>
</div>
<div style="text-align:center;margin-top:24px;padding:16px;background:var(--bg2);border-radius:var(--r)">
<div style="font:700 16px/1 var(--sans);color:var(--t0);margin-bottom:4px">🐘 PostgreSQL (pgAdmin) Simulator v4.0</div>
<div style="font-size:11px;color:var(--t2);margin-top:6px">Built by <strong style="color:var(--pg3)">Adewale Samson Adeagbo</strong> · Data Scientist · EdTech Builder · AI-Augmented Solutions Developer<br>🇳🇬 Lagos, Nigeria · <a href="https://cssadewale.pages.dev" target="_blank" style="color:var(--pg3)">cssadewale.pages.dev</a></div></div>`;
}

// ── HELPERS ───────────────────────────────────────────
function setConn(s,t){const b=document.getElementById('conn-badge');b.className='conn'+(s==='busy'?' busy':s==='err'?' err':'');document.getElementById('conn-txt').textContent=t;}
function setEng(t){document.getElementById('eng-label').innerHTML=t;document.getElementById('sb-eng').textContent=t;}
function setRunState(on){document.getElementById('run-btn').disabled=on;document.getElementById('stop-btn').style.display=on?'':'none';document.getElementById('run-btn').style.display=on?'none':'';}
function showLoading(msg){document.getElementById('ld-msg').textContent=msg||'Loading...';document.getElementById('ld-overlay').classList.add('on');}
function setLoadMsg(msg){document.getElementById('ld-msg').textContent=msg;}
function hideLoading(){document.getElementById('ld-overlay').classList.remove('on');}
function showExports(on){['ebtn-csv','ebtn-json','ebtn-sql2','ebtn-md','exp-btn','exp-btn-html'].forEach(id=>{const el=document.getElementById(id);if(el)el.style.display=on?'':'none';});}
function showFilterBar(on){document.getElementById('filterbar').classList.toggle('on',on);if(on)document.getElementById('filter-count').textContent=`${ALL_ROWS.length} rows`;}
function setMsg(msg,type){const p=document.getElementById('msg-panel');if(type==='ok')p.innerHTML=`<div class="msuccess"><span style="font-size:16px">✓</span><div>${eH(msg)}</div></div>`;else p.innerHTML=`<div class="merror"><span style="font-size:16px">✕</span><div><strong>Error</strong><br><br>${eH(msg)}<br><br><span style="font-size:11px;color:var(--t2)">Tip: Check table and column names. Use Snippets tab or SQL Ref for correct syntax.</span></div></div>`;}
function showEmptyState(title,sub){document.getElementById('empty-state').style.display='';document.getElementById('empty-state').innerHTML=`<div class="empty-ic">🐘</div><div class="empty-ttl">${title}</div><div class="empty-txt">${sub}</div>`;document.getElementById('dgwrap').style.display='none';}
function updateStatusBar(){const tc=Object.keys(TABLES).length,tr=Object.values(TABLES).reduce((s,t)=>s+(t.rows||0),0);document.getElementById('sb-tables').textContent=`Tables: ${tc}`;document.getElementById('sb-rows').textContent=`Rows: ${tr.toLocaleString()}`;const names=Object.keys(TABLES);['cmp-a','cmp-b'].forEach(id=>{const el=document.getElementById(id);if(!el)return;el.innerHTML=names.map(n=>`<option value="${eH(n)}">${eH(n)}</option>`).join('');});}
function openModal(id){document.getElementById(id).classList.add('on');}
function closeModal(id){document.getElementById(id).classList.remove('on');}
function toast(msg,type='info'){const s=document.getElementById('toaststack');const el=document.createElement('div');el.className=`toast ${type}`;el.innerHTML=`<span style="font-size:14px;flex-shrink:0">${{ok:'✓',err:'✕',info:'ℹ',warn:'⚠'}[type]||'ℹ'}</span><span>${msg}</span>`;s.appendChild(el);setTimeout(()=>el.remove(),3500);}
function eH(s){return String(s).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"');}
function pillClass(t){if(!t)return'pill-o';const u=t.toUpperCase();if(['INTEGER','BIGINT','REAL','NUMERIC','FLOAT','INT'].some(x=>u.includes(x)))return'pill-n';if(u==='BOOLEAN')return'pill-b';if(['TIMESTAMP','DATE','TIME'].some(x=>u.includes(x)))return'pill-d';if(['JSON','JSONB'].some(x=>u.includes(x)))return'pill-j';if(['TEXT','VARCHAR','CHAR'].some(x=>u.includes(x)))return'pill-t';return'pill-o';}
function shortType(t){if(!t)return'?';return t.replace('DOUBLE PRECISION','FLOAT8').replace('TIMESTAMP','TS').replace('BOOLEAN','BOOL').replace('BIGINT','INT8').replace('INTEGER','INT4');}
function clockTick(){document.getElementById('sb-time').textContent=new Date().toLocaleTimeString();}

// Final initialization
document.addEventListener('DOMContentLoaded',function(){
  applyTheme();
  setTimeout(()=>renderDashboard(),2000);
});

// ═══════════════════════════════════════════════════════════════════════
// POSTGRESQL (pgAdmin) SIMULATOR v4.0 — NEW FEATURES
// Smart Autocomplete · Data Profiler · Query Favorites · Index Advisor
// Cell Content Viewer · Activity Log · Schema Export · Visual Schema Diff
// ═══════════════════════════════════════════════════════════════════════

// ── GLOBAL STATE FOR NEW FEATURES ────────────────────
let FAVORITES = JSON.parse(localStorage.getItem('pgas_fav') || '[]');
let ACTIVITY_LOG = JSON.parse(localStorage.getItem('pgas_act') || '[]');
let AC_INDEX = -1, AC_ITEMS = [];
let CELL_CTX_VAL = null, CELL_CTX_ROW_IDX = null, CELL_CTX_COL = null;
const TIMING_HISTORY = [], MAX_SPARKS = 10;

// ── SMART AUTOCOMPLETE ────────────────────────────────
function showAutocomplete() {
  const ed = document.getElementById('editor');
  const before = ed.value.slice(0, ed.selectionStart);
  const wordMatch = before.match(/([\w.]+)$/);
  if (!wordMatch || wordMatch[1].length < 2) { hideAutocomplete(); return; }
  const word = wordMatch[1].toLowerCase();

AC_ITEMS = [...new Map(items.map(i => [i.text, i])).values()].slice(0, 20);
  AC_INDEX = -1;
  const drop = document.getElementById('ac-drop');
  if (AC_ITEMS.length === 0) { hideAutocomplete(); return; }

drop.innerHTML = AC_ITEMS.map((it, i) =>
    `<div class="ac-item" data-idx="${i}"><span class="ac-tag ${it.type}">${it.type === 'kw' ? 'KW' : it.type === 'tbl' ? 'TBL' : it.type === 'col' ? 'COL' : 'FN'}</span>${eH(it.text)}</div>`
  ).join('');

drop.querySelectorAll('.ac-item').forEach(el => {
    el.addEventListener('click', () => { AC_INDEX = parseInt(el.dataset.idx); applyAutocomplete(); });
    el.addEventListener('mouseenter', () => { AC_INDEX = parseInt(el.dataset.idx); highlightAcItem(); });
  });

const rect = ed.getBoundingClientRect();
  const lineHeight = parseFloat(getComputedStyle(ed).lineHeight);
  const textBefore = before.slice(wordMatch.index);
  const lines = textBefore.split('\n');
  const lastLineLen = lines[lines.length - 1].length;
  const topOffset = Math.min((lines.length - 1) * lineHeight + 24, ed.offsetHeight - 220);
  const leftOffset = Math.min(lastLineLen * 8 + 60, ed.offsetWidth - 270);
  drop.style.top = (rect.top + topOffset) + 'px';
  drop.style.left = (rect.left + leftOffset) + 'px';
  drop.classList.add('on');
}

function hideAutocomplete() { const d = document.getElementById('ac-drop'); if (d) d.classList.remove('on'); AC_ITEMS = []; AC_INDEX = -1; }
function highlightAcItem() { document.querySelectorAll('#ac-drop .ac-item').forEach((el, i) => el.classList.toggle('sel', i === AC_INDEX)); }

function applyAutocomplete() {
  if (AC_INDEX < 0 || AC_INDEX >= AC_ITEMS.length) return;
  const ed = document.getElementById('editor');
  const before = ed.value.slice(0, ed.selectionStart);
  const wordMatch = before.match(/([\w.]+)$/);
  if (!wordMatch) return;
  const start = wordMatch.index;
  const item = AC_ITEMS[AC_INDEX];
  ed.value = before.slice(0, start) + item.text + ed.value.slice(ed.selectionStart);
  ed.selectionStart = ed.selectionEnd = start + item.text.length;
  hideAutocomplete(); updateGutter(); ed.focus();
}

// ── INDEX ADVISOR (Ctrl+I) ────────────────────────────
async function runIndexAdvisor() {
  const sql = getSQL();
  if (!sql) { toast('No query to analyze', 'warn'); return; }
  setRunState(true); showLoading('Analyzing query for index suggestions...');
  try {
    const upper = sql.toUpperCase();
    let advice = ['── INDEX ADVISOR ──', '│ Query: ' + sql.substring(0, 100).replace(/\n/g, ' ') + (sql.length > 100 ? '...' : '')];
    const whereCols = [...sql.matchAll(/WHERE\s+(?:[\w"'.\s=!<>]+?)(?:=|!=|>|<|>=|<=|LIKE|IN|BETWEEN)\s*[^;]+/gi)].map(m => m[0]);
    const joinCols = [...sql.matchAll(/ON\s+[\w".]+\.[\w"]+\s*=\s*[\w".]+\.[\w"]+/gi)].map(m => m[0]);
    const orderCols = [...sql.matchAll(/ORDER BY\s+([^;]+)/gi)].map(m => m[1]);
    const groupCols = [...sql.matchAll(/GROUP BY\s+([^;]+)/gi)].map(m => m[1]);
    const tables = [...sql.matchAll(/(?:FROM|JOIN)\s+"?(\w+)"?/gi)].map(m => m[1]);

advice.push('│ Tables: ' + [...new Set(tables)].join(', '));
    if (whereCols.length) { advice.push('│'); advice.push('│ 🔍 WHERE columns — index candidates:'); whereCols.forEach(c => advice.push('│   ' + c.trim())); }
    if (joinCols.length) { advice.push('│'); advice.push('│ 🔗 JOIN columns (should ALWAYS be indexed):'); joinCols.forEach(c => advice.push('│   ' + c.trim())); }
    if (orderCols.length) { advice.push('│'); advice.push('│ ↕ ORDER BY: ' + orderCols.join(', ')); }
    if (groupCols.length) { advice.push('│'); advice.push('│ 📊 GROUP BY: ' + groupCols.join(', ')); }
    if (!whereCols.length && !joinCols.length && !orderCols.length && !groupCols.length) { advice.push('│ ✅ No obvious index candidates. This looks like a simple SELECT or DDL.'); }
    advice.push('│'); advice.push('│ 💡 General Tips: Index WHERE/JOIN/ORDER BY/GROUP BY columns. Avoid low-cardinality indexes. Composite: most selective first.');
    renderExplain(advice.join('\n'), false); switchResTab('explain');
    addActivity('advisor', 'Index Advisor: ' + (whereCols.length + joinCols.length) + ' candidate columns found', true, 0);
    toast('Index Advisor complete — see Explain tab', 'ok');
  } catch (e) { toast('Advisor error: ' + e.message, 'err'); }
  finally { setRunState(false); hideLoading(); }
}

// ── ACTIVITY LOG ──────────────────────────────────────
function addActivity(type, msg, ok, ms) {
  ACTIVITY_LOG.unshift({ type, msg, ok, ms, time: new Date().toLocaleTimeString() });
  if (ACTIVITY_LOG.length > 200) ACTIVITY_LOG.pop();
  try { localStorage.setItem('pgas_act', JSON.stringify(ACTIVITY_LOG.slice(0, 100))); } catch (e) {}
  renderActivityLog();
}
function clearActivityLog() { ACTIVITY_LOG = []; localStorage.removeItem('pgas_act'); renderActivityLog(); toast('Activity log cleared', 'ok'); }
function renderActivityLog() {
  const el = document.getElementById('activity-log-list');
  if (!el) return;
  if (!ACTIVITY_LOG.length) { el.innerHTML = '<div style="color:var(--t3);font-size:12px">No activity yet. Run queries to build the log.</div>'; return; }
  el.innerHTML = ACTIVITY_LOG.slice(0, 80).map(a =>
    `<div class="act-item"><span class="act-time">${a.time}</span><span class="act-msg ${a.ok ? 'act-ok' : 'act-err'}">${eH(a.msg)}</span>${a.ms ? '<span style="color:var(--t3);font-size:10px">' + a.ms + 'ms</span>' : ''}</div>`
  ).join('');
}

// ── QUERY FAVORITES ───────────────────────────────────
function toggleFavorite(idx, ev) {
  ev.stopPropagation();
  const h = HISTORY[idx]; if (!h) return;
  h.fav = !h.fav;
  if (h.fav) { if (!FAVORITES.find(f => f.sql === h.sql)) FAVORITES.unshift(h); }
  else { FAVORITES = FAVORITES.filter(f => f.sql !== h.sql); }
  try { localStorage.setItem('pgas_fav', JSON.stringify(FAVORITES.slice(0, 100))); } catch (e) {}
  renderRPanel('history');
}
function isFavorite(sql) { return FAVORITES.some(f => f.sql === sql); }
function renderFavoritesList() {
  const el = document.getElementById('fav-list');
  if (!FAVORITES.length) { el.innerHTML = '<div style="color:var(--t3);font-size:12px">No favorites yet. Click ☆ in the History tab to star queries.</div>'; return; }
  el.innerHTML = FAVORITES.map((h, i) =>
    `<div class="hist-item fav" onclick="document.getElementById('editor').value=${JSON.stringify(h.sql)};updateGutter();closeModal('modal-favorites');toast('Loaded favorite query','ok')"><div class="hist-time">⭐ ${h.time}</div><div class="hist-sql">${eH(h.sql.substring(0, 90))}</div><div class="hist-st"><span class="${h.ok ? 'hok' : 'herr'}">${h.ok ? 'OK' : 'ERR'}</span><span class="htm">${h.ms}ms</span></div></div>`
  ).join('');
}

// ── DATA PROFILER ─────────────────────────────────────
function renderProfiler(tblName) {
  const tbl = TABLES[tblName]; if (!tbl) return;
  const cols = tbl.cols || []; const rows = tbl.rows || 0;
  let h = `<div class="rpsec"><div class="rpsec-ttl">📊 Profiler: ${eH(tblName)}</div><div class="rprow"><span class="rpk">Rows</span><span class="rpv">${rows.toLocaleString()}</span></div><div class="rprow"><span class="rpk">Columns</span><span class="rpv">${cols.length}</span></div></div>`;
  cols.forEach(c => {
    const vals = ALL_ROWS.length ? ALL_ROWS.map(r => r[c.name]).filter(v => v !== null && v !== undefined) : [];
    const nulls = ALL_ROWS.length ? ALL_ROWS.length - vals.length : 0;
    const uniq = new Set(vals).size;
    const pct = rows ? Math.round(uniq / rows * 100) : 0;
    h += `<div class="rpsec"><div class="rpsec-ttl">${eH(c.name)} <span class="pill ${pillClass(c.type)}">${shortType(c.type)}</span></div>
    <div class="rprow"><span class="rpk">Unique</span><span class="rpv">${uniq.toLocaleString()} (${pct}%)</span></div>
    <div class="rprow"><span class="rpk">Nulls</span><span class="rpv ${nulls > 0 ? 'warn' : ''}">${nulls.toLocaleString()}</span></div>
    <div style="margin:4px 0"><div class="prof-bar"><div class="prof-fill ${pct > 80 ? 'good' : pct > 30 ? 'warn' : 'bad'}" style="width:${pct}%"></div></div><span style="font-size:9px;color:var(--t3)">${pct}% unique</span></div></div>`;
  });
  document.getElementById('rp-body').innerHTML = h;
}

// ── CELL CONTENT VIEWER ───────────────────────────────
function setupCellContextMenu() {
  const dg = document.getElementById('dg');
  if (!dg) return;
  dg.addEventListener('contextmenu', function(e) {
    const td = e.target.closest('td'); if (!td) return;
    e.preventDefault();
    const tr = td.closest('tr');
    const colIdx = td.cellIndex - 1;
    if (colIdx < 0) return;
    const rowIdx = [...tr.parentElement.children].indexOf(tr);
    const col = CUR_COLS[colIdx] ? CUR_COLS[colIdx].name || CUR_COLS[colIdx] : null;
    if (!col) return;
    CELL_CTX_VAL = CUR_ROWS[rowIdx] ? CUR_ROWS[rowIdx][col] : null;
    CELL_CTX_ROW_IDX = rowIdx;
    CELL_CTX_COL = col;
    const m = document.getElementById('cell-ctx');
    m.style.left = e.clientX + 'px'; m.style.top = e.clientY + 'px'; m.classList.add('on');
  });
  document.addEventListener('click', () => { const c = document.getElementById('cell-ctx'); if (c) c.classList.remove('on'); });
}
function viewCellContent() {
  document.getElementById('cell-ctx').classList.remove('on');
  if (CELL_CTX_VAL === null || CELL_CTX_VAL === undefined) { toast('Cell value is NULL', 'info'); return; }
  document.getElementById('cellview-info').innerHTML = `<strong>Column:</strong> ${eH(CELL_CTX_COL || '?')} | <strong>Row:</strong> ${CELL_CTX_ROW_IDX !== null ? CELL_CTX_ROW_IDX + 1 : '?'} | <strong>Type:</strong> ${typeof CELL_CTX_VAL}`;
  document.getElementById('cellview-content').textContent = typeof CELL_CTX_VAL === 'object' ? JSON.stringify(CELL_CTX_VAL, null, 2) : String(CELL_CTX_VAL);
  openModal('modal-cellview');
  addActivity('view', 'Viewed cell: ' + (CELL_CTX_COL || '?'), true, 0);
}
function copyCellToClipboard() {
  const content = document.getElementById('cellview-content').textContent;
  navigator.clipboard.writeText(content).then(() => toast('✓ Copied to clipboard', 'ok')).catch(() => toast('Copy failed', 'err'));
}
function copyCellValue() {
  document.getElementById('cell-ctx').classList.remove('on');
  if (CELL_CTX_VAL === null || CELL_CTX_VAL === undefined) { navigator.clipboard.writeText('NULL'); toast('Copied: NULL', 'ok'); return; }
  navigator.clipboard.writeText(String(CELL_CTX_VAL)).then(() => toast('Copied', 'ok')).catch(() => toast('Copy failed', 'err'));
}
function copyRowAsJSON() {
  document.getElementById('cell-ctx').classList.remove('on');
  if (CELL_CTX_ROW_IDX === null) return;
  navigator.clipboard.writeText(JSON.stringify(CUR_ROWS[CELL_CTX_ROW_IDX], null, 2)).then(() => toast('Row copied as JSON', 'ok')).catch(() => toast('Copy failed', 'err'));
}
function filterByCellValue() {
  document.getElementById('cell-ctx').classList.remove('on');
  if (CELL_CTX_VAL === null) return;
  document.getElementById('filter-input').value = String(CELL_CTX_VAL);
  if (CELL_CTX_COL) {
    const fcol = document.getElementById('filter-col');
    for (let i = 0; i < fcol.options.length; i++) { if (fcol.options[i].value === CELL_CTX_COL) { fcol.selectedIndex = i; break; } }
  }
  filterRows(String(CELL_CTX_VAL));
  document.getElementById('filterbar').classList.add('on');
}

// ── SCHEMA EXPORT ─────────────────────────────────────
function exportSchema() {
  const tables = Object.keys(TABLES);
  if (!tables.length) { toast('No tables to export', 'warn'); return; }
  const lines = ['-- Schema (DDL) Export — pgAdmin Simulator v4.0', '-- Generated: ' + new Date().toISOString(), '-- Built by: Adewale Samson Adeagbo', ''];
  tables.forEach(name => {
    const t = TABLES[name]; const cols = (t.cols || []);
    const defs = cols.map(c => `    "${c.name}" ${c.type}`).join(',\n');
    lines.push(`CREATE TABLE "${name}" (\n${defs}\n);`); lines.push('');
  });
  dl('schema_ddl_' + Date.now() + '.sql', lines.join('\n'), 'text/plain');
  toast('✓ Schema exported — ' + tables.length + ' tables', 'ok');
  addActivity('export', 'Schema (DDL) exported: ' + tables.length + ' tables', true, 0);
}

// ── VISUAL SCHEMA DIFF ────────────────────────────────
function renderSchemaDiff() {
  const a = document.getElementById('diff-a').value, b = document.getElementById('diff-b').value;
  const out = document.getElementById('diff-output');
  if (!a || !b) { out.innerHTML = '<div style="color:var(--t3);font-size:12px">Select two tables above to compare their column structures.</div>'; return; }
  const tA = TABLES[a], tB = TABLES[b];
  if (!tA || !tB) { out.innerHTML = '<div style="color:var(--t3);font-size:12px">Both tables must be loaded.</div>'; return; }

// ── SPARKLINE ─────────────────────────────────────────
function addSparkTiming(ms) { TIMING_HISTORY.push(parseFloat(ms)); if (TIMING_HISTORY.length > MAX_SPARKS) TIMING_HISTORY.shift(); renderSparkline(); }
function renderSparkline() {
  const wrap = document.getElementById('spark-wrap'); if (!wrap || !TIMING_HISTORY.length) return;
  const max = Math.max(...TIMING_HISTORY, 1);
  wrap.innerHTML = TIMING_HISTORY.map((ms, i) => {
    const h = Math.max(3, Math.round((ms / max) * 18));
    const color = ms > 1000 ? 'var(--red)' : ms > 200 ? 'var(--amb)' : 'var(--pg3)';
    return `<div class="spark-bar" style="height:${h}px;background:${color}" title="${ms}ms"></div>`;
  }).join('');
}

// ── FUNCTION WRAPPING FOR v4.0 INTEGRATION ─────────────

// Wrap runQuery to track activities and sparklines
const __runQuery = runQuery;
runQuery = async function() {
  const t0 = performance.now();
  await __runQuery();
  const ms = (performance.now() - t0).toFixed(1);
  addSparkTiming(ms);
  const sqlShort = (getSQL() || '?').substring(0, 70);
  addActivity('query', 'Executed: ' + sqlShort.replace(/\n/g, ' ') + (getSQL().length > 70 ? '...' : ''), true, ms);
  setTimeout(() => { setupCellContextMenu(); }, 100);
};

// Wrap onEditorInput to trigger autocomplete
const __onEditorInput = onEditorInput;
onEditorInput = function() { __onEditorInput(); showAutocomplete(); };

// Wrap onEditorKey to handle autocomplete navigation
const __onEditorKey = onEditorKey;
onEditorKey = function(e) {
  if (document.getElementById('ac-drop').classList.contains('on')) {
    if (e.key === 'ArrowDown') { e.preventDefault(); AC_INDEX = Math.min(AC_INDEX + 1, AC_ITEMS.length - 1); highlightAcItem(); return; }
    if (e.key === 'ArrowUp') { e.preventDefault(); AC_INDEX = Math.max(AC_INDEX - 1, 0); highlightAcItem(); return; }
    if (e.key === 'Enter' || e.key === 'Tab') { e.preventDefault(); if (AC_INDEX >= 0) { applyAutocomplete(); } else if (e.key === 'Enter') { hideAutocomplete(); runQuery(); } return; }
    if (e.key === 'Escape') { hideAutocomplete(); return; }
  }
  __onEditorKey(e);
  setTimeout(showAutocomplete, 50);
};

// Wrap globalKey for Ctrl+I (Index Advisor)
const __globalKey = globalKey;
globalKey = function(e) {
  if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'i') { e.preventDefault(); runIndexAdvisor(); return; }
  if (e.key === 'Escape') { hideAutocomplete(); document.getElementById('cell-ctx').classList.remove('on'); }
  __globalKey(e);
};

// Wrap renderRPanel for Profiler + enhanced History
const __renderRPanel = renderRPanel;
renderRPanel = function(t) {
  if (t === 'profiler') {
    const tblName = Object.keys(TABLES)[0];
    if (tblName) renderProfiler(tblName);
    else document.getElementById('rp-body').innerHTML = '<div style="color:var(--t3);font-size:12px;padding:12px">Click a table in the Browser or run a query, then switch to Profiler.</div>';
    return;
  }
  if (t === 'history') {
    const body = document.getElementById('rp-body');
    if (!HISTORY.length) { body.innerHTML = '<div style="color:var(--t3);font-size:12px">No history yet. Run queries to build history.<br><br>⭐ Click ☆ to favorite queries.</div>'; return; }
    body.innerHTML = `<div style="display:flex;justify-content:flex-end;margin-bottom:8px"><button class="btn btnd" style="padding:3px 10px;font-size:11px" onclick="clearHistory()">Clear All</button></div>${HISTORY.slice(0, 60).map((h,i)=>`<div class="hist-item${h.fav?' fav':''}" onclick="loadHistory(${i})"><div class="hist-time"><button class="hist-star${isFavorite(h.sql)?' on':''}" onclick="toggleFavorite(${i},event)" title="${isFavorite(h.sql)?'Unstar':'Star'}">${isFavorite(h.sql)?'★':'☆'}</button>${h.time}</div><div class="hist-sql">${eH(h.sql.substring(0,90))}</div><div class="hist-st"><span class="${h.ok?'hok':'herr'}">${h.ok?'OK':'ERR'}</span><span class="htm">${h.ms}ms</span></div></div>`).join('')}`;
    return;
  }
  __renderRPanel(t);
};

// Wrap selectTable to trigger profiler
const __selectTable = selectTable;
selectTable = function(name) {
  __selectTable(name);
  setTimeout(() => { renderProfiler(name); switchRTab('profiler'); }, 200);
};

// Wrap switchResTab to include activity tab
const __switchResTab = switchResTab;
switchResTab = function(t) {
  ['data','messages','explain','chart','pivot','erd','querybuilder','dashboard','activity','help'].forEach(x => {
    const rt = document.getElementById('rt-' + x), rp = document.getElementById('rp-' + x);
    if (rt) rt.classList.toggle('on', x === t);
    if (rp) rp.classList.toggle('on', x === t);
  });
  if (t === 'activity') renderActivityLog();
  if (t === 'erd') renderERD();
  if (t === 'querybuilder') renderQueryBuilder();
  if (t === 'dashboard') renderDashboard();
  if (t === 'chart' && ALL_ROWS.length) drawChart();
};

// Wrap openModal to refresh certain modals
const __openModal = openModal;
openModal = function(id) {
  __openModal(id);
  if (id === 'modal-favorites') renderFavoritesList();
  if (id === 'modal-diff') renderSchemaDiff();
};

// Wrap syncTables to populate diff selects
const __syncTables = syncTables;
syncTables = function() {
  __syncTables();
  const names = Object.keys(TABLES);
  ['diff-a', 'diff-b'].forEach(id => {
    const el = document.getElementById(id);
    if (el) el.innerHTML = names.map(n => `<option value="${eH(n)}">${eH(n)}</option>`).join('');
  });
  renderActivityLog();
};

// Wrap loadSample to add activity
const __loadSample = loadSample;
loadSample = async function(type) {
  await __loadSample(type);
  addActivity('sample', 'Loaded sample dataset: ' + type, true, 0);
};

// Wrap doBackup to add activity
const __doBackup = doBackup;
doBackup = async function() {
  await __doBackup();
  addActivity('backup', 'Database backup created', true, 0);
};

// Grid keyboard nav
let FOCUSED_CELL = null;
function setupGridKeyNav() {
  const dg = document.getElementById('dg'); if (!dg) return;
  dg.addEventListener('click', function(e) {
    const td = e.target.closest('td'); if (!td || td.classList.contains('rnc')) return;
    document.querySelectorAll('.dg td.focused').forEach(el => el.classList.remove('focused'));
    td.classList.add('focused'); td.setAttribute('tabindex', '0'); td.focus();
    const tr = td.closest('tr');
    FOCUSED_CELL = { row: [...tr.parentElement.children].indexOf(tr), col: td.cellIndex };
  });
}

console.log('🐘 PostgreSQL (pgAdmin) Simulator v4.0 initialized');
console.log('Built by Adewale Samson Adeagbo — Data Scientist · EdTech Builder');
console.log('Features: Smart Autocomplete | Data Profiler | Query Favorites | Index Advisor | Cell Viewer | Activity Log | Schema Diff');
console.log('https://cssadewale.pages.dev');

// ═══════════════════════════════════════════════════════════════════════
// 🏢 POSTGRESQL (pgAdmin) SIMULATOR v4.0 ENTERPRISE
// 14 Enterprise Features — 100% Free. No AI API. No Server. Works Offline.
// Built by Adewale Samson Adeagbo — Data Scientist · EdTech Builder
// ═══════════════════════════════════════════════════════════════════════

// ── ENTERPRISE GLOBAL STATE ──────────────────────────
let CUSTOM_SNIPPETS = JSON.parse(localStorage.getItem('pgas_csnip') || '[]');
let TAB_GROUPS = JSON.parse(localStorage.getItem('pgas_tgrp') || '[]');
let MACRO_STEPS = [], IS_RECORDING = false;
let RS_DIFF_SNAPSHOT = null, WIZ_STEP = 1;
let ENTERPRISE_INIT = false;

function initEnterprise() {
  if (ENTERPRISE_INIT) return; ENTERPRISE_INIT = true;
  console.log('🏢 Enterprise v4.0 features activated');
}

// ═══════════════════════════════════════════════════════════════════
// 1. GRAPHICAL EXPLAIN PLAN TREE
// Augments the existing text-based explain with an interactive visual tree
// ═══════════════════════════════════════════════════════════════════
const __explainQueryE = explainQuery;
explainQuery = async function() {
  await __explainQueryE();
  setTimeout(buildGraphicalExplain, 50);
};

// ═══════════════════════════════════════════════════════════════════
// 2. DATABASE GLOBAL SEARCH
// ═══════════════════════════════════════════════════════════════════
function performDBSearch() {
  const term = document.getElementById('dbsearch-inp').value.trim().toLowerCase();
  const res = document.getElementById('dbsearch-results');
  if (!term) { res.innerHTML='<div style="color:var(--t3);font-size:12px">Enter a search term.</div>'; return; }
  if (!Object.keys(TABLES).length) { res.innerHTML='<div style="color:var(--t3);font-size:12px">No tables loaded.</div>'; return; }
  let found=[], totalChecked=0; const t0=performance.now();
  for (const [tblName,tbl] of Object.entries(TABLES)) {
    try {
      const cols=(tbl.cols||[]).map(c=>c.name); if(!cols.length)continue;
      const r=DB.exec(`SELECT * FROM "${tblName}"`); if(!r.length)continue;
      totalChecked+=r[0].values.length;
      for(const row of r[0].values) {
        for(let ci=0;ci<r[0].columns.length;ci++) {
          if(String(row[ci]??'').toLowerCase().includes(term)) {
            found.push({table:tblName,column:r[0].columns[ci],value:String(row[ci]??'NULL')});
            if(found.length>=50)break;
          }
        }
        if(found.length>=50)break;
      }
    }catch(e){}
    if(found.length>=50)break;
  }
  const ms=(performance.now()-t0).toFixed(0);
  if(!found.length){res.innerHTML=`<div style="color:var(--t2);text-align:center;padding:20px">🔍 No matches for "<strong>${eH(term)}</strong>" in ${totalChecked.toLocaleString()} rows across ${Object.keys(TABLES).length} tables</div>`;return;}
  let h=`<div class="search-stats" style="margin-bottom:10px">Found ${found.length} match(es) in ${totalChecked.toLocaleString()} rows (${ms}ms)</div><div class="search-results">`;
  found.forEach(f=>h+=`<div class="search-result-item" onclick="closeModal('modal-dbsearch');document.getElementById('editor').value='SELECT * FROM "${f.table}" WHERE "${f.column}" = \''${String(f.value).replace(/'/g,"''").substring(0,60)}'\' LIMIT 100;';updateGutter();runQuery()"><div class="search-result-tbl">📋 ${eH(f.table)} → <span style="color:var(--pg3)">${eH(f.column)}</span></div><div class="search-result-val">${eH(f.value.length>120?f.value.slice(0,117)+'...':f.value)}</div></div>`);
  h+='</div>'; res.innerHTML=h;
  addActivity('search','DB Search: "'+term+'" — '+found.length+' matches',true,ms);
}

// ═══════════════════════════════════════════════════════════════════
// 3. SERVER ACTIVITY MONITOR
// ═══════════════════════════════════════════════════════════════════
function renderActivityMonitor() {
  const el=document.getElementById('monitor-content');if(!el)return;
  const tc=Object.keys(TABLES).length,tr=Object.values(TABLES).reduce((s,t)=>s+(t.rows||0),0);
  const hc=HISTORY.length,recent=HISTORY.slice(0,5);
  const avgMs=hc?(HISTORY.reduce((s,h)=>s+(parseFloat(h.ms)||0),0)/Math.min(hc,20)).toFixed(1):'—';
  const sessions=[{id:'PID-1042',query:Object.keys(TABLES)[0]?'SELECT * FROM "'+Object.keys(TABLES)[0]+'" LIMIT 100':'—',state:'active',dur:'12ms'},{id:'PID-1043',query:'— Idle',state:'idle',dur:'3m 22s'},{id:'PID-1044',query:recent[0]?.sql?.substring(0,50)||'—',state:'idle',dur:'45s'},{id:'PID-1045',query:'WAITING — lock on '+(Object.keys(TABLES)[1]||'—'),state:'waiting',dur:'2s'}];
  const cpuPct=Math.min(95,5+(tc*3)+(hc*0.5)),memPct=Math.min(90,20+(tr/10000));
  el.innerHTML=`
  <div class="monitor-card"><div class="monitor-hd">🖥 Server Resources</div>
    <div class="monitor-gauge"><span style="font-size:10px;color:var(--t2);min-width:35px">CPU</span><div class="monitor-gauge-bar"><div class="monitor-gauge-fill" style="width:${cpuPct}%;background:${cpuPct>80?'var(--red)':cpuPct>50?'var(--amb)':'var(--grn)'}"></div></div><span class="monitor-gauge-val">${cpuPct.toFixed(0)}%</span></div>
    <div class="monitor-gauge"><span style="font-size:10px;color:var(--t2);min-width:35px">MEM</span><div class="monitor-gauge-bar"><div class="monitor-gauge-fill" style="width:${memPct}%;background:${memPct>80?'var(--red)':memPct>50?'var(--amb)':'var(--grn)'}"></div></div><span class="monitor-gauge-val">${memPct.toFixed(0)}%</span></div>
    <div style="font-size:10px;color:var(--t2);margin-top:8px">Tables: ${tc} | Rows: ${tr.toLocaleString()} | Avg: ${avgMs}ms</div>
  </div>
  <div class="monitor-card"><div class="monitor-hd">📡 Active Sessions</div>
    ${sessions.map(s=>`<div class="monitor-session"><span class="sid">${s.id}</span><span class="squery">${eH(s.query)}</span><span class="sstate ${s.state}">● ${s.state}</span><span style="color:var(--t3);font-size:9px">${s.dur}</span></div>`).join('')}
    <div style="margin-top:8px;font-size:10px;color:var(--t2)">Pool: <div class="conn-pool" style="display:inline-flex;vertical-align:middle;margin-left:6px">${[...Array(10)].map((_,i)=>`<div class="conn-slot ${i<3?'used':i<4?'waiting':'idle'}"></div>`).join('')}</div></div>
  </div>
  <div class="monitor-card"><div class="monitor-hd">📊 Throughput</div>
    <div style="font-size:10px;color:var(--t2);line-height:2.2">Queries: <strong style="color:var(--t0)">${hc.toLocaleString()}</strong><br>Avg: <strong style="color:var(--t0)">${avgMs}ms</strong><br>Tables: <strong style="color:var(--t0)">${tc}</strong><br>Rows: <strong style="color:var(--t0)">${tr.toLocaleString()}</strong><br>Txns: <strong style="color:${IN_TXN?'var(--amb)':'var(--grn)'}">${IN_TXN?'1 active':'None'}</strong></div>
  </div>`;
}

// ═══════════════════════════════════════════════════════════════════
// 4. DATA GENERATOR
// ═══════════════════════════════════════════════════════════════════
function renderDataGenerator() {
  const el=document.getElementById('gen-ui');
  el.innerHTML=`<div class="gen-option"><span class="gen-option-lbl">Table Name</span><input type="text" id="gen-tblname" value="generated_data" style="width:200px;background:var(--bg3);border:1px solid var(--brd1);border-radius:4px;color:var(--t0);font-size:11px;padding:4px 8px"></div>
  <div class="gen-option"><span class="gen-option-lbl">Row Count</span><input type="number" id="gen-rows" value="100" min="1" max="10000" style="width:100px;background:var(--bg3);border:1px solid var(--brd1);border-radius:4px;color:var(--t0);font-size:11px;padding:4px 8px"></div>
  <div class="gen-option"><span class="gen-option-lbl">Template</span><select id="gen-template" onchange="updateGenPreview()" style="background:var(--bg3);border:1px solid var(--brd1);border-radius:4px;color:var(--t0);font-size:11px;padding:4px 8px;width:220px"><option value="users">Users (id, name, email, age, city)</option><option value="orders">Orders (id, customer, product, amount, date)</option><option value="products">Products (id, name, category, price, stock)</option><option value="logs">System Logs (id, timestamp, level, msg, source)</option><option value="sensors">IoT Sensors (id, ts, temp, humidity, pressure)</option></select></div>
  <button class="btn btnp" onclick="generateData()" style="margin-top:10px">🧬 Generate Data</button>
  <div class="gen-preview" id="gen-preview" style="margin-top:10px">Select a template and row count above, then click Generate.</div>`;
}
function updateGenPreview() {
  const t=document.getElementById('gen-template').value;
  const m={users:'id (INT), name (TEXT), email (TEXT), age (INT), city (TEXT)',orders:'id (INT), customer_id (INT), product (TEXT), amount (REAL), order_date (TEXT)',products:'id (INT), name (TEXT), category (TEXT), price (REAL), stock_qty (INT)',logs:'id (INT), timestamp (TEXT), level (TEXT), message (TEXT), source (TEXT)',sensors:'id (INT), timestamp (TEXT), temperature (REAL), humidity (REAL), pressure (REAL)'};
  document.getElementById('gen-preview').textContent='Schema: '+(m[t]||'?');
}
function generateData() {
  if(!DB){toast('Engine not ready','err');return;}
  const tbl=(document.getElementById('gen-tblname').value||'generated_data').toLowerCase().replace(/[^a-z0-9_]/g,'_');
  const n=Math.min(10000,Math.max(1,parseInt(document.getElementById('gen-rows').value)||100));
  const tpl=document.getElementById('gen-template').value;
  const R=(a,b)=>Math.floor(Math.random()*(b-a+1)+a);
  const P=a=>a[R(0,a.length-1)];
  const D=()=>{const d=new Date(2025,R(0,11),R(1,28));return d.toISOString().slice(0,10);};
  const TS=()=>{const d=new Date(2025,R(0,11),R(1,28),R(0,23),R(0,59),R(0,59));return d.toISOString().slice(0,19).replace('T',' ');};
  const cities=['Lagos','Abuja','Nairobi','Accra','Cairo'];
  const names=['Alice Chen','Bob Smith','Carol White','David Lee','Eve Garcia'];
  let cols,rows;
  if(tpl==='users'){cols=[{name:'id',type:'INTEGER'},{name:'name',type:'TEXT'},{name:'email',type:'TEXT'},{name:'age',type:'INTEGER'},{name:'city',type:'TEXT'}];rows=Array.from({length:n},(_,i)=>({id:i+1,name:P(names),email:P(names).toLowerCase().replace(' ','.')+'@email.com',age:R(18,65),city:P(cities)}));}
  else if(tpl==='orders'){cols=[{name:'id',type:'INTEGER'},{name:'customer_id',type:'INTEGER'},{name:'product',type:'TEXT'},{name:'amount',type:'REAL'},{name:'order_date',type:'TEXT'}];rows=Array.from({length:n},(_,i)=>({id:i+1,customer_id:R(1,300),product:P(['Widget Pro','Gadget X','SuperTool']),amount:+(R(10,5000)+Math.random()).toFixed(2),order_date:D()}));}
  else if(tpl==='products'){cols=[{name:'id',type:'INTEGER'},{name:'name',type:'TEXT'},{name:'category',type:'TEXT'},{name:'price',type:'REAL'},{name:'stock_qty',type:'INTEGER'}];rows=Array.from({length:n},(_,i)=>({id:i+1,name:'Product '+(i+1),category:P(['Electronics','Clothing','Books']),price:+(R(5,2000)+Math.random()).toFixed(2),stock_qty:R(0,500)}));}
  else if(tpl==='logs'){cols=[{name:'id',type:'INTEGER'},{name:'timestamp',type:'TEXT'},{name:'level',type:'TEXT'},{name:'message',type:'TEXT'},{name:'source',type:'TEXT'}];rows=Array.from({length:n},(_,i)=>({id:i+1,timestamp:TS(),level:P(['INFO','WARN','ERROR','DEBUG']),message:P(['Request processed','Connection OK','Cache cleared','File uploaded']),source:P(['api','auth','db','web'])}));}
  else{cols=[{name:'id',type:'INTEGER'},{name:'timestamp',type:'TEXT'},{name:'temperature',type:'REAL'},{name:'humidity',type:'REAL'},{name:'pressure',type:'REAL'}];rows=Array.from({length:n},(_,i)=>({id:i+1,timestamp:TS(),temperature:+(20+Math.random()*15).toFixed(1),humidity:+(40+Math.random()*40).toFixed(1),pressure:+(990+Math.random()*40).toFixed(1)}));}
  showLoading('Generating '+n.toLocaleString()+' rows...');
  try{
    try{runSQL(`DROP TABLE IF EXISTS "${tbl}"`);}catch(e){}
    runSQL(`CREATE TABLE "${tbl}" (${cols.map(c=>`"${c.name}" ${c.type}`).join(',')})`);
    const BATCH=300;
    for(let i=0;i<rows.length;i+=BATCH){const batch=rows.slice(i,i+BATCH);const ph=batch.map(()=>'('+cols.map(()=>'?').join(',')+')').join(',');const vals=batch.flatMap(r=>cols.map(c=>r[c.name]));try{const s=DB.prepare(`INSERT INTO "${tbl}" VALUES ${ph}`);s.run(vals);s.free();}catch(e){}}
    TABLES[tbl]={cols,rows:n,file:'generated_'+tpl};syncTables();
    autoSelect(tbl,cols.map(c=>c.name));hideLoading();
    toast('✓ "'+tbl+'" — '+n.toLocaleString()+' rows, '+cols.length+' cols','ok');
    addActivity('generate','Generated "'+tbl+'": '+n.toLocaleString()+' rows ('+tpl+')',true,0);
  }catch(e){hideLoading();toast('Error: '+e.message,'err');}
}

// ═══════════════════════════════════════════════════════════════════
// 5. QUERY MACROS (Record & Replay)
// ═══════════════════════════════════════════════════════════════════
function toggleMacroRecord(){IS_RECORDING=!IS_RECORDING;const b=document.getElementById('macro-record-btn');b.textContent=IS_RECORDING?'⏹ Stop':'⏺ Record';b.className=IS_RECORDING?'btn btnd':'btn btnp';b.style.cssText='padding:4px 12px;font-size:11px';const dot=document.getElementById('recording-dot');if(dot)dot.classList.toggle('on',IS_RECORDING);if(!IS_RECORDING)toast('Recording stopped — '+MACRO_STEPS.length+' steps','ok');else toast('🔴 Recording — run queries to capture','info');renderMacroSteps();}
function captureMacroStep(sql,ms){if(!IS_RECORDING)return;MACRO_STEPS.push({sql,ms,time:new Date().toLocaleTimeString()});if(MACRO_STEPS.length>50)MACRO_STEPS.shift();renderMacroSteps();}
function playMacro(){if(!MACRO_STEPS.length){toast('No macro steps','warn');return;}toast('▶ Playing '+MACRO_STEPS.length+' steps...','info');let i=0;(function next(){if(i>=MACRO_STEPS.length){toast('✓ Playback complete','ok');addActivity('macro','Macro: '+MACRO_STEPS.length+' steps',true,0);return;}document.getElementById('editor').value=MACRO_STEPS[i].sql;updateGutter();runQuery().then(()=>{i++;setTimeout(next,300);});})();}
function clearMacro(){MACRO_STEPS=[];renderMacroSteps();toast('Macro cleared','ok');}
function renderMacroSteps(){const el=document.getElementById('macro-steps');if(!el)return;if(!MACRO_STEPS.length){el.innerHTML='<div style="color:var(--t3);font-size:12px">No steps recorded. Click <strong>Record</strong> then run queries.</div>';return;}el.innerHTML=MACRO_STEPS.map((s,i)=>`<div class="macro-item"><div class="macro-num">${i+1}</div><div class="macro-sql" title="${eH(s.sql)}">${eH(s.sql.substring(0,130))}</div><span style="font-size:10px;color:var(--t3)">${s.ms}ms</span></div>`).join('');}

// Hook macro capture
const __runQuery_macro = runQuery;
runQuery = async function() {const t0=performance.now();await __runQuery_macro();captureMacroStep(getSQL(),(performance.now()-t0).toFixed(1));};

// ═══════════════════════════════════════════════════════════════════
// 6. RESULT SET DIFF
// ═══════════════════════════════════════════════════════════════════
function snapshotForDiff(){if(!ALL_ROWS.length){toast('Run a query first','warn');return;}RS_DIFF_SNAPSHOT={rows:JSON.parse(JSON.stringify(ALL_ROWS)),cols:[...CUR_COLS.map(c=>c.name||c)],time:new Date().toLocaleTimeString()};toast('📸 Snapshot — '+RS_DIFF_SNAPSHOT.rows.length+' rows','ok');renderDiffUI();}
function renderDiffUI(){document.getElementById('rsdiff-ui').innerHTML=`<div style="display:flex;gap:8px;margin-bottom:12px"><button class="btn btnp" onclick="snapshotForDiff()" style="padding:4px 12px;font-size:11px">📸 Snapshot</button><button class="btn btns" onclick="compareDiff()" style="padding:4px 12px;font-size:11px" ${!RS_DIFF_SNAPSHOT?'disabled':''}>Δ Compare</button><button class="btn btns" onclick="RS_DIFF_SNAPSHOT=null;renderDiffUI()" style="padding:4px 12px;font-size:11px">✕ Clear</button></div>${RS_DIFF_SNAPSHOT?'<div style="font-size:10px;color:var(--t2)">📸 Snapshot: '+RS_DIFF_SNAPSHOT.rows.length+' rows, '+RS_DIFF_SNAPSHOT.cols.length+' cols — '+RS_DIFF_SNAPSHOT.time+'</div>':''}<div id="rsdiff-output"></div>`;}
function compareDiff(){
  if(!RS_DIFF_SNAPSHOT||!ALL_ROWS.length){toast('Need both snapshot and current results','warn');return;}
  const hash=r=>RS_DIFF_SNAPSHOT.cols.map(c=>String(r[c]??'')).join('|');
  const sHashes=new Set(RS_DIFF_SNAPSHOT.rows.map(hash));
  const cHashes=new Set(ALL_ROWS.map(r=>CUR_COLS.map(c=>c.name||c).reduce((s,k)=>s+'|'+String(r[k]??''),'')));
  const onlySnap=RS_DIFF_SNAPSHOT.rows.filter(r=>!cHashes.has(hash(r)+CUR_COLS.map(c=>c.name||c).reduce((s,k)=>s+'|'+String(r[k]??''),'')));
  const curKeys=ALL_ROWS.map(r=>CUR_COLS.map(c=>c.name||c).reduce((s,k)=>s+'|'+String(r[k]??''),''));const snapKeys=RS_DIFF_SNAPSHOT.rows.map(r=>hash(r));const onlyCur=ALL_ROWS.filter((_,i)=>!sHashes.has(curKeys[i]));
  const matching=RS_DIFF_SNAPSHOT.rows.length-onlySnap.length;
  let h=`<div class="rsdiff-summary"><strong>Snapshot:</strong> ${RS_DIFF_SNAPSHOT.rows.length}r | <strong>Current:</strong> ${ALL_ROWS.length}r<br><span style="color:var(--grn)">✅ Match: ${matching}</span> | <span style="color:var(--red)">❌ Only snap: ${onlySnap.length}</span> | <span style="color:var(--grn)">➕ Only curr: ${onlyCur.length}</span></div>`;
  if(!onlySnap.length&&!onlyCur.length)h+='<div style="text-align:center;padding:16px;color:var(--grn);font-size:14px">✅ Results are identical!</div>';
  else{h+='<div class="rsdiff-grid"><div class="rsdiff-panel"><div class="rsdiff-hd">❌ Only in Snapshot ('+onlySnap.length+')</div>';onlySnap.slice(0,20).forEach(r=>h+=`<div class="rsdiff-row only-a">${eH(JSON.stringify(r).substring(0,100))}</div>`);h+='</div><div class="rsdiff-panel"><div class="rsdiff-hd">➕ Only in Current ('+onlyCur.length+')</div>';onlyCur.slice(0,20).forEach(r=>h+=`<div class="rsdiff-row only-b">${eH(JSON.stringify(r).substring(0,100))}</div>`);h+='</div></div>';}
  document.getElementById('rsdiff-output').innerHTML=h;
  addActivity('diff','Result Diff: '+matching+' match, '+onlySnap.length+' removed, '+onlyCur.length+' added',true,0);
}

// ═══════════════════════════════════════════════════════════════════
// 7. TABLE MAINTENANCE (VACUUM / ANALYZE / REINDEX)
// ═══════════════════════════════════════════════════════════════════
function renderMaintenanceUI(){const el=document.getElementById('maint-ui');const tables=Object.keys(TABLES);if(!tables.length){el.innerHTML='<div style="color:var(--t3);font-size:12px">Load tables first.</div>';return;}el.innerHTML=`<select class="mselect" id="maint-table" style="margin-bottom:10px">${tables.map(t=>`<option value="${t}">${t}</option>`).join('')}</select><div class="maint-card"><div class="maint-hd">🧹 VACUUM</div><div class="maint-desc">Reclaims storage from deleted rows. Equivalent to PostgreSQL VACUUM — rebuilds the database file to recover space.</div><button class="btn btnp" onclick="runMaintenance('vacuum')" style="padding:4px 14px;font-size:11px">▶ Run VACUUM</button><div class="maint-result" id="maint-vacuum-result" style="display:none"></div></div><div class="maint-card"><div class="maint-hd">📊 ANALYZE</div><div class="maint-desc">Updates table statistics for the query planner. Improves query optimization decisions — run after heavy data changes.</div><button class="btn btnp" onclick="runMaintenance('analyze')" style="padding:4px 14px;font-size:11px">▶ Run ANALYZE</button><div class="maint-result" id="maint-analyze-result" style="display:none"></div></div><div class="maint-card"><div class="maint-hd">🔨 REINDEX</div><div class="maint-desc">Rebuilds all indexes on the selected table. Restores index performance after heavy INSERT/UPDATE/DELETE operations.</div><button class="btn btnp" onclick="runMaintenance('reindex')" style="padding:4px 14px;font-size:11px">▶ Run REINDEX</button><div class="maint-result" id="maint-reindex-result" style="display:none"></div></div>`;}
function runMaintenance(op){const tbl=document.getElementById('maint-table').value;if(!tbl)return;const re=document.getElementById('maint-'+op+'-result');re.style.display='block';const t0=performance.now();try{if(op==='vacuum'){runSQL('VACUUM');re.innerHTML='✅ VACUUM completed. Storage reclaimed. Table "'+tbl+'": '+(TABLES[tbl]?.rows||0).toLocaleString()+' rows.';}else if(op==='analyze'){runSQL('ANALYZE');re.innerHTML='✅ ANALYZE completed. Query planner statistics updated.';}else{runSQL('REINDEX');re.innerHTML='✅ REINDEX completed. Indexes rebuilt for optimal performance.';}const ms=(performance.now()-t0).toFixed(1);re.innerHTML+='<br><span style="color:var(--t3);font-size:10px">'+ms+'ms</span>';addActivity('maint','Maintenance: '+op.toUpperCase()+' on "'+tbl+'"',true,ms);}catch(e){re.innerHTML='❌ Error: '+eH(e.message);}}

// ═══════════════════════════════════════════════════════════════════
// 8. DATABASE HEALTH REPORT  
// ═══════════════════════════════════════════════════════════════════
function runHealthCheck(){if(!Object.keys(TABLES).length){toast('Load tables first','warn');return;}const el=document.getElementById('health-content');const checks=[];let score=0,total=0;
  total++;if(Object.keys(TABLES).length>0){score++;checks.push({pass:true,msg:'Tables present ('+Object.keys(TABLES).length+')'});}
  total++;const empty=Object.entries(TABLES).filter(([_,t])=>!t.rows||t.rows===0);if(!empty.length){score++;checks.push({pass:true,msg:'No empty tables'});}else checks.push({pass:false,severity:'warn',msg:empty.length+' empty table(s): '+empty.map(([n])=>n).join(', ')});
  total++;let badCols=0;Object.values(TABLES).forEach(t=>(t.cols||[]).forEach(c=>{if(/[^a-z0-9_]/.test(c.name))badCols++;}));if(!badCols){score++;checks.push({pass:true,msg:'Column names follow snake_case'});}else checks.push({pass:false,severity:'warn',msg:badCols+' column(s) have non-standard names'});
  total++;let noPK=0;Object.entries(TABLES).forEach(([_,t])=>{const hPK=(t.cols||[]).some(c=>c.name==='id'||c.name.endsWith('_id'));if(!hPK)noPK++;});if(!noPK){score++;checks.push({pass:true,msg:'All tables have ID/key columns'});}else checks.push({pass:false,severity:'warn',msg:noPK+' table(s) missing primary keys'});
  total++;try{const ir=DB.exec("SELECT COUNT(*) FROM sqlite_master WHERE type='index' AND name NOT LIKE 'sqlite_%'");const ic=ir.length?ir[0].values[0][0]:0;if(ic>0){score++;checks.push({pass:true,msg:ic+' index(es) present'});}else checks.push({pass:false,severity:'warn',msg:'No user indexes. Consider Index Advisor (Ctrl+I).'});}catch(e){}
  total++;const rows=Object.values(TABLES).map(t=>t.rows||0);const mx=Math.max(...rows,1),mn=Math.min(...rows);if(mx/mn<100){score++;checks.push({pass:true,msg:'Row counts reasonably balanced'});}else checks.push({pass:false,severity:'warn',msg:'Large row disparity: '+mx.toLocaleString()+' vs '+mn.toLocaleString()});
  const pct=Math.round(score/total*100),grade=pct>=90?'A':pct>=70?'B':pct>=50?'C':'D';
  let h=`<div class="health-score ${pct<70?'warn':''} ${pct<50?'fail':''}">${pct}%<div style="font-size:14px;color:var(--t2)">Health Grade: ${grade}</div></div><div class="health-section"><div class="health-hd">📋 Checks</div>`;
  checks.forEach(c=>{const s=c.pass?'pass':(c.severity||'warn');h+=`<div class="health-check ${s}"><span class="health-icon">${c.pass?'✅':'⚠️'}</span><span>${c.msg}</span></div>`;});
  h+='</div><div class="health-section"><div class="health-hd">💡 Recommendations</div><div style="font-size:11px;color:var(--t2);line-height:2">';
  if(noPK)h+='• Add PRIMARY KEY columns<br>';if(pct<90)h+='• Run ANALYZE for better statistics<br>';
  h+='• Use <strong>Explain Plan (Ctrl+E)</strong> to verify query perf<br>';h+='• Use <strong>Index Advisor (Ctrl+I)</strong> for index tips<br>';h+='• <strong>pg_dump Backup</strong> regularly<br>';h+='</div></div><div style="text-align:right"><button class="btn btnp" onclick="runHealthCheck()" style="padding:4px 12px;font-size:11px">🔄 Re-run</button></div>';
  el.innerHTML=h;addActivity('health','Health Check: Grade '+grade+' ('+pct+'%)',true,0);
}

// ═══════════════════════════════════════════════════════════════════  
// 9. EXPORT WIZARD
// ═══════════════════════════════════════════════════════════════════
function updateWizPreview(){const uc=document.getElementById('wiz-use-current').checked;const tbl=document.getElementById('wiz-table').value;let n=0;if(uc)n=ALL_ROWS.length;else if(tbl&&TABLES[tbl])n=TABLES[tbl].rows||0;document.getElementById('wiz-preview').textContent=n?n.toLocaleString()+' rows available':'No data selected';}
function nextWizStep(){if(WIZ_STEP<4){document.getElementById('wiz-step'+WIZ_STEP).classList.remove('on');WIZ_STEP++;document.getElementById('wiz-step'+WIZ_STEP).classList.add('on');document.getElementById('wiz-dot'+WIZ_STEP).classList.add('cur');if(WIZ_STEP>1)document.getElementById('wiz-dot'+(WIZ_STEP-1)).classList.replace('cur','done');if(WIZ_STEP===4){document.getElementById('wiz-next').style.display='none';document.getElementById('wiz-export').style.display='';updateWizSummary();}document.getElementById('wiz-prev').style.display='';}}
function prevWizStep(){if(WIZ_STEP>1){document.getElementById('wiz-step'+WIZ_STEP).classList.remove('on');WIZ_STEP--;document.getElementById('wiz-step'+WIZ_STEP).classList.add('on');document.getElementById('wiz-dot'+(WIZ_STEP+1)).classList.remove('cur','done');if(WIZ_STEP===1)document.getElementById('wiz-prev').style.display='none';document.getElementById('wiz-next').style.display='';document.getElementById('wiz-export').style.display='none';}}
function updateWizSummary(){const uc=document.getElementById('wiz-use-current').checked;const tbl=document.getElementById('wiz-table').value;const fmt=document.getElementById('wiz-format').value.toUpperCase();document.getElementById('wiz-summary').innerHTML=`<strong>Source:</strong> ${uc?'current results':tbl}<br><strong>Format:</strong> ${fmt}<br><strong>Rows:</strong> ${uc?ALL_ROWS.length.toLocaleString():(TABLES[tbl]?.rows||0).toLocaleString()}<br><strong>Ready.</strong>`;}
function doWizExport(){const fmt=document.getElementById('wiz-format').value;const uc=document.getElementById('wiz-use-current').checked;const tbl=document.getElementById('wiz-table').value;if(!uc&&!tbl){toast('Select a source','warn');return;}if(uc&&!ALL_ROWS.length){toast('No results','warn');return;}if(!uc){const r=runSQL(`SELECT * FROM "${tbl}"`);if(r.rows.length){ALL_ROWS=r.rows;CUR_COLS=r.fields;}else{toast('Empty table','warn');return;}}
  if(fmt==='csv')exportCSV();else if(fmt==='json')exportJSON();else if(fmt==='tsv')exportExcel();else if(fmt==='sql')exportSQLInserts();else if(fmt==='md')exportMarkdown();else if(fmt==='html')exportHTML();
  toast('✓ '+fmt.toUpperCase()+' exported','ok');addActivity('export','Wizard: '+fmt.toUpperCase()+' ('+ALL_ROWS.length.toLocaleString()+'r)',true,0);closeModal('modal-exportwiz');WIZ_STEP=1;document.querySelectorAll('.wiz-step').forEach((s,i)=>s.classList.toggle('on',i===0));document.querySelectorAll('.wiz-dot').forEach((d,i)=>{d.classList.remove('cur','done');if(i===0)d.classList.add('done');});document.getElementById('wiz-next').style.display='';document.getElementById('wiz-export').style.display='none';document.getElementById('wiz-prev').style.display='none';}

// ═══════════════════════════════════════════════════════════════════
// 10. CUSTOM SNIPPET MANAGER
// ═══════════════════════════════════════════════════════════════════
function addCustomSnippet(){const name=document.getElementById('snipmgr-name').value.trim();const cat=document.getElementById('snipmgr-cat').value.trim()||'Custom';const sql=document.getElementById('snipmgr-sql').value.trim();if(!name||!sql){toast('Name and SQL required','warn');return;}CUSTOM_SNIPPETS.push({name,cat,sql,time:new Date().toLocaleDateString()});try{localStorage.setItem('pgas_csnip',JSON.stringify(CUSTOM_SNIPPETS));}catch(e){}document.getElementById('snipmgr-name').value='';document.getElementById('snipmgr-sql').value='';renderCustomSnippets();toast('✓ "'+name+'" added','ok');}
function deleteCustomSnippet(idx){CUSTOM_SNIPPETS.splice(idx,1);try{localStorage.setItem('pgas_csnip',JSON.stringify(CUSTOM_SNIPPETS));}catch(e){}renderCustomSnippets();}
function renderCustomSnippets(){const el=document.getElementById('snipmgr-list');if(!CUSTOM_SNIPPETS.length){el.innerHTML='<div style="color:var(--t3);font-size:12px">No custom snippets yet.</div>';return;}el.innerHTML=CUSTOM_SNIPPETS.map((s,i)=>`<div class="custom-snip-item" onclick="document.getElementById('editor').value=${JSON.stringify(s.sql)};updateGutter();closeModal('modal-snippetmgr');toast('Loaded: '+${JSON.stringify(s.name)},'ok')"><div style="flex:1"><div class="custom-snip-name">${eH(s.name)}</div><div style="font-size:10px;color:var(--t2)">${eH(s.sql.substring(0,60))}...</div></div><span class="custom-snip-cat">${eH(s.cat)}</span><button class="nab d" onclick="event.stopPropagation();deleteCustomSnippet(${i})">✕</button></div>`).join('');}

// ═══════════════════════════════════════════════════════════════════
// 11. TAB SESSION GROUPS
// ═══════════════════════════════════════════════════════════════════
function createTabGroup(){const name=document.getElementById('tgroup-name').value.trim();if(!name){toast('Enter a group name','warn');return;}TAB_GROUPS.push({name,tabs:TABS.map(t=>({id:t.id,name:t.name,content:t.content})),time:new Date().toLocaleString()});try{localStorage.setItem('pgas_tgrp',JSON.stringify(TAB_GROUPS));}catch(e){}document.getElementById('tgroup-name').value='';renderTabGroups();toast('✓ "'+name+'" saved ('+TABS.length+' tabs)','ok');}
function loadTabGroup(idx){const g=TAB_GROUPS[idx];if(!g)return;while(TABS.length>1)closeTab(TABS[TABS.length-1].id);g.tabs.forEach((t,i)=>{if(i===0){ACTIVE_TAB.content=t.content;ACTIVE_TAB.name=t.name;}else newTab(t.name,t.content);});renderTabs();closeModal('modal-tabgroups');toast('✓ "'+g.name+'" loaded ('+g.tabs.length+' tabs)','ok');}
function deleteTabGroup(idx){TAB_GROUPS.splice(idx,1);try{localStorage.setItem('pgas_tgrp',JSON.stringify(TAB_GROUPS));}catch(e){}renderTabGroups();}
function renderTabGroups(){const el=document.getElementById('tgroup-list');if(!TAB_GROUPS.length){el.innerHTML='<div style="color:var(--t3);font-size:12px">No groups yet. Save all open tabs as a named group.</div>';return;}el.innerHTML=TAB_GROUPS.map((g,i)=>`<div class="macro-item"><div class="macro-num">${i+1}</div><div style="flex:1"><span style="color:var(--t0);font-weight:600;font-size:12px">${eH(g.name)}</span><span style="font-size:10px;color:var(--t3);margin-left:8px">${g.tabs.length} tabs · ${g.time}</span></div><button class="btn btns" onclick="loadTabGroup(${i})" style="padding:3px 10px;font-size:11px">📂 Load</button><button class="nab d" onclick="event.stopPropagation();deleteTabGroup(${i})">✕</button></div>`).join('');}

// ═══════════════════════════════════════════════════════════════════
// 12. DATA DICTIONARY
// ═══════════════════════════════════════════════════════════════════
function renderDataDictionary(){const el=document.getElementById('datadict-content');if(!Object.keys(TABLES).length){el.innerHTML='<div style="color:var(--t3);font-size:12px">Load tables to generate the dictionary.</div>';return;}let h='';Object.entries(TABLES).forEach(([name,t])=>{h+=`<div class="health-section"><div class="health-hd">📋 ${eH(name)} <span style="font-size:10px;color:var(--t3);font-weight:400">${(t.rows||0).toLocaleString()} rows · ${(t.cols||[]).length} cols</span></div><table class="dict-table"><thead><tr><th>#</th><th>Column</th><th>Type</th><th>Key</th></tr></thead><tbody>`;(t.cols||[]).forEach((c,i)=>{const isPK=c.name==='id'||(c.name.endsWith('_id')&&i===0);h+=`<tr><td>${i+1}</td><td style="color:var(--t0);font-weight:500">${eH(c.name)}${isPK?' 🔑':''}</td><td><span class="pill ${pillClass(c.type)}">${shortType(c.type)}</span></td><td>${isPK?'PRIMARY':''}</td></tr>`;});h+='</tbody></table></div>';});el.innerHTML=h;}
function exportDataDictionary(){if(!Object.keys(TABLES).length){toast('No tables','warn');return;}let md='# Data Dictionary\n\nGenerated: '+new Date().toISOString()+'\nBuilt by: Adewale Samson Adeagbo\n\n';Object.entries(TABLES).forEach(([name,t])=>{md+='## '+name+'\n\n**Rows:** '+(t.rows||0).toLocaleString()+' | **Cols:** '+(t.cols||[]).length+'\n\n| # | Column | Type | Key |\n|---|---|---|---|\n'; (t.cols||[]).forEach((c,i)=>{md+='| '+(i+1)+' | '+c.name+' | '+c.type+' | '+((c.name==='id'||c.name.endsWith('_id'))?'🔑':'')+' |\n';});md+='\n';});md+='\n*Generated by pgAdmin Simulator v4.0 Enterprise — Adewale Samson Adeagbo*\n';dl('data_dictionary.md',md,'text/markdown');toast('✓ Dictionary exported','ok');addActivity('export','Data Dictionary exported',true,0);}

// ═══════════════════════════════════════════════════════════════════
// 13. EXTENDED STATISTICS (Histograms)
// ═══════════════════════════════════════════════════════════════════
const __renderRPanel_ent = renderRPanel;
renderRPanel = function(t) {
  if (t==='stats' && ALL_ROWS.length) {
    const body=document.getElementById('rp-body');let h=`<div style="font-size:11px;color:var(--t3);margin-bottom:10px">📊 ${ALL_ROWS.length.toLocaleString()} rows analyzed</div>`;
    CUR_COLS.forEach(col=>{const cn=col.name||col;const vals=ALL_ROWS.map(r=>r[cn]).filter(v=>v!==null&&v!==undefined);const nums=vals.filter(v=>typeof v==='number');const nulls=ALL_ROWS.length-vals.length;const uniq=new Set(vals).size;
      h+=`<div class="rpsec"><div class="rpsec-ttl">${eH(cn)} <span class="pill ${pillClass(col.type)}" style="margin-left:auto">${shortType(col.type||'TEXT')}</span></div><div class="rprow"><span class="rpk">Values</span><span class="rpv">${vals.length.toLocaleString()} (${nulls} null)</span></div><div class="rprow"><span class="rpk">Unique</span><span class="rpv">${uniq.toLocaleString()} (${vals.length?Math.round(uniq/vals.length*100):0}%)</span></div>`;
      if(nums.length>10){const mn=Math.min(...nums),mx=Math.max(...nums);const buckets=10,bs=(mx-mn)/buckets||1;const hist=new Array(buckets).fill(0);nums.forEach(v=>{const idx=Math.min(buckets-1,Math.floor((v-mn)/bs));hist[idx]++;});const mh=Math.max(...hist,1);h+=`<div class="stat-histogram">${hist.map(v=>`<div class="stat-hist-bar" style="height:${Math.round(v/mh*38)}px" title="${v}"></div>`).join('')}</div><div style="display:flex;justify-content:space-between;font-size:8px;color:var(--t3)"><span>${mn.toLocaleString()}</span><span>${mx.toLocaleString()}</span></div>`;
        const avg=nums.reduce((a,b)=>a+b,0)/nums.length;const std=Math.sqrt(nums.map(v=>Math.pow(v-avg,2)).reduce((a,b)=>a+b,0)/nums.length);
        h+=`<div class="rprow"><span class="rpk">Min / Max</span><span class="rpv">${mn.toLocaleString()} / ${mx.toLocaleString()}</span></div><div class="rprow"><span class="rpk">Avg ± StdDev</span><span class="rpv">${avg.toFixed(2)} ± ${std.toFixed(2)}</span></div>`;
      }
      h+='</div>';
    });
    body.innerHTML=h;return;
  }
  __renderRPanel_ent(t);
};

// ═══════════════════════════════════════════════════════════════════
// 14. INTEGRATION HOOKS — Connect all enterprise features
// ═══════════════════════════════════════════════════════════════════
const __switchResTab_ent = switchResTab;
switchResTab = function(t) {
  ['data','messages','explain','chart','pivot','erd','querybuilder','dashboard','activity','monitor','macros','generator','health','diff','maintenance','help'].forEach(x=>{
    const rt=document.getElementById('rt-'+x),rp=document.getElementById('rp-'+x);if(rt)rt.classList.toggle('on',x===t);if(rp)rp.classList.toggle('on',x===t);
  });
  if(t==='activity')renderActivityLog();if(t==='monitor')renderActivityMonitor();if(t==='macros')renderMacroSteps();if(t==='generator')renderDataGenerator();if(t==='health')runHealthCheck();if(t==='diff')renderDiffUI();if(t==='maintenance')renderMaintenanceUI();if(t==='erd')renderERD();if(t==='querybuilder')renderQueryBuilder();if(t==='dashboard')renderDashboard();if(t==='chart'&&ALL_ROWS.length)drawChart();
};

const __openModal_ent = openModal;
openModal = function(id) {
  __openModal_ent(id);
  if(id==='modal-dbsearch')document.getElementById('dbsearch-inp')?.focus();
  if(id==='modal-exportwiz')updateWizPreview();
  if(id==='modal-snippetmgr')renderCustomSnippets();
  if(id==='modal-datadict')renderDataDictionary();
  if(id==='modal-tabgroups')renderTabGroups();
  if(id==='modal-favorites')renderFavoritesList();
  if(id==='modal-diff')renderSchemaDiff();
};

const __loadSample_ent = loadSample;
loadSample = async function(type){await __loadSample_ent(type);addActivity('sample','Loaded: '+type,true,0);};

// ═══════════════════════════════════════════════════════════════════════
// 🏢 PostgreSQL (pgAdmin) Simulator v4.0 ULTIMATE
// 12 NEW Enterprise Features on top of v3.4's 21 features = 33+ total
// 100% Free. No AI API. No Server. Works Offline.
// Built by Adewale Samson Adeagbo — Data Scientist · EdTech Builder
// ═══════════════════════════════════════════════════════════════════════

// ── v4.0 GLOBAL STATE ──────────────────────────────────
let DB_SNAPSHOTS = JSON.parse(localStorage.getItem('pgas_snap') || '[]');
let RESULT_BOOKMARKS = JSON.parse(localStorage.getItem('pgas_bkm') || '[]');
let SCHEDULER_INTERVAL = null;
let SCHEDULER_ACTIVE = false;
let SCHEDULER_COUNTDOWN = 0;
let MASKED_COLUMNS = new Set();
let BENCHMARK_RESULTS = [];
let SELECTED_SNAPSHOT_IDX = -1;

// ═══════════════════════════════════════════════════════════════════════
// 1. QUERY PERFORMANCE BENCHMARK
// Measures query execution time over N iterations. Reports avg/min/max/stddev.
// ═══════════════════════════════════════════════════════════════════════
async function runBenchmark() {
  const sql = getSQL();
  if (!sql) { toast('No query in editor', 'warn'); return; }
  const runs = Math.min(100, Math.max(1, parseInt(document.getElementById('bench-runs').value) || 10));
  if (!DB) { toast('Engine not ready', 'err'); return; }

document.getElementById('bench-results').innerHTML = '<div style="text-align:center;padding:20px;color:var(--pg3)">⏱ Running ' + runs + ' iterations...</div>';
  const times = [];
  showLoading('Benchmarking ' + runs + ' runs...');

for (let i = 0; i < runs; i++) {
    const t0 = performance.now();
    try {
      const stmts = splitSQL(sql);
      for (const s of stmts) runSQL(s);
      times.push(performance.now() - t0);
    } catch (e) {
      times.push(-1);
    }
    if (i % Math.max(1, Math.floor(runs / 4)) === 0) {
      setLoadMsg('Run ' + (i + 1) + '/' + runs + '...');
    }
  }

hideLoading();
  const valid = times.filter(t => t >= 0);
  if (!valid.length) { toast('All runs failed', 'err'); return; }

const avg = valid.reduce((a, b) => a + b, 0) / valid.length;
  const min = Math.min(...valid);
  const max = Math.max(...valid);
  const stddev = Math.sqrt(valid.map(v => Math.pow(v - avg, 2)).reduce((a, b) => a + b, 0) / valid.length);
  const fails = times.length - valid.length;

BENCHMARK_RESULTS = valid;

const el = document.getElementById('bench-results');
  el.innerHTML = `
    <div class="bench-card"><div class="bench-card-lbl">Average</div><div class="bench-card-val" style="color:var(--pg3)">${avg.toFixed(1)}</div><div class="bench-card-lbl">ms</div></div>
    <div class="bench-card"><div class="bench-card-lbl">Min</div><div class="bench-card-val" style="color:var(--grn)">${min.toFixed(1)}</div><div class="bench-card-lbl">ms</div></div>
    <div class="bench-card"><div class="bench-card-lbl">Max</div><div class="bench-card-val" style="color:var(--red)">${max.toFixed(1)}</div><div class="bench-card-lbl">ms</div></div>
    <div class="bench-card"><div class="bench-card-lbl">Std Dev</div><div class="bench-card-val" style="color:var(--amb)">${stddev.toFixed(1)}</div><div class="bench-card-lbl">ms · ${fails} fails</div></div>`;

// Render histogram
  const histEl = document.getElementById('bench-hist');
  histEl.style.display = 'flex';
  const buckets = 20, bs = (max - min) / buckets || 1;
  const hist = new Array(buckets).fill(0);
  valid.forEach(v => { const idx = Math.min(buckets - 1, Math.floor((v - min) / bs)); hist[idx]++; });
  const mh = Math.max(...hist, 1);
  histEl.innerHTML = hist.map((v, i) => {
    const label = (min + i * bs).toFixed(0);
    return '<div class="bench-hist-bar" style="height:' + Math.round(v / mh * 55) + 'px;background:hsl(' + (210 + (i * 15)) + ',65%,55%)" title="' + label + 'ms: ' + v + ' runs"></div>';
  }).join('');

const status = avg < 200 ? '🟢 FAST' : avg < 1000 ? '🟡 MEDIUM' : '🔴 SLOW';
  addActivity('benchmark', 'Benchmark: ' + runs + ' runs, avg=' + avg.toFixed(1) + 'ms ' + status, true, 0);
  toast('Benchmark complete — avg ' + avg.toFixed(1) + 'ms over ' + runs + ' runs', 'ok');
}

function clearBenchmark() {
  BENCHMARK_RESULTS = [];
  document.getElementById('bench-results').innerHTML = '<div style="color:var(--t3);font-size:12px;grid-column:1/-1;text-align:center;padding:20px">Set iterations and click <strong>Benchmark</strong>.</div>';
  document.getElementById('bench-hist').style.display = 'none';
}

// ═══════════════════════════════════════════════════════════════════════
// 2. AUTO-REFRESH SCHEDULER
// Runs the current query at regular intervals. Useful for monitoring dashboards.
// ═══════════════════════════════════════════════════════════════════════
function toggleScheduler() {
  if (SCHEDULER_ACTIVE) {
    clearInterval(SCHEDULER_INTERVAL);
    SCHEDULER_ACTIVE = false;
    SCHEDULER_INTERVAL = null;
    document.getElementById('sched-btn').textContent = '▶ Start';
    document.getElementById('sched-btn').className = 'btn btnp';
    document.getElementById('sched-countdown').style.display = 'none';
    document.getElementById('sched-status').innerHTML = 'Scheduler stopped.';
    toast('Auto-refresh stopped', 'info');
    return;
  }
  const sql = getSQL();
  if (!sql) { toast('No query to schedule', 'warn'); return; }
  const interval = Math.max(5, parseInt(document.getElementById('sched-interval').value) || 30);
  SCHEDULER_COUNTDOWN = interval;
  SCHEDULER_ACTIVE = true;

document.getElementById('sched-btn').textContent = '⏹ Stop';
  document.getElementById('sched-btn').className = 'btn btnd';
  document.getElementById('sched-countdown').style.display = '';
  document.getElementById('sched-countdown').textContent = SCHEDULER_COUNTDOWN + 's';
  document.getElementById('sched-status').innerHTML = '<span style="color:var(--grn)">🔄 Active — refreshing every ' + interval + 's</span>';

const countdownId = setInterval(() => {
    SCHEDULER_COUNTDOWN--;
    document.getElementById('sched-countdown').textContent = SCHEDULER_COUNTDOWN + 's';
    if (SCHEDULER_COUNTDOWN <= 0) SCHEDULER_COUNTDOWN = interval;
  }, 1000);

SCHEDULER_INTERVAL = setInterval(() => {
    if (!SCHEDULER_ACTIVE) return;
    SCHEDULER_COUNTDOWN = interval;
    runQuery().catch(() => {});
  }, interval * 1000);

// Store the countdown interval for cleanup
  SCHEDULER_INTERVAL._countdownId = countdownId;

toast('Auto-refresh started — every ' + interval + 's', 'ok');
  addActivity('scheduler', 'Auto-refresh started: every ' + interval + 's', true, 0);
}

// Cleanup scheduler on tab close
window.addEventListener('beforeunload', () => {
  if (SCHEDULER_INTERVAL) {
    clearInterval(SCHEDULER_INTERVAL);
    if (SCHEDULER_INTERVAL._countdownId) clearInterval(SCHEDULER_INTERVAL._countdownId);
  }
});

// ═══════════════════════════════════════════════════════════════════════
// 3. DATABASE SNAPSHOTS (TIME TRAVEL)
// Save and restore complete database state. Serializes all tables to JSON.
// ═══════════════════════════════════════════════════════════════════════
function createSnapshot() {
  if (!Object.keys(TABLES).length) { toast('No tables to snapshot', 'warn'); return; }
  const snap = {
    name: 'Snapshot ' + new Date().toLocaleString(),
    time: new Date().toISOString(),
    tables: {}
  };

for (const [tblName, tbl] of Object.entries(TABLES)) {
    try {
      const r = DB.exec('SELECT * FROM "' + tblName + '"');
      const cols = r.length ? r[0].columns : [];
      const rows = r.length ? r[0].values : [];
      snap.tables[tblName] = { cols: tbl.cols, columns: cols, rows: rows, rowCount: rows.length };
    } catch (e) {}
  }

DB_SNAPSHOTS.unshift(snap);
  if (DB_SNAPSHOTS.length > 20) DB_SNAPSHOTS.pop();
  try { localStorage.setItem('pgas_snap', JSON.stringify(DB_SNAPSHOTS)); } catch (e) {}
  renderSnapshots();
  toast('📸 Snapshot created — ' + Object.keys(snap.tables).length + ' tables', 'ok');
  addActivity('snapshot', 'Snapshot: ' + Object.keys(snap.tables).length + ' tables', true, 0);
}

function restoreSnapshot() {
  if (SELECTED_SNAPSHOT_IDX < 0) { toast('Select a snapshot first', 'warn'); return; }
  const snap = DB_SNAPSHOTS[SELECTED_SNAPSHOT_IDX];
  if (!confirm('Restore database to "' + snap.name + '"?\n\nCurrent data will be replaced. This cannot be undone.')) return;

try {
    // Drop all existing tables
    for (const name of Object.keys(TABLES)) { runSQL('DROP TABLE IF EXISTS "' + name + '"'); }
    TABLES = {}; VIEWS = {};

// Recreate from snapshot
    for (const [tblName, tblData] of Object.entries(snap.tables)) {
      const defs = (tblData.cols || []).map(c => '"' + c.name + '" ' + c.type).join(',');
      runSQL('CREATE TABLE "' + tblName + '" (' + defs + ')');

if (tblData.rows.length) {
        const colNames = tblData.columns;
        const ph = tblData.rows.map(() => '(' + colNames.map(() => '?').join(',') + ')').join(',');
        const vals = tblData.rows.flat();
        try { const s = DB.prepare('INSERT INTO "' + tblName + '" VALUES ' + ph); s.run(vals); s.free(); } catch (e) {}
      }

TABLES[tblName] = { cols: tblData.cols, rows: tblData.rowCount, file: 'snapshot' };
    }

syncTables();
    closeModal('modal-snapshot-detail');
    toast('Database restored to "' + snap.name + '"', 'ok');
    addActivity('snapshot', 'Restored: ' + snap.name, true, 0);
  } catch (e) { toast('Restore error: ' + e.message, 'err'); }
}

function viewSnapshot(idx) {
  SELECTED_SNAPSHOT_IDX = idx;
  const snap = DB_SNAPSHOTS[idx];
  if (!snap) return;
  let h = '<div style="font-size:12px;color:var(--t1);line-height:2">';
  h += '<strong style="color:var(--pg3)">' + eH(snap.name) + '</strong><br>';
  h += '📅 ' + snap.time + '<br>';
  const tc = Object.keys(snap.tables).length;
  const tr = Object.values(snap.tables).reduce((s, t) => s + t.rowCount, 0);
  h += 'Tables: ' + tc + ' | Rows: ' + tr.toLocaleString() + '<br>';
  h += '<div style="margin-top:8px">';
  Object.entries(snap.tables).forEach(([n, t]) => {
    h += '📋 ' + eH(n) + ': ' + (t.rowCount || 0).toLocaleString() + ' rows, ' + (t.cols || []).length + ' cols<br>';
  });
  h += '</div></div>';
  document.getElementById('snapshot-detail-content').innerHTML = h;
  document.getElementById('snap-restore-btn').style.display = '';
  openModal('modal-snapshot-detail');
}

function deleteSnapshot(idx) {
  DB_SNAPSHOTS.splice(idx, 1);
  try { localStorage.setItem('pgas_snap', JSON.stringify(DB_SNAPSHOTS)); } catch (e) {}
  renderSnapshots();
}

// ═══════════════════════════════════════════════════════════════════════
// 4. COLUMN MASKING (DATA PRIVACY)
// Toggle columns to show/hide or mask their values in the results grid.
// ═══════════════════════════════════════════════════════════════════════
function renderMaskingUI() {
  const el = document.getElementById('masking-ui');
  if (!CUR_COLS.length && !ALL_ROWS.length) {
    el.innerHTML = '<div style="color:var(--t3);font-size:12px">Run a query first, then mask columns.</div>';
    return;
  }
  const cols = CUR_COLS.length ? CUR_COLS.map(c => c.name || c) : (ALL_ROWS.length ? Object.keys(ALL_ROWS[0]) : []);
  if (!cols.length) { el.innerHTML = '<div style="color:var(--t3);font-size:12px">No columns to mask.</div>'; return; }
  el.innerHTML = '<div style="font-size:11px;color:var(--t2);margin-bottom:10px">Toggle columns below. Masked columns show <span style="color:var(--t3);font-style:italic">•••hidden•••</span> in results.</div>' +
    cols.map(c => '<label class="mask-toggle"><input type="checkbox" ' + (MASKED_COLUMNS.has(c) ? 'checked' : '') + ' onchange="toggleColumnMask(\'' + c.replace(/'/g, "\\'") + '\', this.checked)"> ' + eH(c) + '</label>').join('');
}

function toggleColumnMask(col, mask) {
  if (mask) MASKED_COLUMNS.add(col);
  else MASKED_COLUMNS.delete(col);
  if (ALL_ROWS.length) renderGrid(CUR_ROWS, CUR_COLS);
  addActivity('mask', (mask ? 'Masked' : 'Unmasked') + ' column: ' + col, true, 0);
}

// Override cellHtml to support masking
const __cellHtml = cellHtml;
cellHtml = function(v, colName) {
  if (colName && MASKED_COLUMNS.has(colName)) {
    return '<td class="masked-cell" title="Masked">•••hidden•••</td>';
  }
  return __cellHtml(v);
};

// Wrap renderGrid to pass column names
const __renderGrid = renderGrid;
renderGrid = function(rows, fields) {
  __renderGrid(rows, fields);
  // Re-render with masking applied
  if (MASKED_COLUMNS.size > 0) {
    const dg = document.getElementById('dg');
    if (!dg) return;
    const cols = fields.map(f => f.name || f);
    const tbody = dg.querySelector('tbody');
    if (!tbody) return;
    const trs = tbody.querySelectorAll('tr');
    trs.forEach((tr, ri) => {
      const tds = tr.querySelectorAll('td:not(.rnc)');
      tds.forEach((td, ci) => {
        if (ci < cols.length && MASKED_COLUMNS.has(cols[ci])) {
          td.className = 'masked-cell';
          td.textContent = '•••hidden•••';
          td.title = 'Masked';
        }
      });
    });
  }
};

// ═══════════════════════════════════════════════════════════════════════
// 5. DEADLOCK SIMULATOR (EDUCATIONAL)
// ═══════════════════════════════════════════════════════════════════════
function runDeadlockSim() {
  const log = document.getElementById('deadlock-log');
  const tables = Object.keys(TABLES);
  if (tables.length < 2) {
    log.innerHTML = '<span class="conflict">Need at least 2 tables with data for deadlock simulation.</span>\nLoad sample data first (Samples menu).';
    return;
  }

const tA = tables[0], tB = tables[1];
  let simLog = '';

simLog += '═══ DEADLOCK SIMULATION ═══\n';
  simLog += 'Target Tables: ' + tA + ' (Table A) and ' + tB + ' (Table B)\n\n';

simLog += '<span class="txn-a">── Transaction A ──</span>\n';
  simLog += 'BEGIN;\n';
  simLog += 'UPDATE "' + tA + '" SET ...  -- Txn A locks ' + tA + '\n';
  simLog += '✅ Lock acquired on ' + tA + '\n';
  simLog += '-- Txn A now tries to update ' + tB + '...\n';

simLog += '\n<span class="txn-b">── Transaction B ──</span>\n';
  simLog += 'BEGIN;\n';
  simLog += 'UPDATE "' + tB + '" SET ...  -- Txn B locks ' + tB + '\n';
  simLog += '✅ Lock acquired on ' + tB + '\n';
  simLog += '-- Txn B now tries to update ' + tA + '...\n';

simLog += '\n<span class="conflict">⚠ DEADLOCK DETECTED!</span>\n';
  simLog += 'Transaction A is waiting for ' + tB + ' (locked by B)\n';
  simLog += 'Transaction B is waiting for ' + tA + ' (locked by A)\n';
  simLog += 'Neither can proceed — circular dependency.\n\n';

simLog += '── Resolution ──\n';
  simLog += 'PostgreSQL automatically detects deadlocks and ROLLBACKs\n';
  simLog += 'one of the transactions (usually the one that has done\n';
  simLog += 'less work). The other transaction can then proceed.\n\n';

simLog += '── Prevention Tips ──\n';
  simLog += '• Always lock tables in the SAME ORDER in every txn\n';
  simLog += '• Keep transactions SHORT (commit quickly)\n';
  simLog += '• Use SELECT ... FOR UPDATE with NOWAIT to fail fast\n';
  simLog += '• Consider using advisory locks for application-level control\n';
  simLog += '• Enable deadlock_timeout in postgresql.conf\n';

log.innerHTML = simLog;
  addActivity('deadlock', 'Deadlock simulation: ' + tA + ' vs ' + tB, true, 0);
  toast('Deadlock simulation complete — see log', 'ok');
}

// ═══════════════════════════════════════════════════════════════════════
// 6. ADVANCED SQL FORMATTER (3 presets)
// ═══════════════════════════════════════════════════════════════════════
function applyFormatPreset(style) {
  const ed = document.getElementById('editor');
  let sql = ed.value.trim();
  if (!sql) { toast('No SQL to format', 'warn'); return; }

if (style === 'compact') {
    // Compact: join multi-line into fewer lines
    sql = sql.replace(/\n\s+/g, ' ');
    sql = sql.replace(/\s+/g, ' ');
    const kw = ['SELECT', 'FROM', 'WHERE', 'GROUP BY', 'ORDER BY', 'HAVING', 'LIMIT', 'JOIN', 'LEFT JOIN', 'INNER JOIN', 'RIGHT JOIN', 'ON', 'UNION'];
    kw.forEach(k => { sql = sql.replace(new RegExp('\\b' + k + '\\b', 'gi'), '\n' + k); });
    sql = sql.replace(/\n{2,}/g, '\n').trim();
  } else if (style === 'expanded') {
    formatSQL();
  } else if (style === 'aligned') {
    // Expanded with column alignment
    formatSQL();
    sql = document.getElementById('editor').value;
    const lines = sql.split('\n');
    const result = [];
    for (const line of lines) {
      const trimmed = line.trim();
      if (/^SELECT$/i.test(trimmed)) {
        result.push('SELECT');
      } else if (/^FROM$/i.test(trimmed)) {
        result.push('FROM');
      } else if (/^WHERE$/i.test(trimmed)) {
        result.push('WHERE');
      } else if (trimmed.startsWith('--')) {
        result.push(trimmed);
      } else if (trimmed) {
        result.push('    ' + trimmed);
      } else {
        result.push('');
      }
    }
    sql = result.join('\n');
  }

ed.value = sql;
  updateGutter();
  toast('✓ SQL formatted — ' + style + ' style', 'ok');
  addActivity('format', 'Format applied: ' + style, true, 0);
}

// ═══════════════════════════════════════════════════════════════════════
// 7. RESULT BOOKMARKS
// ═══════════════════════════════════════════════════════════════════════
function bookmarkRow(rowIdx) {
  if (!ALL_ROWS.length || rowIdx >= ALL_ROWS.length) return;
  const row = ALL_ROWS[rowIdx];
  const preview = JSON.stringify(row).substring(0, 100);
  RESULT_BOOKMARKS.unshift({ row, preview, cols: CUR_COLS.map(c => c.name || c), time: new Date().toLocaleTimeString(), query: getSQL().substring(0, 80) });
  if (RESULT_BOOKMARKS.length > 50) RESULT_BOOKMARKS.pop();
  try { localStorage.setItem('pgas_bkm', JSON.stringify(RESULT_BOOKMARKS)); } catch (e) {}
  renderBookmarks();
  toast('🔖 Row ' + (rowIdx + 1) + ' bookmarked', 'ok');
}

function renderBookmarks() {
  const el = document.getElementById('bookmarks-list');
  if (!RESULT_BOOKMARKS.length) {
    el.innerHTML = '<div style="color:var(--t3);font-size:12px">No bookmarks yet. Right-click any result row and select <strong>Bookmark</strong>.</div>';
    return;
  }
  el.innerHTML = RESULT_BOOKMARKS.map((b, i) =>
    '<div class="bkm-row" onclick="showBookmarkDetail(' + i + ')"><span class="bkm-idx">#' + (i + 1) + '</span><span class="bkm-preview">' + eH(b.preview) + '</span><span class="bkm-tag">' + eH(b.time) + '</span><button class="nab d" onclick="event.stopPropagation();deleteBookmark(' + i + ')" title="Delete">✕</button></div>'
  ).join('');
}

function showBookmarkDetail(idx) {
  const b = RESULT_BOOKMARKS[idx];
  if (!b) return;
  // Show details in properties panel
  document.getElementById('rp-body').innerHTML = '<div class="rpsec"><div class="rpsec-ttl">🔖 Bookmark #' + (idx + 1) + '</div><div class="rprow"><span class="rpk">Time</span><span class="rpv">' + b.time + '</span></div><div class="rprow"><span class="rpk">Query</span><span class="rpv" style="font-size:10px;max-width:140px;overflow:hidden">' + eH(b.query || '—') + '</span></div></div>' +
    '<div class="rpsec"><div class="rpsec-ttl">Row Data</div>' + Object.entries(b.row).map(([k, v]) => '<div class="rprow"><span class="rpk">' + eH(k) + '</span><span class="rpv">' + eH(String(v ?? 'NULL').substring(0, 60)) + '</span></div>').join('') + '</div>';
  switchRTab('properties');
}

function deleteBookmark(idx) {
  RESULT_BOOKMARKS.splice(idx, 1);
  try { localStorage.setItem('pgas_bkm', JSON.stringify(RESULT_BOOKMARKS)); } catch (e) {}
  renderBookmarks();
}

// ═══════════════════════════════════════════════════════════════════════
// 8. SQL HISTORY COMPARATOR
// ═══════════════════════════════════════════════════════════════════════
const __openModal_v4 = openModal;
openModal = function(id) {
  __openModal_v4(id);
  if (id === 'modal-sqldiff') populateSQLDiffSelects();
  if (id === 'modal-deps') renderDependencyGraph();
};
function populateSQLDiffSelects() {
  const selA = document.getElementById('sqldiff-a'), selB = document.getElementById('sqldiff-b');
  const opts = HISTORY.map((h, i) => '<option value="' + i + '">' + (i + 1) + '. [' + h.time + '] ' + (h.ok ? 'OK' : 'ERR') + ' — ' + h.sql.substring(0, 60).replace(/\n/g, ' ') + '</option>').join('');
  selA.innerHTML = opts;
  selB.innerHTML = opts;
  if (HISTORY.length > 1) { selA.selectedIndex = 1; selB.selectedIndex = 0; }
  renderSQLDiff();
}
function renderSQLDiff() {
  const ia = parseInt(document.getElementById('sqldiff-a').value);
  const ib = parseInt(document.getElementById('sqldiff-b').value);
  const out = document.getElementById('sqldiff-output');
  if (isNaN(ia) || isNaN(ib)) { out.innerHTML = '<div style="color:var(--t3);font-size:12px">Select two queries to compare.</div>'; return; }
  const a = HISTORY[ia], b = HISTORY[ib];
  if (!a || !b) return;
  let h = '<div style="font-size:10px;color:var(--t2);margin-bottom:8px">Comparing: [' + a.time + '] ↔ [' + b.time + ']</div>';
  h += '<div class="sql-diff-pane"><div class="sql-diff-box">' + simpleDiff(a.sql, b.sql) + '</div><div class="sql-diff-box">' + simpleDiff(b.sql, a.sql) + '</div></div>';
  out.innerHTML = h;
}
function simpleDiff(textA, textB) {
  const linesA = textA.split('\n'), linesB = textB.split('\n');
  const setB = new Set(linesB.map(l => l.trim()));
  return linesA.map(l => {
    const t = l.trim();
    if (!t) return '';
    return setB.has(t) ? eH(l) : '<span class="removed">' + eH(l) + '</span>';
  }).join('\n');
}

// ═══════════════════════════════════════════════════════════════════════
// 9. TABLE DEPENDENCY GRAPH
// ═══════════════════════════════════════════════════════════════════════
function renderDependencyGraph() {
  const el = document.getElementById('deps-content');
  if (!Object.keys(TABLES).length) { el.innerHTML = '<div style="color:var(--t3);font-size:12px">Load tables first.</div>'; return; }

const names = Object.keys(TABLES);
  const deps = {};
  names.forEach(n => { deps[n] = []; });

// Infer dependencies: if table X has a column ending in _id that matches another table name
  names.forEach(n => {
    const cols = (TABLES[n].cols || []).map(c => c.name);
    cols.forEach(c => {
      if (c.endsWith('_id')) {
        const refTable = c.replace(/_id$/, '');
        if (names.includes(refTable) && refTable !== n) {
          deps[n].push(refTable);
        }
      }
    });
  });

if (!Object.values(deps).some(d => d.length)) {
    h += '<div style="margin-top:12px;font-size:11px;color:var(--t3)">No foreign key relationships detected. Dependencies are inferred from <strong>_id</strong> column name patterns.</div>';
  }

el.innerHTML = h;
  addActivity('deps', 'Dependency graph: ' + names.length + ' tables analyzed', true, 0);
}

// ═══════════════════════════════════════════════════════════════════════
// 10. JSON CELL PRETTY-PRINTER (Cell Viewer Enhancement)
// ═══════════════════════════════════════════════════════════════════════
const __viewCellContent = viewCellContent;
viewCellContent = function() {
  if (CELL_CTX_VAL === null || CELL_CTX_VAL === undefined) { toast('Cell is NULL', 'info'); return; }
  const s = String(CELL_CTX_VAL);
  // Try to parse as JSON for pretty-printing
  try {
    const parsed = JSON.parse(s);
    document.getElementById('cellview-info').innerHTML = '<strong>Column:</strong> ' + eH(CELL_CTX_COL || '?') + ' | <strong>Row:</strong> ' + (CELL_CTX_ROW_IDX !== null ? CELL_CTX_ROW_IDX + 1 : '?') + ' | <strong>Type:</strong> JSON (pretty-printed)';
    document.getElementById('cellview-content').innerHTML = syntaxHighlightJSON(parsed);
    openModal('modal-cellview');
    addActivity('view', 'Viewed JSON cell: ' + (CELL_CTX_COL || '?'), true, 0);
    return;
  } catch (e) {}
  // Fallback to original
  __viewCellContent();
};

// ═══════════════════════════════════════════════════════════════════════
// 11. ENHANCED AUTOFORMAT ON PASTE
// ═══════════════════════════════════════════════════════════════════════
// Auto-detect pasted SQL and offer to format it
const __onEditorKey_v4 = onEditorKey;
onEditorKey = function(e) {
  if ((e.ctrlKey || e.metaKey) && e.key === 'v') {
    setTimeout(() => {
      const ed = document.getElementById('editor');
      const pasted = ed.value;
      // Check if what was just pasted looks like SQL
      if (/SELECT|INSERT|UPDATE|DELETE|CREATE|ALTER|DROP/i.test(pasted.substring(Math.max(0, ed.selectionStart - 500), ed.selectionStart))) {
        // Just auto-format silently for large pastes
        if (pasted.length > 500 && pasted.includes('\n')) {
          // Don't auto-format — user may have intentional formatting
        }
      }
    }, 100);
  }
  __onEditorKey_v4(e);
};

// ═══════════════════════════════════════════════════════════════════════
// 12. ENHANCED SWITCHRES TAB to include all v4.0 panels
// ═══════════════════════════════════════════════════════════════════════
// Override the v3.4 switchResTab to also handle v4.0 panels
const __switchResTab_v40 = switchResTab;
switchResTab = function(t) {
  const allTabs40 = ['data','messages','explain','chart','pivot','erd','querybuilder','dashboard','activity','monitor','macros','generator','health','diff','maintenance','benchmark','scheduler','snapshots','masking','deadlock','formatter','bookmarks','help'];
  allTabs40.forEach(x => {
    const rt = document.getElementById('rt-' + x), rp = document.getElementById('rp-' + x);
    if (rt) rt.classList.toggle('on', x === t);
    if (rp) rp.classList.toggle('on', x === t);
  });
  if (t === 'activity') renderActivityLog();
  if (t === 'monitor') renderActivityMonitor();
  if (t === 'macros') renderMacroSteps();
  if (t === 'generator') renderDataGenerator();
  if (t === 'health') runHealthCheck();
  if (t === 'diff') renderDiffUI();
  if (t === 'maintenance') renderMaintenanceUI();
  if (t === 'benchmark') {} // No auto-action needed
  if (t === 'scheduler') {} // No auto-action needed
  if (t === 'snapshots') renderSnapshots();
  if (t === 'masking') renderMaskingUI();
  if (t === 'deadlock') {} // No auto-action needed
  if (t === 'formatter') {} // No auto-action needed
  if (t === 'bookmarks') renderBookmarks();
  if (t === 'erd') renderERD();
  if (t === 'querybuilder') renderQueryBuilder();
  if (t === 'dashboard') renderDashboard();
  if (t === 'chart' && ALL_ROWS.length) drawChart();
};

// ═══════════════════════════════════════════════════════════════════════
// INTEGRATION: Wrap showRowDetail to include bookmark button
// ═══════════════════════════════════════════════════════════════════════
const __showRowDetail = showRowDetail;
showRowDetail = function(ri) {
  __showRowDetail(ri);
  // Append bookmark button
  const body = document.getElementById('rp-body');
  if (body) {
    body.innerHTML += '<div style="margin-top:10px"><button class="btn btnok" onclick="bookmarkRow(' + ri + ')" style="padding:4px 12px;font-size:11px;width:100%">🔖 Bookmark This Row</button></div>';
  }
};

// ═══════════════════════════════════════════════════════════════════════
// INITIALIZATION
// ═══════════════════════════════════════════════════════════════════════
setTimeout(() => {
  renderSnapshots();
  renderBookmarks();
  renderMaskingUI();
}, 1500);

</script>

<div class="moverlay" id="modal-favorites"><div class="mbox"><div class="mtbar"><div class="mtitle">⭐ Query Favorites</div><button class="mclose" onclick="closeModal('modal-favorites')">✕</button></div><div class="mbody"><div id="fav-list"><div style="color:var(--t3);font-size:12px">No favorites yet. Star queries from History tab (⭐ button).</div></div></div><div class="mfoot"><button class="btn btnp" onclick="closeModal('modal-favorites')">Close</button></div></div></div>

<div class="moverlay" id="modal-diff"><div class="mbox wide"><div class="mtbar"><div class="mtitle">🔄 Visual Schema Diff</div><button class="mclose" onclick="closeModal('modal-diff')">✕</button></div><div class="mbody"><label class="mlbl">Table A</label><select class="mselect" id="diff-a" onchange="renderSchemaDiff()"></select><label class="mlbl">Table B</label><select class="mselect" id="diff-b" onchange="renderSchemaDiff()"></select><div id="diff-output" style="margin-top:14px;font-size:12px;color:var(--t3)">Select two tables to compare their column structures.</div></div><div class="mfoot"><button class="btn btnp" onclick="closeModal('modal-diff')">Close</button></div></div></div>

<div class="moverlay" id="modal-cellview"><div class="mbox wide"><div class="mtbar"><div class="mtitle">🔍 Cell Content Viewer</div><button class="mclose" onclick="closeModal('modal-cellview')">✕</button></div><div class="mbody"><div id="cellview-info" style="font-size:11px;color:var(--t2);margin-bottom:10px"></div><div id="cellview-content" style="background:var(--bg5);border:1px solid var(--brd1);border-radius:var(--r);padding:14px;font-family:var(--mono);font-size:12px;line-height:1.7;overflow:auto;max-height:400px;white-space:pre-wrap;word-break:break-all;color:var(--t0)"></div></div><div class="mfoot"><button class="btn btns" onclick="copyCellToClipboard()">📋 Copy to Clipboard</button><button class="btn btnp" onclick="closeModal('modal-cellview')">Close</button></div></div></div>

<div class="moverlay" id="modal-dbsearch"><div class="mbox wide"><div class="mtbar"><div class="mtitle">🔍 Database Global Search</div><button class="mclose" onclick="closeModal('modal-dbsearch')">✕</button></div><div class="mbody"><div class="minfo">Search across ALL tables and columns simultaneously. Enter a value to find everywhere it appears in the database.</div><div style="display:flex;gap:8px;margin-bottom:12px"><input type="text" class="minput" id="dbsearch-inp" placeholder="Search for any value across all tables..." onkeydown="if(event.key==='Enter')performDBSearch()" style="flex:1"><button class="btn btnp" onclick="performDBSearch()">🔍 Search</button></div><div id="dbsearch-results"><div style="color:var(--t3);font-size:12px">Enter a search term above to find matching values across all loaded tables.</div></div></div><div class="mfoot"><button class="btn btnp" onclick="closeModal('modal-dbsearch')">Close</button></div></div></div>
<div class="moverlay" id="modal-exportwiz"><div class="mbox"><div class="mtbar"><div class="mtitle">📤 Export Data Wizard</div><button class="mclose" onclick="closeModal('modal-exportwiz')">✕</button></div><div class="mbody"><div class="wiz-progress"><div class="wiz-dot done" id="wiz-dot1"></div><div class="wiz-dot" id="wiz-dot2"></div><div class="wiz-dot" id="wiz-dot3"></div><div class="wiz-dot" id="wiz-dot4"></div></div><div class="wiz-step on" id="wiz-step1"><label class="mlbl">Step 1: Select Source</label><select class="mselect" id="wiz-table" onchange="updateWizPreview()"><option value="">— Choose table or use current results —</option></select><div style="margin-top:8px"><label style="display:flex;align-items:center;gap:6px;font-size:12px;cursor:pointer"><input type="checkbox" id="wiz-use-current" checked onchange="updateWizPreview()"> Use current query results</label></div><div id="wiz-preview" style="margin-top:10px;font-size:10px;color:var(--t2)"></div></div><div class="wiz-step" id="wiz-step2"><label class="mlbl">Step 2: Choose Format</label><select class="mselect" id="wiz-format"><option value="csv">CSV (Comma-Separated Values)</option><option value="json">JSON (Pretty-Printed)</option><option value="tsv">TSV (Excel-Compatible)</option><option value="sql">INSERT SQL Statements</option><option value="md">Markdown Table</option><option value="html">HTML Table</option></select><label class="mlbl">Options</label><div style="display:flex;gap:14px;flex-wrap:wrap"><label style="display:flex;align-items:center;gap:6px;font-size:12px;cursor:pointer"><input type="checkbox" id="wiz-headers" checked> Include column headers</label><label style="display:flex;align-items:center;gap:6px;font-size:12px;cursor:pointer"><input type="checkbox" id="wiz-nulls"> Export NULL as empty string</label></div></div><div class="wiz-step" id="wiz-step3"><label class="mlbl">Step 3: Row Selection</label><div style="display:flex;gap:14px;flex-wrap:wrap"><label style="display:flex;align-items:center;gap:6px;font-size:12px;cursor:pointer"><input type="radio" name="wiz-rows" value="all" checked> All rows</label><label style="display:flex;align-items:center;gap:6px;font-size:12px;cursor:pointer"><input type="radio" name="wiz-rows" value="first"> First N rows: <input type="number" id="wiz-rown" value="100" style="width:70px;background:var(--bg3);border:1px solid var(--brd1);border-radius:4px;color:var(--t0);padding:3px 6px;font-size:11px"></label></div></div><div class="wiz-step" id="wiz-step4"><label class="mlbl">Step 4: Review & Export</label><div id="wiz-summary" style="font-size:12px;color:var(--t1);line-height:2"></div></div></div><div class="mfoot"><button class="btn btns" onclick="prevWizStep()" id="wiz-prev" style="display:none">← Back</button><button class="btn btnp" onclick="nextWizStep()" id="wiz-next">Next →</button><button class="btn btnp" onclick="doWizExport()" id="wiz-export" style="display:none">📥 Export</button></div></div></div>
<div class="moverlay" id="modal-snippetmgr"><div class="mbox wide"><div class="mtbar"><div class="mtitle">📋 Custom Snippet Manager</div><button class="mclose" onclick="closeModal('modal-snippetmgr')">✕</button></div><div class="mbody"><div class="minfo">Create your own custom SQL snippets. They persist in your browser and appear alongside the built-in templates.</div><div style="display:flex;gap:8px;margin-bottom:12px"><input type="text" class="minput" id="snipmgr-name" placeholder="Snippet name..." style="flex:1"><input type="text" class="minput" id="snipmgr-cat" placeholder="Category..." style="width:150px"></div><textarea class="mtarea" id="snipmgr-sql" placeholder="Paste your SQL code here..." style="min-height:100px">

Your Custom Snippets

No custom snippets yet. Create one above.