{% extends "base.html" %}

{% block title %}dbst — Query Runner{% endblock %}

{% block head %}
<link rel="stylesheet" href="https://unpkg.com/@xterm/xterm@5.5.0/css/xterm.css" />
<script src="https://unpkg.com/@xterm/xterm@5.5.0/lib/xterm.js"></script>
<script src="https://unpkg.com/@xterm/addon-fit@0.10.0/lib/addon-fit.js"></script>
{% endblock %}

{% block body %}
<div class="layout">
  <!-- Sidebar -->
  <aside class="sidebar">
    <div class="sidebar-header">
      <a href="https://github.com/telmen87/dbst-sql-tool" target="_blank" rel="noopener noreferrer"
         class="app-logo-link" title="dbst on GitHub">
        <img src="/static/logo.svg" alt="dbst" class="app-logo" width="20" height="20">
      </a>
      <div class="sidebar-tabs">
        <button class="sidebar-tab active" id="stab-db" onclick="switchSidebarTab('db')">DB</button>
        <button class="sidebar-tab" id="stab-files" onclick="switchSidebarTab('files')">Files</button>
        <button class="sidebar-tab" id="stab-git" onclick="switchSidebarTab('git')">Git</button>
      </div>
      <button class="btn-icon" id="refresh-btn" onclick="refreshExplorer()" title="Refresh">↻</button>
      <button class="btn-icon" id="add-conn-btn" onclick="openAddProfile()" title="Add connection">＋</button>
    </div>

    <!-- DB Explorer panel -->
    <div id="panel-db" class="sidebar-panel">
      <div id="object-explorer">
        {% for p in profile_names %}
        <div class="tree-item tree-connection">
          <div class="tree-row" onclick="toggleNode(this)"
               data-type="connection"
               data-profile="{{ p }}"
               data-profile-type="{{ profile_types[p] }}"
               data-read-only="{{ 'true' if profile_read_only[p] else 'false' }}">
            <span class="tree-icon">▶</span>
            <span class="tree-icon-type ti-connection"></span>
            <span class="tree-label">{{ p }}</span>
            {% if profile_read_only[p] %}<span class="badge-readonly" title="Read-only connection">RO</span>{% endif %}
            {% if p in profile_workspace_links %}
            <a class="tree-external-link" href="{{ profile_workspace_links[p] }}" target="_blank"
               rel="noopener noreferrer" onclick="event.stopPropagation()" title="Open in Databricks">↗</a>
            {% endif %}
          </div>
          <div class="tree-children hidden" id="conn-{{ p }}"></div>
        </div>
        {% else %}
        <p class="dim pad"></p>
        {% endfor %}
      </div>
    </div>

    <!-- Git panel -->
    <div id="panel-git" class="sidebar-panel hidden">
      <div id="git-status-inner"
           hx-get="/api/git/status"
           hx-trigger="revealed">
        <p class="dim pad"><span class="spinner"></span>Loading…</p>
      </div>
    </div>

    <!-- Files panel -->
    <div id="panel-files" class="sidebar-panel hidden">
      <div id="file-tree" style="flex:1;padding:4px 0"
           hx-get="/api/files/list"
           hx-trigger="revealed">
        <p class="dim pad"><span class="spinner"></span>Loading…</p>
      </div>
    </div>

    <div class="sidebar-footer">
      <a class="sidebar-ref-link" href="/api" target="_blank" rel="noopener" title="API reference">API</a>
      <a class="sidebar-ref-link" href="/mcp" target="_blank" rel="noopener" title="MCP reference">MCP</a>
    </div>

  </aside>

  <div class="resizer-x" id="resizer-x"></div>

  <!-- Main area -->
  <main class="main">
    <!-- Editor -->
    <div class="editor-panel">
      <div class="connection-bar">
        <div class="conn-dropdown" id="conn-dropdown">
          <button type="button" class="conn-dropdown-trigger" id="conn-dropdown-trigger"
                  onclick="toggleConnDropdown()" title="Connection this tab runs against">
            <span class="connection-bar-label">Connection</span>
            <span class="conn-dropdown-value" id="conn-dropdown-value">No connections</span>
            <span class="conn-dropdown-arrow"></span>
          </button>
          <div class="conn-dropdown-menu hidden" id="conn-dropdown-menu"></div>
          <select id="query-profile-select" class="visually-hidden" tabindex="-1" aria-hidden="true"
                  onchange="setActiveTabProfile(this.value)" title="Connection this tab runs against">
            {% for p in profile_names %}
            <option value="{{ p }}">{{ p }}</option>
            {% else %}
            <option value="">No connections</option>
            {% endfor %}
          </select>
        </div>
        <span id="warehouse-status-badge" class="warehouse-badge hidden"></span>
      </div>
      <div class="tab-bar-wrap">
        <div class="query-tab-bar" id="query-tab-bar">
          <!-- query tabs rendered by JS -->
          <button class="query-tab-new" onclick="addQueryTab()" title="New query tab (⌘⌥T)">＋</button>
        </div>
        <button class="ai-toggle-btn" id="ai-toggle-btn" onclick="toggleAIPanel()" title="AI Terminal (⌘`)">&gt;_</button>
        <button class="theme-toggle" onclick="toggleTheme()" title="Toggle day/night (⌘⇧L)">🌙</button>
      </div>
      <textarea id="sql-editor" spellcheck="false"></textarea>
      <div class="toolbar">
        <button class="btn-primary" id="run-btn" onclick="runQuery()" title="Run (⌘⏎)">▶ Run</button>
        <button class="btn-secondary hidden" id="stop-query-btn" onclick="stopQuery()">■ Stop</button>
        <button class="btn-secondary hidden" id="analyze-btn" onclick="analyzeQuery()">⚡ Analyze</button>
        <button class="btn-secondary" id="explain-btn" onclick="explainQuery()">Plan</button>
        <button class="btn-secondary" id="optimize-btn" onclick="optimizeActiveQuery()" title="Send this query + its plan to the AI terminal to improve and rewrite it here">Optimize</button>
        <span id="run-status" class="dim"></span>
      </div>
    </div>

    <div class="resizer-y" id="resizer-y"></div>

    <!-- Results tabs -->
    <div class="results-area">
      <div class="tabs">
        <button class="tab active" onclick="switchTab(this, 'results-panel')">Results</button>
        <button class="tab" onclick="switchTab(this, 'messages-panel')">Messages</button>
        <button class="tab hidden" id="analysis-tab-btn" onclick="switchTab(this, 'analysis-panel')">Analysis</button>
        <button class="tab" id="plan-tab-btn" onclick="switchTab(this, 'plan-panel')">Plan</button>
        <button class="tab" onclick="switchTab(this, 'history-panel')"
                hx-get="/api/query/history"
                hx-target="#history-panel"
                hx-trigger="click once">History</button>
      </div>
      <div id="results-panel" class="tab-content active">
        <p class="dim center">Run a query to see results.</p>
      </div>
      <div id="messages-panel" class="tab-content hidden">
        <div id="messages-log" class="messages-log"><p class="dim center">No messages yet.</p></div>
      </div>
      <div id="analysis-panel" class="tab-content hidden">
        <p class="dim center">Click Analyze to inspect the query.</p>
      </div>
      <div id="plan-panel" class="tab-content hidden">
        <p class="dim center">Click Plan to see the query's execution plan (Databricks only).</p>
      </div>
      <div id="history-panel" class="tab-content hidden">
        <p class="dim center">Click History to load.</p>
      </div>
    </div>
  </main>

  <div class="resizer-x hidden" id="resizer-x-ai"></div>

  <!-- AI panel (right side) -->
  <aside class="ai-sidebar hidden" id="ai-sidebar">
    <div class="sidebar-header">
      <span class="ai-sidebar-title">Terminal</span>
      <div class="conn-dropdown ai-cmd-dropdown" id="ai-cmd-dropdown">
        <button type="button" class="conn-dropdown-trigger" id="ai-cmd-trigger"
                onclick="toggleAICmdDropdown()" title="AI CLI to run in this terminal">
          <span class="connection-bar-label">AI</span>
          <span class="conn-dropdown-value" id="ai-cmd-value">Auto-detect</span>
          <span class="conn-dropdown-arrow"></span>
        </button>
        <div class="conn-dropdown-menu hidden" id="ai-cmd-menu"></div>
      </div>
      <input id="ai-command-custom" class="ai-command-custom hidden" type="text" placeholder="custom command"
             onchange="setAICommand(this.value)" title="Custom AI CLI command" />
      <button class="btn-icon" onclick="restartTerminal()" title="Restart terminal">↻</button>
      <button class="btn-icon" onclick="toggleAIPanel()" title="Close">✕</button>
    </div>
    <div id="panel-ai" class="ai-panel">
      <div id="terminal-container"></div>
    </div>
  </aside>
</div>

<!-- DB object tree context menu -->
<div id="db-ctx-menu" class="ctx-menu hidden">
  <button class="ctx-item" id="db-ctx-new-query" onclick="dbCtxNewQuery()">New Query</button>
  <button class="ctx-item" id="db-ctx-call" onclick="dbCtxCall()">Call…</button>
  <button class="ctx-item" id="db-ctx-generate-ddl" onclick="dbCtxGenerateDDL()">Generate Script…</button>
  <div class="ctx-sep" id="db-ctx-create-sep"></div>
  <button class="ctx-item" id="db-ctx-new-catalog" onclick="dbCtxCreate('catalog')">New Catalog…</button>
  <button class="ctx-item" id="db-ctx-new-schema" onclick="dbCtxCreate('schema')">New Schema…</button>
  <button class="ctx-item" id="db-ctx-new-table" onclick="dbCtxCreate('table')">New Table…</button>
  <button class="ctx-item" id="db-ctx-new-view" onclick="dbCtxCreate('view')">New View…</button>
  <button class="ctx-item" id="db-ctx-new-function" onclick="dbCtxCreate('function')">New Function…</button>
  <button class="ctx-item" id="db-ctx-new-procedure" onclick="dbCtxCreate('procedure')">New Stored Procedure…</button>
  <button class="ctx-item" id="db-ctx-new-metric_view" onclick="dbCtxCreate('metric_view')">New Metric View…</button>
  <div class="ctx-sep" id="db-ctx-conn-sep"></div>
  <button class="ctx-item" id="db-ctx-test" onclick="dbCtxTestConnection()">Test Connection</button>
  <button class="ctx-item" id="db-ctx-properties" onclick="dbCtxProperties()">Properties…</button>
  <button class="ctx-item" id="db-ctx-conn-rename" onclick="dbCtxConnRenameStart()">Rename Connection…</button>
  <button class="ctx-item" id="db-ctx-disconnect" onclick="dbCtxDisconnect()">Disconnect</button>
  <div class="ctx-sep" id="db-ctx-mod-sep"></div>
  <button class="ctx-item" id="db-ctx-rename" onclick="dbCtxRenameStart()">Rename…</button>
  <button class="ctx-item ctx-item-danger" id="db-ctx-drop" onclick="dbCtxDrop()">Delete</button>
  <button class="ctx-item ctx-item-danger" id="db-ctx-conn-remove" onclick="dbCtxRemoveConnection()">Remove Connection</button>
  <div class="ctx-input-row hidden" id="db-ctx-input-row">
    <input id="db-ctx-input" class="ctx-input" type="text" onkeydown="dbCtxInputKey(event)" />
    <button class="ctx-input-ok" onclick="dbCtxInputOk()">OK</button>
  </div>
</div>

<!-- File tree context menu -->
<div id="file-ctx-menu" class="ctx-menu hidden">
  <div id="ctx-dir-actions">
    <button class="ctx-item" onclick="ctxNewFolder()">New Folder</button>
    <button class="ctx-item" onclick="ctxNewFile()">New File</button>
    <div class="ctx-sep" id="ctx-dir-sep"></div>
    <button class="ctx-item" id="ctx-btn-rename-dir" onclick="ctxRename()">Rename</button>
    <button class="ctx-item ctx-item-danger" id="ctx-btn-remove-dir" onclick="ctxRemoveDir()">Remove Folder</button>
  </div>
  <div id="ctx-file-actions">
    <button class="ctx-item" onclick="ctxRename()">Rename</button>
    <button class="ctx-item" onclick="ctxDuplicate()">Duplicate</button>
    <button class="ctx-item" onclick="ctxCopyPath()">Copy Path</button>
    <div class="ctx-sep"></div>
    <button class="ctx-item ctx-item-danger" onclick="ctxDeleteFile()">Delete</button>
  </div>
</div>

<!-- Results table per-column filter popover -->
<div id="col-filter-popover" class="col-filter-popover hidden">
  <input type="text" id="col-filter-input" placeholder="Filter this column…" />
</div>

<!-- Modal -->
<div id="modal-overlay" class="modal-overlay hidden" onclick="closeModal()">
  <div class="modal" onclick="event.stopPropagation()">
    <div class="modal-header">
      <span id="modal-title">Add Connection</span>
      <button class="btn-icon" onclick="closeModal()">✕</button>
    </div>
    <div id="modal-body"
         hx-get="/api/profiles/form"
         hx-trigger="openModal from:body"
         hx-swap="innerHTML">
    </div>
  </div>
</div>

<script>
window.getEditorSQL = () => document.getElementById('sql-editor').value;
window.setEditorSQL = (s) => { document.getElementById('sql-editor').value = s; };
window.setEditorTheme = (dark) => {
  document.getElementById('sql-editor').classList.toggle('editor-light', !dark);
};

// Init tabs once DOM ready
setTimeout(() => {
  const cur = _tabs.find(t => t.id === _activeTab);
  if (cur && window.setEditorSQL) window.setEditorSQL(cur.sql);
  renderQueryTabs();
}, 0);

// Click column/object in tree → insert at cursor
document.addEventListener("click", (e) => {
  const el = e.target.closest("[data-insert]");
  if (!el) return;
  const ta = document.getElementById('sql-editor');
  const start = ta.selectionStart;
  const val = ta.value;
  ta.value = val.slice(0, start) + el.dataset.insert + val.slice(ta.selectionEnd);
  ta.selectionStart = ta.selectionEnd = start + el.dataset.insert.length;
  ta.focus();
});

