import { isCorrectTotal, isCorrectEquation, hasReasoningEvidence } from './src/session.mjs';

const groups = document.querySelector('#groups');
const addPair = document.querySelector('#add-pair');
const buildFeedback = document.querySelector('#build-feedback');
const totalRow = document.querySelector('#total-row');
const total = document.querySelector('#total');
const totalFeedback = document.querySelector('#total-feedback');
const activity2 = document.querySelector('#activity-2');
const activity3 = document.querySelector('#activity-3');
const equation = document.querySelector('#equation');
const equationFeedback = document.querySelector('#equation-feedback');
const reasoning = document.querySelector('#reasoning');
const reasoningFeedback = document.querySelector('#reasoning-feedback');

let pairsAdded = 0;

function feedback(element, message, kind = '') {
  element.textContent = message;
  element.className = `feedback ${kind}`;
}

function renderGroups() {
  groups.innerHTML = '';
  for (let i = 1; i <= 7; i += 1) {
    const group = document.createElement('div');
    group.className = 'group';
    group.innerHTML = `<span>Person ${i}</span><div class="shoes">${i <= pairsAdded ? '👟 👟' : '· ·'}</div>`;
    groups.append(group);
  }
}

function reveal(activity, progressId) {
  activity.hidden = false;
  document.querySelector(progressId).classList.add('active');
  activity.scrollIntoView({ behavior: 'smooth', block: 'start' });
}

renderGroups();

addPair.addEventListener('click', () => {
  if (pairsAdded < 7) pairsAdded += 1;
  renderGroups();
  if (pairsAdded === 7) {
    addPair.disabled = true;
    addPair.textContent = 'All 7 pairs are built';
    feedback(buildFeedback, 'Nice work. You built 7 equal groups of 2 shoes.', 'good');
    totalRow.hidden = false;
    total.focus();
  } else {
    feedback(buildFeedback, `${pairsAdded} of 7 pairs built. Keep going.`);
  }
});

document.querySelector('#check-total').addEventListener('click', () => {
  if (isCorrectTotal(total.value)) {
    feedback(totalFeedback, 'Yes—7 groups of 2 make 14 shoes.', 'good');
    reveal(activity2, '#progress-2');
    equation.focus();
  } else {
    feedback(totalFeedback, 'Try counting by twos: 2, 4, 6…', 'bad');
  }
});

document.querySelector('#check-equation').addEventListener('click', () => {
  if (isCorrectEquation(equation.value)) {
    feedback(equationFeedback, 'Correct. Multiplication is a quick way to name equal groups.', 'good');
    reveal(activity3, '#progress-3');
    reasoning.focus();
  } else {
    feedback(equationFeedback, 'Use the numbers 7, 2, and 14. Either order for the factors works.', 'bad');
  }
});

document.querySelector('#check-reasoning').addEventListener('click', () => {
  if (hasReasoningEvidence(reasoning.value)) {
    feedback(reasoningFeedback, 'Session complete! You used equal groups and multiplication to explain your answer.', 'good');
  } else {
    feedback(reasoningFeedback, 'Add how many groups there were, how many were in each group, and the total of 14.', 'bad');
  }
});