const clock = document.querySelector('#clock');
const terminal = document.querySelector('#terminal');
const input = document.querySelector('#key');
const feedback = document.querySelector('#feedback');
const reveal = document.querySelector('#reveal');

setInterval(() => {
  clock.textContent = new Date().toLocaleTimeString('en-GB', { hour12: false });
}, 1000);

document.querySelectorAll('.fragment').forEach((fragment) => {
  fragment.addEventListener('click', () => {
    fragment.classList.toggle('open');
    const decoded = [...fragment.querySelector('span').textContent.matchAll(/\d+/g)]
      .map(([n]) => String.fromCharCode(64 + Number(n))).join('');
    fragment.querySelector('i').textContent = fragment.classList.contains('open') ? `DECODED: ${decoded}` : 'tap to inspect';
  });
});

terminal.addEventListener('submit', (event) => {
  event.preventDefault();
  if (input.value.trim().toUpperCase() === 'TRUTH') {
    feedback.textContent = 'ACCESS GRANTED // DECRYPTING…';
    feedback.className = 'success';
    document.body.classList.add('decrypting');
    setTimeout(() => {
      reveal.classList.add('show');
      reveal.setAttribute('aria-hidden', 'false');
    }, 650);
  } else {
    feedback.textContent = 'ACCESS DENIED // READ THE THREE DECODED WORDS';
    terminal.classList.remove('shake');
    void terminal.offsetWidth;
    terminal.classList.add('shake');
    input.select();
  }
});

document.querySelector('.close').addEventListener('click', () => {
  reveal.classList.remove('show');
  reveal.setAttribute('aria-hidden', 'true');
});

document.addEventListener('keydown', (event) => {
  if (event.key === 'Escape') document.querySelector('.close').click();
});