(function () {
  const gradeEl = document.getElementById('grade');
  const subjectEl = document.getElementById('subject');
  const topicEl = document.getElementById('topic');
  const difficultyEl = document.getElementById('difficulty');
  const questionCountEl = document.getElementById('questionCount');
  const includeAnswerKeyEl = document.getElementById('includeAnswerKey');
  const previewBtn = document.getElementById('preview-btn');
  const generateBtn = document.getElementById('generate-btn');
  const generateNewBtn = document.getElementById('generate-new-btn');
  const statusMessageEl = document.getElementById('status-message');
  const previewEmptyEl = document.getElementById('preview-empty');
  const previewListEl = document.getElementById('preview-list');
  const previewMetaEl = document.getElementById('preview-meta');
  const downloadEmptyEl = document.getElementById('download-empty');
  const downloadLinksEl = document.getElementById('download-links');

  let lastPreviewResponse = null;

  document.addEventListener('DOMContentLoaded', function () {
    loadOptions();
    attachEventHandlers();
  });

  function attachEventHandlers() {
    previewBtn.addEventListener('click', handlePreview);
    generateBtn.addEventListener('click', handleGenerate);
    generateNewBtn.addEventListener('click', handleGenerateAnotherVersion);
    gradeEl.addEventListener('change', handleGradeChange);
  }

  async function loadOptions(selectedGrade = null) {
    setStatus('Loading worksheet options...', 'info');

    try {
      const gradeQuery = selectedGrade
        ? `?grade=${encodeURIComponent(selectedGrade)}`
        : '';

      const response = await fetch(`${API_URL}/api/product/worksheet/options${gradeQuery}`);

      if (!response.ok) {
        throw new Error('Failed to load worksheet options');
      }

      const data = await response.json();

      // Populate static dropdowns only once
      if (gradeEl.options.length <= 1) {
        populateSelect(gradeEl, data.grades || []);
      }

      if (subjectEl.options.length <= 1) {
        populateSelect(subjectEl, data.subjects || []);
      }

      if (difficultyEl.options.length <= 1) {
        populateSelect(difficultyEl, data.difficulties || []);
      }

      populateTopicSelect(topicEl, data.topics || []);

      clearStatus();
    } catch (error) {
      console.error('Error loading worksheet options:', error);
      setStatus('Could not load worksheet options. Please refresh and try again.', 'danger');
    }
  }

  async function handleGradeChange() {
    topicEl.value = '';
    await loadOptions(gradeEl.value);
  }

  function populateSelect(selectEl, values) {
    if (!selectEl) return;

    const firstOption = selectEl.querySelector('option')
      ? selectEl.querySelector('option').outerHTML
      : '<option value="">Select an option</option>';

    selectEl.innerHTML = firstOption;

    values.forEach(value => {
      const option = document.createElement('option');
      option.value = value;
      option.textContent = value;
      selectEl.appendChild(option);
    });
  }

  function populateTopicSelect(selectEl, topics) {
    if (!selectEl) return;

    const firstOption = selectEl.querySelector('option')
      ? selectEl.querySelector('option').outerHTML
      : '<option value="">Select topic</option>';

    selectEl.innerHTML = firstOption;

    topics.forEach(topic => {
      const option = document.createElement('option');
      option.value = topic.id;
      option.textContent = topic.label;
      selectEl.appendChild(option);
    });
  }

  function buildRequestPayload() {
    return {
      grade: gradeEl.value,
      subject: subjectEl.value,
      topic: topicEl.value,
      difficulty: difficultyEl.value,
      questionCount: Number(questionCountEl.value),
      includeAnswerKey: includeAnswerKeyEl.checked,
      layout: 'standard',
      seed: lastPreviewResponse && lastPreviewResponse.seed ? lastPreviewResponse.seed : null
    };
  }

  function validateForm() {
    if (!gradeEl.value || !subjectEl.value || !topicEl.value || !difficultyEl.value) {
      setStatus('Please choose grade, subject, topic, and difficulty.', 'warning');
      return false;
    }

    const questionCount = Number(questionCountEl.value);
    if (!questionCount || questionCount < 5 || questionCount > 20) {
      setStatus('Please enter a question count between 5 and 20.', 'warning');
      return false;
    }

    return true;
  }

  async function handlePreview() {
    if (!validateForm()) {
      return;
    }

    setBusy(true);
    setStatus('Generating preview...', 'info');
    clearPreview();

    try {
      const payload = buildRequestPayload();
      const response = await fetch(`${API_URL}/api/product/worksheet/preview`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(payload)
      });

      if (!response.ok) {
        throw new Error('Failed to generate preview');
      }

      const data = await response.json();
      lastPreviewResponse = data;
      renderPreview(data);
      setStatus('Preview ready. Review the questions, then generate the PDF.', 'success');
    } catch (error) {
      console.error('Error generating preview:', error);
      setStatus('Could not generate preview. Please try again.', 'danger');
    } finally {
      setBusy(false);
    }
  }

  async function handleGenerate() {
    await generateWorksheet(false);
  }

  async function handleGenerateAnotherVersion() {
    await generateWorksheet(true);
  }

  async function generateWorksheet(forceNewVersion) {
    if (!validateForm()) {
      return;
    }

    setBusy(true);
    setStatus(forceNewVersion ? 'Generating a new worksheet version...' : 'Generating worksheet PDF...', 'info');
    clearDownloads();

    try {
      const payload = buildRequestPayload();

      if (forceNewVersion) {
        payload.seed = null;
        lastPreviewResponse = null;
      }

      const response = await fetch(`${API_URL}/api/product/worksheet/generate`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(payload)
      });

      if (!response.ok) {
        throw new Error('Failed to generate worksheet');
      }

      const data = await response.json();
      renderDownloads(data);
      setStatus(forceNewVersion ? 'A new worksheet version is ready.' : 'Your worksheet is ready.', 'success');
    } catch (error) {
      console.error('Error generating worksheet:', error);
      setStatus('Could not generate worksheet. Please try again.', 'danger');
    } finally {
      setBusy(false);
    }
  }

  function renderPreview(data) {
    previewEmptyEl.style.display = 'none';
    previewListEl.style.display = 'grid';
    previewListEl.innerHTML = '';

    const questions = data.questions || [];
    questions.forEach(question => {
      const item = document.createElement('div');
      item.className = 'preview-question';
      item.innerHTML = `
        <span class="preview-question-number">${question.index}.</span>
        <span>${escapeHtml(question.text)}</span>
      `;
      previewListEl.appendChild(item);
    });

    previewMetaEl.textContent = `${data.questionCount || questions.length} questions • ${data.grade || ''} ${data.subject || ''}`.trim();
  }

  function renderDownloads(data) {
    downloadEmptyEl.style.display = 'none';
    downloadLinksEl.style.display = 'flex';
    downloadLinksEl.innerHTML = '';

    if (data.pdfUrl) {
      downloadLinksEl.appendChild(createDownloadBox('Worksheet PDF', data.pdfUrl, 'Open worksheet PDF'));
    }

    if (data.answerKeyUrl) {
      downloadLinksEl.appendChild(createDownloadBox('Answer Key', data.answerKeyUrl, 'Open answer key PDF'));
    }
  }

  function createDownloadBox(title, url, linkText) {
    const box = document.createElement('div');
    box.className = 'download-link-box';
    box.innerHTML = `
      <div class="fw-bold mb-2">${escapeHtml(title)}</div>
      <a href="${escapeAttribute(url)}" target="_blank" rel="noopener noreferrer">${escapeHtml(linkText)}</a>
      <div class="small text-muted mt-2">${escapeHtml(url)}</div>
    `;
    return box;
  }

  function clearPreview() {
    previewEmptyEl.style.display = 'block';
    previewListEl.style.display = 'none';
    previewListEl.innerHTML = '';
    previewMetaEl.textContent = '';
  }

  function clearDownloads() {
    downloadEmptyEl.style.display = 'block';
    downloadLinksEl.style.display = 'none';
    downloadLinksEl.innerHTML = '';
  }

  function setBusy(isBusy) {
    previewBtn.disabled = isBusy;
    generateBtn.disabled = isBusy;
    generateNewBtn.disabled = isBusy;
  }

  function setStatus(message, type) {
    statusMessageEl.className = `alert alert-${type} status-message mb-0`;
    statusMessageEl.textContent = message;
    statusMessageEl.style.display = 'block';
  }

  function clearStatus() {
    statusMessageEl.style.display = 'none';
    statusMessageEl.textContent = '';
  }

  function escapeHtml(value) {
    if (value === null || value === undefined) {
      return '';
    }

    return String(value)
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#39;');
  }

  function escapeAttribute(value) {
    return escapeHtml(value);
  }
})();