// Pestañas (solo en móvil, ver css/main.css): alternar entre el panel de
// "Secciones" y el de "Vista previa". A partir del breakpoint md la clase
// `panel-hidden-mobile` no tiene efecto y ambos paneles quedan visibles
// permanentemente, lado a lado. También la exportación a PDF, que se apoya
// en showTab() para asegurarse de que "Vista previa" esté visible antes de
// imprimir.

import { panelTop, panelOutput } from './dom-refs.js';

const tabSections = document.getElementById('tab-sections');
const tabOutput = document.getElementById('tab-output');

function showTab(tab) {
  const showSections = tab === 'sections';
  panelTop.classList.toggle('panel-hidden-mobile', !showSections);
  panelOutput.classList.toggle('panel-hidden-mobile', showSections);
  tabSections.classList.toggle('tab-active', showSections);
  tabOutput.classList.toggle('tab-active', !showSections);
}

tabSections.addEventListener('click', () => showTab('sections'));
tabOutput.addEventListener('click', () => showTab('output'));

// Exportar #panel-output a PDF: se usa el diálogo de impresión del propio
// navegador (con "Guardar como PDF") en vez de una librería externa, ya que
// las librerías tipo html2canvas no renderizan bien los colores oklch que
// usa Tailwind v4. La hoja de estilos de impresión (css/main.css) aísla
// #panel-output para que solo se exporte el resultado.
document.getElementById('export-pdf').addEventListener('click', () => {
  // `panel-hidden-mobile` está restringida a "screen" en el CSS, así que
  // nunca debería afectar a la impresión, pero por si algún navegador
  // calcula el ancho de la vista de impresión igual al de pantalla en
  // móvil, se cambia de pestaña antes de imprimir para curarse en salud.
  showTab('output');
  window.print();
});