// ── Keyboard tree navigation (DB explorer, Files, Git) ──────────────────────
// Clicking any row in these panels makes it the keyboard cursor (no separate
// Tab-into-panel step); arrows then take over: Up/Down move, Right expands or
// descends into the first child, Left collapses or moves to the parent, Enter
// activates (simulates a real click, reusing whatever onclick/delegated
// listener the row already has — see toggleNode()/toggleFileNode() above and
// the [data-insert] listener). Git rows have no hierarchy, so Left/Right are
// no-ops there; Enter only has a safe, unambiguous action on file rows
// (open diff) — branch/log rows have no single default action to trigger.
let _kbdCursorRow = null;
const KBD_ROW_SELECTOR = ".tree-row, .git-branch-row, .git-file-row, .git-log-row";
const GIT_ROW_CLASSES = ["git-branch-row", "git-file-row", "git-log-row"];

function _setKbdCursor(row) {
  if (!row) return;
  if (_kbdCursorRow) _kbdCursorRow.classList.remove("kbd-focus");
  _kbdCursorRow = row;
  row.classList.add("kbd-focus");
  row.scrollIntoView({ block: "nearest" });
}

document.addEventListener("click", (e) => {
  const row = e.target.closest(KBD_ROW_SELECTOR);
  if (row) _setKbdCursor(row);
});

function _visibleTreeRows(root) {
  return Array.from(root.querySelectorAll(".tree-row")).filter((r) => {
    let el = r.parentElement;
    while (el && el !== root) {
      if (el.classList.contains("tree-children") && el.classList.contains("hidden")) return false;
      el = el.parentElement;
    }
    return true;
  });
}

function _treeArrowNav(row, key) {
  const root = row.closest("#object-explorer, #file-tree");
  if (!root) return;
  if (key === "Enter") { row.click(); return; }
  const rows = _visibleTreeRows(root);
  const idx = rows.indexOf(row);
  if (key === "ArrowDown") {
    if (idx >= 0 && idx < rows.length - 1) _setKbdCursor(rows[idx + 1]);
  } else if (key === "ArrowUp") {
    if (idx > 0) _setKbdCursor(rows[idx - 1]);
  } else if (key === "ArrowRight") {
    const children = row.nextElementSibling;
    if (!children || !children.classList.contains("tree-children")) return;
    if (children.classList.contains("hidden")) {
      row.click(); // expand — same row stays the cursor
    } else {
      const firstChild = children.querySelector(".tree-row");
      if (firstChild) _setKbdCursor(firstChild);
    }
  } else if (key === "ArrowLeft") {
    const children = row.nextElementSibling;
    if (children && children.classList.contains("tree-children") && !children.classList.contains("hidden")) {
      row.click(); // collapse — same row stays the cursor
      return;
    }
    const parentChildren = row.closest(".tree-children");
    const parentRow = parentChildren && parentChildren.previousElementSibling;
    if (parentRow && parentRow.classList.contains("tree-row")) _setKbdCursor(parentRow);
  }
}

function _gitArrowNav(row, key) {
  const cls = GIT_ROW_CLASSES.find((c) => row.classList.contains(c));
  if (!cls) return;
  if (key === "Enter") {
    if (cls === "git-file-row") {
      const nameEl = row.querySelector(".git-file-name");
      if (nameEl) nameEl.click();
    }
    return;
  }
  if (key !== "ArrowUp" && key !== "ArrowDown") return;
  const siblings = Array.from(row.parentElement.children).filter((el) => el.classList.contains(cls));
  const idx = siblings.indexOf(row);
  if (key === "ArrowDown" && idx < siblings.length - 1) _setKbdCursor(siblings[idx + 1]);
  else if (key === "ArrowUp" && idx > 0) _setKbdCursor(siblings[idx - 1]);
}

document.addEventListener("keydown", (e) => {
  if (!_kbdCursorRow || !document.body.contains(_kbdCursorRow)) return;
  if (e.metaKey || e.ctrlKey || e.altKey || e.shiftKey) return; // leave modified combos (⌘Enter etc.) alone
  const tag = (e.target.tagName || "").toLowerCase();
  if (tag === "input" || tag === "textarea" || e.target.isContentEditable) return;
  if (!["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Enter"].includes(e.key)) return;
  e.preventDefault();
  if (_kbdCursorRow.matches(".tree-row")) _treeArrowNav(_kbdCursorRow, e.key);
  else _gitArrowNav(_kbdCursorRow, e.key);
});
</script>

<script>
let _activeProfile = "{{ active_profile }}";

function getSql() { return window.getEditorSQL ? window.getEditorSQL() : ""; }

// Run/Analyze/Explain act on a highlighted selection when there is one — same
// convention as DataGrip/DBeaver — otherwise fall back to the whole tab.
function getRunSql() {
  const ta = document.getElementById("sql-editor");
  if (ta && ta.selectionStart !== ta.selectionEnd) {
    const selected = ta.value.slice(ta.selectionStart, ta.selectionEnd).trim();
    if (selected) return selected;
  }
  return getSql();
}
function getProfile() {
  const cur = _tabs.find(t => t.id === _activeTab);
  return (cur && cur.profile) || _activeProfile;
}

function appendMessage(type, text) {
  const log = document.getElementById("messages-log");
  const placeholder = log.querySelector("p.dim");
  if (placeholder) placeholder.remove();
  const ts = new Date().toLocaleTimeString();
  const el = document.createElement("div");
  el.className = "msg-entry msg-" + type;
  el.innerHTML = `<span class="msg-ts">${ts}</span><span class="msg-text">${text}</span>`;
  log.insertBefore(el, log.firstChild);
  log.scrollTop = 0;
}

function runQuery() {
  const cur = _tabs.find(t => t.id === _activeTab);
  if (!_isSqlTab(cur)) { appendMessage("info", "Not a SQL tab — nothing to run."); return; }
  const sql = getRunSql();
  if (!sql.trim()) return;
  resetResultsTableFilters();
  switchTabByName("results-panel");
  setStatus("Running...");
  document.getElementById("stop-query-btn").classList.remove("hidden");
  const t0 = Date.now();
  const ranTab = _activeTab;
  htmx.ajax("POST", "/api/query/run", {
    target: "#results-panel",
    swap: "innerHTML",
    values: { sql, profile: getProfile() },
  }).then(() => {
    document.getElementById("stop-query-btn").classList.add("hidden");
    setStatus("");
    const elapsed = Date.now() - t0;
    const meta = document.querySelector("#results-panel .results-meta");
    const summary = meta ? meta.textContent.trim() : "Query complete";
    appendMessage("ok", `${summary} (${elapsed}ms round-trip)`);
    // A CREATE run from the "New Table/View/Function/..." flow succeeded —
    // refresh the tree category it should now show up under.
    if (meta && _dbPendingCreates[ranTab]) {
      _dbRefreshParent(_dbPendingCreates[ranTab]);
      delete _dbPendingCreates[ranTab];
    }
  }).catch(err => {
    document.getElementById("stop-query-btn").classList.add("hidden");
    setStatus("");
    appendMessage("error", "Query failed: " + err);
  });
}

function stopQuery() {
  const btn = document.getElementById("stop-query-btn");
  btn.disabled = true;
  setStatus("Stopping...");
  const form = new FormData();
  form.append("profile", getProfile());
  fetch("/api/query/stop", { method: "POST", body: form })
    .then(r => r.json())
    .then(data => {
      btn.disabled = false;
      if (data.error) appendMessage("error", "Stop failed: " + data.error);
      else appendMessage("info", "Stop requested");
    })
    .catch(err => {
      btn.disabled = false;
      appendMessage("error", "Stop failed: " + err);
    });
}

function analyzeQuery() {
  const sql = getRunSql();
  if (!sql.trim()) return;
  switchTabByName("analysis-panel");
  setStatus("Analyzing...");
  htmx.ajax("POST", "/api/analyze", {
    target: "#analysis-panel",
    swap: "innerHTML",
    values: { sql, dialect: "databricks" },
  }).then(() => {
    setStatus("");
    appendMessage("info", "Analysis complete");
  });
}

function explainQuery() {
  const sql = getRunSql();
  if (!sql.trim()) return;
  switchTabByName("plan-panel");
  setStatus("Explaining...");
  htmx.ajax("POST", "/api/query/explain", {
    target: "#plan-panel",
    swap: "innerHTML",
    values: { sql, profile: getProfile() },
  }).then(() => {
    setStatus("");
    appendMessage("info", "Query plan ready");
  }).catch(err => {
    setStatus("");
    appendMessage("error", "Explain failed: " + err);
  });
}

function togglePlanChildren(iconSpan) {
  const item = iconSpan.closest(".plan-node");
  const children = item && item.querySelector(":scope > .tree-children");
  if (!children) return;
  const isHidden = children.classList.contains("hidden");
  children.classList.toggle("hidden", !isHidden);
  iconSpan.textContent = isHidden ? "▼" : "▶";
}

function togglePlanDetail(labelSpan) {
  const item = labelSpan.closest(".plan-node");
  const detail = item && item.querySelector(":scope > .plan-detail");
  if (!detail) return;
  detail.classList.toggle("hidden");
}

function setStatus(msg) {
  const el = document.getElementById("run-status");
  el.innerHTML = msg ? `<span class="spinner"></span>${msg}` : "";
}

function exportCSV() {
  // Server-side export of the full cached result, always every row regardless
  // of the current filter/sort/page — the "(all)" in the button label.
  window.location = "/api/query/export-all";
}

// ── Results table sort/filter/pagination — all server-side against the full
// cached result (app.state.last_full_result), so they apply across every
// page rather than just whatever 500 rows happen to be rendered. ──────────
let _resultsSort = { col: -1, dir: "asc" };
let _columnFilters = {};
let _activeFilterColIndex = null;
let _filterDebounce = null;

function fetchResultsPage(offset) {
  const params = new URLSearchParams({ offset, sort_col: _resultsSort.col, sort_dir: _resultsSort.dir });
  if (Object.keys(_columnFilters).length) params.set("filters", JSON.stringify(_columnFilters));
  htmx.ajax("GET", "/api/query/page?" + params.toString(), { target: "#results-panel", swap: "innerHTML" });
}

function loadResultsPage(offset) {
  if (offset < 0) return;
  fetchResultsPage(offset);
}

function sortResultsTable(colIndex) {
  _resultsSort = _resultsSort.col === colIndex
    ? { col: colIndex, dir: _resultsSort.dir === "asc" ? "desc" : "asc" }
    : { col: colIndex, dir: "asc" };
  fetchResultsPage(0);
}

function resetResultsTableFilters() {
  _resultsSort = { col: -1, dir: "asc" };
  _columnFilters = {};
  _activeFilterColIndex = null;
  const popover = document.getElementById("col-filter-popover");
  if (popover) popover.classList.add("hidden");
}

function toggleColumnFilterPopover(btn, colIndex) {
  const popover = document.getElementById("col-filter-popover");
  const input = document.getElementById("col-filter-input");
  if (_activeFilterColIndex === colIndex && !popover.classList.contains("hidden")) {
    popover.classList.add("hidden");
    _activeFilterColIndex = null;
    return;
  }
  _activeFilterColIndex = colIndex;
  const rect = btn.getBoundingClientRect();
  popover.style.top = (rect.bottom + 4) + "px";
  popover.style.left = Math.max(4, rect.right - 180) + "px";
  input.value = _columnFilters[colIndex] || "";
  popover.classList.remove("hidden");
  setTimeout(() => input.focus(), 0);
}

function closeColumnFilterPopover() {
  document.getElementById("col-filter-popover").classList.add("hidden");
  _activeFilterColIndex = null;
}

document.getElementById("col-filter-input").addEventListener("input", (e) => {
  if (_activeFilterColIndex === null) return;
  const val = e.target.value.trim();
  if (val) _columnFilters[_activeFilterColIndex] = val;
  else delete _columnFilters[_activeFilterColIndex];
  clearTimeout(_filterDebounce);
  _filterDebounce = setTimeout(() => fetchResultsPage(0), 300);
});

document.getElementById("col-filter-input").addEventListener("keydown", (e) => {
  if (e.key === "Enter") { clearTimeout(_filterDebounce); fetchResultsPage(0); closeColumnFilterPopover(); }
  if (e.key === "Escape") closeColumnFilterPopover();
});

document.addEventListener("click", (e) => {
  const popover = document.getElementById("col-filter-popover");
  if (popover.classList.contains("hidden")) return;
  if (!popover.contains(e.target) && !e.target.classList.contains("col-filter-toggle")) {
    closeColumnFilterPopover();
  }
});

function switchTab(btn, panelId) {
  document.querySelectorAll(".tab").forEach(t => t.classList.remove("active"));
  document.querySelectorAll(".tab-content").forEach(p => {
    p.classList.remove("active");
    p.classList.add("hidden");
  });
  btn.classList.add("active");
  const panel = document.getElementById(panelId);
  panel.classList.remove("hidden");
  panel.classList.add("active");
}

function switchTabByName(panelId) {
  const btn = document.querySelector(`.tab[onclick*="${panelId}"]`);
  if (btn) switchTab(btn, panelId);
}

