// Home page JavaScript - Use built-in carousel system + AI Features
console.log('Home page JavaScript loaded');

// =============================
// CAROUSEL FUNCTIONALITY
// =============================

let autoPlayInterval;
let carousel;

function initAutoPlay() {
    // Find the carousel
    carousel = document.querySelector('[data-landingsite-carousel]');
    
    if (!carousel) {
        console.log('Carousel not found, retrying...');
        setTimeout(initAutoPlay, 1000);
        return;
    }
    
    console.log('Carousel found - using built-in system');
    
    // Start auto-play using the built-in system
    startAutoPlay();
    
    // Add hover pause functionality
    carousel.addEventListener('mouseenter', pauseAutoPlay);
    carousel.addEventListener('mouseleave', resumeAutoPlay);
}

function startAutoPlay() {
    if (!carousel) return;
    
    // Clear any existing interval
    if (autoPlayInterval) {
        clearInterval(autoPlayInterval);
    }
    
    autoPlayInterval = setInterval(() => {
        // Find the right arrow button and click it
        const nextButton = carousel.querySelector('[data-landingsite-carousel-controls-right]');
        if (nextButton) {
            nextButton.click();
        }
    }, 4000); // Change every 4 seconds
    
    console.log('Auto-play started');
}

function pauseAutoPlay() {
    if (autoPlayInterval) {
        clearInterval(autoPlayInterval);
        autoPlayInterval = null;
        console.log('Auto-play paused');
    }
}

function resumeAutoPlay() {
    if (!autoPlayInterval) {
        startAutoPlay();
        console.log('Auto-play resumed');
    }
}

function stopAutoPlay() {
    if (autoPlayInterval) {
        clearInterval(autoPlayInterval);
        autoPlayInterval = null;
        console.log('Auto-play stopped');
    }
}

// =============================
// AI FEATURES FUNCTIONALITY
// =============================

// Knowledge base for AI-powered search
const knowledgeBase = {
  // Grant Application Information
  'application': {
    keywords: ['apply', 'application', 'grant', 'funding', 'how to apply', 'submit', 'eligibility'],
    title: 'Grant Application Process',
    content: 'Apply for funding from The Alison Bainbridge Grace Fund. We support 501(c)(3) nonprofits in Greater Houston.',
    url: '/funding-application',
    icon: 'fas fa-file-alt',
    suggestions: [
      'Start your grant application →',
      'Check eligibility requirements →',
      'View application timeline →',
      'Read application FAQ →'
    ]
  },
  
  // Recipients Information
  'recipients': {
    keywords: ['recipients', 'who received', 'grant recipients', 'awarded', 'winners', 'past recipients'],
    title: 'Grant Recipients',
    content: 'View organizations that have received grants from The Alison Bainbridge Grace Fund and their impact stories.',
    url: '/recipients',
    icon: 'fas fa-users',
    suggestions: [
      'See all grant recipients →',
      'Read recipient success stories →',
      'View recipient testimonials →',
      'Learn about funded projects →'
    ]
  },
  
  // Impact Information
  'impact': {
    keywords: ['impact', 'results', 'outcomes', 'dashboard', 'statistics', 'metrics', 'transparency'],
    title: 'Impact Dashboard',
    content: 'Explore the comprehensive impact dashboard showing financial transparency and community outcomes.',
    url: '/impact-dashboard',
    icon: 'fas fa-chart-line',
    suggestions: [
      'View impact metrics →',
      'See financial transparency →',
      'Explore community outcomes →',
      'Download impact reports →'
    ]
  },
  
  // FAQ Information
  'faq': {
    keywords: ['faq', 'questions', 'help', 'process', 'frequently asked', 'how', 'when', 'what'],
    title: 'Frequently Asked Questions',
    content: 'Find answers to common questions about the grant application and review process.',
    url: '/process-questions',
    icon: 'fas fa-question-circle',
    suggestions: [
      'View all FAQs →',
      'Application process questions →',
      'Eligibility questions →',
      'Timeline questions →'
    ]
  },
  
  // Mission & Vision
  'mission': {
    keywords: ['mission', 'vision', 'purpose', 'about', 'goal', 'values'],
    title: 'Mission & Vision',
    content: 'Learn about our mission to support Houston nonprofits and our vision for community impact.',
    url: '/mission-vision',
    icon: 'fas fa-bullseye',
    suggestions: [
      'Read our mission statement →',
      'Explore our vision →',
      'Learn about our values →',
      'See areas of impact →'
    ]
  },
  
  // Contact Information
  'contact': {
    keywords: ['contact', 'reach out', 'get in touch', 'email', 'phone', 'communication'],
    title: 'Contact Information',
    content: 'Get in touch with The Alison Bainbridge Grace Fund team for inquiries and support.',
    url: '/contact',
    icon: 'fas fa-envelope',
    suggestions: [
      'Send us a message →',
      'View contact information →',
      'Schedule a consultation →',
      'Find our location →'
    ]
  },
  
  // Alison's Story
  'alison': {
    keywords: ['alison', 'founder', 'story', 'background', 'biography', 'about founder'],
    title: 'About the Founder',
    content: 'Learn about Alison Bainbridge\'s inspiring journey and why she started this philanthropic initiative.',
    url: '/about-us',
    icon: 'fas fa-user-circle',
    suggestions: [
      'Read Alison\'s story →',
      'Learn about her background →',
      'Understand her motivation →',
      'See her community impact →'
    ]
  }
};

