const descriptions = ['Text Description 1', 'Text Description 2', 'Text Description 3', 'Text Description 4'];
const models = ['AR', 'FM', 'FM_VAE', 'GT'];

function createSection1Table() {
  let table = '<table><thead><tr><th>Text Description</th>';
  models.forEach(model => table += `<th>${model}</th>`);
  table += '</tr></thead><tbody>';

  descriptions.forEach((desc, idx) => {
    table += `<tr><td>${desc}</td>`;
    models.forEach(model => {
      const audioSrc = `section1/audio/text${idx+1}_${model.toLowerCase()}.wav`;
      table += `<td><audio controls src="${audioSrc}"></audio></td>`;
    });
    table += '</tr>';
  });

  table += '</tbody></table>';
  document.getElementById('section1').innerHTML = table;
}

function createSectionWithObj(sectionId, sectionPath) {
  let table = '<table><thead><tr><th>Text Description</th>';
  models.forEach(model => table += `<th>${model}</th>`);
  table += '</tr></thead><tbody>';

  descriptions.forEach((desc, idx) => {
    table += `<tr><td>${desc}</td>`;
    models.forEach(model => {
      const audioSrc = `${sectionPath}/audio/text${idx+1}_${model.toLowerCase()}.wav`;
      const imageSrc = `${sectionPath}/images/text${idx+1}_${model.toLowerCase()}.png`;
      table += `<td>
        <canvas id="canvas_${sectionId}_${idx+1}_${model}" width="200" height="100" style="border:1px solid #ccc;"></canvas>
        <audio id="audio_${sectionId}_${idx+1}_${model}" controls src="${audioSrc}"></audio>
      </td>`;
    });
    table += '</tr>';
  });

  table += '</tbody></table>';
  document.getElementById(sectionId).innerHTML = table;
}

function setupWaveformOverlay(sectionId) {
  descriptions.forEach((desc, idx) => {
    models.forEach(model => {
      const canvas = document.getElementById(`canvas_${sectionId}_${idx+1}_${model}`);
      const ctx = canvas.getContext('2d');
      const img = new Image();
      img.src = `${sectionId}/images/text${idx+1}_${model.toLowerCase()}.png`;
      img.onload = () => ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

      const audio = document.getElementById(`audio_${sectionId}_${idx+1}_${model}`);

      let interval;
      audio.addEventListener('play', () => {
        interval = setInterval(() => {
          const x = (audio.currentTime / audio.duration) * canvas.width;
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
          ctx.beginPath();
          ctx.moveTo(x, 0);
          ctx.lineTo(x, canvas.height);
          ctx.strokeStyle = 'red';
          ctx.stroke();
        }, 30);
      });

      audio.addEventListener('pause', () => clearInterval(interval));
      audio.addEventListener('ended', () => clearInterval(interval));
    });
  });
}

createSection1Table();
createSectionWithObj('section2', 'section2');
createSectionWithObj('section3', 'section3');

window.onload = () => {
  setupWaveformOverlay('section2');
  setupWaveformOverlay('section3');
};