const output = document.getElementById('output');
const arrInput = document.getElementById('array-input');
const methodInput = document.getElementById('method-input');
const runBtn = document.getElementById('run-btn');

// List of known mutating methods (they change the original array)
const mutatingMethods = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'];

runBtn.addEventListener('click', () => {
  let arr;
  try {
    arr = JSON.parse(arrInput.value);
    if (!Array.isArray(arr)) throw new Error();
  } catch {
    output.textContent = 'Invalid array! Use something like [1, 2, 3]';
    return;
  }

  const expr = methodInput.value.trim();
  if (!expr) {
    output.textContent = 'Enter a method to run, like map(x => x * 2)';
    return;
  }

  const methodName = expr.split('(')[0].split('.')[0];

  try {
    let result;
    if (mutatingMethods.includes(methodName)) {
      // Use actual array so we can mutate it
      const copy = [...arr];
      const fn = new Function('arr', `arr.${expr}; return arr`);
      result = fn(copy);
    } else {
      // Non-mutating methods
      const fn = new Function('arr', `return arr.${expr}`);
      result = fn([...arr]);
    }

    output.textContent =
      `Original: ${JSON.stringify(arr)} \n\nAfter .${expr}: ${JSON.stringify(result)}`;
  } catch (e) {
    output.textContent = `❌ Error: ${e.message}`;
  }
});