{% extends LOWBONO_DASHBOARD_TEMPLATE_BASE|default:"lowbono/dashboard/base.html" %}
{% load django_tables2 %}
{% load static %}

{% block title %}{{ page_title }}{% endblock %}

{% block extra_head %}
  {# tom-select's CSS loads from the base. #}
  <style>
    #qb-root .qb-group { background: #fff; border-left: 3px solid #3b5b9a; }
    #qb-root .qb-rule .qb-value { min-width: 160px; }
    #qb-root .ts-wrapper { min-width: 180px; }

    /* AI box — full natural width (same as the builder below it). */
    #ai-card .ai-preview { max-height: 200px; overflow: auto; background: #f6f8fc;
      border: 1px solid rgba(33,50,91,.12); border-radius: .375rem; padding: .5rem .75rem;
      font-size: .78rem; margin-bottom: 0; }
    #ai-card .spinner-border { width: .9rem; height: .9rem; border-width: .16em; }
    /* Smaller show/hide switch. */
    #ai-card .form-switch .form-check-input { width: 1.75em; height: .95em; margin-top: .2em; }
    #ai-card .form-check-label { font-size: .9rem; }

    /* Compact controls throughout the card. */
    #qb-card .btn-sm { font-size: .78rem; padding: .2rem .55rem; }
    #qb-card .form-select-sm, #qb-card .form-control-sm { font-size: .8rem; }

    /* Flash the builder when the AI has just populated it, so it's obvious it's ready. */
    @keyframes qb-ready-flash {
      0%   { box-shadow: 0 0 0 0 rgba(46,125,50,.4); }
      100% { box-shadow: 0 0 0 12px rgba(46,125,50,0); }
    }
    #qb-root.qb-ready-flash { animation: qb-ready-flash 1.1s ease-out 1; border-radius: .5rem; }
  </style>
{% endblock %}

