document.addEventListener("DOMContentLoaded", () => {
    const formContainer = document.getElementById("form-container");
    const questionsContainer = document.getElementById("questions-container");
    const resultContainer = document.getElementById("result-container");
  
    let career = "";
    let qualifications = "";
    let questions = [];
  
    // Handle form submission
    document.getElementById("start-form").addEventListener("submit", async (e) => {
      e.preventDefault();
      career = document.getElementById("career").value;
      qualifications = document.getElementById("qualifications").value;
  
      // Fetch questions from the server
      const response = await fetch("/start", {
        method: "POST",
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
        body: new URLSearchParams({ career, qualifications }),
      });
      const data = await response.json();
      questions = data.questions; // Save questions for later
      renderQuestions(questions);
    });
  
    function renderQuestions(questions) {
      formContainer.style.display = "none";
      questionsContainer.style.display = "block";
      resultContainer.style.display = "none";
  
      questionsContainer.innerHTML = `
        <h2 class="text-center"><i class="bi bi-question-circle"></i> Psychological Assessment</h2>
        <form id="questions-form">
          ${questions
            .map(
              (q, idx) => `
            <div class="mb-4">
              <p><strong id="question_${idx}">Q${idx + 1}: ${q.question}</strong></p>
              ${Object.entries(q.choices)
                .map(
                  ([key, value]) => `
                <div class="form-check">
                  <input type="radio" name="q_${idx}" value="${value}" id="q_${idx}_${key}" required>
                  <label for="q_${idx}_${key}">${value}</label>
                </div>
              `
                )
                .join("")}
            </div>
          `
            )
            .join("")}
          <div class="text-center">
            <button type="submit" class="btn btn-primary btn-lg">Submit <i class="bi bi-check-circle"></i></button>
          </div>
        </form>
      `;
  
      document.getElementById("questions-form").addEventListener("submit", handleQuestionsSubmit);
    }
  
    async function handleQuestionsSubmit(e) {
      e.preventDefault();
      const formData = new FormData(e.target);
      const answers = [];
  
      for (let idx = 0; idx < questions.length; idx++) {
        const questionText = questions[idx].question;
        const selectedAnswerText = formData.get(`q_${idx}`); // Get the selected answer text
        if (selectedAnswerText) {
          answers.push({
            question: questionText,
            answer: selectedAnswerText,
          });
        }
      }
  
      // Send the full payload with career, qualifications, and answers
      const payload = {
        career,
        qualifications,
        answers,
      };
  
      const response = await fetch("/evaluate", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      });
      const data = await response.json();
  
      // Render results
      renderResult(data.result);
    }
  
    function renderResult(result) {
        const { capable, roadmap, evaluation_report, motivation, alternatives } = result;
      
        formContainer.style.display = "none";
        questionsContainer.style.display = "none";
        resultContainer.style.display = "block";
      
        // Capable or Not
        const header = `
          <h2 class="text-center text-${capable ? "success" : "danger"}">
            ${capable ? "You Are Capable!" : "Consider Alternatives"}
          </h2>
        `;
      
        // Evaluation Report and Motivation
        const evaluationReport = `
          <h3>Evaluation Report</h3>
          <p>${evaluation_report || "No evaluation report provided."}</p>
          <h3>Motivation</h3>
          <p>${motivation || "No motivational message provided."}</p>
        `;
      
        // Roadmap (only if capable is true)
        const roadmapSection = capable && roadmap
          ? `
          <h3>Roadmap</h3>
          <ul>${roadmap.map((step) => `<li>${step}</li>`).join("")}</ul>
        `
          : "";
      
        // Alternatives (only if capable is false)
        const alternativesSection = !capable && alternatives
          ? `
          <h3>Alternative Careers</h3>
          <ul>${alternatives.map((alt) => `<li>${alt}</li>`).join("")}</ul>
        `
          : capable
          ? ""
          : "<p>No alternatives provided.</p>";
      
        resultContainer.innerHTML = `
          ${header}
          ${evaluationReport}
          ${roadmapSection}
          ${alternativesSection}
          <div class="text-center mt-4">
            <button onclick="location.reload()" class="btn btn-secondary">Restart</button>
          </div>
        `;
      }
      
  });