'use strict';

/**
 * Rendert die Drift-Matrix basierend auf matrix_data.
 * @param {Array<{ quadrant: string, warn_reasons: string[], counts: number }>} matrix_data
 */
export function renderMatrix(matrix_data = []) {
  const container = document.getElementById('matrix-container');
  if (!container) return;

  container.innerHTML = '';

  const grid = document.createElement('div');
  grid.className = 'drift-matrix__grid';

  matrix_data.forEach((cellData) => {
    const cell = document.createElement('div');
    cell.className = 'drift-matrix__cell';
    cell.setAttribute('data-quadrant', cellData.quadrant);
    cell.setAttribute('tabindex', '0');
    cell.setAttribute('role', 'button');
    cell.setAttribute('aria-label', `Quadrant ${cellData.quadrant}, Warnanzahl ${cellData.counts}`);

    const intensity = Math.min(cellData.counts / 100, 1);
    cell.style.backgroundColor = `rgba(255, 0, 0, ${intensity})`;

    const label = document.createElement('span');
    label.className = 'drift-matrix__label';
    label.textContent = cellData.quadrant;
    cell.appendChild(label);

    cell.addEventListener('click', () => updateDetailPanel(cellData));

    // Tooltip-Info
    cell.title = `${cellData.warn_reasons.join(', ')}\nAnzahl: ${cellData.counts}`;

    grid.appendChild(cell);
  });

  container.appendChild(grid);
}

/**
 * Zeigt Details zu einem ausgewählten Quadranten an.
 * @param {{ quadrant: string, warn_reasons: string[], counts: number }} quadrantData
 */
export function updateDetailPanel(quadrantData) {
  const panel = document.getElementById('detail-panel');
  if (!panel) return;

  panel.innerHTML = '';

  const title = document.createElement('h3');
  title.textContent = `Quadrant ${quadrantData.quadrant}`;

  const countInfo = document.createElement('p');
  countInfo.textContent = `Warnungen insgesamt: ${quadrantData.counts}`;

  const listTitle = document.createElement('h4');
  listTitle.textContent = 'Warnursachen:';

  const list = document.createElement('ul');
  quadrantData.warn_reasons.forEach((reason) => {
    const li = document.createElement('li');
    li.textContent = reason;
    list.appendChild(li);
  });

  panel.appendChild(title);
  panel.appendChild(countInfo);
  panel.appendChild(listTitle);
  panel.appendChild(list);
}

/**
 * Initialisiert das UI.
 * @param {Array} initialData
 */
export function initApp(initialData) {
  renderMatrix(initialData);
}

/**
 * Wird aufgerufen, wenn ein neuer Run ausgewählt wurde.
 * @param {Array} newData
 */
export function handleRunChange(newData) {
  renderMatrix(newData);
}