// Create a style element and set its content for styling
const style = document.createElement('style');
style.textContent = `
  @import url('https://fonts.googleapis.com/css2?family=Smooch&display=swap');
  
  body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-image: url('uploads/loone/background.jpg');
    background-size: cover;
    background-position: center;
    margin: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  h1 {
    color: #2b2d42;
    text-align: center;
    margin-bottom: 20px;
    font-size: 60px;
    font-family: 'Smooch', cursive;
  }
  .container {
    margin-bottom: 20px;
    width: 100%;
    max-width: 600px;
  }
  input[type="text"], button {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #dedede;
    margin: 10px 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
  button {
    background-color: #2b2d42;
    color: white;
    cursor: pointer;
  }
  button:hover {
    background-color: #274C77;
  }
  #output {
    text-align: center;
    margin-top: 20px;
  }
  #loading {
    text-align: center;
    margin-top: 20px;
  }
  #loading img {
    width: 50px;
  }
`;

// Append the style element to the head of the document
document.head.appendChild(style);

// Function to show loading spinner
function showLoading() {
  document.querySelector("#loading").style.display = 'block';
}

// Function to hide loading spinner
function hideLoading() {
  document.querySelector("#loading").style.display = 'none';
}

let apiKey = ''; // Variable to store the API key
const defaultPrompt = "Hello, World!"; // Default prompt

// Function to set API key
function setApiKey() {
  apiKey = document.querySelector("#api-key").value.trim();
  if (apiKey) {
    document.querySelector("#api-key").disabled = true;
  } else {
    alert("Please enter an API key.");
  }
}

// Function to generate image with the default prompt
function generateImage() {
  showLoading(); // Display loading spinner

  const outputDiv = document.querySelector("#output");

  // Clear existing image and info
  outputDiv.innerHTML = "";

  // Making the API request with the default prompt
  fetch('https://api.openai.com/v1/images/generations', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${apiKey}`
    },
    body: JSON.stringify({
      model: "dall-e-3",
      prompt: defaultPrompt,
      n: 1,
      size: "1024x1024"
    })
  })
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok: ' + response.statusText);
    }
    return response.json();
  })
  .then(data => {
    hideLoading(); // Hide loading spinner
    if (data && data.data && data.data.length > 0) {
      const imageUrl = data.data[0].url;
      outputDiv.innerHTML = `<img src="${imageUrl}" alt="Generated Image" style="max-width:100%; height:auto;" />`;
    } else {
      outputDiv.textContent = "No image generated.";
    }
  })
  .catch(error => {
    console.error("Error while generating image:", error);
    hideLoading(); // Hide loading spinner in case of an error
    outputDiv.textContent = `Error: Please try again.`;
  });
}

// Add the HTML structure into the body
document.body.innerHTML = `
  <h1>ImagiGen</h1>
  <div class="container">
    <h3>Enter API Key</h3>
    <input type="text" id="api-key" placeholder="Enter your API Key...">
    <p id="api-key-message"></p>
    <button id="set-api-key">Set API Key</button>
  </div>
  <p id="api-key-text" style="display: none;"></p>
  <div class="container">
    <button id="submit-prompt">Generate Image</button>
  </div>
  <div class="container">
    <div id="loading" style="display:none;"><img src="uploads/loone/loading.gif" alt="Loading..." /></div>
    <div id="output"></div>
  </div>
`;

// Event listeners
document.addEventListener('DOMContentLoaded', function () {
  document.querySelector("#set-api-key").addEventListener('click', setApiKey);
  document.querySelector("#submit-prompt").addEventListener('click', function () {
    if (apiKey) {
      generateImage();
    } else {
      alert("Please set the API key.");
    }
  });
});