// AI Search functionality
let searchDebounceTimer;

function performAISearch(isMobile = false) {
  const searchInput = isMobile ? 
    document.getElementById('ai-search-mobile') : 
    document.getElementById('ai-search-desktop');
  
  const resultsContainer = isMobile ? 
    document.getElementById('mobile-search-results') : 
    document.getElementById('ai-search-results');
  
  const resultsContent = isMobile ? 
    document.getElementById('mobile-search-results-content') : 
    document.getElementById('search-results-content');

  if (!searchInput || !resultsContainer || !resultsContent) return;

  const query = searchInput.value.trim().toLowerCase();
  
  if (query.length < 2) {
    resultsContainer.classList.add('hidden');
    return;
  }

  // Simulate AI processing
  resultsContent.innerHTML = `
    <div class="flex items-center gap-3 py-4">
      <div class="animate-spin w-5 h-5 border-2 border-green-500 border-t-transparent rounded-full"></div>
      <span class="text-sm text-gray-600">AI is analyzing your query...</span>
    </div>
  `;
  
  resultsContainer.classList.remove('hidden');

  setTimeout(() => {
    const results = searchKnowledgeBase(query);
    displayAISearchResults(resultsContent, results, query);
  }, 800);
}

function searchKnowledgeBase(query) {
  const results = [];
  
  for (const [key, entry] of Object.entries(knowledgeBase)) {
    let score = 0;
    
    for (const keyword of entry.keywords) {
      if (query.includes(keyword)) {
        score += keyword.length / query.length * 100;
      }
    }
    
    const titleMatch = entry.title.toLowerCase().includes(query);
    const contentMatch = entry.content.toLowerCase().includes(query);
    
    if (titleMatch) score += 50;
    if (contentMatch) score += 25;
    
    if (score > 0) {
      results.push({ ...entry, score, key });
    }
  }
  
  return results.sort((a, b) => b.score - a.score).slice(0, 4);
}

function displayAISearchResults(container, results, query) {
  if (results.length === 0) {
    container.innerHTML = `
      <div class="text-center py-8">
        <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
          <i class="fas fa-search text-gray-400 text-xl"></i>
        </div>
        <p class="text-gray-600 mb-4">No results found for "${query}"</p>
        <p class="text-sm text-gray-500 mb-4">Try searching for:</p>
        <div class="flex flex-wrap gap-2 justify-center">
          <button onclick="quickSearch('grant application')" class="px-3 py-1 bg-green-100 text-green-700 rounded-full text-xs hover:bg-green-200 transition-colors">Grant Application</button>
          <button onclick="quickSearch('recipients')" class="px-3 py-1 bg-green-100 text-green-700 rounded-full text-xs hover:bg-green-200 transition-colors">Recipients</button>
          <button onclick="quickSearch('impact')" class="px-3 py-1 bg-green-100 text-green-700 rounded-full text-xs hover:bg-green-200 transition-colors">Impact</button>
        </div>
      </div>
    `;
    return;
  }

  let html = `
    <div class="mb-4 p-3 bg-gradient-to-r from-green-50 to-emerald-50 rounded-lg border border-green-200">
      <div class="flex items-center gap-2 mb-2">
        <i class="fas fa-brain text-green-600"></i>
        <span class="text-sm font-semibold text-green-800">AI Analysis:</span>
      </div>
      <p class="text-sm text-green-700">Found ${results.length} relevant results for "${query}". Click any result to learn more.</p>
    </div>
  `;

  results.forEach((result) => {
    html += `
      <div class="group p-4 border border-gray-200 rounded-xl hover:shadow-md transition-all duration-200 cursor-pointer mb-3 hover:border-green-300 hover:bg-green-50/30" onclick="navigateToResult('${result.url}')">
        <div class="flex items-start gap-3">
          <div class="w-10 h-10 bg-gradient-to-r from-green-500 to-emerald-600 rounded-lg flex items-center justify-center flex-shrink-0">
            <i class="${result.icon} text-white text-sm"></i>
          </div>
          <div class="flex-1">
            <h4 class="font-semibold text-gray-900 mb-2 group-hover:text-green-700 transition-colors">${result.title}</h4>
            <p class="text-sm text-gray-600 mb-3">${result.content}</p>
            <div class="space-y-1">
              ${result.suggestions.slice(0, 2).map(suggestion => `
                <div class="text-xs text-green-600 hover:text-green-800 transition-colors">
                  <i class="fas fa-arrow-right mr-1"></i>${suggestion}
                </div>
              `).join('')}
            </div>
          </div>
          <div class="text-green-600 group-hover:translate-x-1 transition-transform duration-200">
            <i class="fas fa-chevron-right"></i>
          </div>
        </div>
      </div>
    `;
  });

  container.innerHTML = html;
}