function toggleNode(row) {
  const type = row.dataset.type;
  const profile = row.dataset.profile;
  const catalog = row.dataset.catalog || "";
  const schema = row.dataset.schema || "";
  const table = row.dataset.table || "";
  const objectType = row.dataset.objectType || "";

  const container = row.nextElementSibling; // .tree-children
  if (!container || !container.classList.contains("tree-children")) return;

  const icon = row.querySelector(".tree-icon");
  const isOpen = !container.classList.contains("hidden");

  if (isOpen) {
    container.classList.add("hidden");
    if (icon) icon.textContent = "▶";
    return;
  }

  container.classList.remove("hidden");
  if (icon) icon.textContent = "▼";

  if (container.dataset.loaded) return;
  container.dataset.loaded = "1";

  let url = "";
  if (type === "connection") {
    _activeProfile = profile;
    document.querySelectorAll(".tree-connection .tree-row").forEach(r => r.classList.remove("tree-active"));
    row.classList.add("tree-active");
    url = `/api/schema/catalogs?profile=${enc(profile)}`;
  } else if (type === "catalog") {
    url = `/api/schema/schemas?profile=${enc(profile)}&catalog=${enc(catalog)}`;
  } else if (type === "schema") {
    url = `/api/schema/categories?profile=${enc(profile)}&catalog=${enc(catalog)}&schema=${enc(schema)}`;
  } else if (type === "category") {
    url = `/api/schema/objects?profile=${enc(profile)}&catalog=${enc(catalog)}&schema=${enc(schema)}&object_type=${enc(objectType)}`;
  } else if (type === "table") {
    url = `/api/schema/columns?profile=${enc(profile)}&catalog=${enc(catalog)}&schema=${enc(schema)}&table=${enc(table)}&object_type=${enc(objectType)}`;
  }

  if (url) {
    container.innerHTML = '<p class="dim pad"><span class="spinner"></span>Loading…</p>';
    const req = htmx.ajax("GET", url, { target: container, swap: "innerHTML" });
    // Category rows (Tables/Views/Functions/Stored Procedures) start dim; once we
    // know the category actually has objects, switch its label to the normal text
    // color so an empty category stays visually de-emphasized.
    if (type === "category" && req && req.then) {
      req.then(() => {
        row.classList.toggle("tree-nonempty", container.querySelector(".tree-item") !== null);
      });
    }
  }
}

function enc(s) { return encodeURIComponent(s); }

// ── Query tabs ──────────────────────────────────────────────────────────────
const DBST_BOOT_ID = "{{ boot_id }}";
let _tabs = [{ id: 1, name: "Query 1", sql: "", profile: "{{ active_profile }}" }];
let _activeTab = 1;
let _nextTabId = 2;

(function restoreTabs() {
  try {
    const saved = JSON.parse(localStorage.getItem("dbst-tabs") || "null");
    if (saved && Array.isArray(saved.tabs) && saved.tabs.length) {
      _tabs = saved.tabs;
      _activeTab = saved.tabs.some(t => t.id === saved.activeTab) ? saved.activeTab : saved.tabs[0].id;
      _nextTabId = saved.nextTabId || (Math.max(0, ...saved.tabs.map(t => t.id)) + 1);
    }
    // Fresh server process: renumber ids/default names back to 1, 2, 3... in
    // tab-bar order (content and custom-renamed tabs are untouched — id and
    // default naming are internal bookkeeping, not user-visible identity).
    if (localStorage.getItem("dbst-boot-id") !== DBST_BOOT_ID) {
      localStorage.setItem("dbst-boot-id", DBST_BOOT_ID);
      const oldActiveId = _activeTab;
      _tabs.forEach((t, i) => {
        const newId = i + 1;
        if (t.id === oldActiveId) _activeTab = newId;
        if (/^Query \d+$/.test(t.name)) t.name = "Query " + newId;
        t.id = newId;
      });
      _nextTabId = _tabs.length + 1;
    }
  } catch (e) { /* corrupt storage, ignore */ }
})();

function saveTabsToStorage() {
  const cur = _tabs.find(t => t.id === _activeTab);
  if (cur && window.getEditorSQL) cur.sql = window.getEditorSQL();
  localStorage.setItem("dbst-tabs", JSON.stringify({ tabs: _tabs, activeTab: _activeTab, nextTabId: _nextTabId }));
  syncActiveTabToServer();
}

// ── MCP tab-sync bridge ──────────────────────────────────────────────────────
// Mirrors the active tab's {sql, profile, name} to the server so `dbst mcp`
// (a separate process) can read/edit what's open here via its own HTTP calls.
let _tabSyncSocket = null;

function connectTabSync() {
  const proto = location.protocol === "https:" ? "wss:" : "ws:";
  _tabSyncSocket = new WebSocket(`${proto}//${location.host}/api/query/tab-sync`);
  _tabSyncSocket.onopen = syncActiveTabToServer;
  _tabSyncSocket.onmessage = (evt) => {
    let msg;
    try { msg = JSON.parse(evt.data); } catch (e) { return; }
    if (msg.type !== "edit") return;
    const cur = _tabs.find(t => t.id === _activeTab);
    if (cur) cur.sql = msg.sql;
    if (window.setEditorSQL) window.setEditorSQL(msg.sql);
    localStorage.setItem("dbst-tabs", JSON.stringify({ tabs: _tabs, activeTab: _activeTab, nextTabId: _nextTabId }));
    syncActiveTabToServer();
    _tabSyncSocket.send(JSON.stringify({ type: "ack", req_id: msg.req_id }));
    if (msg.diff && msg.diff.some(l => l.type !== "context")) showSqlDiffModal(msg.diff);
    if (msg.run) runQuery();
  };
  _tabSyncSocket.onclose = () => setTimeout(connectTabSync, 2000);
}
connectTabSync();

function syncActiveTabToServer() {
  if (!_tabSyncSocket || _tabSyncSocket.readyState !== WebSocket.OPEN) return;
  const cur = _tabs.find(t => t.id === _activeTab);
  if (!cur) return;
  _tabSyncSocket.send(JSON.stringify({
    sql: cur.sql, profile: cur.profile || _activeProfile, name: cur.name, tab_id: cur.id,
  }));
}

// A tab's folder is the parent directory of the file backing it — ad hoc
// tabs (no filePath) have no folder and render ungrouped.
function _tabFolder(tab) {
  if (!tab.filePath) return null;
  const idx = tab.filePath.lastIndexOf("/");
  return idx > 0 ? tab.filePath.slice(0, idx) : null;
}

// Groups tabs by folder, preserving first-seen folder order and each
// folder's relative tab order — no separate "visual order" to maintain,
// since renderQueryTabs() below writes this grouping back into _tabs itself.
function _groupTabsByFolder(tabs) {
  const order = [];
  const groups = new Map();
  tabs.forEach(t => {
    const key = _tabFolder(t);
    if (!groups.has(key)) { groups.set(key, []); order.push(key); }
    groups.get(key).push(t);
  });
  return order.map(key => ({ key, tabs: groups.get(key) }));
}

function renderQueryTabs() {
  const bar = document.getElementById("query-tab-bar");
  const newBtn = bar.querySelector(".query-tab-new");
  bar.querySelectorAll(".query-tab, .query-tab-group-label").forEach(el => el.remove());

  const groups = _groupTabsByFolder(_tabs);
  _tabs = groups.flatMap(g => g.tabs);

  groups.forEach(group => {
    if (group.key) {
      const label = document.createElement("span");
      label.className = "query-tab-group-label";
      label.title = group.key;
      label.textContent = group.key.split("/").pop() || group.key;
      bar.insertBefore(label, newBtn);
    }
    group.tabs.forEach(tab => {
      const el = document.createElement("div");
      el.className = "query-tab" + (tab.id === _activeTab ? " active" : "");
      el.dataset.id = tab.id;
      const extBadge = tab.ext ? `<span class="query-tab-ext">${tab.ext.replace(/^\./, "")}</span>` : "";
      el.innerHTML = `
        ${extBadge}
        <span class="query-tab-name" ondblclick="renameTab(${tab.id})" onclick="switchQueryTab(${tab.id})">${tab.name}</span>
        ${_tabs.length > 1 ? `<button class="query-tab-close" onclick="closeQueryTab(event, ${tab.id})">×</button>` : ""}
      `;
      bar.insertBefore(el, newBtn);
    });
  });
  _updateEditorButtons();
  _syncProfileSelect();
  saveTabsToStorage();
}

function _updateEditorButtons() {
  const cur = _tabs.find(t => t.id === _activeTab);
  const runBtn = document.getElementById("run-btn");
  const runnable = _isSqlTab(cur);
  runBtn.disabled = !runnable;
  runBtn.title = runnable ? "Run (⌘⏎)" : "Not a SQL tab";
}

// Each query tab remembers which connection it runs against, so different
// tabs can target different connections at once instead of sharing one
// implicit "active" profile.
function _syncProfileSelect() {
  const sel = document.getElementById("query-profile-select");
  if (!sel) return;
  const cur = _tabs.find(t => t.id === _activeTab);
  const profile = (cur && cur.profile) || _activeProfile;
  if (profile) sel.value = profile;
  _syncConnDropdownLabel();
  refreshWarehouseStatus();
}

// Custom-styled dropdown standing in for the native <select id="query-profile-select">,
// which some browsers (Safari/macOS) render as an unstylable OS popup regardless of CSS.
// The <select> stays the source of truth (visually hidden, still driven by
// _addProfileOption/_renameProfileOption/_removeProfileOption) so this is purely a skin.
function _syncConnDropdownLabel() {
  const sel = document.getElementById("query-profile-select");
  const label = document.getElementById("conn-dropdown-value");
  if (!sel || !label) return;
  const opt = sel.options[sel.selectedIndex];
  label.textContent = (opt && opt.value) ? opt.textContent : "No connections";
}

function toggleConnDropdown() {
  const menu = document.getElementById("conn-dropdown-menu");
  if (!menu) return;
  if (menu.classList.contains("hidden")) openConnDropdown();
  else closeConnDropdown();
}

function openConnDropdown() {
  const sel = document.getElementById("query-profile-select");
  const menu = document.getElementById("conn-dropdown-menu");
  if (!sel || !menu) return;
  const options = Array.from(sel.options).filter(o => o.value);
  if (!options.length) return;
  menu.innerHTML = options.map(o => `
    <button type="button" class="conn-dropdown-item${o.value === sel.value ? " active" : ""}" data-value="${_escapeHtml(o.value)}">
      <span class="conn-dropdown-check">${o.value === sel.value ? "✓" : ""}</span>${_escapeHtml(o.textContent)}
    </button>
  `).join("");
  menu.classList.remove("hidden");
}

function closeConnDropdown() {
  const menu = document.getElementById("conn-dropdown-menu");
  if (menu) menu.classList.add("hidden");
}

document.getElementById("conn-dropdown-menu").addEventListener("click", (e) => {
  const item = e.target.closest(".conn-dropdown-item");
  if (!item) return;
  closeConnDropdown();
  setActiveTabProfile(item.dataset.value);
});

document.addEventListener("click", (e) => {
  if (!e.target.closest("#conn-dropdown")) closeConnDropdown();
});

document.addEventListener("keydown", (e) => {
  if (e.key === "Escape") closeConnDropdown();
});

// Live warehouse status (state/size/auto-stop/active sessions) for the active
// tab's connection — explains "why did my query take 30s to even start"
// (cold warehouse) that nothing else in the UI surfaces.
let _lastWarehouseStatusProfile = null;
let _warehouseStatusReqId = 0;

function refreshWarehouseStatus(force) {
  const badge = document.getElementById("warehouse-status-badge");
  const sel = document.getElementById("query-profile-select");
  if (!badge || !sel) return;
  const profile = sel.value;
  if (!profile) { badge.classList.add("hidden"); _lastWarehouseStatusProfile = null; return; }
  if (!force && profile === _lastWarehouseStatusProfile) return;
  _lastWarehouseStatusProfile = profile;

  const reqId = ++_warehouseStatusReqId;
  fetch("/api/schema/warehouse-status?profile=" + encodeURIComponent(profile))
    .then(r => r.json())
    .then(data => {
      if (reqId !== _warehouseStatusReqId) return; // stale response — profile changed since
      if (data.error) { badge.classList.add("hidden"); return; }
      const s = data.status;
      badge.className = "warehouse-badge wh-" + (s.state || "unknown").toLowerCase();
      const parts = [s.state, s.cluster_size].filter(Boolean);
      if (s.num_active_sessions !== null && s.num_active_sessions !== undefined) {
        parts.push(s.num_active_sessions + " session" + (s.num_active_sessions === 1 ? "" : "s"));
      }
      badge.textContent = parts.join(" · ");
      badge.title = "Auto-stop after " + s.auto_stop_mins + " min idle"
        + (s.num_clusters ? ` · ${s.num_clusters} cluster(s)` : "");
    })
    .catch(() => badge.classList.add("hidden"));
}

setInterval(() => refreshWarehouseStatus(true), 30000);

function setActiveTabProfile(profile) {
  const cur = _tabs.find(t => t.id === _activeTab);
  if (cur) cur.profile = profile;
  const sel = document.getElementById("query-profile-select");
  if (sel) sel.value = profile;
  _dbActivateProfile(profile);
  saveTabsToStorage();
  _syncConnDropdownLabel();
  refreshWarehouseStatus();
}

function switchQueryTab(id) {
  if (id === _activeTab) return;
  // save current editor SQL to active tab
  const cur = _tabs.find(t => t.id === _activeTab);
  if (cur && window.getEditorSQL) cur.sql = window.getEditorSQL();

  _activeTab = id;
  const tab = _tabs.find(t => t.id === id);
  if (tab && window.setEditorSQL) window.setEditorSQL(tab.sql);
  renderQueryTabs();
}

function addQueryTab(sql, opts) {
  opts = opts || {};
  // save current
  const cur = _tabs.find(t => t.id === _activeTab);
  if (cur && window.getEditorSQL) cur.sql = window.getEditorSQL();

  const id = _nextTabId++;
  const name = "Query " + id;
  // saveExt only steers Save-As's suggested filename (e.g. metric-view DDL
  // tabs default to .yml) — it's separate from a file-backed tab's `ext`,
  // which also gates Run, since this content is still real executable SQL.
  _tabs.push({
    id, name, sql: sql || "", profile: _activeProfile,
    saveExt: opts.saveExt, alwaysRunnable: opts.alwaysRunnable,
  });
  _activeTab = id;
  if (window.setEditorSQL) window.setEditorSQL(sql || "");
  renderQueryTabs();
  return id;
}

