document.addEventListener('DOMContentLoaded', () => {
  const gridContainer = document.querySelector('.grid-container');
  const gridSize = 5;
  let selectedIndices = [];

  if (!gridContainer) return;

  // Grid dynamisch erstellen
  const fragment = document.createDocumentFragment();
  for (let i = 0; i < gridSize * gridSize; i++) {
    const gridItem = document.createElement('div');
    gridItem.classList.add('grid-cell');
    gridItem.dataset.index = i;
    gridItem.addEventListener('click', () => toggleCell(i));
    fragment.appendChild(gridItem);
  }
  gridContainer.appendChild(fragment);

  function toggleCell(index) {
    const gridItem = gridContainer.querySelector(`.grid-cell[data-index="${index}"]`);
    if (!gridItem) return;

    if (selectedIndices.includes(index)) {
      // Entfernen, falls bereits ausgewählt
      selectedIndices = selectedIndices.filter(cell => cell !== index);
      gridItem.classList.remove('selected');
    } else if (isSelectable(index)) {
      // Wählen, wenn erste oder angrenzende Zelle
      selectedIndices.push(index);
      gridItem.classList.add('selected');
    } else {
      // Invalid, Auswahl zurücksetzen
      resetSelection(index);
    }
    validateSelection();
    saveSelection();
  }

  function isSelectable(index) {
    return selectedIndices.length === 0 || selectedIndices.some(selected => isAdjacent(index, selected));
  }

  function resetSelection(index) {
    selectedIndices = [index];
    resetGrid();
    gridContainer.querySelector(`.grid-cell[data-index="${index}"]`)?.classList.add('selected');
  }

  function isAdjacent(index1, index2) {
    const rowDiff = Math.abs(Math.floor(index1 / gridSize) - Math.floor(index2 / gridSize));
    const colDiff = Math.abs(index1 % gridSize - index2 % gridSize);
    return (rowDiff === 1 && colDiff === 0) || (rowDiff === 0 && colDiff === 1);
  }

  function validateSelection() {
    if (selectedIndices.length <= 1) return;

    const validSelection = [selectedIndices[0]];
    const remainingCells = selectedIndices.slice(1);

    while (remainingCells.length > 0) {
      let foundAdjacent = false;

      for (let i = 0; i < remainingCells.length; i++) {
        if (validSelection.some(selected => isAdjacent(remainingCells[i], selected))) {
          validSelection.push(remainingCells[i]);
          remainingCells.splice(i, 1);
          foundAdjacent = true;
          break;
        }
      }

      if (!foundAdjacent) {
        selectedIndices = validSelection;
        resetGrid();
        highlightSelection();
        return;
      }
    }

    selectedIndices = validSelection;
    highlightSelection();
  }

  function resetGrid() {
    gridContainer.querySelectorAll('.grid-cell').forEach(cell => cell.classList.remove('selected'));
  }

  function highlightSelection() {
    selectedIndices.forEach(index => {
      gridContainer.querySelector(`.grid-cell[data-index="${index}"]`)?.classList.add('selected');
    });
  }

  function saveSelection() {
    const gridDataInput = document.getElementById(gridContainer.dataset.fieldId);
    if (gridDataInput) {
      gridDataInput.value = JSON.stringify(selectedIndices);
    }
  }
});