function quickSearch(term) {
  const desktopInput = document.getElementById('ai-search-desktop');
  const mobileInput = document.getElementById('ai-search-mobile');
  
  if (desktopInput && !desktopInput.closest('.hidden')) {
    desktopInput.value = term;
    performAISearch(false);
  } else if (mobileInput && !mobileInput.closest('.hidden')) {
    mobileInput.value = term;
    performAISearch(true);
  }
}

function navigateToResult(url) {
  setTimeout(() => {
    window.location.href = url;
  }, 150);
}

function toggleMobileSearch() {
  const searchBar = document.getElementById('mobile-search-bar');
  const searchInput = document.getElementById('ai-search-mobile');
  
  if (searchBar) {
    searchBar.classList.toggle('hidden');
    
    if (!searchBar.classList.contains('hidden') && searchInput) {
      setTimeout(() => searchInput.focus(), 100);
    }
  }
}

function showSmartSuggestion(type) {
  const suggestions = {
    'application': {
      title: 'Grant Application Process',
      content: 'Ready to apply for funding? Our streamlined application process is designed for 501(c)(3) nonprofits in Greater Houston.',
      actions: [
        { text: 'Start Application', url: '/funding-application', primary: true },
        { text: 'View Requirements', url: '/process-questions' },
        { text: 'See Timeline', url: '/process-questions' }
      ]
    },
    'recipients': {
      title: 'Grant Recipients Showcase',
      content: 'Discover the amazing nonprofits we\'ve supported and the incredible impact they\'re making in Houston.',
      actions: [
        { text: 'View Recipients', url: '/recipients', primary: true },
        { text: 'Read Success Stories', url: '/our-recipients' },
        { text: 'See Impact Data', url: '/impact-dashboard' }
      ]
    },
    'impact': {
      title: 'Community Impact Dashboard',
      content: 'Explore transparent metrics showing exactly how your donations create measurable community impact.',
      actions: [
        { text: 'View Dashboard', url: '/impact-dashboard', primary: true },
        { text: 'Financial Transparency', url: '/impact-dashboard' },
        { text: 'Community Outcomes', url: '/impact-dashboard' }
      ]
    },
    'faq': {
      title: 'Frequently Asked Questions',
      content: 'Get quick answers to common questions about eligibility, application process, and grant decisions.',
      actions: [
        { text: 'View All FAQs', url: '/process-questions', primary: true },
        { text: 'Application Help', url: '/process-questions' },
        { text: 'Contact Support', url: '/contact' }
      ]
    }
  };

  const suggestion = suggestions[type];
  if (!suggestion) return;

  showSmartModal(suggestion);
}

