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

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

const tasks = [
  {
    initial: 'Tecnologia livr fortalece comunidades',
    expected: 'Tecnologia livre fortalece comunidades',
    text: 'Falta uma letra no meio da palavra. Use as setas para posicionar o cursor e corrigir.',
    hint: 'Mova com → até depois de "livr" e adicione "e".',
  },
  {
    initial: 'Soberania digital protege os ddados da comunidade',
    expected: 'Soberania digital protege os dados da comunidade',
    text: 'Há uma letra repetida. Volte com as setas e corrija sem apagar tudo.',
    hint: 'Use ← para voltar até "ddados" e deixe apenas "dados".',
  },
];

let currentTask = 0;
notify('started');

const taskText = document.getElementById('taskText');
const taskHint = document.getElementById('taskHint');
const expectedText = document.getElementById('expectedText');
const editInput = document.getElementById('editInput');
const feedbackEl = document.getElementById('feedback');
const cursorPos = document.getElementById('cursorPos');
const progressDots = document.getElementById('progressDots');
const successBanner = document.getElementById('successBanner');
const taskBox = document.getElementById('taskBox');

tasks.forEach((_, i) => {
  const dot = document.createElement('div');
  dot.id = `dot-${i}`;
  dot.className = 'w-8 h-8 rounded-full border-2 border-gray-300 bg-gray-100 transition-all';
  progressDots.appendChild(dot);
});

function showTask() {
  const t = tasks[currentTask];
  taskText.textContent = t.text;
  taskHint.textContent = t.hint;
  expectedText.textContent = t.expected;
  editInput.value = t.initial;
  editInput.setSelectionRange(0, 0);
  feedbackEl.classList.add('hidden');
  editInput.focus();
}
showTask();

editInput.addEventListener('keyup', () => {
  cursorPos.textContent = editInput.selectionStart;
});
editInput.addEventListener('click', () => {
  cursorPos.textContent = editInput.selectionStart;
});

editInput.addEventListener('input', () => {
  const t = tasks[currentTask];
  if (editInput.value === t.expected) {
    feedbackEl.textContent = 'Correto!';
    feedbackEl.className = 'text-2xl font-bold py-1 text-center text-green-600';
    feedbackEl.classList.remove('hidden');
    const dot = document.getElementById(`dot-${currentTask}`);
    if (dot) dot.className = 'w-8 h-8 rounded-full bg-green-400 border-2 border-green-500 transition-all';
    notify('running', { step: currentTask + 1 });
    currentTask++;
    setTimeout(() => {
      if (currentTask >= tasks.length) {
        taskBox.classList.add('hidden');
        progressDots.classList.add('hidden');
        successBanner.classList.remove('hidden');
        lucide.createIcons();
        notify('success', { score: 100 });
        notify('completed', { score: 100 });
      } else {
        showTask();
      }
    }, 800);
  }
});
