function getWeightedNumber() {
  const rand = Math.random();
  if (rand < 0.10) {
    return Math.floor(Math.random() * 9) + 1;       // 1 to 9 (10% chance)
  } else if (rand < 0.55) {
    return Math.floor(Math.random() * 90) + 10;     // 10 to 99 (45% chance)
  } else {
    return Math.floor(Math.random() * 900) + 100;    // 100 to 999 (45% chance)
  }
}

num1 = getWeightedNumber()
num2 = getWeightedNumber()
product = num1 * num2

// Create a custom interactive form wrapper element
viewof submission = {
  const form = document.createElement("div");
  form.className = "multiplication-card";
  
  form.innerHTML = `
    <div>Calculate the product: <strong>${num1.toLocaleString()} ×${num2.toLocaleString()}</strong></div>
    <div style="display: flex; flex-direction: column; gap: 5px;">
      <label style="font-size: 0.9rem; font-weight: 500;">Your Answer:</label>
      <input type="text" placeholder="Enter product..." autocomplete="off" />
    </div>
    <div class="button-group">
      <button type="button" class="submit-btn">Submit</button>
      <button type="button" class="refresh-btn">Refresh for another</button>
    </div>
  `;

  const inputEl = form.querySelector("input");
  const submitBtnEl = form.querySelector(".submit-btn");
  const refreshBtnEl = form.querySelector(".refresh-btn");

  // Initial state
  form.value = { answer: null, count: 0 };

  let submitCount = 0;

  const triggerSubmit = () => {
    let val = inputEl.value;
    if (!val || val.trim() === "") return;
    
    submitCount++;
    form.value = { 
      answer: val.trim(), 
      count: submitCount 
    };
    
    inputEl.value = "";
    inputEl.focus();

    form.dispatchEvent(new CustomEvent("input"));
  };

  submitBtnEl.onclick = triggerSubmit;
  refreshBtnEl.onclick = () => location.reload();
  
  inputEl.onkeydown = (e) => {
    if (e.key === "Enter") {
      e.preventDefault();
      triggerSubmit();
    }
  };

  return form;
}

// Evaluation block
{
  if (!submission || submission.answer === null) {
    return md``;
  }
  
  let parsed = parseInt(submission.answer.replace(/,/g, ''));
  
  if (parsed === product) {
    return md`<span style="color: #2e7d32; font-weight: bold;">✓ Correct! Excellent work.</span>`;
  } else {
    return md`<span style="color: #c62828; font-weight: bold;">✗ Not quite right. Give it another try!</span>`;
  }
}