const API_KEY_STORAGE_KEY = 'rapidapi_key';

document.addEventListener('DOMContentLoaded', () => {
  const savedApiKey = localStorage.getItem(API_KEY_STORAGE_KEY);
  if (savedApiKey) {
    document.getElementById('apiKey').value = savedApiKey;
  }
});

function saveApiKey() {
  const apiKey = document.getElementById('apiKey').value.trim();
  if (apiKey) {
    localStorage.setItem(API_KEY_STORAGE_KEY, apiKey);
    showNotification('API key saved successfully!');
  } else {
    showNotification('Please enter a valid API key', true);
  }
}

function showNotification(message, isError = false) {
  const notification = document.createElement('div');
  notification.className = `fixed top-4 right-4 px-6 py-3 rounded-lg text-white ${
    isError ? 'bg-red-500' : 'bg-green-500'
  } shadow-lg transform transition-transform duration-300 ease-in-out`;
  notification.textContent = message;
  document.body.appendChild(notification);
  
  setTimeout(() => {
    notification.style.transform = 'translateY(-100%)';
    setTimeout(() => notification.remove(), 300);
  }, 3000);
}

async function generateImage() {
  const apiKey = document.getElementById('apiKey').value.trim();
  const referenceImageUrl = document.getElementById('referenceImageUrl').value.trim();
  const prompt = document.getElementById('prompt').value.trim();
  const imageSize = document.getElementById('imageSize').value;
  
  if (!apiKey) {
    showNotification('Please enter your RapidAPI key', true);
    return;
  }
  
  if (!referenceImageUrl) {
    showNotification('Please enter a reference image URL', true);
    return;
  }
  
  if (!prompt) {
    showNotification('Please enter a prompt', true);
    return;
  }

  const generateBtn = document.getElementById('generateBtn');
  const loadingSpinner = document.getElementById('loadingSpinner');
  const resultImage = document.getElementById('resultImage');
  
  generateBtn.disabled = true;
  loadingSpinner.classList.remove('hidden');
  resultImage.classList.add('hidden');

  try {
    const response = await fetch('https://text-to-image-api-with-face.p.rapidapi.com/face-ai.php', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'x-rapidapi-host': 'text-to-image-api-with-face.p.rapidapi.com',
        'x-rapidapi-key': apiKey
      },
      body: JSON.stringify({
        reference_images: [{
          image_url: referenceImageUrl
        }],
        prompt: prompt,
        image_size: imageSize
      })
    });

    const data = await response.json();
    
    if (data.url) {
      resultImage.src = data.url;
      resultImage.classList.remove('hidden');
    } else {
      throw new Error('No image URL in response');
    }
  } catch (error) {
    showNotification('Error generating image: ' + error.message, true);
  } finally {
    generateBtn.disabled = false;
    loadingSpinner.classList.add('hidden');
  }
}

document.querySelectorAll('input').forEach(input => {
  input.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') {
      if (input.id === 'apiKey') {
        saveApiKey();
      } else {
        generateImage();
      }
    }
  });
});