{% extends "explorer/base.html" %}

{% block content %}
<ul class="nav nav-tabs mb-3" id="explorer-tabs" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="discovery-tab" data-bs-toggle="tab" data-bs-target="#discovery-pane"
            type="button" role="tab"><i class="bi bi-search"></i> Discovery</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="api-tab" data-bs-toggle="tab" data-bs-target="#api-pane"
            type="button" role="tab"><i class="bi bi-braces-asterisk"></i> API Query</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="terminal-tab" data-bs-toggle="tab" data-bs-target="#terminal-pane"
            type="button" role="tab"><i class="bi bi-terminal"></i> Terminal</button>
  </li>
</ul>

<div class="tab-content">
  <!-- ---------------------------------------------------------------- -->
  <!-- Discovery -->
  <!-- ---------------------------------------------------------------- -->
  <div class="tab-pane fade show active" id="discovery-pane" role="tabpanel">
    <div class="row g-3">
      <div class="col-12 col-lg-4">
        <div class="btn-group btn-group-sm w-100 mb-2 dataset-sort" role="group" aria-label="Sort datasets">
          <button type="button" class="btn btn-outline-secondary active" data-sort-key="name" data-sort-dir="asc">
            Name <i class="bi bi-caret-up-fill sort-caret"></i>
          </button>
          <button type="button" class="btn btn-outline-secondary" data-sort-key="rows" data-sort-dir="desc">
            Rows <i class="bi bi-caret-down-fill sort-caret"></i>
          </button>
          <button type="button" class="btn btn-outline-secondary" data-sort-key="cols" data-sort-dir="desc">
            Cols <i class="bi bi-caret-down-fill sort-caret"></i>
          </button>
        </div>
        <div class="list-group dataset-list">
          {% for d in datasets %}
          <a class="list-group-item list-group-item-action{% if loop.first %} active{% endif %}"
             href="#" role="button"
             data-name="{{ d.name }}" data-rows="{{ d.rows }}" data-cols="{{ d.columns }}"
             hx-get="{{ explorer_base }}/datasets/{{ d.name }}"
             hx-target="#dataset-detail"
             hx-swap="innerHTML"
             {% if loop.first %}hx-trigger="load, click"{% else %}hx-trigger="click"{% endif %}
             onclick="document.querySelectorAll('.dataset-list .list-group-item').forEach(e=>e.classList.remove('active'));this.classList.add('active');">
            <div class="d-flex justify-content-between align-items-center">
              <strong>{{ d.name }}</strong>
              <span class="badge text-bg-secondary">{{ d.rows }} rows</span>
            </div>
            <small class="text-secondary">{{ d.kind }} · {{ d.columns }} cols</small>
          </a>
          {% endfor %}
        </div>
      </div>
      <div class="col-12 col-lg-8">
        <div id="dataset-detail" class="text-secondary">
          <div class="d-flex align-items-center gap-2 p-4">
            <span class="spinner-border spinner-border-sm"></span> Loading dataset…
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- ---------------------------------------------------------------- -->
  <!-- API Query (structured JSON + raw SQL against the live API) -->
  <!-- ---------------------------------------------------------------- -->
  <div class="tab-pane fade" id="api-pane" role="tabpanel">
    <div class="card">
      <div class="card-header d-flex align-items-center gap-2 flex-wrap">
        <span><i class="bi bi-braces-asterisk"></i> Query the HTTP API</span>
        <div class="btn-group btn-group-sm ms-md-3" role="group" aria-label="Query mode">
          <input type="radio" class="btn-check" name="api-mode" id="api-mode-json" autocomplete="off" checked>
          <label class="btn btn-outline-secondary" for="api-mode-json"><i class="bi bi-braces"></i> Structured JSON</label>
          <input type="radio" class="btn-check" name="api-mode" id="api-mode-sql" autocomplete="off">
          <label class="btn btn-outline-secondary" for="api-mode-sql"><i class="bi bi-code-square"></i> Raw SQL</label>
        </div>
        <div class="btn-group btn-group-sm" role="group" aria-label="Response format">
          <input type="radio" class="btn-check" name="api-format" id="api-format-json" autocomplete="off" checked>
          <label class="btn btn-outline-secondary" for="api-format-json" title="JSON response (human-readable)">JSON</label>
          <input type="radio" class="btn-check" name="api-format" id="api-format-arrow" autocomplete="off">
          <label class="btn btn-outline-secondary" for="api-format-arrow"
                 title="Arrow IPC response — binary columnar, skips server-side JSON encoding">
            <i class="bi bi-lightning-charge"></i> Arrow
          </label>
        </div>
        <button id="api-headers-toggle" class="btn btn-sm btn-outline-secondary" type="button"
                data-bs-toggle="collapse" data-bs-target="#api-headers-wrap"
                aria-expanded="false" aria-controls="api-headers-wrap"
                title="Add custom request headers">
          <i class="bi bi-list-ul"></i> Headers
        </button>
        <input type="checkbox" class="btn-check" id="api-compress-off" autocomplete="off">
        <label class="btn btn-sm btn-outline-secondary" for="api-compress-off"
               title="Skip server-side HTTP compression (gzip/brotli) for JSON responses. Browsers can't set Accept-Encoding from a page, so this sends ?compress=false instead. Arrow already bypasses compression.">
          <i class="bi bi-file-zip"></i> No compression
        </label>
        <span id="api-status" class="badge text-bg-secondary ms-auto">idle</span>
      </div>
      <div class="card-body">
        <!-- Custom request headers (shared across both modes) -->
        <div id="api-headers-wrap" class="collapse mb-2">
          <label for="api-headers" class="form-label small mb-1">Request headers — one <code>Name: value</code> per line</label>
          <textarea id="api-headers" class="form-control form-control-sm mono" rows="3" spellcheck="false"
                    placeholder="Authorization: Bearer &lt;token&gt;&#10;X-Api-Key: value&#10;X-Custom-Header: value"></textarea>
          <div class="form-text">
            Sent with every request. Note: browsers reserve some headers and silently
            ignore attempts to set them from a page — including
            <code>Accept-Encoding</code> (compression is always
            <code>gzip, deflate, br, zstd</code>), <code>Host</code>,
            <code>Connection</code> and <code>Content-Length</code>. Use <code>curl</code>
            to control those. The <code>Accept</code> header is set automatically from the
            response-format toggle.
          </div>
        </div>
        <!-- Structured JSON mode -->
        <div id="api-json-mode">
          <div class="row g-2 mb-2">
            <div class="col-12 col-md-4">
              <select id="api-dataset" class="form-select form-select-sm" aria-label="Dataset"></select>
            </div>
            <div class="col-12 col-md-8 d-flex gap-2 flex-wrap">
              <button id="api-json-prettify" class="btn btn-sm btn-outline-secondary" type="button"
                      title="Validate &amp; pretty-print the request body">
                <i class="bi bi-magic"></i> Check / prettify JSON
              </button>
              <button id="api-json-sample" class="btn btn-sm btn-outline-secondary" type="button">sample body</button>
              <button id="api-json-run" class="btn btn-sm btn-success ms-auto" type="button">
                <i class="bi bi-play-fill"></i> Run
              </button>
            </div>
          </div>
          <textarea id="api-json-body" class="form-control mono" rows="9" spellcheck="false"
                    placeholder='{ "page_size": 100 }'></textarea>
          <div class="form-text">
            POSTed to <code id="api-json-url">{{ api_base }}/datasets/&lt;name&gt;/query</code>.
            Body is a <code>QueryRequest</code> (columns, predicates, group_by, order_by, page, page_size…).
          </div>
        </div>

        <!-- Raw SQL mode -->
        <div id="api-sql-mode" class="d-none">
          <div class="row g-2 mb-2">
            <div class="col-12 d-flex gap-2 flex-wrap">
              <button id="api-sql-check" class="btn btn-sm btn-outline-secondary" type="button"
                      title="Lightweight read-only SQL syntax check">
                <i class="bi bi-check2-circle"></i> Check SQL
              </button>
              <button id="api-sql-tojson" class="btn btn-sm btn-outline-secondary" type="button"
                      title="Translate this SQL into a structured JSON query — handy when the raw-SQL endpoint is disabled">
                <i class="bi bi-arrow-left-right"></i> To JSON query
              </button>
              <div class="input-group input-group-sm" style="max-width: 11rem;">
                <span class="input-group-text">max rows</span>
                <input id="api-sql-maxrows" class="form-control" type="number" min="1" value="1000">
              </div>
              <button id="api-sql-run" class="btn btn-sm btn-success ms-auto" type="button">
                <i class="bi bi-play-fill"></i> Run
              </button>
            </div>
          </div>
          <textarea id="api-sql-body" class="form-control mono" rows="9" spellcheck="false"
                    placeholder="SELECT * FROM dataset LIMIT 100"></textarea>
          <div class="form-text">
            POSTed to <code>{{ api_base }}/sql</code>. Read-only single-dataset
            <code>SELECT</code>/<code>WITH</code>, capped server-side.
          </div>
          <div id="api-sql-disabled" class="alert alert-warning mt-2 mb-0 d-none" role="alert">
            The raw-SQL endpoint is disabled on this server (<code>[sql].enabled = false</code>).
            You can still check syntax, but queries will return <code>404</code>. Use
            <strong>To JSON query</strong> to convert simple SQL into a structured
            request that runs without the raw-SQL endpoint.
          </div>
        </div>

        <div id="api-check" class="alert mt-3 d-none mono" role="status"></div>
        <div id="api-error" class="alert alert-danger mt-3 d-none mono" role="alert"></div>
        <div id="api-timing" class="d-flex align-items-center gap-3 mt-3 small text-secondary d-none flex-wrap" role="status"></div>
        <div id="api-export" class="d-flex align-items-center gap-2 mt-3 d-none flex-wrap">
          <span class="text-secondary small">Export results:</span>
          <button id="api-export-csv" class="btn btn-sm btn-outline-secondary" type="button">
            <i class="bi bi-filetype-csv"></i> CSV
          </button>
          <button id="api-export-json" class="btn btn-sm btn-outline-secondary" type="button">
            <i class="bi bi-filetype-json"></i> JSON
          </button>
          <button id="api-export-parquet" class="btn btn-sm btn-outline-secondary" type="button">
            <i class="bi bi-file-earmark-binary"></i> Parquet
          </button>
        </div>
        <div id="api-results" class="mt-3 table-responsive"></div>
      </div>
    </div>
  </div>

  <!-- ---------------------------------------------------------------- -->
  <!-- Terminal (full DuckDB-WASM shell) -->
  <!-- ---------------------------------------------------------------- -->
  <div class="tab-pane fade" id="terminal-pane" role="tabpanel">
    <div class="card">
      <div class="card-header d-flex align-items-center gap-2">
        <span><i class="bi bi-terminal"></i> DuckDB-WASM shell</span>
        <a href="{{ explorer_base }}/terminal" target="_blank" rel="noopener"
           class="btn btn-sm btn-outline-secondary ms-auto"
           title="Open the terminal in a new tab">
          <i class="bi bi-box-arrow-up-right"></i> Open in new tab
        </a>
      </div>
      <div class="card-body p-0">
        <iframe id="terminal-frame" title="DuckDB-WASM shell" class="terminal-frame"
                loading="lazy"></iframe>
        <div class="form-text px-3 py-2 mb-0">
          A full DuckDB shell running in your browser. Every dataset is
          pre-registered as a view &mdash; try <code>SELECT * FROM &lt;name&gt; LIMIT 10;</code>.
        </div>
      </div>
    </div>
  </div>
