{% 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="duckdb-tab" data-bs-toggle="tab" data-bs-target="#duckdb-pane"
            type="button" role="tab"><i class="bi bi-database"></i> DuckDB</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="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"
             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>

  <!-- ---------------------------------------------------------------- -->
  <!-- DuckDB -->
  <!-- ---------------------------------------------------------------- -->
  <div class="tab-pane fade" id="duckdb-pane" role="tabpanel">
    <div class="card">
      <div class="card-header d-flex align-items-center gap-2">
        <span><i class="bi bi-database"></i> DuckDB-WASM console</span>
        <span id="duck-status" class="badge text-bg-secondary ms-auto">initialising…</span>
      </div>
      <div class="card-body">
        <div class="row g-2 mb-2">
          <div class="col-12 col-md-4">
            <select id="duck-dataset" class="form-select form-select-sm"></select>
          </div>
          <div class="col-12 col-md-8 d-flex gap-2">
            <button id="duck-count" class="btn btn-sm btn-outline-secondary" type="button">count(*)</button>
            <button id="duck-sample" class="btn btn-sm btn-outline-secondary" type="button">sample 100</button>
            <button id="duck-describe" class="btn btn-sm btn-outline-secondary" type="button">describe</button>
            <button id="duck-run" class="btn btn-sm btn-success ms-auto" type="button" disabled>
              <i class="bi bi-play-fill"></i> Run
            </button>
          </div>
        </div>
        <textarea id="duck-sql" class="form-control mono" rows="5"
                  spellcheck="false" placeholder="SELECT * FROM dataset LIMIT 100"></textarea>
        <div class="form-text">
          Each dataset is registered as a DuckDB view over its Parquet export
          (<code>{{ api_base }}/datasets/&lt;name&gt;/all.parquet</code>), queried entirely in your browser.
        </div>
        <div id="duck-error" class="alert alert-danger mt-3 d-none mono" role="alert"></div>
        <div id="duck-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 }}" }</script>
<script id="datasets-data" type="application/json">{{ datasets_json|safe }}</script>
{% endblock %}

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