{# GET / — crate::pages::analytics::ui::AnalyticsPage #}
{% extends "ui/base.html" %}

{% block title %}Analytics{% endblock %}

{% block head %}
<script src="https://cdn.jsdelivr.net/npm/echarts@6/dist/echarts.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js"></script>
{% endblock %}

{% block content %}
<main x-data="{ sql: '', copied: false }">
  <section class="heading">
    <div>
      <p class="eyebrow">Reporting</p>
      <h1>Analytics</h1>
      <p>Query the read-only analytics API and chart the result.</p>
    </div>
  </section>

  <div class="analytics">
    <aside class="panel sidebar">
      <h2>Available data</h2>
      <p class="hint">Load a profile to see the table and column aliases accepted by analytics SQL.</p>
      <div hx-get="/api/profiles" hx-trigger="load" hx-target="#profile" hx-swap="innerHTML">
        <form class="catalog-load" hx-post="/api/catalog" hx-target="#catalog" hx-swap="innerHTML" hx-disabled-elt="button">
          <label>Profile
            <select id="profile" name="profile_name" hx-post="/api/catalog" hx-trigger="change"
                    hx-target="#catalog" hx-swap="innerHTML">
              <option value="">Loading profiles…</option>
            </select>
          </label>
          <button type="submit">Load schema</button>
        </form>
      </div>
      <div id="catalog" aria-live="polite"><p class="hint">No schema loaded.</p></div>
    </aside>

    <section>
      <form id="query-form" class="panel query-form" hx-post="/api/query" hx-include="#profile"
            hx-target="#output" hx-swap="innerHTML" hx-disabled-elt="button">
        <div class="query-row">
          <label>Chart
            <select name="chart_type">
              <option value="bar">Bar</option>
              <option value="line">Line</option>
              <option value="pie">Pie</option>
              <option value="scatter">Scatter</option>
              <option value="table">Table</option>
            </select>
          </label>
          <label>Max rows<input name="max_rows" type="number" min="1" value="1000"></label>
        </div>
        <label>SQL
          <textarea id="sql" x-ref="sql" x-model="sql" name="sql" required spellcheck="false"
                    placeholder="Load the schema, then choose a starter query or write a SELECT query"></textarea>
        </label>
        <div class="actions">
          <button type="submit">Run query</button>
          <span class="htmx-indicator hint">Running…</span>
        </div>
      </form>

      <section id="output" aria-live="polite"></section>
    </section>
  </div>
</main>
{% endblock %}