let isTeacherToStudent = true;

const languageSelector = document.getElementById("languageSelector");
const startBtn = document.getElementById("startBtn");
const switchBtn = document.getElementById("switchDirectionBtn");
const directionDisplay = document.getElementById("directionDisplay");
const transcript = document.getElementById("transcript");

switchBtn.addEventListener("click", () => {
  isTeacherToStudent = !isTeacherToStudent;
  directionDisplay.textContent = isTeacherToStudent ? "Teacher ➡️ Student" : "Student ➡️ Teacher";
});

startBtn.addEventListener("click", async () => {
  const studentLang = languageSelector.value;
  const sourceLang = isTeacherToStudent ? "en" : studentLang;
  const targetLang = isTeacherToStudent ? studentLang : "en";

  transcript.innerHTML = "<em>Listening...</em>";

  const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
  recognition.lang = sourceLang;
  recognition.interimResults = false;
  recognition.maxAlternatives = 1;

  recognition.start();

  recognition.onresult = async (event) => {
    const spokenText = event.results[0][0].transcript;
    transcript.innerHTML = `<strong>You said:</strong> ${spokenText}<br><em>Translating...</em>`;

    try {
      const res = await fetch(`https://translate.googleapis.com/translate_a/single?client=gtx&sl=${sourceLang}&tl=${targetLang}&dt=t&q=${encodeURIComponent(spokenText)}`);
      const data = await res.json();
      const translatedText = data[0][0][0];

      transcript.innerHTML = `
        <strong>You said:</strong> ${spokenText}<br>
        <strong>Translation:</strong> ${translatedText}
      `;

      const utterance = new SpeechSynthesisUtterance(translatedText);
      utterance.lang = targetLang;
      speechSynthesis.speak(utterance);

    } catch (err) {
      transcript.innerHTML = "Translation error. Please check your connection.";
      console.error(err);
    }
  };

  recognition.onerror = (err) => {
    transcript.innerHTML = "Speech recognition error. Try again.";
    console.error(err);
  };
});