function closeQueryTab(event, id) {
  event.stopPropagation();
  if (_tabs.length === 1) return;
  const tab = _tabs.find(t => t.id === id);
  if (!tab) return;
  if (id === _activeTab && window.getEditorSQL) tab.sql = window.getEditorSQL();

  if (!_isTabDirty(tab)) { _removeTab(id); return; }

  document.getElementById("modal-title").textContent = "Unsaved changes";
  document.querySelector(".modal").classList.remove("modal-wide");
  document.getElementById("modal-body").innerHTML = `
    <div class="close-confirm-wrap">
      <p>Save changes to "${_escapeHtml(tab.name)}" before closing?</p>
      <div class="close-confirm-actions">
        <button class="btn-secondary" onclick="closeModal()">Cancel</button>
        <button class="btn-secondary ctx-item-danger" onclick="_closeConfirmDontSave(${id})">Don't Save</button>
        <button class="btn-primary" onclick="_closeConfirmSave(${id})">Save</button>
      </div>
    </div>`;
  document.getElementById("modal-overlay").classList.remove("hidden");
}

function _removeTab(id) {
  const idx = _tabs.findIndex(t => t.id === id);
  if (idx === -1) return;
  _tabs.splice(idx, 1);
  if (_activeTab === id) {
    const next = _tabs[Math.min(idx, _tabs.length - 1)];
    _activeTab = next.id;
    if (window.setEditorSQL) window.setEditorSQL(next.sql);
  }
  renderQueryTabs();
}

function _closeConfirmDontSave(id) {
  closeModal();
  _removeTab(id);
}

function _closeConfirmSave(id) {
  const tab = _tabs.find(t => t.id === id);
  if (!tab) { closeModal(); return; }
  if (tab.filePath) {
    closeModal();
    _writeTabToFile(tab, tab.filePath, () => _removeTab(id));
  } else {
    openSaveAsDialog(tab, () => _removeTab(id));
  }
}

function renameTab(id) {
  const tab = _tabs.find(t => t.id === id);
  if (!tab) return;
  const el = document.querySelector(`.query-tab[data-id="${id}"] .query-tab-name`);
  if (!el) return;
  el.contentEditable = "true";
  el.focus();
  // select all text
  const range = document.createRange();
  range.selectNodeContents(el);
  window.getSelection().removeAllRanges();
  window.getSelection().addRange(range);

  function done() {
    el.contentEditable = "false";
    tab.name = el.textContent.trim() || tab.name;
    el.textContent = tab.name;
    el.removeEventListener("blur", done);
    el.removeEventListener("keydown", onKey);
    saveTabsToStorage();
  }
  function onKey(e) {
    if (e.key === "Enter") { e.preventDefault(); el.blur(); }
    if (e.key === "Escape") { el.textContent = tab.name; el.blur(); }
  }
  el.addEventListener("blur", done);
  el.addEventListener("keydown", onKey);
}

// expose for history click-to-load: open in current tab
window.loadSqlIntoTab = (sql) => {
  const cur = _tabs.find(t => t.id === _activeTab);
  if (cur) cur.sql = sql;
  if (window.setEditorSQL) window.setEditorSQL(sql);
  saveTabsToStorage();
};

// Persist typing without requiring a tab switch (debounced)
let _saveTabsDebounce = null;
document.getElementById("sql-editor").addEventListener("input", () => {
  clearTimeout(_saveTabsDebounce);
  _saveTabsDebounce = setTimeout(saveTabsToStorage, 400);
});
window.addEventListener("beforeunload", saveTabsToStorage);
// ── end query tabs ───────────────────────────────────────────────────────────

function gitOp(op) {
  fetch("/api/git/" + op, { method: "POST" })
    .then(r => r.json())
    .then(data => {
      if (data.error) { appendMessage("error", op + " failed: " + data.error); return; }
      appendMessage("ok", op + ": " + (data.output || "done"));
      if (op === "pull") {
        htmx.ajax("GET", "/api/git/status", { target: "#git-status-inner", swap: "outerHTML" });
      } else if (op === "fetch") {
        htmx.ajax("GET", "/api/git/status", { target: "#git-status-inner", swap: "outerHTML" });
      }
    });
}

function gitSwitch(name) {
  const form = new FormData();
  form.append("name", name);
  fetch("/api/git/switch", { method: "POST", body: form })
    .then(r => r.json())
    .then(data => {
      if (data.error) { appendMessage("error", "Switch failed: " + data.error); return; }
      appendMessage("ok", "Switched to " + data.branch);
      htmx.ajax("GET", "/api/git/status", { target: "#git-status-inner", swap: "outerHTML" });
    });
}

function gitCreateBranch() {
  const name = document.getElementById("new-branch-input")?.value?.trim();
  if (!name) return;
  const form = new FormData();
  form.append("name", name);
  fetch("/api/git/branch-create", { method: "POST", body: form })
    .then(r => r.json())
    .then(data => {
      if (data.error) { appendMessage("error", "Create branch failed: " + data.error); return; }
      appendMessage("ok", "Created & switched to " + data.branch);
      htmx.ajax("GET", "/api/git/status", { target: "#git-status-inner", swap: "outerHTML" });
    });
}

function showGitDiff(path, staged) {
  const url = "/api/git/diff?path=" + encodeURIComponent(path) + "&staged=" + staged;
  fetch(url).then(r => r.text()).then(html => {
    document.querySelector(".modal").classList.add("modal-wide");
    document.getElementById("modal-title").textContent = (staged ? "Staged: " : "Diff: ") + path.split("/").pop();
    document.getElementById("modal-body").innerHTML = html;
    document.getElementById("modal-overlay").classList.remove("hidden");
  });
}

function relayoutCommitGraph() {
  const svg = document.querySelector(".git-log-graph");
  if (!svg) return;
  const inline = document.querySelector(".git-commit-files-inline");
  const expandedRow = inline ? +inline.dataset.afterRow : -1;
  const deltaY = inline ? inline.offsetHeight : 0;

  svg.querySelectorAll("circle[data-row]").forEach(c => {
    const row = +c.dataset.row;
    const base = +c.dataset.baseCy;
    c.setAttribute("cy", row > expandedRow ? base + deltaY : base);
  });
  svg.querySelectorAll("line[data-row1]").forEach(l => {
    const r1 = +l.dataset.row1, r2 = +l.dataset.row2;
    const by1 = +l.dataset.baseY1, by2 = +l.dataset.baseY2;
    l.setAttribute("y1", r1 > expandedRow ? by1 + deltaY : by1);
    l.setAttribute("y2", r2 > expandedRow ? by2 + deltaY : by2);
  });
  svg.setAttribute("height", +svg.dataset.baseHeight + deltaY);
}

function toggleCommitFiles(rowEl, hash, rowIdx) {
  const existing = document.querySelector(".git-commit-files-inline");
  const wasThisRow = existing && +existing.dataset.afterRow === rowIdx;
  if (existing) {
    const prevRow = existing.previousElementSibling;
    if (prevRow) prevRow.classList.remove("git-log-row-active");
    existing.remove();
  }
  if (wasThisRow) { relayoutCommitGraph(); return; }

  rowEl.classList.add("git-log-row-active");
  const panel = document.createElement("div");
  panel.className = "git-commit-files-inline";
  panel.dataset.afterRow = rowIdx;
  panel.innerHTML = '<p class="git-empty-msg"><span class="spinner"></span>Loading…</p>';
  rowEl.insertAdjacentElement("afterend", panel);
  relayoutCommitGraph();

  fetch("/api/git/commit/" + hash + "/files")
    .then(r => r.text())
    .then(html => {
      panel.innerHTML = html;
      relayoutCommitGraph();
    });
}

function showCommitDiff(hash, path) {
  const url = "/api/git/commit/" + hash + "/diff?path=" + encodeURIComponent(path);
  fetch(url).then(r => r.text()).then(html => {
    document.querySelector(".modal").classList.add("modal-wide");
    document.getElementById("modal-title").textContent = hash.slice(0, 7) + ": " + path.split("/").pop();
    document.getElementById("modal-body").innerHTML = html;
    document.getElementById("modal-overlay").classList.remove("hidden");
  });
}

function doGitCommit() {
  const msg = document.getElementById("git-commit-msg")?.value?.trim();
  if (!msg) return;
  const form = new FormData();
  form.append("message", msg);
  fetch("/api/git/commit", { method: "POST", body: form })
    .then(r => r.json())
    .then(data => {
      if (data.error) { appendMessage("error", "Commit failed: " + data.error); return; }
      appendMessage("ok", "Committed: " + msg);
      htmx.ajax("GET", "/api/git/status", { target: "#git-status-inner", swap: "outerHTML" });
    });
}

function toggleGitLogExpand(btn) {
  const wrap = document.querySelector("#git-log-inner .git-log-wrap");
  if (!wrap) return;
  const expanded = wrap.classList.toggle("git-log-expanded");
  btn.textContent = expanded ? "Minimize" : "Expand";
}

function switchSidebarTab(tab) {
  ["db", "files", "git"].forEach(t => {
    document.getElementById("panel-" + t).classList.toggle("hidden", tab !== t);
    document.getElementById("stab-" + t).classList.toggle("active", tab === t);
  });
  document.getElementById("refresh-btn").classList.toggle("hidden", tab !== "db");
  document.getElementById("add-conn-btn").classList.toggle("hidden", tab !== "db");
}

let _term = null, _termFit = null, _termSocket = null;

function toggleAIPanel(forceOpen) {
  const layout = document.querySelector(".layout");
  const panel = document.getElementById("ai-sidebar");
  const resizer = document.getElementById("resizer-x-ai");
  const btn = document.getElementById("ai-toggle-btn");
  const open = forceOpen !== undefined ? forceOpen : !layout.classList.contains("ai-open");
  layout.classList.toggle("ai-open", open);
  panel.classList.toggle("hidden", !open);
  resizer.classList.toggle("hidden", !open);
  btn.classList.toggle("active", open);
  localStorage.setItem("dbst-ai-open", open ? "1" : "0");
  if (open) {
    initTerminal();
    setTimeout(fitTerminal, 0);
  }
}

(function restoreAIPanel() {
  if (localStorage.getItem("dbst-ai-open") === "1") toggleAIPanel(true);
})();

function sendPromptToTerminal(prompt) {
  const layout = document.querySelector(".layout");
  const wasOpen = layout.classList.contains("ai-open") && _termSocket && _termSocket.readyState === WebSocket.OPEN;
  const send = () => {
    if (!_termSocket) return;
    // Written as two separate frames, not one "prompt + \r" write: a single
    // instant burst reads to the spawned CLI's TUI as a paste, and pasted
    // input commonly suppresses treating an embedded \r as Enter (so text
    // lands in the box but never submits). A trailing frame after the CLI
    // has processed the paste is treated as a real keypress.
    _termSocket.send(prompt);
    setTimeout(() => _termSocket && _termSocket.send("\r"), 100);
  };

  if (wasOpen) {
    send();
  } else {
    // Freshly opened: give the spawned CLI a moment to finish booting before
    // typing into it, or the prompt can arrive before its input loop is ready.
    toggleAIPanel(true);
    setTimeout(send, 1500);
  }
  appendMessage("info", "Sent to AI terminal — watch the panel for the result.");
}

function optimizeActiveQuery() {
  const sql = getSql();
  if (!sql.trim()) {
    appendMessage("info", "Nothing to optimize — the active tab is empty.");
    return;
  }
  sendPromptToTerminal(
    "Use the dbst MCP tools to optimize the SQL query currently open in my active dbst tab: " +
    "call get_active_tab to read it, get_last_result to check whether the last run errored " +
    "(fix that first if so), analyze_query and explain_query to understand it, then call " +
    "edit_active_tab with the improved query (run=true) to apply and verify the fix."
  );
}

function fixQueryError(btn) {
  const errorText = btn.dataset.error || "";
  sendPromptToTerminal(
    "The SQL query currently open in my active dbst tab just failed with this error:\n" +
    errorText +
    "\n\nUse the dbst MCP tools to fix it: call get_active_tab to read the query " +
    "(get_last_result has the same error for reference), then call edit_active_tab with the " +
    "corrected query (run=true) to apply and verify the fix."
  );
}

function explainPlanWithAI(btn) {
  const wrap = btn.closest(".plan-tree-wrap");
  const rawPre = wrap ? wrap.querySelector("pre.diff-pre") : null;
  const rawPlan = rawPre ? rawPre.textContent : "";
  sendPromptToTerminal(
    "Explain, in plain English, what this Databricks query plan is doing and call out any " +
    "performance concerns (shuffles, broadcast vs. sort-merge joins, full scans, skew, spill, " +
    "etc). Use get_active_tab to see the SQL it's for if useful. Here is the EXPLAIN FORMATTED " +
    "plan:\n\n" + rawPlan
  );
}

function _escapeHtml(s) {
  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
}

function showSqlDiffModal(diffLines) {
  const html = diffLines.map(l => {
    const prefix = l.type === "add" ? "+ " : l.type === "del" ? "- " : "  ";
    return `<span class="diff-${l.type}">${_escapeHtml(prefix + l.text)}\n</span>`;
  }).join("");
  document.getElementById("modal-title").textContent = "AI query change";
  document.getElementById("modal-body").innerHTML = `
    <div class="diff-wrap"><pre class="diff-pre">${html}</pre></div>
    <div class="form-actions"><button class="btn-secondary" onclick="closeModal()">Close</button></div>
  `;
  document.querySelector(".modal").classList.add("modal-wide");
  document.getElementById("modal-overlay").classList.remove("hidden");
}

function _terminalError(msg) {
  const el = document.getElementById("terminal-container");
  el.innerHTML = `<p class="error-msg pad">${msg}</p>`;
}

function initTerminal() {
  if (_term) return;
  if (!window.Terminal || !window.FitAddon) {
    _terminalError("Couldn't load the terminal (xterm.js failed to load from unpkg — check network access).");
    return;
  }
  try {
    const dark = !document.documentElement.classList.contains("light");
    _term = new window.Terminal({
      fontSize: 13,
      fontFamily: "Menlo, monospace",
      cursorBlink: true,
      theme: dark
        ? { background: "#1e1e2e", foreground: "#cdd6f4" }
        : { background: "#f5f5f7", foreground: "#1c1c28" },
    });
    _termFit = new window.FitAddon.FitAddon();
    _term.loadAddon(_termFit);
    const container = document.getElementById("terminal-container");
    _term.open(container);
    _termFit.fit();
    _term.onData(data => {
      if (_termSocket && _termSocket.readyState === WebSocket.OPEN) _termSocket.send(data);
    });
    connectTerminalSocket();
    window.addEventListener("resize", fitTerminal);
    // The panel is unhidden right before initTerminal() runs, so the first
    // fit() above can measure a stale (pre-layout) container size — a
    // ResizeObserver catches the real size once the browser actually reflows.
    new ResizeObserver(fitTerminal).observe(container);
  } catch (err) {
    console.error("Terminal init failed:", err);
    _terminalError("Couldn't start the terminal. " + err);
  }
}

