// === Setup ===
const openaiURL = "https://api.openai.com/v1/chat/completions";
const themodel = "gpt-3.5-turbo";
let apikey = "";

// === Styling ===
$('body').css("margin", "20px");
$('body').css("padding", "20px");

// === Interface ===
document.write(`
  <h2>Multilingual QA Accuracy Test</h2>

  <h3>Enter API key</h3>
  <div id="enterkey">
    <input style='width:25vw;' maxlength='2000' id="apikeyInput" placeholder="sk-..." value=''>  
    <button onclick='setkey();' class='ab-normbutton'>Set API key</button>
  </div>

  <br><br>

  <label>Select a question:</label>
  <select id="questionSelect">
    <option value="Q1">What is the capital of Canada?</option>
    <option value="Q2">Who discovered penicillin?</option>
    <option value="Q3">What planet is known as the Red Planet?</option>
  </select>

  <br><br>

  <label>Select language:</label>
  <select id="languageSelect">
    <option value="fr">French</option>
    <option value="es">Spanish</option>
    <option value="de">German</option>
  </select>

  <br><br>

  <button onclick="runTest()" class="ab-normbutton">Run Test</button>

  <div id="questionArea" style="margin-top:20px;"></div>
  <div id="api1Response" style="margin-top:10px;"></div>
  <div id="correctAnswer" style="margin-top:10px;"></div>
`);

// === Question Set ===
const questions = {
  Q1: {
    en: "What is the capital of Canada?",
    fr: "Quelle est la capitale du Canada ?",
    es: "¿Cuál es la capital de Canadá?",
    de: "Was ist die Hauptstadt von Kanada?",
    answer: "Ottawa"
  },
  Q2: {
    en: "Who discovered penicillin?",
    fr: "Qui a découvert la pénicilline ?",
    es: "¿Quién descubrió la penicilina?",
    de: "Wer entdeckte das Penicillin?",
    answer: "Alexander Fleming"
  },
  Q3: {
    en: "What planet is known as the Red Planet?",
    fr: "Quelle planète est connue comme la planète rouge ?",
    es: "¿Qué planeta se conoce como el planeta rojo?",
    de: "Welcher Planet ist als der rote Planet bekannt?",
    answer: "Mars"
  }
};

// === API Key Setter ===
function setkey() {
  apikey = document.getElementById("apikeyInput").value.trim();
  if (apikey === "") {
    alert("Please enter a valid API key.");
    return;
  }
  document.getElementById("enterkey").innerHTML = "<b>API key has been set.</b>";
}

// === GPT Call ===
function runTest() {
  if (apikey === "") {
    document.getElementById("api1Response").innerHTML = `<font color=red><b>Please set your API key first.</b></font>`;
    return;
  }

  const qid = document.getElementById("questionSelect").value;
  const lang = document.getElementById("languageSelect").value;
  const question = questions[qid][lang];
  const correct = questions[qid].answer;

  document.getElementById("questionArea").innerHTML = `<b>Question:</b> ${question}`;
  document.getElementById("correctAnswer").innerHTML = `<b>Correct Answer:</b> ${correct}`;
  document.getElementById("api1Response").innerHTML = `<i>Waiting for GPT response...</i>`;

  const thedata = {
    model: themodel,
    temperature: 0.7,
    messages: [{
      role: "user",
      content: question
    }]
  };

  const thedatastring = JSON.stringify(thedata);

  $.ajax({
    type: "POST",
    url: openaiURL,
    headers: {
      "Content-Type": "application/json",
      "Authorization": "Bearer " + apikey
    },
    data: thedatastring,
    dataType: "json",
    success: function (d, rc) {
      const answer = d.choices[0].message.content;
      document.getElementById("api1Response").innerHTML = `<b>GPT Response:</b> ${answer}`;
    },
    error: function(jqXHR, textStatus, errorThrown) {
      let errorMsg = "Unknown error";
      if (jqXHR.responseText) {
        try {
          const parsed = JSON.parse(jqXHR.responseText);
          errorMsg = parsed.error?.message || errorThrown;
        } catch {
          errorMsg = jqXHR.responseText;
        }
      }
      document.getElementById("api1Response").innerHTML = `<font color=red><b>Error: ${errorMsg}</b></font>`;
    }
  });
}