$( document ).ready(function() {
  $('body').css( "background-color",    "#2b2b2b"        );
  $('body').css( "color",               "#00ff00"         );
});


 document.write(`    
     <div id="cli-container">
        <h1>Practical 2</h1>
        <p>Type your API key and Press Enter on keyboard to connect to the OpenAI server </p>
        <p> Type 'Exit' close the page once connected to server.</p>

        <div class="input-wrapper">
            <span>Admin@: ></span>
            <input type="text" id="input" placeholder="Enter Command">
        </div>
         <div id="additional-content"></div>
       
    </div>
    
    `);

const styleElement = document.createElement("style");

// Set the CSS code as the content of the style element
styleElement.textContent = `
body {
    font-family: 'Courier New', monospace;
    margin: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: #2b2b2b;
    color: #00ff00;
    padding: 20px;
    box-sizing: border-box;
}

#cli-container {
    width: calc(100vw - 10px);
    height: calc(100vh - 20px);
    border: 2px solid #00ff00;
    overflow: hidden;
    box-sizing: border-box;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.input-wrapper {
    display: flex;
    align-items: center;
    padding: 10px;
    background-color: #2b2b2b;
}


#input {
    flex: 1;
    padding: 5px;
    border: none;
    outline: none;
    background-color: #2b2b2b;
    color: #00ff00;
    caret-color: #00ff00;
    width: 80%; /* Adjust the width as needed */
}

#additional-content {
    margin-top: 10px;
    padding: 10px;
    background-color: #2b2b2b;
    color: #00ff00;
    white-space: pre-wrap; /* Preserve line breaks */
}
`;


    document.head.appendChild(styleElement);
    
    let API_KEY;
    const gptApiUrl = 'https://api.openai.com/v1/chat/completions';
    const dalleApiUrl = 'https://api.openai.com/v1/images/generations';
    const whisperApiUrl = "https://api.openai.com/v1/audio/speech";
    
    const output = document.getElementById('additional-content');


function handleUserInput() {
  try {
    const userInput = document.getElementById('input').value;
    API_KEY = userInput;

    if (!userInput.trim()) {
      output.textContent = "Please enter a proper API key";
      return;
    }

    // Check if the user wants to exit
    if (userInput.trim().toLowerCase() === 'exit') {
      window.close();
      return;
    }

    output.textContent = "Trying to connect to GPT please wait...";
    document.getElementById('input').value = '';
    getChatResponse();
  } catch (error) {
    output.textContent += "\nError: " + error.message;
  }
}

async function getChatResponse() {
  try {
    const response = await fetch(gptApiUrl, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${API_KEY}`,
      },
      body: JSON.stringify({
        model: 'gpt-3.5-turbo',
        messages: [
          { "role": "user", "content": "testing" },
        ],
      }),
    });

    if (!response.ok) {
      const errorText = await response.text();
      output.textContent += "\nError: " + errorText;
      throw new Error(`HTTP error! Status: ${response.status}. Details: ${errorText}`);
    }

    await response.json();
    output.textContent += "\nConnected to GPT successfully!!!";
    output.textContent += "\nTrying to connect to DALL-E 3 please wait...";
    dalle();
  } catch (error) {
    output.textContent += "\nError: " + error.message;
  }
}


// Function to generate image using DALL-E 3
async function dalle() {
  try {
    const response = await fetch(dalleApiUrl, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${API_KEY}`
      },
      body: JSON.stringify({
        prompt: "test", 
        model: 'dall-e-3',
        n: 1,
        size: '1024x1024',
      })
    });

    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    const responseData = await response.json();
    const imageURL = responseData.data[0].url;
     output.textContent += "\nConnected to OpenAI DALL-E 3 Successfully!";
    output.textContent += "\nTrying to connect to Whisper please wait...";
    speechModel();
  

  } catch (error) {
    output.textContent += "\nError: " + error.message;
  }
}


async function speechModel() {
  const whisperApiUrl = "https://api.openai.com/v1/audio/speech";
 

  const voice = "alloy";

  try {
    const response = await fetch(whisperApiUrl, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "Authorization": `Bearer ${API_KEY}`,
      },
      body: JSON.stringify({
        model: "tts-1",
        voice,
        input: "test",
      }),
    });

    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
 const arrayBuffer = await response.arrayBuffer();
    const blob = new Blob([arrayBuffer], { type: "audio/mpeg" });

    // Create a URL for the Blob
    const audioURL = URL.createObjectURL(blob);
    output.textContent += "\nConnected to OpenAI Whisper Successfully!";

    
  } catch (error) {
    output.textContent += "\nError: " + error.message;
  }
}


// Attach the handleUserInput function to the Enter key event
document.getElementById('input').addEventListener('keydown', function (event) {
  if (event.key === 'Enter') {
    handleUserInput();
  }
});