function showSmartModal(suggestion) {
  const existingModal = document.getElementById('smart-modal');
  if (existingModal) {
    existingModal.remove();
  }

  const modal = document.createElement('div');
  modal.id = 'smart-modal';
  modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4';
  modal.innerHTML = `
    <div class="bg-white rounded-2xl shadow-2xl max-w-md w-full p-6 transform transition-all duration-300 scale-95 opacity-0" id="smart-modal-content">
      <div class="flex items-center justify-between mb-4">
        <div class="flex items-center gap-3">
          <div class="w-10 h-10 bg-gradient-to-r from-green-500 to-emerald-600 rounded-lg flex items-center justify-center">
            <i class="fas fa-sparkles text-white text-sm"></i>
          </div>
          <h3 class="text-lg font-bold text-gray-900">${suggestion.title}</h3>
        </div>
        <button onclick="closeSmartModal()" class="text-gray-400 hover:text-gray-600 transition-colors">
          <i class="fas fa-times text-lg"></i>
        </button>
      </div>
      <p class="text-gray-600 mb-6">${suggestion.content}</p>
      <div class="space-y-3">
        ${suggestion.actions.map(action => `
          <a href="${action.url}" class="block w-full px-4 py-3 ${action.primary ? 'bg-gradient-to-r from-green-600 to-emerald-700 text-white hover:from-green-700 hover:to-emerald-800' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'} rounded-lg text-center font-medium transition-all duration-200 hover:shadow-md">
            ${action.text}
          </a>
        `).join('')}
      </div>
    </div>
  `;

  document.body.appendChild(modal);

  setTimeout(() => {
    const content = document.getElementById('smart-modal-content');
    if (content) {
      content.classList.remove('scale-95', 'opacity-0');
      content.classList.add('scale-100', 'opacity-100');
    }
  }, 10);

  modal.addEventListener('click', (e) => {
    if (e.target === modal) {
      closeSmartModal();
    }
  });
}

function closeSmartModal() {
  const modal = document.getElementById('smart-modal');
  const content = document.getElementById('smart-modal-content');
  
  if (content) {
    content.classList.add('scale-95', 'opacity-0');
    content.classList.remove('scale-100', 'opacity-100');
  }
  
  setTimeout(() => {
    if (modal) {
      modal.remove();
    }
  }, 300);
}

// Set up AI features
function initAIFeatures() {
  console.log('Initializing AI features...');
  
  const desktopSearch = document.getElementById('ai-search-desktop');
  const mobileSearch = document.getElementById('ai-search-mobile');
  
  if (desktopSearch) {
    desktopSearch.addEventListener('input', () => {
      clearTimeout(searchDebounceTimer);
      searchDebounceTimer = setTimeout(() => performAISearch(false), 300);
    });
    
    desktopSearch.addEventListener('keydown', (e) => {
      if (e.key === 'Enter') {
        e.preventDefault();
        performAISearch(false);
      }
    });
  }
  
  if (mobileSearch) {
    mobileSearch.addEventListener('input', () => {
      clearTimeout(searchDebounceTimer);
      searchDebounceTimer = setTimeout(() => performAISearch(true), 300);
    });
    
    mobileSearch.addEventListener('keydown', (e) => {
      if (e.key === 'Enter') {
        e.preventDefault();
        performAISearch(true);
      }
    });
  }

  document.addEventListener('click', (e) => {
    const desktopResults = document.getElementById('ai-search-results');
    const mobileResults = document.getElementById('mobile-search-results');
    const desktopSearch = document.getElementById('ai-search-desktop');
    const mobileSearch = document.getElementById('ai-search-mobile');
    
    if (desktopResults && !desktopResults.contains(e.target) && !desktopSearch.contains(e.target)) {
      desktopResults.classList.add('hidden');
    }
    
    if (mobileResults && !mobileResults.contains(e.target) && !mobileSearch.contains(e.target)) {
      mobileResults.classList.add('hidden');
    }
  });

  console.log('AI features initialized successfully');
}

// Global functions
window.performAISearch = performAISearch;
window.toggleMobileSearch = toggleMobileSearch;
window.showSmartSuggestion = showSmartSuggestion;
window.closeSmartModal = closeSmartModal;
window.quickSearch = quickSearch;
window.navigateToResult = navigateToResult;

function init() {
    console.log('Home page initialized');
    
    // Initialize carousel
    setTimeout(() => {
        initAutoPlay();
    }, 1000);
    
    // Initialize AI features
    setTimeout(() => {
        initAIFeatures();
    }, 500);
    
    // Fallback for carousel
    setTimeout(() => {
        if (!carousel) {
            initAutoPlay();
        }
    }, 3000);
}

function teardown() {
    console.log('Home page teardown');
    
    // Cleanup carousel
    stopAutoPlay();
    if (carousel) {
        carousel.removeEventListener('mouseenter', pauseAutoPlay);
        carousel.removeEventListener('mouseleave', resumeAutoPlay);
    }
    
    // Cleanup AI features
    clearTimeout(searchDebounceTimer);
    const modal = document.getElementById('smart-modal');
    if (modal) {
        modal.remove();
    }
}

// Export functions
module.exports = {
    init: init,
    teardown: teardown
};