// EN: UI utility functions for the 3D printing web application.
//     - Handles notifications, language switching, select population, and result table state.
// DE: UI-Hilfsfunktionen für die 3D-Druck-Webanwendung.
//     - Verwaltet Benachrichtigungen, Sprachumschaltung, Select-Befüllung und Tabellenstatus.

import { translations } from './config.js';
import { triggerCalculation } from './api.js';

/**
 * EN: Show a non-intrusive notification at the bottom of the screen.
 * DE: Zeigt eine nicht aufdringliche Benachrichtigung am unteren Bildschirmrand an.
 * @param {string} message
 * @param {object} dom
 * @param {'error' | 'success' | 'info'} type
 */
export function showNotification(message, dom, type = 'error') {
  if (!dom.notification) return;
  dom.notification.textContent = message;
  dom.notification.className = `notification show ${type}`;

  setTimeout(() => {
    dom.notification.classList.remove('show');
  }, 5000);
}

/**
 * EN: Update all UI text elements according to the selected language.
 * DE: Aktualisiert alle UI-Text-Elemente entsprechend der gewählten Sprache.
 * @param {string} lang
 * @param {object} dom
 */
export function setLanguage(lang, dom) {
  localStorage.setItem('preferredLanguage', lang);
  document.documentElement.lang = lang; // Esto sigue siendo global

  dom.root.querySelectorAll('[data-translate-key]').forEach(element => {
    const key = element.getAttribute('data-translate-key');
    const translation = translations[lang]?.[key];

    if (translation) {
      if (key === 'languageSelectorTooltip') {
        element.setAttribute('title', translation);
      } else {
        element.textContent = translation;
      }
    }
  });
}

/**
 * EN: Fill a <select> element with options.
 * DE: Füllt ein <select>-Element mit Optionen.
 * @param {HTMLSelectElement} selectElement
 * @param {string[]} items
 */
export function fillSelect(selectElement, items) {
  if (!selectElement) return;
  selectElement.length = 1; // Alte Optionen löschen, die erste Option bleibt erhalten
  items.forEach(item => {
    selectElement.add(new Option(item, item));
  });
}

/**
 * EN: Manage the state of the results table.
 * DE: Verwalten des Status der Ergebnistabelle.
 * @param {'loading' | 'reset' | 'success'} state
 * @param {object} dom
 * @param {object} [data=null]
 */
export function setResultsState(state, dom, data = null) {
  const lang = dom.languageSelect.value;
  const calculatingText = translations[lang].calculating;

  if (state === 'loading') {
    Object.values(dom.results).forEach(el => { if (el) el.textContent = calculatingText });
  } else if (state === 'reset') {
    Object.values(dom.results).forEach(el => { if (el) el.textContent = '-' });
  } else if (state === 'success' && data) {
    dom.results.dimensions.textContent = data.abmessungen;
    dom.results.volume.textContent = `${data.volumen_cm3} cm³`;
    dom.results.weight.textContent = `${data.material_gewicht_g} g`;
    dom.results.cost.textContent = `€ ${data.druckkosten_eur}`;
  }
}

/**
 * EN: Initialize the logic for the custom file input.
 * DE: Initialisiert die Logik für die benutzerdefinierte Dateieingabe.
 * @param {object} dom
 */
export function initializeCustomFileInput(dom) {
  if (dom.customFileButton && dom.fileInput && dom.fileNameSpan) {
    dom.customFileButton.addEventListener('click', () => dom.fileInput.click());

    dom.fileInput.addEventListener('change', () => {
      if (dom.fileInput.files.length > 0) {
        dom.fileNameSpan.textContent = dom.fileInput.files[0].name;
        dom.fileNameSpan.removeAttribute('data-translate-key');
      } else {
        dom.fileNameSpan.setAttribute('data-translate-key', 'noFileSelected');
        setLanguage(dom.languageSelect.value, dom);
      }
    });
  }
}

/**
 * EN: Fill the material popup grid with grouped data from the server.
 * DE: Füllt das Material-Popup-Raster mit gruppierten Daten vom Server.
 * @param {Object.<string, Array<object>>} groupedMaterials
 * @param {object} dom
 */
