/* Error Debug Page — interactive behavior (inlined by ErrorRenderer) */

document.addEventListener('DOMContentLoaded', () => {
  // ── Tab switching ──────────────────────────────────
  const tabs = document.querySelectorAll('.app-error-debug-tab');
  const panels = document.querySelectorAll('.app-error-debug-panel');

  tabs.forEach(tab => {
    tab.addEventListener('click', () => {
      const target = tab.dataset.panel;
      tabs.forEach(t => t.classList.remove('active'));
      panels.forEach(p => p.classList.remove('active'));
      tab.classList.add('active');
      const panel = document.getElementById(target);
      if (panel) panel.classList.add('active');
    });
  });

  // ── Frame expand/collapse ──────────────────────────
  document.querySelectorAll('.app-error-debug-frame__header').forEach(header => {
    header.addEventListener('click', () => {
      header.closest('.app-error-debug-frame')?.classList.toggle('open');
    });
  });

  // Open the first frame by default.
  const firstFrame = document.querySelector('.app-error-debug-frame');
  if (firstFrame) firstFrame.classList.add('open');

  // ── Query expand/collapse ──────────────────────────
  document.querySelectorAll('.app-error-debug-query__header').forEach(header => {
    header.addEventListener('click', () => {
      header.closest('.app-error-debug-query')?.classList.toggle('open');
    });
  });

  // ── Copy to clipboard ─────────────────────────────
  document.querySelectorAll('.app-error-debug-copy-button').forEach(button => {
    button.addEventListener('click', async (e) => {
      e.stopPropagation();
      const text = button.dataset.copy;
      if (!text) return;

      try {
        await navigator.clipboard.writeText(text);
        button.classList.add('copied');
        const original = button.innerHTML;
        button.innerHTML = '<svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/></svg>';
        setTimeout(() => {
          button.classList.remove('copied');
          button.innerHTML = original;
        }, 1500);
      } catch {
        // Clipboard API may not be available in all contexts.
      }
    });
  });
});