document.addEventListener('DOMContentLoaded', () => {
  // DOM Elements
  const keywordsContainer = document.getElementById('keywords-container');
  const refreshBtn = document.getElementById('refresh-btn');
  const loading = document.getElementById('loading');
  const selectedKeywordText = document.getElementById('selected-keyword-text');
  const generatePromptBtn = document.getElementById('generate-prompt-btn');
  const promptResult = document.getElementById('prompt-result');
  const promptTitle = document.getElementById('prompt-title');
  const promptBody = document.getElementById('prompt-body');
  const copyPromptBtn = document.getElementById('copy-prompt-btn');
  const copySuccess = document.getElementById('copy-success');
  
  // State
  let selectedKeyword = null;
  let currentPrompt = null;
  
  // Fetch trending keywords
  const fetchTrendingKeywords = async () => {
    try {
      loading.classList.remove('hidden');
      keywordsContainer.innerHTML = '';
      
      const response = await fetch('/api/trending-keywords');
      const data = await response.json();
      
      if (data.keywords && data.keywords.length > 0) {
        renderKeywords(data.keywords);
      } else {
        keywordsContainer.innerHTML = '<p>No trending keywords found. Please try again later.</p>';
      }
    } catch (error) {
      console.error('Error fetching trending keywords:', error);
      keywordsContainer.innerHTML = '<p>Failed to load trending keywords. Please try again.</p>';
    } finally {
      loading.classList.add('hidden');
    }
  };
  
  // Render keywords
  const renderKeywords = (keywords) => {
    keywordsContainer.innerHTML = '';
    
    keywords.forEach(keyword => {
      const keywordCard = document.createElement('div');
      keywordCard.className = 'keyword-card';
      keywordCard.dataset.keyword = keyword.keyword;
      
      keywordCard.innerHTML = `
        <div class="keyword-name">${keyword.keyword}</div>
        <div class="keyword-score">Trend score: ${keyword.score}</div>
      `;
      
      keywordCard.addEventListener('click', () => selectKeyword(keyword.keyword, keywordCard));
      
      keywordsContainer.appendChild(keywordCard);
    });
  };
  
  // Select a keyword
  const selectKeyword = (keyword, card) => {
    // Remove selected class from all cards
    document.querySelectorAll('.keyword-card').forEach(k => k.classList.remove('selected'));
    
    // Add selected class to clicked card
    card.classList.add('selected');
    
    // Update selected keyword
    selectedKeyword = keyword;
    selectedKeywordText.textContent = keyword;
    
    // Enable generate prompt button
    generatePromptBtn.disabled = false;
    
    // Hide prompt result if visible
    promptResult.classList.add('hidden');
  };
  
  // Generate article prompt
  const generatePrompt = async () => {
    if (!selectedKeyword) return;
    
    try {
      loading.classList.remove('hidden');
      generatePromptBtn.disabled = true;
      
      const response = await fetch('/api/generate-prompt', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ keyword: selectedKeyword }),
      });
      
      const data = await response.json();
      
      if (data.prompt) {
        currentPrompt = data.prompt;
        displayPrompt(data.prompt);
      } else {
        alert('Failed to generate prompt. Please try again.');
      }
    } catch (error) {
      console.error('Error generating prompt:', error);
      alert('Failed to generate prompt. Please try again.');
    } finally {
      loading.classList.add('hidden');
      generatePromptBtn.disabled = false;
    }
  };
  
  // Display the generated prompt
  const displayPrompt = (prompt) => {
    promptTitle.textContent = prompt.title;
    promptBody.textContent = prompt.content;
    promptResult.classList.remove('hidden');
  };
  
  // Copy prompt to clipboard
  const copyPrompt = () => {
    if (!currentPrompt) return;
    
    const fullPrompt = `${currentPrompt.title}\n\n${currentPrompt.content}`;
    
    navigator.clipboard.writeText(fullPrompt)
      .then(() => {
        copySuccess.classList.remove('hidden');
        setTimeout(() => {
          copySuccess.classList.add('hidden');
        }, 2000);
      })
      .catch(err => {
        console.error('Failed to copy prompt:', err);
        alert('Failed to copy prompt to clipboard');
      });
  };
  
  // Event listeners
  refreshBtn.addEventListener('click', fetchTrendingKeywords);
  generatePromptBtn.addEventListener('click', generatePrompt);
  copyPromptBtn.addEventListener('click', copyPrompt);
  
  // Initial load
  fetchTrendingKeywords();
});