function connectTerminalSocket() {
  const proto = location.protocol === "https:" ? "wss:" : "ws:";
  _termSocket = new WebSocket(`${proto}//${location.host}/api/ai/ws`);
  _termSocket.binaryType = "arraybuffer";
  _termSocket.onopen = fitTerminal;
  _termSocket.onmessage = (evt) => {
    if (typeof evt.data === "string") { _term.write(evt.data); return; }
    _term.write(new Uint8Array(evt.data));
  };
  _termSocket.onerror = (err) => console.error("Terminal websocket error:", err);
  _termSocket.onclose = (evt) => {
    console.warn("Terminal websocket closed:", evt.code, evt.reason);
    _term.write(`\r\n\x1b[2m[terminal closed: code=${evt.code}${evt.reason ? " " + evt.reason : ""}]\x1b[0m\r\n`);
  };
}

function fitTerminal() {
  if (!_term || !_termFit || document.getElementById("ai-sidebar").classList.contains("hidden")) return;
  _termFit.fit();
  _notifyResize();
  // xterm/FitAddon can round cell metrics slightly wrong on the very first
  // pass (sub-pixel row height before the browser has fully settled layout),
  // clipping the last row — a second fit on the next frame corrects it.
  requestAnimationFrame(() => {
    if (!_termFit) return;
    _termFit.fit();
    _notifyResize();
  });
}

function _notifyResize() {
  if (_termSocket && _termSocket.readyState === WebSocket.OPEN) {
    _termSocket.send(new Blob([JSON.stringify({ rows: _term.rows, cols: _term.cols })]));
  }
}

function restartTerminal() {
  if (_termSocket) {
    _termSocket.onclose = null;
    _termSocket.close();
    _termSocket = null;
  }
  if (_term) {
    _term.dispose();
    _term = null;
    _termFit = null;
  }
  document.getElementById("terminal-container").innerHTML = "";
  initTerminal();
}

const AI_CMD_OPTIONS = [
  { value: "", label: "Auto-detect" },
  { value: "claude", label: "Claude Code" },
  { value: "codex", label: "Codex" },
  { value: "cursor-agent", label: "Cursor Agent" },
  { value: "gemini", label: "Gemini CLI" },
  { value: "aider", label: "Aider" },
  { value: "copilot", label: "GitHub Copilot" },
  { value: "__custom__", label: "Custom…" },
];
const KNOWN_AI_COMMANDS = AI_CMD_OPTIONS.map(o => o.value).filter(v => v !== "__custom__");
let _aiCommandValue = "";

// Custom-styled dropdown reusing the .conn-dropdown skin (see _syncConnDropdownLabel
// above) so the AI CLI picker matches the connection picker's look.
function _applyAICommandToControls(command) {
  _aiCommandValue = command;
  const label = document.getElementById("ai-cmd-value");
  const custom = document.getElementById("ai-command-custom");
  if (KNOWN_AI_COMMANDS.includes(command)) {
    const opt = AI_CMD_OPTIONS.find(o => o.value === command);
    label.textContent = opt ? opt.label : "Auto-detect";
    custom.classList.add("hidden");
  } else {
    label.textContent = "Custom…";
    custom.value = command;
    custom.classList.remove("hidden");
  }
}

async function loadAICommand() {
  try {
    const res = await fetch("/api/ai/command");
    const data = await res.json();
    _applyAICommandToControls(data.command || "");
  } catch (err) {
    console.error("Failed to load AI command:", err);
  }
}

function toggleAICmdDropdown() {
  const menu = document.getElementById("ai-cmd-menu");
  if (!menu) return;
  if (menu.classList.contains("hidden")) openAICmdDropdown();
  else closeAICmdDropdown();
}

function openAICmdDropdown() {
  const menu = document.getElementById("ai-cmd-menu");
  if (!menu) return;
  const current = KNOWN_AI_COMMANDS.includes(_aiCommandValue) ? _aiCommandValue : "__custom__";
  menu.innerHTML = AI_CMD_OPTIONS.map(o => `
    <button type="button" class="conn-dropdown-item${o.value === current ? " active" : ""}" data-value="${_escapeHtml(o.value)}">
      <span class="conn-dropdown-check">${o.value === current ? "✓" : ""}</span>${_escapeHtml(o.label)}
    </button>
  `).join("");
  menu.classList.remove("hidden");
}

function closeAICmdDropdown() {
  const menu = document.getElementById("ai-cmd-menu");
  if (menu) menu.classList.add("hidden");
}

document.getElementById("ai-cmd-menu").addEventListener("click", (e) => {
  const item = e.target.closest(".conn-dropdown-item");
  if (!item) return;
  closeAICmdDropdown();
  const value = item.dataset.value;
  if (value === "__custom__") {
    const custom = document.getElementById("ai-command-custom");
    document.getElementById("ai-cmd-value").textContent = "Custom…";
    custom.classList.remove("hidden");
    custom.value = "";
    custom.focus();
    return;
  }
  setAICommand(value);
});

document.addEventListener("click", (e) => {
  if (!e.target.closest("#ai-cmd-dropdown")) closeAICmdDropdown();
});

document.addEventListener("keydown", (e) => {
  if (e.key === "Escape") closeAICmdDropdown();
});

async function setAICommand(command) {
  try {
    await fetch("/api/ai/command", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ command }),
    });
    _applyAICommandToControls(command);
    // Only restart if a terminal is already running — otherwise this would spawn
    // one eagerly, which the AI panel deliberately avoids doing on page load.
    if (_term) restartTerminal();
  } catch (err) {
    console.error("Failed to save AI command:", err);
  }
}

loadAICommand();

// ── File tree context menu ────────────────────────────────────────────────────
var _ctxPath = "", _ctxIsFile = false;

document.addEventListener("contextmenu", function(e) {
  if (!e.target.closest("#file-tree")) return;
  e.preventDefault();
  var row = e.target.closest(".tree-row[data-path]");
  _ctxPath   = row ? (row.dataset.path || "") : "";
  _ctxIsFile = row ? row.dataset.isFile === "1" : false;
  var da  = document.getElementById("ctx-dir-actions");
  var fa  = document.getElementById("ctx-file-actions");
  var sep = document.getElementById("ctx-dir-sep");
  var rd  = document.getElementById("ctx-btn-rename-dir");
  var rmv = document.getElementById("ctx-btn-remove-dir");
  if (_ctxIsFile) {
    da.style.display = "none"; fa.style.display = "";
  } else {
    da.style.display = ""; fa.style.display = "none";
    var hide = !_ctxPath;
    sep.style.display = rd.style.display = rmv.style.display = hide ? "none" : "";
  }
  var menu = document.getElementById("file-ctx-menu");
  menu.style.left = Math.min(e.clientX, window.innerWidth  - 170) + "px";
  menu.style.top  = Math.min(e.clientY, window.innerHeight - 220) + "px";
  menu.classList.remove("hidden");
});

document.addEventListener("click", function(e) {
  if (!e.target.closest("#file-ctx-menu"))
    document.getElementById("file-ctx-menu").classList.add("hidden");
});

function _ctxHide() { document.getElementById("file-ctx-menu").classList.add("hidden"); }

// ── DB object tree context menu ───────────────────────────────────────────────
var _dbCtx = null; // { kind, profile, catalog, schema, table, name, sql }
var _dbPendingCreates = {}; // tab id -> refresh ctx, set by dbCtxCreate, consumed by runQuery()

function _dbDialect(profile) {
  var row = document.querySelector('.tree-row[data-type="connection"][data-profile="' + profile + '"]');
  return row ? row.dataset.profileType : "databricks";
}

// Table/view always creatable; function/procedure syntax here is Databricks SQL
// specific (inline RETURN / SQL Scripting BEGIN...END) — Postgres uses different
// syntax (PL/pgSQL, $$ bodies), so only offer those two for Databricks.
function _dbSchemaCreateOptions(profile) {
  var opts = ["table", "view"];
  if (_dbDialect(profile) === "databricks") opts.push("function", "procedure", "metric_view");
  return opts;
}

function _dbReadOnly(profile) {
  var row = document.querySelector('.tree-row[data-type="connection"][data-profile="' + profile + '"]');
  return row ? row.dataset.readOnly === "true" : false;
}

document.addEventListener("contextmenu", function(e) {
  var explorer = e.target.closest("#object-explorer");
  if (!explorer) return;
  e.preventDefault();

  var row = e.target.closest(".tree-row[data-type], .tree-row[data-insert]");
  var menu = document.getElementById("db-ctx-menu");
  document.getElementById("db-ctx-input-row").classList.add("hidden");
  _dbCtxInputMode = "object";
  if (!row) { menu.classList.add("hidden"); return; }

  var type = row.dataset.type || "";
  var profile = row.dataset.profile || "";
  var catalog = row.dataset.catalog || "";
  var schema = row.dataset.schema || "";
  var table = row.dataset.table || "";
  var objectType = row.dataset.objectType || "";

  var showNewQuery = true, showCall = false, showGenerateDdl = false;
  var showCreate = [], showRename = false, showDelete = false;

  if (type === "category") {
    // Right-clicking a category header (Tables/Views/Functions/Stored
    // Procedures/Metric Views) offers only that one object type, not the
    // full schema-level list — matches what the category actually holds.
    _dbCtx = { kind: "schema", profile: profile, catalog: catalog, schema: schema,
               name: catalog + "." + schema };
    showNewQuery = false;
    showCreate = [objectType];
  } else if (type === "connection") {
    _dbCtx = { kind: "connection", profile: profile, name: profile };
    showCreate = ["catalog"];
  } else if (type === "catalog") {
    _dbCtx = { kind: "catalog", profile: profile, catalog: catalog, name: catalog,
               sql: "USE CATALOG `" + catalog + "`;\n" };
    showCreate = ["schema"];
    showRename = showDelete = true;
  } else if (type === "schema") {
    _dbCtx = { kind: "schema", profile: profile, catalog: catalog, schema: schema,
               name: catalog + "." + schema,
               sql: "USE CATALOG `" + catalog + "`;\nUSE SCHEMA `" + schema + "`;\n" };
    showCreate = _dbSchemaCreateOptions(profile);
    showRename = showDelete = true;
  } else if (type === "table") {
    var tableKind = objectType || "table";
    _dbCtx = { kind: tableKind, profile: profile, catalog: catalog, schema: schema, table: table,
               name: catalog + "." + schema + "." + table,
               sql: "SELECT * FROM `" + catalog + "`.`" + schema + "`.`" + table + "` LIMIT 100;\n" };
    if (tableKind === "function" || tableKind === "procedure") {
      // "New Query"'s SELECT * FROM ... template doesn't make sense for a routine —
      // "Call…" is the real analog. Databricks SQL also has no ALTER FUNCTION/PROCEDURE
      // ... RENAME TO (unlike every other object type here), so no Rename option either
      // — only DROP + CREATE, which we won't do silently since a failed recreate would
      // lose the routine.
      showNewQuery = false;
      showCall = showDelete = showGenerateDdl = true;
    } else {
      showRename = showDelete = showGenerateDdl = true;
    }
  } else if (row.dataset.insert) {
    // leaf: column only (functions/procedures are expandable "table"-type rows now)
    _dbCtx = { kind: "column", profile: profile, name: row.dataset.insert };
    showNewQuery = false;
  } else {
    menu.classList.add("hidden");
    return;
  }

  if (profile && _dbReadOnly(profile)) { showCreate = []; showRename = showDelete = false; }
  var showConn = type === "connection";

  document.getElementById("db-ctx-new-query").style.display = showNewQuery ? "" : "none";
  document.getElementById("db-ctx-call").style.display = showCall ? "" : "none";
  document.getElementById("db-ctx-generate-ddl").style.display = showGenerateDdl ? "" : "none";
  ["catalog", "schema", "table", "view", "function", "procedure", "metric_view"].forEach(function(k) {
    document.getElementById("db-ctx-new-" + k).style.display = showCreate.indexOf(k) >= 0 ? "" : "none";
  });
  document.getElementById("db-ctx-create-sep").style.display = showCreate.length ? "" : "none";
  document.getElementById("db-ctx-rename").style.display = showRename ? "" : "none";
  document.getElementById("db-ctx-drop").style.display = showDelete ? "" : "none";
  document.getElementById("db-ctx-mod-sep").style.display = (showRename || showDelete || showConn) ? "" : "none";
  document.getElementById("db-ctx-test").style.display = showConn ? "" : "none";
  document.getElementById("db-ctx-properties").style.display = showConn ? "" : "none";
  document.getElementById("db-ctx-conn-rename").style.display = showConn ? "" : "none";
  document.getElementById("db-ctx-disconnect").style.display = showConn ? "" : "none";
  document.getElementById("db-ctx-conn-sep").style.display = showConn ? "" : "none";
  document.getElementById("db-ctx-conn-remove").style.display = showConn ? "" : "none";

  menu.style.left = Math.min(e.clientX, window.innerWidth  - 180) + "px";
  menu.style.top  = Math.min(e.clientY, window.innerHeight - 340) + "px";
  menu.classList.remove("hidden");
});

document.addEventListener("click", function(e) {
  if (!e.target.closest("#db-ctx-menu"))
    document.getElementById("db-ctx-menu").classList.add("hidden");
});

function dbCtxNewQuery() {
  if (!_dbCtx) return;
  document.getElementById("db-ctx-menu").classList.add("hidden");
  _dbActivateProfile(_dbCtx.profile);
  addQueryTab(_dbCtx.sql || "");
}

