{# Tabbed code viewer component (spec 040, updated spec 048).
   Expects:
     solution_id       (str/int — unique per solution for element IDs)
     diff_lines        (list of dicts with 'type' and 'content', or None)
     compiled_original (str — original SQL baseline, or None)
     compiled_original_label (str — source label for original SQL, optional)
     compiled_modified (str — optimized SQL with solution applied, or None)
     verification_sql  (str — generated verification SQL script, or None)
     verification_profile (str — verification check profile id, optional)
     verification_output_mode (str — verification output mode id, optional)
     verification_source_label (str — provenance of original SQL for verification)
     verification_warnings (list[dict], optional)
     verification_unavailable_reason (str, optional)
     file_path         (str, optional)
#}
{% if file_path %}
<div class="flex items-center gap-2 mb-2">
  <span class="text-[13px] font-mono text-slate-600 dark:text-slate-400">{{ file_path }}</span>
</div>
{% endif %}

{# Tab bar #}
<div class="flex flex-wrap items-end gap-6 border-b border-slate-200 dark:border-slate-700 mb-0" role="tablist" aria-label="SQL view selector">
  <a href="#"
          class="code-viewer-tab ui-tab ui-tab-active"
          data-viewer="{{ solution_id }}" data-tab="diff" role="tab" aria-selected="true"
          onclick="switchCodeTab(this); return false;">
    Diff
  </a>
  {% if compiled_original %}
  <a href="#"
          class="code-viewer-tab ui-tab"
          data-viewer="{{ solution_id }}" data-tab="compiled-original" role="tab" aria-selected="false"
          onclick="switchCodeTab(this); return false;">
    Original SQL
  </a>
  {% endif %}
  {% if compiled_modified %}
  <a href="#"
          class="code-viewer-tab ui-tab"
          data-viewer="{{ solution_id }}" data-tab="compiled-modified" role="tab" aria-selected="false"
          onclick="switchCodeTab(this); return false;">
    Optimized SQL
  </a>
  {% endif %}
  {% if verification_sql or verification_unavailable_reason %}
  <a href="#"
          class="code-viewer-tab ui-tab"
          data-viewer="{{ solution_id }}" data-tab="verification-sql" role="tab" aria-selected="false"
          onclick="switchCodeTab(this); return false;">
    Verification SQL
  </a>
  {% endif %}
</div>

{# Diff panel (default visible) #}
<div class="code-viewer-panel" data-viewer="{{ solution_id }}" data-panel="diff">
  {% if diff_lines %}
    {% with diff_lines=diff_lines %}
      {% include "components/code_diff.html" ignore missing %}
    {% endwith %}
  {% else %}
    <div class="border border-slate-200 dark:border-slate-800 rounded-sm p-4">
      <p class="text-[14px] text-slate-500 dark:text-slate-400">No diff available.</p>
    </div>
  {% endif %}
</div>

{# Original SQL panel — manifest compiled baseline, or latest executed SQL fallback #}
{% if compiled_original %}
<div class="code-viewer-panel hidden" data-viewer="{{ solution_id }}" data-panel="compiled-original">
  <div class="border border-blue-200 dark:border-blue-800 rounded-sm overflow-x-auto bg-white dark:bg-slate-950">
    <div class="flex items-center justify-between bg-blue-50 dark:bg-blue-950 px-3 py-1.5 border-b border-blue-200 dark:border-blue-800">
      <span class="text-[13px] font-medium text-blue-700 dark:text-blue-300">{{ compiled_original_label or 'Original SQL baseline' }}</span>
      <div class="flex items-center gap-3">
        <button
          type="button"
          onclick="toggleExpandableCode(this, '{{ solution_id }}-compiled-original-wrap')"
          class="text-[13px] font-medium text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200"
          aria-expanded="false"
          data-expand-label="Expand SQL"
          data-collapse-label="Collapse SQL"
        >
          Expand SQL
        </button>
        <button type="button" onclick="copyToClipboard(this, '{{ solution_id }}', 'compiled-original')"
                class="text-[13px] font-medium text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200 flex items-center gap-1">
          <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
          Copy
        </button>
      </div>
    </div>
    <div
      id="{{ solution_id }}-compiled-original-wrap"
      class="overflow-auto"
      style="max-height: 28rem;"
      data-expandable-code
      data-collapsed-max-height="28rem"
    >
    <pre class="text-[14px] font-mono leading-relaxed p-0 m-0" data-copyable="{{ solution_id }}-compiled-original"><code>{% for line in compiled_original.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-blue-200 dark:border-blue-800">{{ loop.index }}</span><span data-code-line class="pl-3 text-slate-800 dark:text-slate-200">{{ line }}</span>
{% endfor %}</code></pre>
    </div>
  </div>
</div>
{% endif %}

{# Optimized SQL panel — compiled SQL with solution changes applied #}
{% if compiled_modified %}
<div class="code-viewer-panel hidden" data-viewer="{{ solution_id }}" data-panel="compiled-modified">
  <div class="border border-emerald-200 dark:border-emerald-800 rounded-sm overflow-x-auto bg-white dark:bg-slate-950">
    <div class="flex items-center justify-between bg-emerald-50 dark:bg-emerald-950 px-3 py-1.5 border-b border-emerald-200 dark:border-emerald-800">
      <span class="text-[13px] font-medium text-emerald-700 dark:text-emerald-300">Optimized SQL — copy and paste into BigQuery</span>
      <div class="flex items-center gap-3">
        <button
          type="button"
          onclick="toggleExpandableCode(this, '{{ solution_id }}-compiled-modified-wrap')"
          class="text-[13px] font-medium text-emerald-600 dark:text-emerald-400 hover:text-emerald-800 dark:hover:text-emerald-200"
          aria-expanded="false"
          data-expand-label="Expand SQL"
          data-collapse-label="Collapse SQL"
        >
          Expand SQL
        </button>
        <button type="button" onclick="copyToClipboard(this, '{{ solution_id }}', 'compiled-modified')"
                class="text-[13px] font-medium text-emerald-600 dark:text-emerald-400 hover:text-emerald-800 dark:hover:text-emerald-200 flex items-center gap-1">
          <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
          Copy
        </button>
      </div>
    </div>
    <div
      id="{{ solution_id }}-compiled-modified-wrap"
      class="overflow-auto"
      style="max-height: 28rem;"
      data-expandable-code
      data-collapsed-max-height="28rem"
    >
    <pre class="text-[14px] font-mono leading-relaxed p-0 m-0" data-copyable="{{ solution_id }}-compiled-modified"><code>{% for line in compiled_modified.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-emerald-200 dark:border-emerald-800">{{ loop.index }}</span><span data-code-line class="pl-3 text-slate-800 dark:text-slate-200">{{ line }}</span>
{% endfor %}</code></pre>
    </div>
  </div>
</div>
{% endif %}

{# Verification SQL panel — manual BigQuery result-equivalence checks #}
{% if verification_sql or verification_unavailable_reason %}
<div class="code-viewer-panel hidden" data-viewer="{{ solution_id }}" data-panel="verification-sql">
  {% if dry_run_original and dry_run_modified and dry_run_original.valid and dry_run_modified.valid %}
  {% set bytes_diff = dry_run_modified.total_bytes_processed - dry_run_original.total_bytes_processed %}
  {% set cost_diff = dry_run_modified.estimated_cost_usd - dry_run_original.estimated_cost_usd %}
  {% set bytes_pct_diff = ((bytes_diff | abs) / dry_run_original.total_bytes_processed * 100) if dry_run_original.total_bytes_processed else 0 %}
  <div class="mb-3 rounded-sm border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-950 px-3 py-3">
    <div class="flex flex-wrap items-center gap-x-3 gap-y-1">
      <p class="text-[13px] font-medium uppercase tracking-[0.12em] text-slate-500 dark:text-slate-400">Performance Comparison</p>
      <p class="text-[13px] text-slate-500 dark:text-slate-400">Dry-run estimates only; use verification SQL for correctness checks.</p>
    </div>
    <div class="mt-3 grid gap-3 md:grid-cols-3">
      <div class="rounded-sm border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 px-3 py-2">
        <p class="text-[12px] uppercase tracking-[0.12em] text-slate-500 dark:text-slate-400">Original</p>
        <p class="mt-1 text-[14px] font-medium text-slate-800 dark:text-slate-200">{{ "%.2f"|format(dry_run_original.total_bytes_processed / (1024**3)) }} GB</p>
        <p class="text-[13px] text-slate-600 dark:text-slate-300">{{ dry_run_original.estimated_cost_usd | format_usd }}/run</p>
      </div>
      <div class="rounded-sm border border-emerald-200 dark:border-emerald-800 bg-white dark:bg-slate-900 px-3 py-2">
        <p class="text-[12px] uppercase tracking-[0.12em] text-emerald-600 dark:text-emerald-400">Optimized</p>
        <p class="mt-1 text-[14px] font-medium text-slate-800 dark:text-slate-200">{{ "%.2f"|format(dry_run_modified.total_bytes_processed / (1024**3)) }} GB</p>
        <p class="text-[13px] text-slate-600 dark:text-slate-300">{{ dry_run_modified.estimated_cost_usd | format_usd }}/run</p>
      </div>
      <div class="rounded-sm border {% if cost_diff < 0 %}border-emerald-200 dark:border-emerald-800{% elif cost_diff > 0 %}border-amber-200 dark:border-amber-800{% else %}border-slate-200 dark:border-slate-800{% endif %} bg-white dark:bg-slate-900 px-3 py-2">
        <p class="text-[12px] uppercase tracking-[0.12em] text-slate-500 dark:text-slate-400">Delta</p>
        <p class="mt-1 text-[14px] font-medium {% if cost_diff < 0 %}text-emerald-700 dark:text-emerald-300{% elif cost_diff > 0 %}text-amber-700 dark:text-amber-300{% else %}text-slate-800 dark:text-slate-200{% endif %}">
          {% if bytes_diff < 0 %}
          {{ "%.2f"|format((bytes_diff | abs) / (1024**3)) }} GB less
          {% elif bytes_diff > 0 %}
          {{ "%.2f"|format(bytes_diff / (1024**3)) }} GB more
          {% else %}
          No bytes change
          {% endif %}
        </p>
        <p class="text-[13px] {% if cost_diff < 0 %}text-emerald-600 dark:text-emerald-400{% elif cost_diff > 0 %}text-amber-600 dark:text-amber-400{% else %}text-slate-500 dark:text-slate-400{% endif %}">
          {% if cost_diff < 0 %}
          Saves {{ cost_diff | abs | format_usd }}/run
          {% elif cost_diff > 0 %}
          Costs +{{ cost_diff | format_usd }}/run
          {% else %}
          Same estimated cost
          {% endif %}
          {% if dry_run_original.total_bytes_processed %}
          ({{ "%.1f"|format(bytes_pct_diff) }}%)
          {% endif %}
        </p>
      </div>
    </div>
  </div>
  {% elif dry_run_modified and dry_run_modified.valid %}
  <div class="mb-3 rounded-sm border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-950 px-3 py-3">
    <p class="text-[13px] font-medium uppercase tracking-[0.12em] text-slate-500 dark:text-slate-400">Performance Comparison</p>
    <p class="mt-1 text-[13px] text-slate-500 dark:text-slate-400">Baseline dry-run data is unavailable, so only the optimized estimate is shown.</p>
    <div class="mt-3 rounded-sm border border-emerald-200 dark:border-emerald-800 bg-white dark:bg-slate-900 px-3 py-2">
      <p class="text-[12px] uppercase tracking-[0.12em] text-emerald-600 dark:text-emerald-400">Optimized</p>
      <p class="mt-1 text-[14px] font-medium text-slate-800 dark:text-slate-200">{{ "%.2f"|format(dry_run_modified.total_bytes_processed / (1024**3)) }} GB</p>
      <p class="text-[13px] text-slate-600 dark:text-slate-300">{{ dry_run_modified.estimated_cost_usd | format_usd }}/run</p>
    </div>
  </div>
  {% elif dry_run_original and dry_run_original.valid %}
  <div class="mb-3 rounded-sm border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-950 px-3 py-3">
    <p class="text-[13px] font-medium uppercase tracking-[0.12em] text-slate-500 dark:text-slate-400">Performance Comparison</p>
    <p class="mt-1 text-[13px] text-slate-500 dark:text-slate-400">Optimized dry-run data is unavailable, so only the original baseline estimate is shown.</p>
    <div class="mt-3 rounded-sm border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 px-3 py-2">
      <p class="text-[12px] uppercase tracking-[0.12em] text-slate-500 dark:text-slate-400">Original</p>
      <p class="mt-1 text-[14px] font-medium text-slate-800 dark:text-slate-200">{{ "%.2f"|format(dry_run_original.total_bytes_processed / (1024**3)) }} GB</p>
      <p class="text-[13px] text-slate-600 dark:text-slate-300">{{ dry_run_original.estimated_cost_usd | format_usd }}/run</p>
    </div>
  </div>
  {% elif dry_run_modified and not dry_run_modified.valid %}
  <div class="mb-3 rounded-sm border border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-950 px-3 py-3 text-[13px] text-amber-800 dark:text-amber-300">
    <p class="font-medium uppercase tracking-[0.12em]">Performance Comparison</p>
    <p class="mt-1">Optimized dry-run validation failed, so performance comparison is unavailable for this solution version.</p>
  </div>
  {% elif dry_run_original and not dry_run_original.valid %}
  <div class="mb-3 rounded-sm border border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-950 px-3 py-3 text-[13px] text-amber-800 dark:text-amber-300">
    <p class="font-medium uppercase tracking-[0.12em]">Performance Comparison</p>
    <p class="mt-1">Original dry-run validation failed, so the baseline performance estimate is unavailable for this solution version.</p>
  </div>
  {% endif %}

  {% if verification_warnings %}
  <div class="mb-2 rounded-sm border border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-950 px-3 py-2 text-[13px] text-amber-800 dark:text-amber-300">
    {% for warning in verification_warnings %}
    <p>{{ warning.message }}</p>
    {% endfor %}
  </div>
  {% endif %}

  {% if verification_sql %}
  <div class="border border-indigo-200 dark:border-indigo-800 rounded-sm overflow-x-auto bg-white dark:bg-slate-950">
    <div class="flex items-center justify-between bg-indigo-50 dark:bg-indigo-950 px-3 py-1.5 border-b border-indigo-200 dark:border-indigo-800">
      <span class="text-[13px] font-medium text-indigo-700 dark:text-indigo-300">
        Verification SQL — {{ verification_output_mode or 'summary' }} mode · {{ verification_profile or 'core' }} profile{% if verification_source_label %} · baseline: {{ verification_source_label }}{% endif %}
      </span>
      <div class="flex items-center gap-3">
        <button
          type="button"
          onclick="toggleExpandableCode(this, '{{ solution_id }}-verification-sql-wrap')"
          class="text-[13px] font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-200"
          aria-expanded="false"
          data-expand-label="Expand SQL"
          data-collapse-label="Collapse SQL"
        >
          Expand SQL
        </button>
        <button type="button" onclick="copyToClipboard(this, '{{ solution_id }}', 'verification-sql')"
                class="text-[13px] font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-200 flex items-center gap-1">
          <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
          Copy
        </button>
      </div>
    </div>
    <div
      id="{{ solution_id }}-verification-sql-wrap"
      class="overflow-auto"
      style="max-height: 28rem;"
      data-expandable-code
      data-collapsed-max-height="28rem"
    >
    <pre class="text-[14px] font-mono leading-relaxed p-0 m-0" data-copyable="{{ solution_id }}-verification-sql"><code>{% for line in verification_sql.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-indigo-200 dark:border-indigo-800">{{ loop.index }}</span><span data-code-line class="pl-3 text-slate-800 dark:text-slate-200">{{ line }}</span>
{% endfor %}</code></pre>
    </div>
  </div>
  {% else %}
  <div class="rounded-sm border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-950 px-3 py-3">
    <p class="text-[14px] text-slate-700 dark:text-slate-300">
      {{ verification_unavailable_reason or 'Verification SQL is unavailable for this solution version.' }}
    </p>
    <p class="mt-1 text-[13px] text-slate-500 dark:text-slate-400">
      This check is manual: copy the generated query into BigQuery when both original and optimized SQL are available.
    </p>
  </div>
  {% endif %}
</div>
{% endif %}

<script>
function switchCodeTab(btn) {
  var viewerId = btn.getAttribute('data-viewer');
  var targetTab = btn.getAttribute('data-tab');
  var activeClasses = ['ui-tab-active'];

  // Deactivate all tabs for this viewer
  var tabs = document.querySelectorAll('.code-viewer-tab[data-viewer="' + viewerId + '"]');
  for (var i = 0; i < tabs.length; i++) {
    for (var a = 0; a < activeClasses.length; a++) {
      tabs[i].classList.remove(activeClasses[a]);
    }
    tabs[i].setAttribute('aria-selected', 'false');
  }

  // Activate clicked tab
  for (var b = 0; b < activeClasses.length; b++) {
    btn.classList.add(activeClasses[b]);
  }
  btn.setAttribute('aria-selected', 'true');

  // Hide all panels for this viewer
  var panels = document.querySelectorAll('.code-viewer-panel[data-viewer="' + viewerId + '"]');
  for (var j = 0; j < panels.length; j++) {
    panels[j].classList.add('hidden');
  }

  // Show target panel
  var target = document.querySelector('.code-viewer-panel[data-viewer="' + viewerId + '"][data-panel="' + targetTab + '"]');
  if (target) {
    target.classList.remove('hidden');
  }
}

function setCopyButtonState(btn, message) {
  var originalText = btn.dataset.copyDefaultHtml || btn.innerHTML;
  if (!btn.dataset.copyDefaultHtml) {
    btn.dataset.copyDefaultHtml = originalText;
  }
  btn.innerHTML = message;
  setTimeout(function() {
    btn.innerHTML = btn.dataset.copyDefaultHtml;
  }, 2000);
}

function fallbackCopyText(text) {
  var textarea = document.createElement('textarea');
  textarea.value = text;
  textarea.setAttribute('readonly', '');
  textarea.style.position = 'fixed';
  textarea.style.top = '-9999px';
  textarea.style.left = '-9999px';
  document.body.appendChild(textarea);
  textarea.focus();
  textarea.select();

  var copied = false;
  try {
    copied = document.execCommand('copy');
  } catch (error) {
    copied = false;
  }

  document.body.removeChild(textarea);
  return copied;
}

function copyToClipboard(btn, solutionId, panelType) {
  var pre = document.querySelector('[data-copyable="' + solutionId + '-' + panelType + '"]');
  if (!pre) return;

  // Extract only line content spans and join as raw SQL text.
  var codeSpans = pre.querySelectorAll('[data-code-line]');
  var lines = [];
  for (var i = 0; i < codeSpans.length; i++) {
    lines.push(codeSpans[i].textContent);
  }
  var text = lines.length ? lines.join('\n') : pre.textContent;

  var copiedMessage = '<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Copied!';
  var failedMessage = '<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg> Copy failed';

  if (navigator.clipboard && window.isSecureContext) {
    navigator.clipboard.writeText(text).then(function() {
      setCopyButtonState(btn, copiedMessage);
    }).catch(function() {
      if (fallbackCopyText(text)) {
        setCopyButtonState(btn, copiedMessage);
      } else {
        setCopyButtonState(btn, failedMessage);
      }
    });
    return;
  }

  if (fallbackCopyText(text)) {
    setCopyButtonState(btn, copiedMessage);
  } else {
    setCopyButtonState(btn, failedMessage);
  }
}

function toggleExpandableCode(btn, targetId) {
  var target = document.getElementById(targetId);
  if (!target) return;

  var collapsedMaxHeight = target.dataset.collapsedMaxHeight || '28rem';
  var isExpanded = btn.getAttribute('aria-expanded') === 'true';

  if (isExpanded) {
    target.style.maxHeight = collapsedMaxHeight;
    btn.setAttribute('aria-expanded', 'false');
    btn.textContent = btn.dataset.expandLabel || 'Expand SQL';
    return;
  }

  target.style.maxHeight = 'none';
  btn.setAttribute('aria-expanded', 'true');
  btn.textContent = btn.dataset.collapseLabel || 'Collapse SQL';
}
</script>