export function populateMaterialGrid(groupedMaterials, dom) {
  if (!dom.material.grid) return;
  dom.material.grid.innerHTML = ''; // Vorheriges Raster leeren

  // --- BEGINN DER NEUEN GRUPPIERUNGS-LOGIK ---

  // Iterieren über jeden MATERIALTYP (z.B. "PLA", "ABS")
  for (const materialType in groupedMaterials) {
    // 1. Erstellen des Containers für die Gruppe
    const groupContainer = document.createElement('div');
    groupContainer.className = 'material-group';

    // 2. Erstellen und Hinzufügen des Gruppentitels (z.B. "PLA")
    const groupTitle = document.createElement('h4');
    groupTitle.className = 'material-group-title';
    groupTitle.textContent = materialType;
    groupContainer.appendChild(groupTitle);

    // 3. Erstellen eines Containers für die Elemente dieser Gruppe
    const itemsGrid = document.createElement('div');
    itemsGrid.className = 'material-items-container'; // Wir verwenden dies für das Layout des Rasters

    // 4. Iterieren über die Materialien INNERHALB dieser Gruppe
    const materials = groupedMaterials[materialType];
    materials.forEach(material => {
      const item = document.createElement('div');
      item.className = 'material-item';
      item.setAttribute('data-material-name', material.name);

      const img = document.createElement('img');
      img.src = material.image_link;
      img.alt = material.name;
      // Wir zeigen die Kosten und den Lagerbestand im Tooltip an, um mehr Informationen zu geben
      img.title = `${material.name}\nCosto: €${material.cost_kg}/kg\nStock: ${material.stock_kg} kg`;

      const name = document.createElement('span');
      name.textContent = material.name;

      item.appendChild(img);
      item.appendChild(name);

      item.addEventListener('click', () => {
        dom.root.dataset.selectedMaterial = material.name;

        const buttonTextSpan = dom.material.selectButton.querySelector('span');
        if (buttonTextSpan) {
          buttonTextSpan.textContent = material.name;
          buttonTextSpan.removeAttribute('data-translate-key');
        }

        dom.material.popup.style.display = 'none';
        triggerCalculation(dom);
      });

      // Das Element zum INNEREN Raster der Gruppe hinzufügen
      itemsGrid.appendChild(item);
    });

    // 5. Die Raster der Elemente zum Container der Gruppe hinzufügen
    groupContainer.appendChild(itemsGrid);

    // 6. Den gesamten Gruppe zum Hauptgitter des Popups hinzufügen
    dom.material.grid.appendChild(groupContainer);
  }
  // --- ENDE DER NEUEN LOGIK ---
}

/**
 * EN: Initialize the logic for the material selection popup.
 * DE: Initialisiert die Logik für das Materialauswahl-Popup.
 * @param {object} dom
 */
export function initializeMaterialPopup(dom) {
  const button = dom.material.selectButton;
  const popup = dom.material.popup;
  const closeButton = dom.material.closeButton;

  if (!button || !popup || !closeButton) return;

  button.addEventListener('click', (event) => {
    event.stopPropagation();

    const isVisible = popup.style.display === 'block';
    if (isVisible) {
      popup.style.display = 'none';
    } else {
      const buttonRect = button.getBoundingClientRect();
      popup.style.top = `${buttonRect.bottom + window.scrollY + 5}px`;
      popup.style.left = `${buttonRect.left + window.scrollX}px`;

      // --- ANFANG DER ÄNDERUNG ---
      // Anstatt die Breite auf die des Buttons festzulegen, geben wir eine flexible Breite an.
      // Dies ermöglicht es dem Inhalt (den horizontalen Gruppen), sich auszudehnen.
      popup.style.minWidth = `${buttonRect.width}px`; // Mindestens die Breite des Buttons.
      popup.style.maxWidth = '90vw'; // Nicht mehr als 90% der Breite des Bildschirms.
      popup.style.width = 'auto'; // Die Breite passt sich dem Inhalt an.
      // --- ENDE DER ÄNDERUNG ---

      popup.style.display = 'block';
    }
  });

  closeButton.addEventListener('click', () => {
    popup.style.display = 'none';
  });

  window.addEventListener('click', () => {
    if (popup.style.display === 'block') {
      popup.style.display = 'none';
    }
  });

  popup.addEventListener('click', (event) => {
    event.stopPropagation();
  });
}