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

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

const challenges = [
  { type: 'key', lucideIcon: 'keyboard', title: 'Etapa 1', target: 'G', hint: 'Encontre e pressione G', check: e => e.key.toUpperCase() === 'G' },
  { type: 'number', lucideIcon: 'hash', title: 'Etapa 2', target: '5', hint: 'Encontre e pressione 5', check: e => e.key === '5' },
  { type: 'upper', lucideIcon: 'arrow-big-up', title: 'Etapa 3', target: 'T', hint: 'Use Shift + T', check: e => e.key === 'T' && e.shiftKey },
  { type: 'symbol', lucideIcon: 'at-sign', title: 'Etapa 4', target: '@', hint: 'Use Shift + 2', check: e => e.key === '@' },
  { type: 'arrow', lucideIcon: 'move-vertical', title: 'Etapa 5', target: '↓', hint: 'Pressione a seta para baixo', check: e => e.key === 'ArrowDown' },
  { type: 'enter', lucideIcon: 'corner-down-left', title: 'Etapa 6', target: 'Enter', hint: 'Pressione Enter', check: e => e.key === 'Enter' },
  { type: 'esc', lucideIcon: 'x-circle', title: 'Etapa 7', target: 'Esc', hint: 'Pressione Esc', check: e => e.key === 'Escape' },
  { type: 'key', lucideIcon: 'trophy', title: 'Etapa 8', target: 'Z', hint: 'Pressione Z para concluir', check: e => e.key.toUpperCase() === 'Z' },
];

let idx = 0;
let locked = false;
notify('started');

const challengeIcon = document.getElementById('challengeIcon');
const challengeTitle = document.getElementById('challengeTitle');
const challengeTarget = document.getElementById('challengeTarget');
const challengeHint = document.getElementById('challengeHint');
const feedbackEl = document.getElementById('feedback');
const progressFill = document.getElementById('progressFill');
const progressLabel = document.getElementById('progressLabel');
const successBanner = document.getElementById('successBanner');
const challengeCard = document.getElementById('challengeCard');

const bgMap = {
  key: 'bg-fuchsia-50 border-fuchsia-300 text-fuchsia-700',
  upper: 'bg-orange-50 border-orange-300 text-orange-700',
  symbol: 'bg-amber-50 border-amber-300 text-amber-700',
  arrow: 'bg-teal-50 border-teal-300 text-teal-700',
  enter: 'bg-blue-50 border-blue-300 text-blue-700',
  esc: 'bg-gray-50 border-gray-300 text-gray-700',
  number: 'bg-green-50 border-green-300 text-green-700',
};

function showChallenge() {
  locked = false;
  const c = challenges[idx];
  // challengeIcon.innerHTML = `<i data-lucide="${c.lucideIcon}" class="w-16 h-16"></i>`;
  // lucide.createIcons();
  challengeTitle.textContent = c.title;
  const bg = bgMap[c.type] || bgMap.key;
  challengeTarget.className = `text-[6rem] font-black rounded-2xl px-8 py-4 border-4 text-center leading-none ${bg}`;
  challengeTarget.textContent = c.target;
  challengeHint.textContent = c.hint;
  feedbackEl.classList.add('hidden');
  progressFill.style.width = `${(idx / challenges.length) * 100}%`;
  progressLabel.textContent = `Etapa ${idx} de ${challenges.length}`;
}
showChallenge();

document.addEventListener('keydown', (e) => {
  if (locked) return;
  const c = challenges[idx];
  if (c.check(e)) {
    e.preventDefault();
    locked = true;
    feedbackEl.textContent = 'Correto!';
    feedbackEl.className = 'text-2xl font-bold py-1 text-center text-green-600';
    feedbackEl.classList.remove('hidden');
    idx++;
    notify('running', { step: idx });
    progressFill.style.width = `${(idx / challenges.length) * 100}%`;
    progressLabel.textContent = `Etapa ${idx} de ${challenges.length}`;
    setTimeout(() => {
      locked = false;
      if (idx >= challenges.length) {
        challengeCard.classList.add('hidden');
        progressFill.parentElement.parentElement.classList.add('hidden');
        successBanner.classList.remove('hidden');
        lucide.createIcons();
        notify('success', { score: 100 });
        notify('completed', { score: 100 });
      } else {
        showChallenge();
      }
    }, 700);
  }
  if (e.key === 'Enter' || e.key === 'Escape') e.preventDefault();
});
