Pigmento/js/app.js

import { initEingabe } from './eingabe.js';
import { initPicker } from './picker.js';
import { initHarmonien } from './harmonien.js';
import { addFavorit, addColorToSchema, addToHistory, renderSammlung, exportCollection, importCollection, saveSchema, setEditSchemaHandler, setSwatchClickHandler } from './collection.js';
import { initSchemaModal, openForEdit } from './schema-modal.js';

// state.color is read-only from outside — always use setColor() to update,
// so that the colorChanged event is dispatched to all listening modules.
export const state = {
  color: { h: 200, s: 60, l: 50 },
  setColor(hsl) {
    if (!hsl || typeof hsl.h !== 'number' || typeof hsl.s !== 'number' || typeof hsl.l !== 'number') return;
    this.color = hsl;
    document.dispatchEvent(new CustomEvent('colorChanged', { detail: hsl }));
  }
};

function switchTab(name) {
  document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
  document.querySelectorAll('.tab-content').forEach(s => s.classList.remove('active'));
  const btn = document.querySelector(`.tab-btn[data-tab="${name}"]`);
  if (btn) { btn.classList.add('active'); document.getElementById('menu-active-label').textContent = btn.textContent; }
  const section = document.getElementById('tab-' + name);
  if (section) section.classList.add('active');
  document.getElementById('menu-dropdown').classList.remove('open');
}

// Hamburger-Menü
const menuToggle = document.getElementById('menu-toggle');
const menuDropdown = document.getElementById('menu-dropdown');
const menuActiveLabel = document.getElementById('menu-active-label');

menuToggle.addEventListener('click', (e) => {
  e.stopPropagation();
  menuDropdown.classList.toggle('open');
});

document.addEventListener('click', () => menuDropdown.classList.remove('open'));

// Tab-Navigation
document.querySelectorAll('.tab-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    const tab = btn.dataset.tab;
    document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
    document.querySelectorAll('.tab-content').forEach(s => s.classList.remove('active'));
    btn.classList.add('active');
    const section = document.getElementById('tab-' + tab);
    if (section) section.classList.add('active');
    menuActiveLabel.textContent = btn.textContent;
    menuDropdown.classList.remove('open');
  });
});

// Every color change goes into history
document.addEventListener('colorChanged', (e) => addToHistory(e.detail));

// Hintergrundfarbe als extrem helles Pastell + Logo-Animation synchron einfärben
document.addEventListener('colorChanged', (e) => {
  const { h, s } = e.detail;
  const pastelS = Math.round(Math.min(s * 0.5, 45));
  document.body.style.background = `hsl(${h}, ${pastelS}%, 92%)`;
});

initEingabe(addFavorit, addColorToSchema);
initPicker(addFavorit, addColorToSchema);
initHarmonien(addFavorit, addColorToSchema, (hsl) => state.setColor(hsl));

document.getElementById('sammlung-export-btn').addEventListener('click', exportCollection);
document.getElementById('sammlung-import-btn').addEventListener('click', importCollection);

renderSammlung();
initSchemaModal(saveSchema);
setEditSchemaHandler(openForEdit);
setSwatchClickHandler((hsl) => { state.setColor(hsl); switchTab('harmonien'); });