function _dbFetchSqlInto(url, errorPrefix) {
  var ctx = _dbCtx;
  document.getElementById("db-ctx-menu").classList.add("hidden");
  setStatus("Working...");
  fetch(url)
    .then(function(r) { return r.json(); })
    .then(function(data) {
      setStatus("");
      if (data.error) { appendMessage("error", errorPrefix + ": " + data.error); switchTabByName("messages-panel"); return; }
      _dbActivateProfile(ctx.profile);
      addQueryTab(data.sql, ctx.kind === "metric_view" ? { saveExt: ".yml", alwaysRunnable: true } : {});
    })
    .catch(function(err) {
      setStatus("");
      appendMessage("error", errorPrefix + ": " + err); switchTabByName("messages-panel");
    });
}

// Builds a SELECT/CALL statement with placeholder args from the function/procedure's
// real signature (DESCRIBE FUNCTION/PROCEDURE EXTENDED) rather than a blind "()".
function dbCtxCall() {
  if (!_dbCtx) return;
  var url = "/api/schema/call-template?profile=" + enc(_dbCtx.profile) +
            "&catalog=" + enc(_dbCtx.catalog) + "&schema=" + enc(_dbCtx.schema) +
            "&name=" + enc(_dbCtx.table) + "&object_type=" + enc(_dbCtx.kind);
  _dbFetchSqlInto(url, "Call failed");
}

// Fetches a CREATE OR REPLACE script that reproduces the object's real current
// definition (SHOW CREATE TABLE, or DESCRIBE FUNCTION/PROCEDURE EXTENDED), so it can
// be edited and re-run as a modification instead of guessing at the original DDL.
function dbCtxGenerateDDL() {
  if (!_dbCtx) return;
  var name = _dbCtx.table || _dbCtx.name.split(".").pop();
  var url = "/api/schema/ddl?profile=" + enc(_dbCtx.profile) +
            "&catalog=" + enc(_dbCtx.catalog) + "&schema=" + enc(_dbCtx.schema) +
            "&name=" + enc(name) + "&object_type=" + enc(_dbCtx.kind);
  _dbFetchSqlInto(url, "Generate script failed");
}

function _dbActivateProfile(profile) {
  if (!profile) return;
  _activeProfile = profile;
  document.querySelectorAll(".tree-connection .tree-row").forEach(r => r.classList.remove("tree-active"));
  var connRow = document.querySelector('.tree-row[data-type="connection"][data-profile="' + profile + '"]');
  if (connRow) connRow.classList.add("tree-active");
}

// "New Catalog/Schema/Table/View" opens a prefilled query tab — the user edits
// the name/definition and hits Run, rather than us guessing and executing DDL blind.
function dbCtxCreate(kind) {
  if (!_dbCtx) return;
  document.getElementById("db-ctx-menu").classList.add("hidden");
  _dbActivateProfile(_dbCtx.profile);
  var sql = "";
  if (kind === "catalog") {
    var kw = _dbDialect(_dbCtx.profile) === "postgres" ? "DATABASE" : "CATALOG";
    sql = "CREATE " + kw + " my_new_catalog;\n";
  } else if (kind === "schema") {
    sql = "CREATE SCHEMA `" + _dbCtx.catalog + "`.my_new_schema;\n";
  } else if (kind === "table") {
    sql = "CREATE TABLE `" + _dbCtx.catalog + "`.`" + _dbCtx.schema + "`.my_new_table AS\nSELECT 1;\n";
  } else if (kind === "view") {
    sql = "CREATE VIEW `" + _dbCtx.catalog + "`.`" + _dbCtx.schema + "`.my_new_view AS\nSELECT 1;\n";
  } else if (kind === "function") {
    sql = "CREATE FUNCTION `" + _dbCtx.catalog + "`.`" + _dbCtx.schema + "`.my_new_function(x INT)\n" +
          "RETURNS INT\n" +
          "RETURN x;\n";
  } else if (kind === "procedure") {
    sql = "CREATE PROCEDURE `" + _dbCtx.catalog + "`.`" + _dbCtx.schema + "`.my_new_procedure()\n" +
          "LANGUAGE SQL\n" +
          "SQL SECURITY INVOKER\n" +
          "BEGIN\n" +
          "  SELECT 1;\n" +
          "END;\n";
  } else if (kind === "metric_view") {
    sql = "CREATE OR REPLACE VIEW `" + _dbCtx.catalog + "`.`" + _dbCtx.schema + "`.my_new_metric_view\n" +
          "WITH METRICS\n" +
          "LANGUAGE YAML\n" +
          "AS $$\n" +
          "version: 1.1\n" +
          "source: " + _dbCtx.catalog + "." + _dbCtx.schema + ".my_source_table\n" +
          "dimensions:\n" +
          "  - name: Dimension\n" +
          "    expr: column_name\n" +
          "measures:\n" +
          "  - name: Measure\n" +
          "    expr: COUNT(1)\n" +
          "$$;\n";
  }
  var newTabId = addQueryTab(sql, kind === "metric_view" ? { saveExt: ".yml", alwaysRunnable: true } : {});
  // The object tree doesn't know a CREATE happened until we tell it — once this
  // tab's statement runs successfully, refresh the category it should appear
  // under (see runQuery()'s success handler).
  var refreshCtx = { profile: _dbCtx.profile };
  if (kind === "catalog") {
    refreshCtx.kind = "catalog";
  } else if (kind === "schema") {
    refreshCtx.kind = "schema"; refreshCtx.catalog = _dbCtx.catalog;
  } else {
    refreshCtx.kind = kind; refreshCtx.catalog = _dbCtx.catalog; refreshCtx.schema = _dbCtx.schema;
  }
  _dbPendingCreates[newTabId] = refreshCtx;
  appendMessage("info", "Edit the name/definition, then Run to create it.");
}

var _dbCtxInputMode = "object"; // "object" | "connection"

function dbCtxRenameStart() {
  if (!_dbCtx) return;
  var current = _dbCtx.kind === "catalog" ? _dbCtx.catalog
              : _dbCtx.kind === "schema" ? _dbCtx.schema
              : _dbCtx.table;
  var inp = document.getElementById("db-ctx-input");
  inp.placeholder = "new name";
  inp.value = current || "";
  _dbCtxInputMode = "object";
  document.getElementById("db-ctx-input-row").classList.remove("hidden");
  setTimeout(function() { inp.focus(); inp.select(); }, 0);
}

function dbCtxInputKey(e) {
  if (e.key === "Enter") dbCtxInputOk();
  if (e.key === "Escape") document.getElementById("db-ctx-input-row").classList.add("hidden");
}

function dbCtxInputOk() {
  var val = document.getElementById("db-ctx-input").value.trim();
  if (!val || !_dbCtx) return;
  document.getElementById("db-ctx-input-row").classList.add("hidden");
  document.getElementById("db-ctx-menu").classList.add("hidden");
  var ctx = _dbCtx;

  if (_dbCtxInputMode === "connection") {
    var oldProfile = ctx.profile;
    var form = new FormData();
    form.append("new_name", val);
    setStatus("Renaming connection...");
    fetch("/api/profiles/" + encodeURIComponent(oldProfile) + "/rename", { method: "POST", body: form })
      .then(r => r.json())
      .then(function(data) {
        setStatus("");
        if (data.error) { appendMessage("error", data.error); switchTabByName("messages-panel"); return; }
        var row = document.querySelector('.tree-row[data-type="connection"][data-profile="' + oldProfile + '"]');
        if (row) {
          row.dataset.profile = val;
          row.querySelector(".tree-label").textContent = val;
          var container = document.getElementById("conn-" + oldProfile);
          if (container) container.id = "conn-" + val;
        }
        if (_activeProfile === oldProfile) _activeProfile = val;
        _tabs.forEach(function(t) { if (t.profile === oldProfile) t.profile = val; });
        _renameProfileOption(oldProfile, val);
        _syncProfileSelect();
        appendMessage("ok", "Renamed connection to " + val);
      })
      .catch(function(err) {
        setStatus("");
        appendMessage("error", "Rename failed: " + err); switchTabByName("messages-panel");
      });
    return;
  }

  _dbExec(_dbRenameSQL(ctx, val), ctx.profile, function() {
    appendMessage("ok", "Renamed to " + val);
    _dbRefreshParent(ctx);
  });
}

function dbCtxTestConnection() {
  if (!_dbCtx) return;
  document.getElementById("db-ctx-menu").classList.add("hidden");
  var profile = _dbCtx.profile;
  appendMessage("info", "Testing " + profile + "...");
  setStatus("Testing connection...");
  fetch("/api/profiles/test", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ profile: profile }),
  })
    .then(r => r.json())
    .then(function(data) {
      setStatus("");
      if (data.ok) appendMessage("ok", "Connection OK: " + profile);
      else { appendMessage("error", "Connection failed: " + data.error); switchTabByName("messages-panel"); }
    })
    .catch(function(err) {
      setStatus("");
      appendMessage("error", "Test failed: " + err); switchTabByName("messages-panel");
    });
}

function dbCtxProperties() {
  if (!_dbCtx) return;
  document.getElementById("db-ctx-menu").classList.add("hidden");
  document.getElementById("modal-title").textContent = "Connection Properties";
  htmx.ajax("GET", "/api/profiles/" + encodeURIComponent(_dbCtx.profile) + "/edit", {
    target: "#modal-body", swap: "innerHTML"
  });
  document.getElementById("modal-overlay").classList.remove("hidden");
}

function dbCtxConnRenameStart() {
  if (!_dbCtx) return;
  var inp = document.getElementById("db-ctx-input");
  inp.placeholder = "new connection name";
  inp.value = _dbCtx.profile;
  _dbCtxInputMode = "connection";
  document.getElementById("db-ctx-input-row").classList.remove("hidden");
  setTimeout(function() { inp.focus(); inp.select(); }, 0);
}

function dbCtxDisconnect() {
  if (!_dbCtx) return;
  document.getElementById("db-ctx-menu").classList.add("hidden");
  var profile = _dbCtx.profile;
  setStatus("Disconnecting...");
  fetch("/api/profiles/" + encodeURIComponent(profile) + "/disconnect", { method: "POST" })
    .then(r => r.json())
    .then(function() {
      setStatus("");
      // Collapse without reopening — next expand reconnects fresh.
      var container = document.getElementById("conn-" + profile);
      if (container) {
        container.classList.add("hidden");
        container.innerHTML = "";
        delete container.dataset.loaded;
      }
      var row = document.querySelector('.tree-row[data-type="connection"][data-profile="' + profile + '"]');
      if (row) {
        row.classList.remove("tree-active");
        var icon = row.querySelector(".tree-icon");
        if (icon) icon.textContent = "▶";
      }
      appendMessage("info", "Disconnected " + profile);
    })
    .catch(function(err) {
      setStatus("");
      appendMessage("error", "Disconnect failed: " + err); switchTabByName("messages-panel");
    });
}

function dbCtxRemoveConnection() {
  if (!_dbCtx) return;
  document.getElementById("db-ctx-menu").classList.add("hidden");
  var profile = _dbCtx.profile;
  if (!confirm('Remove saved connection "' + profile + '"? This deletes it from your config.')) return;
  setStatus("Removing connection...");
  fetch("/api/profiles/" + encodeURIComponent(profile), { method: "DELETE" })
    .then(r => r.json())
    .then(function(data) {
      setStatus("");
      if (data.error) { appendMessage("error", data.error); switchTabByName("messages-panel"); return; }
      var row = document.querySelector('.tree-row[data-type="connection"][data-profile="' + profile + '"]');
      if (row) row.closest(".tree-item").remove();
      _removeProfileOption(profile);
      appendMessage("ok", "Removed connection " + profile);
    })
    .catch(function(err) {
      setStatus("");
      appendMessage("error", "Remove failed: " + err); switchTabByName("messages-panel");
    });
}

function dbCtxDrop() {
  if (!_dbCtx) return;
  document.getElementById("db-ctx-menu").classList.add("hidden");
  var ctx = _dbCtx;
  if (!confirm('Delete ' + ctx.kind + ' "' + ctx.name + '"? This cannot be undone.')) return;
  _dbExec(_dbDropSQL(ctx), ctx.profile, function() {
    appendMessage("ok", "Dropped " + ctx.kind + " " + ctx.name);
    _dbRefreshParent(ctx);
  });
}

function _dbRenameSQL(ctx, newName) {
  var kw = _dbDialect(ctx.profile) === "postgres" ? "DATABASE" : "CATALOG";
  if (ctx.kind === "catalog") return "ALTER " + kw + " `" + ctx.catalog + "` RENAME TO `" + newName + "`;";
  if (ctx.kind === "schema") return "ALTER SCHEMA `" + ctx.catalog + "`.`" + ctx.schema + "` RENAME TO `" + newName + "`;";
  if (ctx.kind === "table") return "ALTER TABLE `" + ctx.catalog + "`.`" + ctx.schema + "`.`" + ctx.table + "` RENAME TO `" + newName + "`;";
  if (ctx.kind === "view" || ctx.kind === "metric_view") return "ALTER VIEW `" + ctx.catalog + "`.`" + ctx.schema + "`.`" + ctx.table + "` RENAME TO `" + newName + "`;";
  return "";
}

function _dbDropSQL(ctx) {
  var kw = _dbDialect(ctx.profile) === "postgres" ? "DATABASE" : "CATALOG";
  if (ctx.kind === "catalog") return "DROP " + kw + " `" + ctx.catalog + "`;";
  if (ctx.kind === "schema") return "DROP SCHEMA `" + ctx.catalog + "`.`" + ctx.schema + "`;";
  if (ctx.kind === "table") return "DROP TABLE `" + ctx.catalog + "`.`" + ctx.schema + "`.`" + ctx.table + "`;";
  if (ctx.kind === "view" || ctx.kind === "metric_view") return "DROP VIEW `" + ctx.catalog + "`.`" + ctx.schema + "`.`" + ctx.table + "`;";
  if (ctx.kind === "function") return "DROP FUNCTION `" + ctx.catalog + "`.`" + ctx.schema + "`.`" + ctx.table + "`;";
  if (ctx.kind === "procedure") return "DROP PROCEDURE `" + ctx.catalog + "`.`" + ctx.schema + "`.`" + ctx.table + "`;";
  return "";
}

