{# Always-open query review surface used by opportunity and job details.

   The order is deliberately Original -> Suggested -> Diff. Users start
   from the query that actually ran, then inspect the proposed SQL, then
   use the diff for a focused review. #}
{% macro query_copy_button() %}
  <button type="button"
          onclick="auditCopyFromSibling(this)"
          class="absolute top-2 right-2 z-10 inline-flex items-center gap-1 px-2 py-1 text-sm rounded-full bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-700 text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700 shadow-sm">
    <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>
    <span>Copy</span>
  </button>
{% endmacro %}

{% macro query_sql_pane(sql) %}
  <div class="relative border border-slate-200 dark:border-slate-800 overflow-hidden font-mono text-sm">
    {{ query_copy_button() }}
    <textarea data-copy-source class="hidden">{{ sql or "" }}</textarea>
    <div class="ui-code-pane">
      <pre class="text-sm leading-relaxed p-0 m-0"><code>{% for line in (sql or "").split('\n') %}<span class="inline-block w-12 text-right pr-3 select-none text-slate-400 dark:text-slate-600 bg-slate-50 dark:bg-slate-900 border-r border-slate-200 dark:border-slate-800">{{ loop.index }}</span><span class="pl-3 text-slate-800 dark:text-slate-200">{{ line }}</span>
{% endfor %}</code></pre>
    </div>
  </div>
{% endmacro %}

{% macro query_review_card(primary_query_improvement=None, fallback_query="", changes_count=0, query_improvements=None) %}
  {% set _candidates = query_improvements if query_improvements else [] %}
  {% if not _candidates and primary_query_improvement %}
    {% set _candidates = [primary_query_improvement] %}
  {% endif %}
  {% set _ns = namespace(has_sql=false, has_suggested=false, has_diff=false) %}
  {% for imp in _candidates %}
    {% if imp.before_content or imp.after_content or imp.diff_lines %}
      {% set _ns.has_sql = true %}
    {% endif %}
    {% if imp.after_content %}
      {% set _ns.has_suggested = true %}
    {% endif %}
    {% if imp.diff_lines %}
      {% set _ns.has_diff = true %}
    {% endif %}
  {% endfor %}
  {% if fallback_query %}
    {% set _ns.has_sql = true %}
  {% endif %}
  {% set _has_alternative_views = _ns.has_suggested or _ns.has_diff %}

  {% if _ns.has_sql %}
  <section id="query" class="ui-surface p-5 lg:p-6" data-active-tab="original" data-query-review>
    <div class="flex flex-wrap items-center justify-between gap-3">
      <div class="min-w-0">
        <div class="flex items-center gap-2">
          <h2 class="ui-section-title mt-0 mb-0">Query</h2>
        </div>
        <p class="ui-card-meta mt-2">
          {% if _has_alternative_views %}
            Review the query body with original, suggested, and diff views.
          {% else %}
            No deterministic SQL rewrite is available. Inspect the latest execution here.
          {% endif %}
        </p>
      </div>
      <div class="flex flex-wrap items-center gap-2">
        {% if _candidates | length > 1 %}
          <select aria-label="SQL suggestion"
                  onchange="auditSetQuerySuggestion(this)"
                  class="ui-control text-sm"
                  style="min-height: 2.25rem; width: min(100%, 20rem);">
            {% for imp in _candidates %}
              <option value="{{ loop.index0 }}">
                {{ imp.display_name or imp.template_id or imp.rule_type or ("SQL change " ~ loop.index) }}{% if imp.occurrences and imp.occurrences > 1 %} x{{ imp.occurrences }}{% endif %}
              </option>
            {% endfor %}
          </select>
        {% endif %}
        {% if changes_count %}
          <span class="ui-pill ui-pill-success">{{ changes_count }} SQL {{ "change" if changes_count == 1 else "changes" }}</span>
        {% endif %}
      </div>
    </div>

    <div class="mt-4">
      {% if _has_alternative_views %}
      <div class="flex items-center gap-3 border-b border-slate-200 dark:border-slate-800 mb-3">
        <button type="button" onclick="auditSetTab(this, 'original')"
                class="ui-tab" data-tab="original">Original</button>
        {% if _ns.has_suggested %}
        <button type="button" onclick="auditSetTab(this, 'suggested')"
                class="ui-tab" data-tab="suggested">Suggested</button>
        {% endif %}
        {% if _ns.has_diff %}
        <button type="button" onclick="auditSetTab(this, 'diff')"
                class="ui-tab" data-tab="diff">Diff</button>
        {% endif %}
      </div>
      {% endif %}

      {% if _has_alternative_views %}
      <div class="ui-query-review-viewport">
      {% endif %}
      {% if _candidates %}
        {% for imp in _candidates %}
        <div data-query-suggestion="{{ loop.index0 }}" class="{% if not loop.first %}hidden{% endif %}">
          {% set _original_sql = imp.before_content or fallback_query or "" %}
          {% set _suggested_sql = imp.after_content or "" %}
          {% set _diff_lines = imp.diff_lines %}
          {% set _template_id = imp.template_id or imp.rule_type or "query" %}
          <div class="audit-imp-pane" data-tab-pane="original">
            {% if _original_sql %}
              {{ query_sql_pane(_original_sql) }}
            {% else %}
              <p class="text-sm text-slate-500 dark:text-slate-400 italic">No original SQL is available for this execution.</p>
            {% endif %}
          </div>

          {% if _ns.has_suggested %}
          <div class="audit-imp-pane hidden" data-tab-pane="suggested">
            {% if _suggested_sql %}
              {{ query_sql_pane(_suggested_sql) }}
            {% else %}
              <p class="text-sm text-slate-500 dark:text-slate-400 italic">No suggested SQL is available for this rewrite.</p>
            {% endif %}
          </div>
          {% endif %}

          {% if _ns.has_diff %}
          <div class="audit-imp-pane hidden" data-tab-pane="diff">
            {% if _diff_lines %}
              {% set diff_lines = _diff_lines %}
              {% set file_path = _template_id %}
              {% include "components/code_diff.html" %}
            {% else %}
              <p class="text-sm text-slate-500 dark:text-slate-400 italic">No diff is available for this rewrite.</p>
            {% endif %}
          </div>
          {% endif %}
        </div>
        {% endfor %}
      {% else %}
        <div class="audit-imp-pane" data-tab-pane="original">
          {{ query_sql_pane(fallback_query) }}
        </div>
      {% endif %}
      {% if _has_alternative_views %}
      </div>
      {% endif %}
    </div>
  </section>
  <script>
    if (typeof window.auditSetQuerySuggestion !== 'function') {
      window.auditSetQuerySuggestion = function(select) {
        const card = select.closest('[data-query-review]');
        if (!card) return;
        const selected = select.value || '0';
        card.querySelectorAll('[data-query-suggestion]').forEach(pane => {
          pane.classList.toggle('hidden', pane.dataset.querySuggestion !== selected);
        });
        const activeTab = card.dataset.activeTab || 'original';
        const activeButton = card.querySelector('[data-tab="' + activeTab + '"]');
        if (activeButton && window.auditSetTab) {
          window.auditSetTab(activeButton, activeTab);
        }
      };
    }
  </script>
  {% endif %}
{% endmacro %}