document.write(`
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f9;
      color: #333;
      text-align: center;
      padding: 20px;
    }
    h1 {
      color: #4CAF50;
    }
    input, button, textarea {
      padding: 10px;
      margin: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }
    #results {
      margin-top: 20px;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 5px;
      background: #f9f9f9;
    }
  </style>

  <h1>Sentiment Analysis Tool with AI Judgement</h1>
  <p>Enter your API keys and text to analyse sentiment:</p>

  <div>
    <input type="text" id="rapidApiKey" placeholder="Enter your RapidAPI key" />
    <br />
    <input type="text" id="openAiApiKey" placeholder="Enter your OpenAI API key" />
    <br />
    <textarea id="inputText" placeholder="Enter text for analysis" rows="4" cols="50"></textarea>
    <br />
    <button onclick="analyseSentiment()">Analyse Sentiment</button>
  </div>

  <div id="results"></div>
`);

async function analyseSentiment() {
  const rapidApiKey = document.getElementById('rapidApiKey').value.trim();
  const openAiApiKey = document.getElementById('openAiApiKey').value.trim();
  const inputText = document.getElementById('inputText').value.trim();
  const resultsDiv = document.getElementById('results');

  if (!rapidApiKey || !openAiApiKey || !inputText) {
    resultsDiv.innerHTML = '<p style="color: red;">Please provide all API keys and text for analysis.</p>';
    return;
  }

  resultsDiv.innerHTML = '<p>Analyzing sentiment... Please wait.</p>';

  const apiConfigs = [
    {
      name: 'Twinword API',
      url: `https://twinword-sentiment-analysis.p.rapidapi.com/analyse/?text=${encodeURIComponent(inputText)}`,
      headers: {
        'x-rapidapi-host': 'twinword-sentiment-analysis.p.rapidapi.com',
        'x-rapidapi-key': rapidApiKey,
      },
      parseResponse: data => data.type,
    },
    {
      name: 'Sentiment API 3',
      url: 'https://sentiment-api3.p.rapidapi.com/sentiment_analysis',
      method: 'POST',
      headers: {
        'x-rapidapi-host': 'sentiment-api3.p.rapidapi.com',
        'x-rapidapi-key': rapidApiKey,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ input_text: inputText }),
      parseResponse: data => data.overall_sentiment,
    },
    {
      name: 'Sentiment by API Ninjas',
      url: `https://sentiment-by-api-ninjas.p.rapidapi.com/v1/sentiment?text=${encodeURIComponent(inputText)}`,
      headers: {
        'x-rapidapi-host': 'sentiment-by-api-ninjas.p.rapidapi.com',
        'x-rapidapi-key': rapidApiKey,
      },
      parseResponse: data => data.sentiment,
    },
  ];

  const results = await Promise.all(
    apiConfigs.map(config =>
      fetch(config.url, {
        method: config.method || 'GET',
        headers: config.headers,
        body: config.body || null,
      })
        .then(response => response.json())
        .then(data => ({ name: config.name, sentiment: config.parseResponse(data) }))
        .catch(error => ({ name: config.name, sentiment: `Error: ${error.message}` }))
    )
  );

  resultsDiv.innerHTML = '<h3>Sentiment Results:</h3>';
  results.forEach(result => {
    resultsDiv.innerHTML += `<p><strong>${result.name}:</strong> ${result.sentiment}</p>`;
  });

  // Use OpenAI to judge
  const aiJudgement = await getAiJudgement(openAiApiKey, inputText, results);
  resultsDiv.innerHTML += `<h3>AI Judgement:</h3><p>${aiJudgement}</p>`;
}

// the content structure to be sent to openAI  
async function getAiJudgement(apiKey, text, results) {
  const systemMessage = `You are an expert sentiment analysis judge. You are given the original text and sentiment results from three APIs. Your job is to decide which sentiment (positive, negative, or neutral) best represents the original text. Explain your reasoning briefly.`;
  const userMessage = `Original Text: "${text}"\n\nSentiment Results:\n${results
    .map(result => `- ${result.name}: ${result.sentiment}`)
    .join('\n')}`;

  const openAiUrl = 'https://api.openai.com/v1/chat/completions';
  const response = await fetch(openAiUrl, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${apiKey}`,
    },
    body: JSON.stringify({
      model: 'gpt-3.5-turbo',
      messages: [
        { role: 'system', content: systemMessage },
        { role: 'user', content: userMessage },
      ],
    }),
  });

  if (!response.ok) {
    return `Error from OpenAI: ${response.statusText}`;
  }

  const data = await response.json();
  return data.choices[0].message.content.trim();
}