let inputBox, translateButton1, translateButton2;
let output1 = "", output2 = "";

function setup() {
  // Create the canvas
  let canvas = createCanvas(800, 600);
  canvas.position(0, 0); // Ensure canvas starts at the top-left corner
  canvas.style('z-index', '-1'); // Push canvas to the background

  // Input box
  inputBox = createInput();
  inputBox.position(20, 20);
  inputBox.style('z-index', '10'); // Bring input box to the foreground
  inputBox.style('pointer-events', 'auto'); // Ensure it's interactable

  // Button for API 1 (Lecto.ai)
  translateButton1 = createButton('Translate with Lecto API');
  translateButton1.position(20, 60);
  translateButton1.style('z-index', '10'); // Ensure button is on top
  translateButton1.style('pointer-events', 'auto'); // Ensure it's clickable
  translateButton1.mousePressed(callAPI1);

  // Button for API 2 (you can add another API here or leave it as a placeholder)
  translateButton2 = createButton('Translate with API 2');
  translateButton2.position(20, 100);
  translateButton2.style('z-index', '10'); // Ensure button is on top
  translateButton2.style('pointer-events', 'auto'); // Ensure it's clickable
  translateButton2.mousePressed(callAPI2);
}

function draw() {
  // Clear background
  background(200);

  // Display translation results
  textSize(16);
  text("Translation Results:", 20, 150);
  text("API 1: " + output1, 20, 180);
  text("API 2: " + output2, 20, 210);
}

// Function to call the Lecto API for translation
function callAPI1() {
  let inputText = inputBox.value(); // Get the input text
  const apiKey = 'R3R8XN3-DVKM2C4-KZH56BZ-CMR8WRF';  // Replace with your Lecto.ai API key
  
  // Endpoint for the Lecto AI API
  const url = 'https://api.lecto.ai/v1/translate'; // Use the correct endpoint from Lecto.ai documentation

  const data = {
    text: inputText,
    target_lang: 'fr',  // Target language (French)
    // If Lecto API requires other parameters, add them here, such as 'source_lang'
  };

  // Making the POST request to Lecto API
  fetch(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${apiKey}`  // Bearer authentication
    },
    body: JSON.stringify(data)
  })
  .then(response => response.json())
  .then(data => {
    // Log the entire response to understand its structure
    console.log("API Response: ", data);
    
    // Check if the translation is in a different key
    if (data && data.translated_text) {
      output1 = data.translated_text;  // If the translation is in 'translated_text' field
    } else {
      output1 = "Translation not available or in unexpected format.";
    }
  })
  .catch(error => {
    console.error('Error:', error);
    output1 = 'Error fetching translation.';
  });
}

// Placeholder function for API 2 (you can integrate another API here)
function callAPI2() {
  let inputText = inputBox.value(); // Get the input text
  output2 = "Translated by API 2: " + inputText; // Simulate API response for now
}