function _dbExec(sql, profile, onOk) {
  if (!sql || !profile) return;
  setStatus("Working...");
  var form = new FormData();
  form.append("sql", sql);
  form.append("profile", profile);
  fetch("/api/query/exec", { method: "POST", body: form })
    .then(r => r.json())
    .then(function(data) {
      setStatus("");
      if (data.error) { appendMessage("error", data.error); switchTabByName("messages-panel"); return; }
      onOk();
    })
    .catch(function(err) {
      setStatus("");
      appendMessage("error", "Request failed: " + err); switchTabByName("messages-panel");
    });
}

function _dbRefreshParent(ctx) {
  var containerId = "";
  if (ctx.kind === "catalog") containerId = "conn-" + ctx.profile;
  else if (ctx.kind === "schema") containerId = "cat-" + ctx.profile + "-" + ctx.catalog;
  else if (["table", "view", "function", "procedure", "metric_view"].indexOf(ctx.kind) >= 0) {
    containerId = "cat-" + ctx.profile + "-" + ctx.catalog + "-" + ctx.schema + "-" + ctx.kind;
  }
  _dbReloadContainer(containerId);
}

function _dbReloadContainer(containerId) {
  var container = document.getElementById(containerId);
  if (!container) return;
  delete container.dataset.loaded;
  if (!container.classList.contains("hidden")) {
    var row = container.previousElementSibling;
    container.classList.add("hidden");
    if (row) {
      var icon = row.querySelector(".tree-icon");
      if (icon) icon.textContent = "▶";
      toggleNode(row);
    }
  }
}

function _ctxParentDir() {
  if (!_ctxPath) return "";
  return _ctxIsFile ? _ctxPath.split("/").slice(0, -1).join("/") : _ctxPath;
}

function _ctxPost(url, params, onOk) {
  var form = new FormData();
  Object.keys(params).forEach(function(k) { form.append(k, params[k]); });
  fetch(url, { method: "POST", body: form })
    .then(function(r) { return r.json(); })
    .then(function(data) {
      if (data.error) { appendMessage("error", url.split("/").pop() + " failed: " + data.error); return; }
      onOk(data);
    });
}

function _ensureExpanded(dirPath) {
  if (!dirPath) return Promise.resolve(document.getElementById("file-tree"));
  var row = document.querySelector('.tree-row[data-path="' + dirPath + '"]');
  if (!row) return Promise.resolve(document.getElementById("file-tree"));
  var container = row.nextElementSibling;
  if (!container || !container.classList.contains("tree-children")) return Promise.resolve(document.getElementById("file-tree"));
  var icon = row.querySelector(".tree-icon");
  if (container.classList.contains("hidden")) {
    container.classList.remove("hidden");
    if (icon) icon.textContent = "▼";
  }
  if (container.dataset.loaded) return Promise.resolve(container);
  container.dataset.loaded = "1";
  return htmx.ajax("GET", "/api/files/list?path=" + encodeURIComponent(dirPath), { target: container, swap: "innerHTML" })
    .then(function() { return container; });
}

// Placeholder row with a live input, like Finder/Explorer/VSCode "New Folder":
// nothing is created on disk until Enter with a non-empty name; Escape/blur-empty just removes the row.
function _inlineCreate(kind, parentDir) {
  _ensureExpanded(parentDir).then(function(container) {
    var old = container.querySelector(".tree-item-new");
    if (old) old.remove();
    var isFolder = kind === "folder";
    var item = document.createElement("div");
    item.className = "tree-item tree-item-new";
    item.innerHTML =
      '<div class="tree-row tree-leaf">' +
        (isFolder ? '<span class="tree-icon">▶</span>' : '<span style="width:10px;flex-shrink:0"></span>') +
        '<span class="tree-icon-type ' + (isFolder ? "ti-folder" : "ti-sql-file") + '"></span>' +
        '<input class="tree-rename-input" type="text" placeholder="' + (isFolder ? "folder name" : "query.sql") + '" />' +
      "</div>";
    container.insertBefore(item, container.firstChild);
    var input = item.querySelector("input");
    var settled = false;
    input.addEventListener("click", function(e) { e.stopPropagation(); });
    input.addEventListener("keydown", function(e) {
      if (e.key === "Enter") { e.preventDefault(); commit(); }
      if (e.key === "Escape") { e.preventDefault(); settled = true; item.remove(); }
    });
    input.addEventListener("blur", function() { commit(); });
    function commit() {
      if (settled) return;
      var name = input.value.trim();
      if (!name) { settled = true; item.remove(); return; }
      settled = true;
      var url = isFolder ? "/api/files/mkdir" : "/api/files/create";
      _ctxPost(url, { dir: parentDir, name: name }, function() {
        appendMessage("ok", (isFolder ? "Created folder " : "Created ") + name);
        _reloadFileNode(parentDir);
      });
    }
    setTimeout(function() { input.focus(); }, 0);
  });
}

function ctxNewFolder() { _ctxHide(); _inlineCreate("folder", _ctxParentDir()); }
function ctxNewFile() { _ctxHide(); _inlineCreate("file", _ctxParentDir()); }

// Inline rename, matching the "New Folder"/"New File" inline-input UX: the
// row's label becomes a live input in place, instead of a separate popup.
function ctxRename() {
  var path = _ctxPath;
  var current = path.split("/").pop();
  _ctxHide();
  var row = document.querySelector('.tree-row[data-path="' + path + '"]');
  var label = row && row.querySelector(".tree-label");
  if (!row || !label) return;
  var deleteBtn = row.querySelector(".file-delete-btn");
  if (deleteBtn) deleteBtn.style.display = "none";

  var input = document.createElement("input");
  input.className = "tree-rename-input";
  input.type = "text";
  input.value = current;
  label.replaceWith(input);

  var settled = false;
  input.addEventListener("click", function(e) { e.stopPropagation(); });
  input.addEventListener("keydown", function(e) {
    if (e.key === "Enter") { e.preventDefault(); commit(); }
    if (e.key === "Escape") { e.preventDefault(); settled = true; cancel(); }
  });
  input.addEventListener("blur", function() { commit(); });

  function cancel() {
    input.replaceWith(label);
    if (deleteBtn) deleteBtn.style.display = "";
  }
  function commit() {
    if (settled) return;
    settled = true;
    var newName = input.value.trim();
    if (!newName || newName === current) { cancel(); return; }
    _ctxPost("/api/files/rename", { path: path, new_name: newName }, function() {
      appendMessage("ok", current + " → " + newName);
      _reloadFileNode(path.split("/").slice(0, -1).join("/"));
    });
  }

  setTimeout(function() { input.focus(); input.select(); }, 0);
}

function ctxDuplicate() {
  _ctxHide();
  _ctxPost("/api/files/duplicate", { path: _ctxPath }, function(data) {
    appendMessage("ok", "Duplicated as " + data.path.split("/").pop());
    _reloadFileNode(_ctxPath.split("/").slice(0, -1).join("/"));
  });
}

function ctxCopyPath() {
  _ctxHide();
  navigator.clipboard.writeText(_ctxPath);
  appendMessage("info", "Copied: " + _ctxPath);
}

function ctxDeleteFile() {
  _ctxHide();
  if (!confirm("Delete " + _ctxPath.split("/").pop() + "?")) return;
  _ctxPost("/api/files/delete", { path: _ctxPath }, function() {
    var el = document.querySelector('[data-path="' + _ctxPath + '"]');
    if (el) el.closest(".tree-item").remove();
    appendMessage("ok", "Deleted " + _ctxPath.split("/").pop());
  });
}

function ctxRemoveDir() {
  var name = _ctxPath.split("/").pop();
  _ctxHide();
  if (!confirm("Remove folder '" + name + "' and all contents?")) return;
  _ctxPost("/api/files/rmdir", { path: _ctxPath }, function() {
    var el = document.querySelector('[data-path="' + _ctxPath + '"]');
    if (el) el.closest(".tree-item").remove();
    appendMessage("ok", "Removed folder " + name);
  });
}

function _reloadFileNode(dirPath) {
  if (!dirPath) {
    htmx.ajax("GET", "/api/files/list", { target: "#file-tree", swap: "innerHTML" });
    return;
  }
  var row = document.querySelector('[data-path="' + dirPath + '"]');
  var children = row ? row.nextElementSibling : null;
  if (children && children.classList.contains("tree-children") && !children.classList.contains("hidden")) {
    children.dataset.loaded = "";
    htmx.ajax("GET", "/api/files/list?path=" + encodeURIComponent(dirPath), { target: children, swap: "innerHTML" });
  } else {
    htmx.ajax("GET", "/api/files/list", { target: "#file-tree", swap: "innerHTML" });
  }
}
// ─────────────────────────────────────────────────────────────────────────────

function toggleFileNode(row) {
  const container = row.nextElementSibling;
  if (!container || !container.classList.contains("tree-children")) return;
  const icon = row.querySelector(".tree-icon");
  const isOpen = !container.classList.contains("hidden");
  if (isOpen) {
    container.classList.add("hidden");
    if (icon) icon.textContent = "▶";
    return;
  }
  container.classList.remove("hidden");
  if (icon) icon.textContent = "▼";
  if (container.dataset.loaded) return;
  container.dataset.loaded = "1";
  const path = row.dataset.path;
  htmx.ajax("GET", "/api/files/list?path=" + encodeURIComponent(path), {
    target: container, swap: "innerHTML"
  });
}

function deleteLocalFile(path, btn) {
  if (!confirm("Delete " + path.split("/").pop() + "?")) return;
  const form = new FormData();
  form.append("path", path);
  fetch("/api/files/delete", { method: "POST", body: form })
    .then(r => r.json())
    .then(data => {
      if (data.error) { appendMessage("error", "Delete failed: " + data.error); return; }
      btn.closest(".tree-item")?.remove();
      appendMessage("ok", "Deleted " + path.split("/").pop());
    });
}

function openLocalFile(path, ext) {
  fetch("/api/files/read?path=" + encodeURIComponent(path))
    .then(r => r.json())
    .then(data => {
      if (data.error) { appendMessage("error", "File error: " + data.error); return; }
      openFileInTab(data.path, data.name, data.content, ext);
    });
}

// A tab with no `ext` (every ad hoc New Query/DDL-template tab) is treated as
// SQL, same as before this function existed — only file-backed tabs opened
// through here carry an ext, and only ".sql" ones are runnable.
function _isSqlTab(tab) {
  if (!tab) return true;
  // A metric-view DDL tab is genuinely-runnable SQL even after being saved
  // with a .yml filename (so it sits alongside other metric-view YAML in the
  // repo) — the on-disk extension there is cosmetic, not a content-type signal.
  if (tab.alwaysRunnable) return true;
  return !tab.ext || tab.ext === ".sql";
}

function openFileInTab(path, name, content, ext) {
  const cur = _tabs.find(t => t.id === _activeTab);
  if (cur && window.getEditorSQL) cur.sql = window.getEditorSQL();

  let tab = _tabs.find(t => t.filePath === path);
  if (!tab) {
    const id = _nextTabId++;
    tab = { id, name, sql: content, filePath: path, ext, lastSavedSql: content };
    _tabs.push(tab);
  } else {
    tab.sql = content;
    tab.ext = ext;
    tab.lastSavedSql = content;
  }
  _activeTab = tab.id;
  if (window.setEditorSQL) window.setEditorSQL(tab.sql);
  renderQueryTabs();
  appendMessage("info", "Opened " + name);
}

// A tab with no filePath is "dirty" whenever it has any content worth
// keeping; a file-backed tab is dirty only once its content diverges from
// what's actually on disk (lastSavedSql, set on open/save).
function _isTabDirty(tab) {
  if (!tab) return false;
  const content = tab.id === _activeTab && window.getEditorSQL ? window.getEditorSQL() : tab.sql;
  if (tab.filePath) return content !== (tab.lastSavedSql ?? "");
  return content.trim() !== "";
}

function saveActiveTabFile() {
  const cur = _tabs.find(t => t.id === _activeTab);
  if (!cur) return;
  if (window.getEditorSQL) cur.sql = window.getEditorSQL();
  if (!cur.filePath) { saveActiveTabFileAs(); return; }
  _writeTabToFile(cur, cur.filePath);
}

// Ad hoc tabs (New Query, DDL templates, "New Metric View…", etc.) have no
// backing file yet — this is their "Save As", browsing to a destination
// folder instead of typing a raw path blind.
function saveActiveTabFileAs() {
  const cur = _tabs.find(t => t.id === _activeTab);
  if (!cur) return;
  if (window.getEditorSQL) cur.sql = window.getEditorSQL();
  openSaveAsDialog(cur, () => {});
}

// A metric-view DDL tab's content is CREATE OR REPLACE VIEW ... WITH METRICS
// LANGUAGE YAML AS $$ <yaml> $$ — this pulls out just the <yaml> part, for
// saving to a .yml file without the SQL wrapper. Returns null if the tab's
// content has no $$-delimited block (a plain SQL tab, most tabs).
function _extractMetricViewYaml(sql) {
  const m = sql.match(/\$\$([\s\S]*?)\$\$/);
  return m ? m[1].replace(/^\n/, "").replace(/\n$/, "") : null;
}

// `tab` may not be the active tab (the close-tab Save flow can save a
// background tab), so this always writes tab.sql — callers are responsible
// for syncing the live editor into tab.sql first if `tab` is active.
function _writeTabToFile(tab, path, onOk) {
  const content = tab.sql; // full tab content — always what dirty-tracking compares against
  const body = tab.saveYamlOnly ? (_extractMetricViewYaml(content) ?? content) : content;
  const form = new FormData();
  form.append("path", path);
  form.append("content", body);
  fetch("/api/files/write", { method: "POST", body: form })
    .then(r => r.json())
    .then(data => {
      if (data.error) { appendMessage("error", "Save failed: " + data.error); return; }
      tab.filePath = data.path || path;
      tab.name = tab.filePath.split("/").pop();
      const m = tab.name.match(/\.[^./]+$/);
      tab.ext = m ? m[0] : ".sql";
      tab.lastSavedSql = content;
      renderQueryTabs();
      appendMessage("ok", "Saved " + tab.filePath);
      // Keep the Files sidebar tree in sync — a Save/Save As can create a
      // file that didn't exist there before.
      _reloadFileNode(tab.filePath.split("/").slice(0, -1).join("/"));
      if (onOk) onOk();
    });
}

