import { getHarmonies, hslToHex } from './converter.js';
import { state } from './app.js';

const DESCRIPTIONS = {
  'Komplementär':       'Die Farbe gegenüber auf dem Farbrad (180°). Starker Kontrast — gut für Akzente.',
  'Analog':             'Zwei Nachbarfarben (±30°). Wirkt harmonisch und ruhig — gut für Hintergründe.',
  'Triade':             'Drei gleichmäßig verteilte Farben (120° Abstand). Lebendig, aber ausgewogen.',
  'Split-Komplementär': 'Die zwei Farben neben der Komplementärfarbe (150°/210°). Weniger Spannung als Komplementär, mehr Vielfalt.',
};

function renderHarmony(label, colors, onSaveFavorit, onSaveSchema, onSetColor) {
  const row = document.createElement('div');
  row.className = 'harmony-row';

  const headerRow = document.createElement('div');
  headerRow.className = 'harmony-header';

  const heading = document.createElement('h3');
  heading.textContent = label;

  const infoWrap = document.createElement('span');
  infoWrap.className = 'harmony-info';

  const infoIcon = document.createElement('span');
  infoIcon.className = 'harmony-info-icon';
  infoIcon.textContent = 'ℹ';

  const tooltip = document.createElement('span');
  tooltip.className = 'harmony-tooltip';
  tooltip.textContent = DESCRIPTIONS[label] || '';

  infoWrap.appendChild(infoIcon);
  infoWrap.appendChild(tooltip);
  headerRow.appendChild(heading);
  headerRow.appendChild(infoWrap);
  row.appendChild(headerRow);

  const swatchesDiv = document.createElement('div');
  swatchesDiv.className = 'harmony-swatches';

  colors.forEach(hsl => {
    const hex = hslToHex(hsl);

    const div = document.createElement('div');
    div.className = 'harmony-swatch';

    const swatch = document.createElement('div');
    swatch.className = 'swatch';
    swatch.style.background = hex;
    swatch.title = hex;
    if (onSetColor) {
      swatch.style.cursor = 'pointer';
      swatch.addEventListener('click', () => onSetColor(hsl));
    }

    const hexLabel = document.createElement('span');
    hexLabel.textContent = hex;

    const btnRow = document.createElement('div');
    btnRow.className = 'harmony-btn-row';

    const favBtn = document.createElement('button');
    favBtn.className = 'action-btn';
    favBtn.textContent = 'Fav';
    favBtn.style.fontSize = '0.7rem';
    favBtn.addEventListener('click', () => onSaveFavorit(hsl));

    const schemaBtn = document.createElement('button');
    schemaBtn.className = 'action-btn';
    schemaBtn.textContent = '+Schema';
    schemaBtn.style.fontSize = '0.7rem';
    schemaBtn.addEventListener('click', () => onSaveSchema(hsl));

    btnRow.appendChild(favBtn);
    btnRow.appendChild(schemaBtn);

    div.appendChild(swatch);
    div.appendChild(hexLabel);
    div.appendChild(btnRow);
    swatchesDiv.appendChild(div);
  });

  row.appendChild(swatchesDiv);
  return row;
}

function render(onSaveFavorit, onSaveSchema, onSetColor) {
  const hsl = state.color;
  const hex = hslToHex(hsl);

  document.getElementById('harmonien-base-hex').textContent = hex;
  document.getElementById('harmonien-base-preview').style.background = hex;

  const grid = document.getElementById('harmonien-grid');
  grid.textContent = '';

  const h = getHarmonies(hsl);
  grid.appendChild(renderHarmony('Komplementär', h.komplementaer, onSaveFavorit, onSaveSchema, onSetColor));
  grid.appendChild(renderHarmony('Analog', h.analog, onSaveFavorit, onSaveSchema, onSetColor));
  grid.appendChild(renderHarmony('Triade', h.triade, onSaveFavorit, onSaveSchema, onSetColor));
  grid.appendChild(renderHarmony('Split-Komplementär', h.splitKomplementaer, onSaveFavorit, onSaveSchema, onSetColor));
}

export function initHarmonien(onSaveFavorit, onSaveSchema, onSetColor) {
  document.addEventListener('colorChanged', () => render(onSaveFavorit, onSaveSchema, onSetColor));
  render(onSaveFavorit, onSaveSchema, onSetColor);
}