---

const fragments = [
  { src: '1.png', position: 0 },
  { src: '2.png', position: 1 },
  { src: '3.png', position: 2 },
  { src: '4.png', position: 3 }
];

const gridContainer = document.getElementById('grid');
const fragmentsContainer = document.getElementById('fragments');
const message = document.getElementById('message');

function renderGrid() {
  gridContainer.innerHTML = '';
  for (let i = 0; i < 4; i++) {
    const slot = document.createElement('div');
    slot.className = 'slot';
    slot.dataset.position = i;
    slot.addEventListener('dragover', e => e.preventDefault());
    slot.addEventListener('drop', drop);
    gridContainer.appendChild(slot);
  }
}

function renderFragments() {
  fragmentsContainer.innerHTML = '';
  const shuffled = [...fragments].sort(() => Math.random() - 0.5);

  shuffled.forEach(item => {
    const img = document.createElement('img');
    img.src = item.src;
    img.className = 'fragment';
    img.draggable = true;
    img.dataset.position = item.position;
    img.addEventListener('dragstart', e => {
      e.dataTransfer.setData('text/plain', item.position);
    });
    fragmentsContainer.appendChild(img);
  });
}

function drop(e) {
  e.preventDefault();
  let slot = e.target.classList.contains('slot') ? e.target : e.target.closest('.slot');
  if (!slot) return;

  const pos = e.dataTransfer.getData('text/plain');
  const draggedImg = document.querySelector(`.fragment[data-position="${pos}"]`);
  if (!draggedImg) return;

  if (slot.children.length > 0) {
    fragmentsContainer.appendChild(slot.children[0]);
  }

  slot.appendChild(draggedImg);
  checkCompletion();
}

function checkCompletion() {
  const slots = document.querySelectorAll('.slot');
  let correct = 0;
  let filled = 0;

  slots.forEach(slot => {
    const img = slot.querySelector('img');
    if (img) {
      filled++;
      if (img.dataset.position == slot.dataset.position) correct++;
    }
  });

  if (filled === 4) {
    if (correct === 4) {
      message.textContent = '✅ Картинка собрана!';
      message.className = 'success';
    } else {
      message.textContent = '❌ Неправильно!';
      message.className = 'error';
    }
  } else {
    message.textContent = '';
    message.className = '';
  }
}

function submitAuth() {
  const user = document.getElementById('username').value.trim();
  const pass = document.getElementById('password').value.trim();

  if (!user || !pass) {
    alert('Заполните логин и пароль!');
    return;
  }

  if (!message.classList.contains('success')) {
    alert('Сначала правильно соберите капчу!');
    return;
  }

  alert('Успешный вход! Добро пожаловать, ' + user);
}

document.addEventListener('DOMContentLoaded', () => {
  renderGrid();
  renderFragments();
});