// ── Save As dialog (folder browser) ─────────────────────────────────────────
let _saveAsState = null; // { tab, onSaved, currentDir }

function openSaveAsDialog(tab, onSaved) {
  _saveAsState = { tab, onSaved, currentDir: null };
  document.getElementById("modal-title").textContent = "Save As";
  document.querySelector(".modal").classList.add("modal-wide");
  const suggested = /\.[^./]+$/.test(tab.name) ? tab.name : tab.name + (tab.saveExt || ".sql");
  const hasYamlBody = _extractMetricViewYaml(tab.sql) !== null;
  document.getElementById("modal-body").innerHTML = `
    <div class="save-as-wrap">
      <div class="save-as-breadcrumb" id="save-as-breadcrumb"></div>
      <div class="save-as-dirs" id="save-as-dirs"></div>
      <button class="ctx-item save-as-new-folder" onclick="_saveAsNewFolder()">New Folder…</button>
      ${hasYamlBody ? `
      <label class="save-as-yaml-only-row">
        <input type="checkbox" id="save-as-yaml-only" ${tab.saveYamlOnly !== false ? "checked" : ""} />
        Save YAML definition only (strip the CREATE VIEW wrapper)
      </label>` : ""}
      <div class="save-as-filename-row">
        <input id="save-as-filename" class="ctx-input" type="text" value="${_escapeHtml(suggested)}" />
        <button class="btn-primary" onclick="_saveAsConfirm()">Save</button>
      </div>
    </div>`;
  document.getElementById("modal-overlay").classList.remove("hidden");
  _saveAsNavigate("");
}

function _saveAsNavigate(path) {
  fetch("/api/files/browse?path=" + encodeURIComponent(path))
    .then(r => r.json())
    .then(data => {
      if (!_saveAsState) return;
      if (data.error) { appendMessage("error", "Browse failed: " + data.error); return; }
      _saveAsState.currentDir = data.current;
      const bc = document.getElementById("save-as-breadcrumb");
      bc.innerHTML =
        (data.parent ? `<button class="ctx-item save-as-up" onclick="_saveAsNavigate('${data.parent.replace(/'/g,"\\'")}')">.. (up)</button>` : "") +
        `<span class="dim save-as-current" title="${_escapeHtml(data.current)}">${_escapeHtml(data.current)}</span>`;
      const list = document.getElementById("save-as-dirs");
      list.innerHTML = data.dirs.length
        ? data.dirs.map(d => {
            const full = data.current + "/" + d;
            return `<div class="save-as-dir-row" onclick="_saveAsNavigate('${full.replace(/'/g,"\\'")}')">${_escapeHtml(d)}</div>`;
          }).join("")
        : `<p class="dim pad">No subfolders.</p>`;
    })
    .catch(err => appendMessage("error", "Browse failed: " + err));
}

function _saveAsNewFolder() {
  if (!_saveAsState) return;
  const name = prompt("New folder name:");
  if (!name || !name.trim()) return;
  const form = new FormData();
  form.append("dir", _saveAsState.currentDir);
  form.append("name", name.trim());
  fetch("/api/files/mkdir", { method: "POST", body: form })
    .then(r => r.json())
    .then(data => {
      if (data.error) { appendMessage("error", "Create folder failed: " + data.error); return; }
      _reloadFileNode(_saveAsState.currentDir); // keep Files sidebar in sync too
      _saveAsNavigate(data.path);
    });
}

function _saveAsConfirm() {
  if (!_saveAsState) return;
  const filename = document.getElementById("save-as-filename").value.trim();
  if (!filename) return;
  const { tab, onSaved, currentDir } = _saveAsState;
  const yamlOnlyEl = document.getElementById("save-as-yaml-only");
  if (yamlOnlyEl) tab.saveYamlOnly = yamlOnlyEl.checked;
  _writeTabToFile(tab, currentDir + "/" + filename, () => {
    closeModal();
    _saveAsState = null;
    onSaved();
  });
}

// ── Keyboard shortcuts ───────────────────────────────────────────────────────
// Ctrl/Cmd+T and +W are reserved by browsers (new/close browser tab) and
// can't be intercepted by page JS, so tab management here uses +Alt instead.
document.addEventListener("keydown", function(e) {
  const mod = e.ctrlKey || e.metaKey;
  if (!mod) return;
  const modalOpen = !document.getElementById("modal-overlay").classList.contains("hidden");
  const key = e.key.toLowerCase();

  if (key === "s") {
    if (!modalOpen) {
      e.preventDefault();
      saveActiveTabFile();
    }
    return;
  }
  if (modalOpen) return;

  if (key === "enter" && !e.altKey) {
    e.preventDefault();
    runQuery();
  } else if (key === "t" && e.altKey) {
    e.preventDefault();
    addQueryTab();
  } else if (key === "w" && e.altKey) {
    e.preventDefault();
    closeQueryTab(e, _activeTab);
  } else if (key === "`") {
    e.preventDefault();
    toggleAIPanel();
  } else if (key === "l" && e.shiftKey) {
    e.preventDefault();
    toggleTheme();
  }
});

function refreshExplorer() {
  const btn = document.getElementById('refresh-btn');
  btn.style.opacity = '0.4';
  btn.style.pointerEvents = 'none';
  // Clear server-side connector cache
  fetch('/api/schema/cache', { method: 'DELETE' }).finally(() => {
    // Collapse and reset all tree children
    document.querySelectorAll('.tree-children').forEach(el => {
      el.classList.add('hidden');
      delete el.dataset.loaded;
      el.innerHTML = '';
    });
    document.querySelectorAll('.tree-icon').forEach(el => {
      el.textContent = '▶';
    });
    btn.style.opacity = '';
    btn.style.pointerEvents = '';
  });
}

function openAddProfile() {
  document.getElementById("modal-title").textContent = "Add Connection";
  htmx.ajax("GET", "/api/profiles/form", {
    target: "#modal-body", swap: "innerHTML"
  });
  document.getElementById("modal-overlay").classList.remove("hidden");
}

// Prefill host/token from a ~/.databrickscfg profile (Databricks CLI's own
// config file) so users who already ran `databricks configure --token`
// don't have to retype credentials.
function importDatabricksCfgProfile(select) {
  var opt = select.selectedOptions[0];
  if (!opt || !opt.value) return;
  var form = select.closest("form");
  if (!form) return;
  var hostInput = form.querySelector('[name="host"]');
  var tokenInput = form.querySelector('[name="token"]');
  if (hostInput) hostInput.value = opt.dataset.host || "";
  if (tokenInput) tokenInput.value = opt.dataset.token || "";
}

function closeModal() {
  document.getElementById("modal-overlay").classList.add("hidden");
  document.querySelector(".modal").classList.remove("modal-wide");
}

function reloadExplorer(newProfile, profileType, readOnly) {
  // Append new connection node without full reload
  const explorer = document.getElementById("object-explorer");
  const noProfiles = explorer.querySelector("p.dim");
  if (noProfiles) noProfiles.remove();

  const div = document.createElement("div");
  div.className = "tree-item tree-connection";
  div.innerHTML = `
    <div class="tree-row" onclick="toggleNode(this)"
         data-type="connection" data-profile="${newProfile}"
         data-profile-type="${profileType || 'databricks'}"
         data-read-only="${readOnly ? 'true' : 'false'}">
      <span class="tree-icon">▶</span>
      <span class="tree-icon-type ti-connection"></span>
      <span class="tree-label">${newProfile}</span>
      ${readOnly ? '<span class="badge-readonly" title="Read-only connection">RO</span>' : ''}
    </div>
    <div class="tree-children hidden" id="conn-${newProfile}"></div>
  `;
  explorer.appendChild(div);
  _addProfileOption(newProfile);
}

// Keep the toolbar's per-tab connection dropdown in sync with the DB tree
// as connections are added/renamed/removed, without a full page reload.
function _addProfileOption(name) {
  const sel = document.getElementById("query-profile-select");
  if (!sel || sel.querySelector('option[value="' + CSS.escape(name) + '"]')) return;
  const noneOpt = sel.querySelector('option[value=""]');
  if (noneOpt) noneOpt.remove();
  const opt = document.createElement("option");
  opt.value = name;
  opt.textContent = name;
  sel.appendChild(opt);
  _syncConnDropdownLabel();
}

function _renameProfileOption(oldName, newName) {
  const sel = document.getElementById("query-profile-select");
  if (!sel) return;
  const opt = sel.querySelector('option[value="' + CSS.escape(oldName) + '"]');
  if (opt) { opt.value = newName; opt.textContent = newName; }
  _syncConnDropdownLabel();
}

function _removeProfileOption(name) {
  const sel = document.getElementById("query-profile-select");
  if (!sel) return;
  const opt = sel.querySelector('option[value="' + CSS.escape(name) + '"]');
  if (opt) opt.remove();
  _syncConnDropdownLabel();
}

// After add/edit of a connection: update its tree row in place, or append if new.
function onProfileSaved(name) {
  fetch("/api/profiles/" + encodeURIComponent(name))
    .then(r => r.json())
    .then(function(data) {
      if (data.error) return;
      var row = document.querySelector('.tree-row[data-type="connection"][data-profile="' + name + '"]');
      if (!row) { reloadExplorer(name, data.type, data.read_only); return; }
      row.dataset.profileType = data.type;
      row.dataset.readOnly = data.read_only ? "true" : "false";
      var badge = row.querySelector(".badge-readonly");
      if (data.read_only && !badge) {
        badge = document.createElement("span");
        badge.className = "badge-readonly";
        badge.title = "Read-only connection";
        badge.textContent = "RO";
        row.querySelector(".tree-label").insertAdjacentElement("afterend", badge);
      } else if (!data.read_only && badge) {
        badge.remove();
      }
    });
}

// ── Panel resize ─────────────────────────────────────────────────────────────
(function() {
  const root = document.documentElement;
  let sidebarWidth = 240;
  let editorHeight = 320;
  let aiWidth = 320;

  const rx = document.getElementById('resizer-x');
  if (rx) {
    rx.addEventListener('mousedown', e => {
      e.preventDefault();
      const startX = e.clientX, startW = sidebarWidth;
      rx.classList.add('resizing');
      document.body.style.cursor = 'col-resize';
      document.body.style.userSelect = 'none';
      function onMove(e) {
        sidebarWidth = Math.max(140, Math.min(window.innerWidth - 140, startW + e.clientX - startX));
        root.style.setProperty('--sidebar-width', sidebarWidth + 'px');
      }
      function onUp() {
        rx.classList.remove('resizing');
        document.body.style.cursor = '';
        document.body.style.userSelect = '';
        document.removeEventListener('mousemove', onMove);
        document.removeEventListener('mouseup', onUp);
      }
      document.addEventListener('mousemove', onMove);
      document.addEventListener('mouseup', onUp);
    });
  }

  const ry = document.getElementById('resizer-y');
  if (ry) {
    ry.addEventListener('mousedown', e => {
      e.preventDefault();
      const startY = e.clientY, startH = editorHeight;
      ry.classList.add('resizing');
      document.body.style.cursor = 'row-resize';
      document.body.style.userSelect = 'none';
      function onMove(e) {
        editorHeight = Math.max(80, Math.min(window.innerHeight - 120, startH + e.clientY - startY));
        root.style.setProperty('--editor-height', editorHeight + 'px');
      }
      function onUp() {
        ry.classList.remove('resizing');
        document.body.style.cursor = '';
        document.body.style.userSelect = '';
        document.removeEventListener('mousemove', onMove);
        document.removeEventListener('mouseup', onUp);
      }
      document.addEventListener('mousemove', onMove);
      document.addEventListener('mouseup', onUp);
    });
  }

  const rxAi = document.getElementById('resizer-x-ai');
  if (rxAi) {
    rxAi.addEventListener('mousedown', e => {
      e.preventDefault();
      const startX = e.clientX, startW = aiWidth;
      rxAi.classList.add('resizing');
      document.body.style.cursor = 'col-resize';
      document.body.style.userSelect = 'none';
      function onMove(e) {
        aiWidth = Math.max(240, Math.min(640, startW - (e.clientX - startX)));
        root.style.setProperty('--ai-width', aiWidth + 'px');
      }
      function onUp() {
        rxAi.classList.remove('resizing');
        document.body.style.cursor = '';
        document.body.style.userSelect = '';
        document.removeEventListener('mousemove', onMove);
        document.removeEventListener('mouseup', onUp);
        fitTerminal();
      }
      document.addEventListener('mousemove', onMove);
      document.addEventListener('mouseup', onUp);
    });
  }
})();

// Day/night mode
(function() {
  const saved = localStorage.getItem("dbst-theme");
  if (saved === "light") applyLight();
})();

function applyLight() {
  document.documentElement.classList.add("light");
  const btn = document.querySelector(".theme-toggle");
  if (btn) btn.textContent = "☀️";
  if (window.setEditorTheme) window.setEditorTheme(false);
  if (_term) _term.options.theme = { background: "#f5f5f7", foreground: "#1c1c28" };
}

function applyDark() {
  document.documentElement.classList.remove("light");
  const btn = document.querySelector(".theme-toggle");
  if (btn) btn.textContent = "🌙";
  if (window.setEditorTheme) window.setEditorTheme(true);
  if (_term) _term.options.theme = { background: "#1e1e2e", foreground: "#cdd6f4" };
}

function toggleTheme() {
  const isLight = document.documentElement.classList.contains("light");
  if (isLight) {
    applyDark();
    localStorage.setItem("dbst-theme", "dark");
  } else {
    applyLight();
    localStorage.setItem("dbst-theme", "light");
  }
}
</script>
{% endblock %}