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

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

const dialogs = [
  {
    title: 'Salvar arquivo',
    question: 'Deseja salvar o arquivo?',
    instruction: 'Pressione Enter para SIM (salvar) ou Esc para NÃO (cancelar)',
    expected: 'Enter',
    feedback: 'Arquivo salvo! Enter confirma!',
  },
  {
    title: 'Fechar janela',
    question: 'Tem certeza que quer fechar?',
    instruction: 'Pressione Esc para fechar (cancelar a ação)',
    expected: 'Escape',
    feedback: 'Janela fechada! Esc cancela!',
  },
  {
    title: 'Enviar mensagem',
    question: 'Enviar esta mensagem?',
    instruction: 'Pressione Enter para confirmar o envio',
    expected: 'Enter',
    feedback: 'Mensagem enviada! Enter confirma!',
  },
  {
    title: 'Descartar rascunho',
    question: 'Apagar o rascunho sem salvar?',
    instruction: 'Pressione Esc para cancelar (não apagar)',
    expected: 'Escape',
    feedback: 'Rascunho mantido! Esc cancela a ação!',
  },
];

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

const dialogTitle = document.getElementById('dialogTitle');
const dialogQuestion = document.getElementById('dialogQuestion');
const dialogInstruction = document.getElementById('dialogInstruction');
const feedbackEl = document.getElementById('feedback');
const progressDots = document.getElementById('progressDots');
const successBanner = document.getElementById('successBanner');
const dialogBox = document.getElementById('dialogBox');
let locked = false;

dialogs.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 showDialog() {
  const d = dialogs[currentDialog];
  dialogTitle.textContent = d.title;
  dialogQuestion.textContent = d.question;
  dialogInstruction.textContent = d.instruction;
  feedbackEl.classList.add('hidden');
  locked = false;
}
showDialog();

document.addEventListener('keydown', (e) => {
  if (locked) return;
  if (e.key !== 'Enter' && e.key !== 'Escape') return;
  const d = dialogs[currentDialog];
  if (e.key === d.expected) {
    locked = true;
    feedbackEl.textContent = d.feedback;
    feedbackEl.className = 'text-2xl font-bold py-1 text-center text-green-600';
    feedbackEl.classList.remove('hidden');
    const dot = document.getElementById(`dot-${currentDialog}`);
    if (dot) dot.className = 'w-8 h-8 rounded-full bg-green-400 border-2 border-green-500 transition-all';
    notify('running', { step: currentDialog + 1 });
    currentDialog++;
    setTimeout(() => {
      if (currentDialog >= dialogs.length) {
        dialogBox.classList.add('hidden');
        progressDots.classList.add('hidden');
        successBanner.classList.remove('hidden');
        lucide.createIcons();
        notify('success', { score: 100 });
        notify('completed', { score: 100 });
      } else {
        showDialog();
      }
    }, 1000);
  } else {
    feedbackEl.textContent = e.key === 'Enter' ? 'Aqui não é Enter! Use Esc.' : 'Aqui não é Esc! Use Enter.';
    feedbackEl.className = 'text-2xl font-bold py-1 text-center text-red-500';
    feedbackEl.classList.remove('hidden');
  }
});
