{% 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>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="register-tab" data-bs-toggle="tab" data-bs-target="#register-pane"
            type="button" role="tab"><i class="bi bi-plus-circle"></i> Register</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="input-group input-group-sm mb-2 dataset-filter">
          <span class="input-group-text"><i class="bi bi-funnel"></i></span>
          <input type="search" class="form-control" id="dataset-filter-input"
                 placeholder="Filter datasets…" aria-label="Filter datasets" autocomplete="off" spellcheck="false">
          <button type="button" class="btn btn-outline-secondary d-none" id="dataset-filter-clear"
                  title="Clear filter" aria-label="Clear filter"><i class="bi bi-x-lg"></i></button>
        </div>
        <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 class="dataset-filter-empty text-secondary small text-center py-3 d-none">
          No datasets match <span class="fw-semibold dataset-filter-term"></span>.
        </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>

  <!-- ---------------------------------------------------------------- -->
  <!-- Register (live dataset registration + TOML export) -->
  <!-- ---------------------------------------------------------------- -->
  <div class="tab-pane fade" id="register-pane" role="tabpanel">
    <div class="row g-3">
      <div class="col-12 col-lg-7">
        <div class="card">
          <div class="card-header"><i class="bi bi-plus-circle"></i> Register a dataset</div>
          <div class="card-body">
            <p class="small text-secondary">
              Add a Parquet or Delta source to this running server without a restart.
              The dataset is loaded in memory only &mdash; use the export options after
              registering to keep it across restarts.
            </p>
            {% if can_persist %}
            <p class="small text-secondary">
              <i class="bi bi-save"></i> This server can append datasets to
              <code>{{ config_path }}</code>.
            </p>
            {% else %}
            <p class="small text-secondary">
              <i class="bi bi-info-circle"></i> This server has no on-disk config file,
              so persistence is limited to downloading the exported TOML.
            </p>
            {% endif %}
            <form hx-post="{{ explorer_base }}/datasets" hx-target="#register-result"
                  hx-swap="innerHTML" hx-disabled-elt="find button[type='submit']">
              <div class="row g-2">
                <div class="col-12 col-md-6">
                  <label class="form-label small mb-1">Name</label>
                  <input name="name" class="form-control form-control-sm" required
                         pattern="[A-Za-z0-9_.\-]+" placeholder="my_dataset"
                         title="Letters, digits, dot, underscore and hyphen only">
                </div>
                <div class="col-12 col-md-6">
                  <label class="form-label small mb-1">Source kind</label>
                  <select name="kind" class="form-select form-select-sm">
                    <option value="parquet" selected>Parquet</option>
                    <option value="delta">Delta</option>
                  </select>
                </div>
                <div class="col-12">
                  <label class="form-label small mb-1">Location</label>
                  <input name="location" class="form-control form-control-sm mono" required
                         placeholder="/path/to/data.parquet or s3://bucket/prefix/">
                </div>
                <div class="col-12 col-md-6">
                  <label class="form-label small mb-1">Columns <span class="text-secondary">(optional, comma-separated projection)</span></label>
                  <input name="columns" class="form-control form-control-sm mono" placeholder="id, name, ts">
                </div>
                <div class="col-12 col-md-6 d-flex align-items-end gap-3">
                  <div class="form-check">
                    <input class="form-check-input" type="checkbox" name="dict_encode" id="reg-dict" checked>
                    <label class="form-check-label small" for="reg-dict">Dictionary encode</label>
                  </div>
                  <div class="form-check">
                    <input class="form-check-input" type="checkbox" name="lazy" id="reg-lazy">
                    <label class="form-check-label small" for="reg-lazy">Lazy</label>
                  </div>
                </div>
              </div>

              <hr class="my-3">
              <div class="row g-2">
                <div class="col-12 col-md-4">
                  <label class="form-label small mb-1">Index mode</label>
                  <select name="index_mode" class="form-select form-select-sm">
                    <option value="auto" selected>Auto</option>
                    <option value="none">None</option>
                    <option value="list">List</option>
                  </select>
                </div>
                <div class="col-12 col-md-5">
                  <label class="form-label small mb-1">Index columns <span class="text-secondary">(for list mode)</span></label>
                  <input name="index_columns" class="form-control form-control-sm mono" placeholder="category, region">
                </div>
                <div class="col-12 col-md-3">
                  <label class="form-label small mb-1">Max cardinality</label>
                  <input name="index_max_cardinality" class="form-control form-control-sm" inputmode="numeric" placeholder="100000">
                </div>
              </div>

              <div class="form-check mt-3 mb-2">
                <input class="form-check-input" type="checkbox" name="s3_enabled" id="reg-s3-enabled"
                       data-bs-toggle="collapse" data-bs-target="#reg-s3-section"
                       aria-expanded="false" aria-controls="reg-s3-section">
                <label class="form-check-label small fw-semibold" for="reg-s3-enabled">
                  <i class="bi bi-hdd-network"></i> S3 / object-store source
                </label>
              </div>
              <div class="collapse" id="reg-s3-section">
                <div class="card card-body bg-body-secondary">
                  <div class="row g-2">
                    <div class="col-12 col-md-6">
                      <label class="form-label small mb-1">Region</label>
                      <input name="s3_region" class="form-control form-control-sm" placeholder="us-east-1">
                    </div>
                    <div class="col-12 col-md-6">
                      <label class="form-label small mb-1">Endpoint</label>
                      <input name="s3_endpoint" class="form-control form-control-sm mono" placeholder="http://localhost:9000">
                    </div>
                    <div class="col-12 col-md-6">
                      <label class="form-label small mb-1">Addressing style</label>
                      <select name="s3_addressing" class="form-select form-select-sm">
                        <option value="virtual" selected>Virtual-hosted</option>
                        <option value="path">Path</option>
                      </select>
                    </div>
                    <div class="col-12 col-md-6">
                      <label class="form-label small mb-1">Partitioning</label>
                      <select name="s3_partitioning" class="form-select form-select-sm">
                        <option value="auto" selected>Auto</option>
                        <option value="hive">Hive</option>
                        <option value="none">None</option>
                      </select>
                    </div>
                    <div class="col-12">
                      <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="s3_allow_http" id="reg-s3-http">
                        <label class="form-check-label small" for="reg-s3-http">Allow plain HTTP (dev / MinIO)</label>
                      </div>
                    </div>
                    <div class="col-12 col-md-6">
                      <label class="form-label small mb-1">Access key ID</label>
                      <input name="s3_access_key_id" class="form-control form-control-sm mono" autocomplete="off">
                    </div>
                    <div class="col-12 col-md-6">
                      <label class="form-label small mb-1">Secret access key</label>
                      <input name="s3_secret_access_key" type="password" class="form-control form-control-sm mono" autocomplete="off">
                    </div>
                    <div class="col-12">
                      <label class="form-label small mb-1">Session token <span class="text-secondary">(optional)</span></label>
                      <input name="s3_session_token" class="form-control form-control-sm mono" autocomplete="off">
                    </div>
                  </div>
                  <p class="form-text mb-0">
                    Leave keys blank to use the server's environment / provider chain.
                  </p>
                </div>
              </div>

              <div class="mt-3">
                <button type="submit" class="btn btn-sm btn-primary">
                  <i class="bi bi-plus-circle"></i> Register dataset
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
      <div class="col-12 col-lg-5">
        <div id="register-result">
          <div class="text-secondary small p-3">
            Register a dataset to see its live status and TOML config here.
          </div>
        </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>
<script>
  // Filter the dataset list by name as the user types. Hides non-matching
  // items rather than removing them, so sort order and htmx bindings are
  // preserved and clearing the box restores the full list instantly.
  (function () {
    const list = document.querySelector(".dataset-list");
    const input = document.getElementById("dataset-filter-input");
    const clear = document.getElementById("dataset-filter-clear");
    const empty = document.querySelector(".dataset-filter-empty");
    const term = document.querySelector(".dataset-filter-term");
    if (!list || !input) return;

    function apply() {
      const q = input.value.trim().toLowerCase();
      const items = Array.from(list.querySelectorAll(".list-group-item"));
      let visible = 0;
      items.forEach(function (el) {
        const name = (el.dataset.name || "").toLowerCase();
        const match = q === "" || name.includes(q);
        el.classList.toggle("d-none", !match);
        if (match) visible++;
      });
      if (clear) clear.classList.toggle("d-none", q === "");
      if (empty) empty.classList.toggle("d-none", !(q !== "" && visible === 0));
      if (term) term.textContent = q ? '"' + input.value.trim() + '"' : "";
    }

    input.addEventListener("input", apply);
    if (clear) {
      clear.addEventListener("click", function () {
        input.value = "";
        input.focus();
        apply();
      });
    }
    // Esc clears the filter when the box is focused.
    input.addEventListener("keydown", function (e) {
      if (e.key === "Escape" && input.value !== "") {
        e.preventDefault();
        input.value = "";
        apply();
      }
    });
  })();
</script>
{% endblock %}

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