let currentTimeout;
let displaySettings = {
  textColor: '#ffffff',
  bgColor: '#000000',
  fontFamily: 'Arial, sans-serif',
  fontSize: '32px',
  duration: 5
};

const transcriptionText = document.getElementById('transcription-text');
const displayContainer = document.getElementById('display-container');
const googleFontLink = document.getElementById('google-font-link');

// Apply settings
function applySettings(settings) {
  displaySettings = { ...displaySettings, ...settings };
  
  transcriptionText.style.color = displaySettings.textColor;
  transcriptionText.style.fontSize = displaySettings.fontSize;
  transcriptionText.style.fontFamily = displaySettings.fontFamily;
  displayContainer.style.backgroundColor = displaySettings.bgColor;
  
  // Handle Google Fonts
  if (settings.googleFont) {
    googleFontLink.href = `https://fonts.googleapis.com/css2?family=${settings.googleFont}&display=swap`;
  }
}

// Display transcription
function displayTranscription(text) {
  transcriptionText.textContent = text;
  transcriptionText.classList.remove('fade-out');
  
  if (currentTimeout) {
    clearTimeout(currentTimeout);
  }
  
  const duration = displaySettings.duration * 1000;
  currentTimeout = setTimeout(() => {
    transcriptionText.classList.add('fade-out');
    setTimeout(() => {
      transcriptionText.textContent = '';
    }, 300);
  }, duration);
}

// Listen for IPC messages
if (window.electronAPI) {
  window.electronAPI.onTranscription((data) => {
    displayTranscription(data.text);
  });
  
  window.electronAPI.onUpdateSettings((settings) => {
    applySettings(settings);
  });
}