// Get the generate button and add an event listener for the click event
const generateButton = document.getElementById('generate');
generateButton.addEventListener('click', async () => {

  // Get the account select element and the input text
  const accountSelect = document.getElementById('account');
  const account = accountSelect.options[accountSelect.selectedIndex].value;
  const inputText = document.getElementById('input').value;

  // Set the output textarea to "Loading..."
  const outputTextArea = document.getElementById('output');
  outputTextArea.value = 'Loading...';

  // Make a POST request to the /api/generate endpoint
  try {
    const response = await fetch('/api/generate', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ account: account, text: inputText })
    });

    // Check the response status code
    if (response.ok) {
      // The request was successful
      outputTextArea.value = 'Generating a reply...';
    } else {
      // The request failed
      throw new Error(`Network response was not ok. Status: ${response.status} - ${response.statusText}`);
    }

    // Wait 1 second
    await new Promise(resolve => setTimeout(resolve, 1000));

    // Check the response status code again
    if (!response.ok) {
      // The request still failed
      throw new Error(`Network response was not ok. Status: ${response.status} - ${response.statusText}`);
    }

    // The request was successful, so get the data
    const data = await response.json();
    const outputText = data.generated_text;

    // Log the generated text
    console.log("Generated text", outputText.toString());

    // Set the output textarea to the generated text
    outputTextArea.value = outputText;
  } catch (error) {
    // The request failed, so log the error
    console.error('Error:', error);
    outputTextArea.value = `Failed to fetch data. Reason: ${error.message}`;
  }
});

document.getElementById("generate-summary").addEventListener("click", async () => {
  try {
    const response = await fetch("/api/generate_summary", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ text: ["text1", "text2", "text3"] }),
    });

    if (!response.ok) {
      throw new Error(
        `Network response was not ok. Status: ${response.status} - ${response.statusText}`
      );
    }

    const data = await response.json();
    console.log(data)
    const summary = data.summary;

    const outputSummaryArea = document.getElementById("output-summary");
    
    // Set the output summary area to the generated summary
    outputSummaryArea.value = summary;

    // Log the output summary area value
    console.log(outputSummaryArea.value);
  } catch (error) {
    console.error("Error:", error);
  }
});