</div>

<script id="explorer-config" type="application/json">{ "explorerBase": "{{ explorer_base }}", "apiBase": "{{ api_base }}", "sqlEnabled": {% if sql_enabled %}true{% else %}false{% endif %} }</script>
<script id="datasets-data" type="application/json">{{ datasets_json|safe }}</script>
<script>
  // Lazily load the embedded DuckDB-WASM shell the first time its tab is shown.
  (function () {
    const frame = document.getElementById("terminal-frame");
    const tab = document.getElementById("terminal-tab");
    if (!frame || !tab) return;
    tab.addEventListener("shown.bs.tab", function () {
      if (!frame.getAttribute("src")) {
        frame.src = "{{ explorer_base }}/terminal";
      }
    });
  })();
</script>
<script>
  // Sort the dataset list by name, row count, or column count. Reordering the
  // existing DOM nodes preserves their htmx bindings and active state.
  (function () {
    const list = document.querySelector(".dataset-list");
    const group = document.querySelector(".dataset-sort");
    if (!list || !group) return;

    const buttons = Array.from(group.querySelectorAll("button[data-sort-key]"));

    function valueFor(el, key) {
      if (key === "name") return (el.dataset.name || "").toLowerCase();
      const n = Number(el.dataset[key === "cols" ? "cols" : "rows"]);
      return Number.isFinite(n) ? n : 0;
    }

    function apply(key, dir) {
      const items = Array.from(list.querySelectorAll(".list-group-item"));
      items.sort(function (a, b) {
        const va = valueFor(a, key);
        const vb = valueFor(b, key);
        let cmp;
        if (typeof va === "string") cmp = va.localeCompare(vb);
        else cmp = va - vb;
        return dir === "asc" ? cmp : -cmp;
      });
      items.forEach(function (el) { list.appendChild(el); });
    }

    buttons.forEach(function (btn) {
      btn.addEventListener("click", function () {
        const key = btn.dataset.sortKey;
        // Toggle direction when re-clicking the active key.
        let dir = btn.dataset.sortDir || "asc";
        if (btn.classList.contains("active")) {
          dir = dir === "asc" ? "desc" : "asc";
        }
        btn.dataset.sortDir = dir;

        buttons.forEach(function (b) { b.classList.remove("active"); });
        btn.classList.add("active");

        buttons.forEach(function (b) {
          const caret = b.querySelector(".sort-caret");
          if (!caret) return;
          const up = b === btn ? dir === "asc" : (b.dataset.sortDir || "asc") === "asc";
          caret.classList.toggle("bi-caret-up-fill", up);
          caret.classList.toggle("bi-caret-down-fill", !up);
        });

        apply(key, dir);
      });
    });
  })();
</script>
{% endblock %}

{% block scripts %}
<script type="module" src="{{ explorer_base }}/assets/query-api.js?v={{ asset_version }}"></script>
{% endblock %}