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

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

notify('started');

const tasks = [
  { prompt: 'Digite exatamente: computador', target: 'computador', placeholder: 'computador' },
  { prompt: 'Digite exatamente: 2026', target: '2026', placeholder: '2026' },
  { prompt: 'Digite exatamente: dados são poder', target: 'dados são poder', placeholder: 'dados são poder' },
  { prompt: 'Digite exatamente: tecnologia popular', target: 'tecnologia popular', placeholder: 'tecnologia popular' },
  { prompt: 'Digite exatamente: soberania digital', target: 'soberania digital', placeholder: 'soberania digital' },
  { prompt: 'Digite exatamente: estou aprendendo tecnologia', target: 'estou aprendendo tecnologia', placeholder: 'estou aprendendo tecnologia' },
];

let current = 0;

const taskLabel = document.getElementById('taskLabel');
const stepLabel = document.getElementById('stepLabel');
const textInput = document.getElementById('textInput');
const feedback = document.getElementById('feedback');
const confirmBtn = document.getElementById('confirmBtn');
const successBanner = document.getElementById('successBanner');
const formWrap = document.getElementById('formWrap');

function showTask() {
  const task = tasks[current];
  stepLabel.textContent = `Passo ${current + 1} de ${tasks.length}`;
  taskLabel.textContent = task.prompt;
  textInput.value = '';
  textInput.placeholder = task.placeholder;
  feedback.textContent = '';
  textInput.focus();
}

function checkInput() {
  const task = tasks[current];
  const value = textInput.value;
  confirmBtn.disabled = value !== task.target;
  if (!value) {
    feedback.textContent = '';
    return;
  }
  feedback.textContent = value === task.target ? 'Correto! Pode avançar.' : 'Confira letras, acentos e espaços.';
  feedback.className = value === task.target ? 'text-base text-emerald-700 font-semibold' : 'text-base text-rose-600 font-semibold';
}

textInput.addEventListener('input', checkInput);

document.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' && !confirmBtn.disabled) {
    e.preventDefault();
    confirmBtn.click();
  }
});

confirmBtn.addEventListener('click', () => {
  notify('running', { step: current + 1 });
  current += 1;
  if (current >= tasks.length) {
    formWrap.classList.add('hidden');
    successBanner.classList.remove('hidden');
    lucide.createIcons();
    notify('success', { score: 100 });
    notify('completed', { score: 100 });
    return;
  }
  showTask();
  confirmBtn.disabled = true;
});

confirmBtn.disabled = true;
showTask();
