const channelToken = new URLSearchParams(window.location.hash.slice(1)).get('channelToken');

function notify(type, payload = {}) {
  window.parent.postMessage({ type, token: channelToken, ...payload }, '*');
}

const arena = document.getElementById('arena');
const banner = document.getElementById('successBanner');

let filesPlaced = 0;
const TOTAL_FILES = 6;

notify('started');

// Create drop zone (folder)
const dropZone = document.createElement('div');
dropZone.className = 'absolute bottom-10 right-10 w-48 h-48 bg-yellow-100 border-4 border-yellow-300 rounded-xl flex flex-col items-center justify-center transition-all';
dropZone.innerHTML = `
  <i data-lucide="folder" class="w-24 h-24 text-yellow-600 mb-2"></i>
  <p class="text-lg font-bold text-gray-800">Meus Arquivos</p>
`;
arena.appendChild(dropZone);
lucide.createIcons();

// Create draggable files
const fileTypes = [
  { icon: 'file-text', color: 'red', name: 'Texto.txt' },
  { icon: 'image', color: 'purple', name: 'Foto.jpg' },
  { icon: 'music', color: 'green', name: 'Musica.mp3' },
  { icon: 'video', color: 'blue', name: 'Video.mp4' },
  { icon: 'file-code', color: 'orange', name: 'Codigo.js' },
  { icon: 'file-archive', color: 'gray', name: 'Arquivo.zip' },
];

fileTypes.forEach((file, i) => {
  createDraggableFile(file, i);
});

function createDraggableFile(file, index) {
  const fileEl = document.createElement('div');
  fileEl.className = `absolute w-24 h-24 bg-white border-2 border-gray-300 rounded-lg flex flex-col items-center justify-center cursor-grab shadow-lg transition-all hover:shadow-xl`;
  const row = Math.floor(index / 3);
  const col = index % 3;
  fileEl.style.left = `${50 + col * 110}px`;
  fileEl.style.top = `${50 + row * 110}px`;
  fileEl.innerHTML = `
    <i data-lucide="${file.icon}" class="w-8 h-8 text-${file.color}-500 mb-1"></i>
    <p class="text-xs font-semibold text-gray-700">${file.name}</p>
  `;
  fileEl.draggable = true;
  
  arena.appendChild(fileEl);
  lucide.createIcons();
  
  fileEl.addEventListener('dragstart', (e) => {
    fileEl.classList.add('dragging');
    e.dataTransfer.effectAllowed = 'move';
  });
  
  fileEl.addEventListener('dragend', () => {
    fileEl.classList.remove('dragging');
  });
}

dropZone.addEventListener('dragover', (e) => {
  e.preventDefault();
  dropZone.classList.add('ring-4', 'ring-green-400', 'scale-105');
});

dropZone.addEventListener('dragleave', () => {
  dropZone.classList.remove('ring-4', 'ring-green-400', 'scale-105');
});

dropZone.addEventListener('drop', (e) => {
  e.preventDefault();
  dropZone.classList.remove('ring-4', 'ring-green-400', 'scale-105');
  
  const dragging = document.querySelector('.dragging');
  if (dragging) {
    dragging.remove();
    filesPlaced++;
    notify('running', { step: filesPlaced });
    
    if (filesPlaced >= TOTAL_FILES) {
      arena.classList.add('hidden');
      banner.classList.remove('hidden');
      lucide.createIcons();
      notify('success', { score: 100 });
      notify('completed', { score: 100 });
    }
  }
});