{% block content %}
  <!-- Top bar: page title -->
  <div class="mb-3">
    <h1 class="h4 mb-0">{{ page_title }}
      <span class="badge bg-secondary align-middle">{{ table.paginator.count }}</span>
    </h1>
  </div>

  <!-- Controls row: query-builder toggle (left) + simple filters (far right) -->
  <div class="d-flex justify-content-between align-items-center mb-2 flex-wrap gap-2">
    <button class="btn btn-sm btn-outline-secondary builder-toggle" type="button"
            data-bs-toggle="collapse" data-bs-target="#builderPanel"
            aria-expanded="true" aria-controls="builderPanel">
      <i class="bi bi-diagram-3"></i> <span class="builder-toggle-label"></span>
      <i class="bi bi-chevron-down chevron"></i>
    </button>
    <a href="{{ simple_url }}" class="btn btn-sm btn-outline-secondary">
      <i class="bi bi-funnel"></i> Simple filters
      <i class="bi bi-box-arrow-up-right ms-1"></i>
    </a>
  </div>

  {% if error %}
    <div class="alert alert-warning py-2"><i class="bi bi-exclamation-triangle"></i> {{ error }}</div>
  {% endif %}

  <!-- One card holds the AI box + the query builder; the toggle above hides the whole thing. -->
  <div class="collapse show" id="builderPanel">
    <div class="card mb-3" id="qb-card">
      <div class="card-body">

        {% if ai_enabled %}
        <div id="ai-card" data-ai-url="{{ ai_url }}">
          {% csrf_token %}
          <div class="form-check form-switch mb-0">
            <input class="form-check-input" type="checkbox" role="switch" id="ai-toggle" checked>
            <label class="form-check-label fw-semibold" for="ai-toggle">
              <i class="bi bi-stars"></i> Use AI to Build Queries
              <span class="badge bg-secondary align-middle">experimental</span>
            </label>
          </div>
          <div id="ai-body" class="mt-2">
            <div class="ai-inner">
              <p class="text-muted small mb-2">Describe what you want to find in ordinary words — AI
              will update sections below for you to review, then click <strong>Run query</strong> below</p>
              <textarea id="ai-text" class="form-control form-control-sm" rows="3"
                placeholder="e.g. active professionals with more than 5 referrals who speak Spanish"></textarea>
              <p class="text-muted small mt-1 mb-0">
                <i class="bi bi-shield-lock"></i> Your description is sent to a third-party AI
                service to build the query. Don't type client names, emails, or other
                identifying details.</p>
              <div class="d-flex align-items-center gap-2 mt-2 flex-wrap">
                <button type="button" class="btn btn-sm btn-primary" id="ai-run">
                  <i class="bi bi-magic"></i> Build query with AI</button>
                <button type="button" class="btn btn-sm btn-outline-secondary" id="ai-reset">
                  <i class="bi bi-arrow-counterclockwise"></i> Start fresh</button>
                <span id="ai-status" class="small text-muted" role="status" aria-live="polite"></span>
              </div>
              <div id="ai-error" class="alert alert-warning py-2 mt-2 mb-0 small" hidden></div>
              <details id="ai-preview-wrap" class="mt-2" hidden>
                <summary class="small text-muted">What the AI produced (for review)</summary>
                <pre class="ai-preview mt-1"><code id="ai-preview"></code></pre>
              </details>
            </div>
          </div>
        </div>
        <hr class="my-3">
        {% endif %}

        <div id="qb-ready" class="alert alert-success py-2" hidden>
          <i class="bi bi-check-circle"></i> Query ready — review the sections below, then click
          <strong>Run query</strong>.
        </div>

        <p class="text-muted small mb-2">Build a query: conditions inside a section combine together;
        sections combine with each other.</p>
        <form method="get" id="qb-form">
          <div id="qb-root"></div>
          <input type="hidden" name="rules" id="qb-input">
          <div class="mt-2">
            <button type="submit" class="btn btn-sm btn-primary"><i class="bi bi-play-fill"></i> Run query</button>
            <button type="button" class="btn btn-sm btn-outline-secondary" id="qb-clear">Clear</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  {{ fields_json|json_script:"qb-fields" }}
  {{ rules_obj|json_script:"qb-rules" }}

  <!-- Table section header: heading + column / export controls (next to the table) -->
  <div class="d-flex justify-content-between align-items-center mb-2 flex-wrap gap-2">
    <h2 class="h5 mb-0">{{ page_title }}
      <span class="badge bg-secondary align-middle">{{ table.paginator.count }}</span>
    </h2>
    <div class="d-flex gap-2">
      <div class="dropdown">
        <button class="btn btn-sm btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown"
                data-bs-auto-close="outside" type="button">
          <i class="bi bi-layout-three-columns px-1"></i>View/Hide Columns</button>
        <div class="dropdown-menu dropdown-menu-end p-2" style="min-width: 220px;">
          {% for column in table.columns %}
            <label class="dropdown-item small mb-0">
              <input type="checkbox" class="col-toggle form-check-input me-1"
                     data-col="{{ forloop.counter }}" data-name="{{ column.name }}"
                     {% if column.name not in default_hidden %}checked{% endif %}> {{ column.header }}</label>
          {% endfor %}
        </div>
      </div>
      <div class="btn-group">
        <a class="btn btn-sm btn-outline-success" href="{% querystring '_export'='csv' %}">
          <i class="bi bi-filetype-csv"></i> Export CSV</a>
        <a class="btn btn-sm btn-outline-success" href="{% querystring '_export'='xlsx' %}">
          <i class="bi bi-file-earmark-excel"></i> Export Excel Sheet</a>
      </div>
    </div>
  </div>

  <div class="table-scroll-wrap">
    <div class="table-responsive">
      {% render_table table %}
    </div>
  </div>
{% endblock %}

{% block extra_js %}
{% comment %} Needs TomSelect already defined; the base's vendor block loads before this. {% endcomment %}
<script src="{% static 'lowbono/dashboard/querybuilder.js' %}"></script>
{% endblock %}