{# 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) %}
  {% set _original_sql = fallback_query or "" %}
  {% set _suggested_sql = "" %}
  {% set _diff_lines = none %}
  {% set _template_id = "query" %}
  {% if primary_query_improvement %}
    {% set _original_sql = primary_query_improvement.before_content or fallback_query or "" %}
    {% set _suggested_sql = primary_query_improvement.after_content or "" %}
    {% set _diff_lines = primary_query_improvement.diff_lines %}
    {% set _template_id = primary_query_improvement.template_id or "query" %}
  {% endif %}
  {% set _has_suggested = _suggested_sql | length > 0 %}
  {% set _has_diff = _diff_lines is not none and (_diff_lines | length > 0) %}
  {% set _has_alternative_views = _has_suggested or _has_diff %}

  {% if _original_sql or _suggested_sql or _diff_lines %}
  <section id="query" class="ui-surface p-5 lg:p-6" data-active-tab="original">
    <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 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 _has_suggested %}
        <button type="button" onclick="auditSetTab(this, 'suggested')"
                class="ui-tab" data-tab="suggested">Suggested</button>
        {% endif %}
        {% if _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 %}
      <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 _has_suggested %}
      <div class="audit-imp-pane hidden" data-tab-pane="suggested">
        {{ query_sql_pane(_suggested_sql) }}
      </div>
      {% endif %}

      {% if _has_diff %}
      <div class="audit-imp-pane hidden" data-tab-pane="diff">
        {% set diff_lines = _diff_lines %}
        {% set file_path = _template_id %}
        {% include "components/code_diff.html" %}
      </div>
      {% endif %}
      {% if _has_alternative_views %}
      </div>
      {% endif %}
    </div>
  </section>
  {% endif %}
{% endmacro %}