// Personalización de página: título, autor, color de texto y de fondo,
// tipografía y tamaño/orientación del PDF. A diferencia de las secciones,
// es única para todo el documento (no se repite, reordena ni duplica), así
// que no pasa por serializeSections()/buildSectionsFrom(): se guarda
// aparte (ver storage.js) y se aplica directamente sobre #panel-output.

import {
  panelOutput,
  pageTitleInput,
  pageAuthorInput,
  pageTextColorInput,
  pageBgColorInput,
  pageFontSelect,
  pageSizeSelect,
  pageOrientationSelect,
  pageSizeStyle,
} from './dom-refs.js';

// Aplica a #panel-output el color de texto/fondo y la tipografía elegidos,
// el tamaño de página al diálogo de impresión (a través de un <style>
// propio, ya que @page no se puede tocar como una propiedad normal desde
// JS), y el título del patrón como título de la pestaña del navegador (que
// de paso el propio navegador suele usar como nombre sugerido al exportar
// a PDF).
export function renderPageMeta() {
  panelOutput.style.color = pageTextColorInput.value;
  panelOutput.style.backgroundColor = pageBgColorInput.value;
  panelOutput.style.fontFamily = pageFontSelect.value;
  pageSizeStyle.textContent = `@page { size: ${pageSizeSelect.value} ${pageOrientationSelect.value}; }`;
  document.title = pageTitleInput.value.trim() || 'Crochet';
}

export function serializePageSettings() {
  return {
    title: pageTitleInput.value,
    author: pageAuthorInput.value,
    textColor: pageTextColorInput.value,
    bgColor: pageBgColorInput.value,
    font: pageFontSelect.value,
    pageSize: pageSizeSelect.value,
    orientation: pageOrientationSelect.value,
  };
}

export function applyPageSettings(settings = {}) {
  pageTitleInput.value = settings.title || '';
  pageAuthorInput.value = settings.author || '';
  pageTextColorInput.value = settings.textColor || '#000000';
  pageBgColorInput.value = settings.bgColor || '#ffffff';
  pageFontSelect.value = settings.font || 'sans-serif';
  pageSizeSelect.value = settings.pageSize || 'A4';
  pageOrientationSelect.value = settings.orientation || 'portrait';
  renderPageMeta();
}

[pageTitleInput, pageAuthorInput].forEach(el => el.addEventListener('input', renderPageMeta));
[pageTextColorInput, pageBgColorInput, pageFontSelect, pageSizeSelect, pageOrientationSelect].forEach(el => {
  el.addEventListener('input', renderPageMeta);
  el.addEventListener('change', renderPageMeta);
});