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 completed = 0;
const TOTAL_TARGETS = 5;

notify('started');

function placeTarget() {
  const SIZE = 80;
  const maxX = arena.clientWidth - SIZE - 20;
  const maxY = arena.clientHeight - SIZE - 20;
  const x = Math.floor(Math.random() * maxX) + 10;
  const y = Math.floor(Math.random() * maxY) + 10;
  
  const target = document.createElement('button');
  target.className = 'absolute w-16 h-16 bg-gradient-to-br from-red-500 to-red-600 rounded-full shadow-lg hover:scale-110 transition-transform';
  target.style.width = `${SIZE}px`;
  target.style.height = `${SIZE}px`;
  target.style.left = `${x}px`;
  target.style.top = `${y}px`;
  
  const bullseye = document.createElement('div');
  bullseye.className = 'absolute inset-0 flex items-center justify-center';
  bullseye.innerHTML = '<div class="w-6 h-6 bg-white rounded-full"></div>';
  target.appendChild(bullseye);
  
  arena.appendChild(target);
  
  target.addEventListener('click', () => {
    target.remove();
    completed++;
    notify('running', { step: completed });
    
    if (completed < TOTAL_TARGETS) {
      setTimeout(() => placeTarget(), 300);
    } else {
      arena.classList.add('hidden');
      banner.classList.remove('hidden');
      lucide.createIcons();
      notify('success', { score: 100 });
      notify('completed', { score: 100 });
    }
  });
}

placeTarget();
