// AI-Powered Model Discovery System
class AIModelDiscovery {
  constructor() {
    this.isActive = true;
    this.rotationTimer = 15;
    this.rotationInterval = null;
    this.updateInterval = null;
    this.discoveryInterval = null;
    this.modelCount = 12847;
    this.discoveredToday = 0;
    
    // Sample model pool for rotation
    this.modelPool = [
      {
        title: 'Modern Minimalist House',
        description: 'Contemporary residential design with clean lines and sustainable features',
        platform: 'GrabCAD',
        rating: 4.9,
        downloads: 2300,
        category: 'AI Curated',
        image: 'https://imagedelivery.net/xaKlCos5cTg_1RWzIu_h-A/b6f1cf92-9b03-42dd-dfc6-f16778882c00/public',
        dataMedia: '{"id":"2178614086","src":"iStock","type":"image"}',
        altText: 'Modern box house isometric isolated on blue background.3d rendering'
      },
      {
        title: 'Multi-Story Residential',
        description: 'Urban residential complex with modern amenities and green spaces',
        platform: 'Thingiverse',
        rating: 4.7,
        downloads: 1800,
        category: 'Trending',
        image: 'https://imagedelivery.net/xaKlCos5cTg_1RWzIu_h-A/09f738bc-8d82-4379-eaf9-7da46b7c7000/public',
        dataMedia: '{"id":"1363859969","src":"iStock","type":"image"}',
        altText: 'Modern residential building at the white background. 3d illustration'
      },
      {
        title: 'Abstract Architecture',
        description: 'Geometric architectural design with chrome and glass elements',
        platform: 'Wikifactory',
        rating: 5.0,
        downloads: 892,
        category: 'New',
        image: 'https://imagedelivery.net/xaKlCos5cTg_1RWzIu_h-A/1c5a2d3c-af89-424b-098f-239339a9c900/publicContain',
        dataMedia: '{"id":"2197728872","src":"iStock","type":"image"}',
        altText: '3d illustration of abstract minimal architecture background, geometric architectural with chrome or glass design'
      },
      {
        title: 'Eco-Friendly Apartment',
        description: 'Sustainable apartment complex with green building technologies',
        platform: 'Fusion 360',
        rating: 4.8,
        downloads: 3100,
        category: 'Sustainable',
        image: 'https://imagedelivery.net/xaKlCos5cTg_1RWzIu_h-A/94ae246f-f700-45ba-e57f-3c9345100900/public',
        dataMedia: '{"id":"826385184","src":"iStock","type":"image"}',
        altText: '3D Apartment Rendering'
      },
      {
        title: 'Construction Model',
        description: 'Detailed building construction model with comprehensive blueprints',
        platform: 'ActCAD',
        rating: 4.6,
        downloads: 1500,
        category: 'Blueprint',
        image: 'https://imagedelivery.net/xaKlCos5cTg_1RWzIu_h-A/f37a6fd3-f6c2-4f61-f96b-af70cfabdb00/public',
        dataMedia: '{"id":"636304660","src":"iStock","type":"image"}',
        altText: 'abstract 3d illustration of building construction computer model over blueprints'
      },
      {
        title: 'Multi-Story Building',
        description: 'Contemporary multi-storey residential development model',
        platform: 'Cults3D',
        rating: 4.5,
        downloads: 967,
        category: 'High-Rise',
        image: 'https://imagedelivery.net/xaKlCos5cTg_1RWzIu_h-A/52a305ad-12c6-4b4a-f0d5-9e4189df5f00/publicContain',
        dataMedia: '{"id":"1094853292","src":"iStock","type":"image"}',
        altText: 'multi storey residential building. 3d illustration'
      }
    ];
    
    this.platformColors = {
      'GrabCAD': 'bg-blue-600',
      'Thingiverse': 'bg-blue-600',
      'Wikifactory': 'bg-purple-600',
      'Fusion 360': 'bg-orange-600',
      'ActCAD': 'bg-teal-600',
      'Cults3D': 'bg-pink-600',
      'Ultra Librarian': 'bg-purple-600',
      'STLFinder': 'bg-indigo-600',
      'Canva': 'bg-yellow-600'
    };

    this.categoryColors = {
      'AI Curated': 'bg-[var(--accent3-color)]',
      'Trending': 'bg-[var(--accent-color)]',
      'New': 'bg-[var(--accent4-color)]',
      'Sustainable': 'bg-green-600',
      'Blueprint': 'bg-[var(--accent2-color)]',
      'High-Rise': 'bg-indigo-600'
    };

    this.init();
  }

  init() {
    this.setupEventListeners();
    this.startRotationTimer();
    this.startLiveUpdates();
    this.startModelDiscovery();
    this.animateCounters();
  }

  setupEventListeners() {
    // AI control buttons
    const pauseBtn = document.getElementById('ai-pause-btn');
    const refreshBtn = document.getElementById('ai-refresh-btn');
    const manualRotate = document.getElementById('manual-rotate');

    if (pauseBtn) {
      pauseBtn.addEventListener('click', () => this.toggleDiscovery());
    }

    if (refreshBtn) {
      refreshBtn.addEventListener('click', () => this.forceRefresh());
    }

    if (manualRotate) {
      manualRotate.addEventListener('click', () => this.manualRotation());
    }

    // Filter change handlers
    const filters = ['ai-building-type', 'ai-style', 'ai-platform', 'ai-curation'];
    filters.forEach(filterId => {
      const filter = document.getElementById(filterId);
      if (filter) {
        filter.addEventListener('change', () => this.applyAIFilters());
      }
    });
  }

  startRotationTimer() {
    const timerElement = document.getElementById('rotation-timer');
    
    this.rotationInterval = setInterval(() => {
      if (!this.isActive) return;
      
      this.rotationTimer--;
      if (timerElement) {
        timerElement.textContent = this.rotationTimer;
      }

      if (this.rotationTimer <= 0) {
        this.rotateModels();
        this.rotationTimer = 15;
      }
    }, 1000);
  }

  startLiveUpdates() {
    this.updateInterval = setInterval(() => {
      this.updateLastUpdateTime();
      this.updateModelCount();
    }, 30000); // Update every 30 seconds
  }

  startModelDiscovery() {
    this.discoveryInterval = setInterval(() => {
      if (!this.isActive) return;
      this.simulateModelDiscovery();
    }, 45000); // Discover new models every 45 seconds
  }

  rotateModels() {
    const grid = document.getElementById('ai-model-grid');
    if (!grid) return;

    // Add fade out effect
    grid.style.opacity = '0.3';
    grid.style.transform = 'scale(0.95)';

    setTimeout(() => {
      this.shuffleAndUpdateModels();
      
      // Fade back in
      grid.style.opacity = '1';
      grid.style.transform = 'scale(1)';
    }, 300);
  }

  shuffleAndUpdateModels() {
    const shuffled = [...this.modelPool].sort(() => Math.random() - 0.5);
    const selectedModels = shuffled.slice(0, 6);
    
    const grid = document.getElementById('ai-model-grid');
    if (!grid) return;

    // Update each model card
    const cards = grid.querySelectorAll('.model-card');
    cards.forEach((card, index) => {
      if (selectedModels[index]) {
        this.updateModelCard(card, selectedModels[index]);
      }
    });
  }

  updateModelCard(card, model) {
    // Update image
    const img = card.querySelector('img');
    if (img) {
      img.src = model.image;
      img.alt = model.altText;
      img.setAttribute('data-media', model.dataMedia);
    }

    // Update badges
    const badges = card.querySelectorAll('.absolute.top-4.left-4 span');
    if (badges[0]) {
      badges[0].textContent = model.category;
      badges[0].className = `px-3 py-1 ${this.categoryColors[model.category]} text-white text-xs rounded-full font-medium`;
    }
    if (badges[1]) {
      badges[1].textContent = model.platform;
      badges[1].className = `px-3 py-1 ${this.platformColors[model.platform]} text-white text-xs rounded-full font-medium`;
    }

    // Update rating and downloads
    const rating = card.querySelector('.fas.fa-star').nextElementSibling;
    const downloads = card.querySelector('.text-sm:last-child');
    if (rating) rating.textContent = model.rating;
    if (downloads) downloads.textContent = `${(model.downloads / 1000).toFixed(1)}K downloads`;

    // Update title and description
    const title = card.querySelector('h4');
    const description = card.querySelector('p.text-white\\/70');
    if (title) title.textContent = model.title;
    if (description) description.textContent = model.description;

    // Update discovery time
    const discoveryTime = card.querySelector('.text-white\\/70.text-sm');
    if (discoveryTime) {
      const minutes = Math.floor(Math.random() * 20) + 1;
      discoveryTime.textContent = `Discovered ${minutes}m ago`;
    }
  }

  simulateModelDiscovery() {
    this.discoveredToday += Math.floor(Math.random() * 5) + 1;
    this.modelCount += Math.floor(Math.random() * 3) + 1;
    
    // Update counters
    const todayCounter = document.querySelector('[data-counter]');
    const modelCountElement = document.getElementById('model-count');
    
    if (todayCounter) {
      this.animateNumber(todayCounter, parseInt(todayCounter.textContent), this.discoveredToday);
    }
    
    if (modelCountElement) {
      modelCountElement.textContent = this.modelCount.toLocaleString();
    }

    // Show discovery notification
    this.showDiscoveryNotification();
  }

  showDiscoveryNotification() {
    const notification = document.createElement('div');
    notification.className = 'fixed top-24 right-6 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg z-50 transform translate-x-full transition-transform duration-300';
    notification.innerHTML = `
      <div class="flex items-center gap-3">
        <i class="fas fa-robot animate-pulse"></i>
        <span>AI discovered new models!</span>
        <button class="ml-2 text-white/80 hover:text-white">
          <i class="fas fa-times"></i>
        </button>
      </div>
    `;

    document.body.appendChild(notification);

    // Slide in
    setTimeout(() => {
      notification.classList.remove('translate-x-full');
    }, 100);

    // Auto remove after 3 seconds
    setTimeout(() => {
      notification.classList.add('translate-x-full');
      setTimeout(() => notification.remove(), 300);
    }, 3000);

    // Manual close
    notification.querySelector('button').addEventListener('click', () => {
      notification.classList.add('translate-x-full');
      setTimeout(() => notification.remove(), 300);
    });
  }

  toggleDiscovery() {
    this.isActive = !this.isActive;
    const btn = document.getElementById('ai-pause-btn');
    const icon = btn?.querySelector('i');
    
    if (btn && icon) {
      if (this.isActive) {
        btn.innerHTML = '<i class="fas fa-pause mr-2"></i>Pause Discovery';
        btn.className = btn.className.replace('bg-green-600', 'bg-[var(--accent-color)]');
      } else {
        btn.innerHTML = '<i class="fas fa-play mr-2"></i>Resume Discovery';
        btn.className = btn.className.replace('bg-[var(--accent-color)]', 'bg-green-600');
      }
    }

    // Update status indicator
    const statusIndicator = document.querySelector('.w-3.h-3.bg-green-400');
    const statusText = document.querySelector('.text-white\\/90.text-sm.font-medium');
    
    if (statusIndicator && statusText) {
      if (this.isActive) {
        statusIndicator.className = 'w-3 h-3 bg-green-400 rounded-full animate-pulse';
        statusText.textContent = 'AI Scanner Active';
      } else {
        statusIndicator.className = 'w-3 h-3 bg-red-400 rounded-full';
        statusText.textContent = 'AI Scanner Paused';
      }
    }
  }

  forceRefresh() {
    const btn = document.getElementById('ai-refresh-btn');
    const icon = btn?.querySelector('i');
    
    if (icon) {
      icon.classList.add('fa-spin');
      setTimeout(() => icon.classList.remove('fa-spin'), 1000);
    }

    this.rotateModels();
    this.simulateModelDiscovery();
    this.updateLastUpdateTime();
  }

  manualRotation() {
    this.rotationTimer = 15;
    this.rotateModels();
    
    const btn = document.getElementById('manual-rotate');
    const icon = btn?.querySelector('i');
    
    if (icon) {
      icon.classList.add('fa-spin');
      setTimeout(() => icon.classList.remove('fa-spin'), 500);
    }
  }

  applyAIFilters() {
    const buildingType = document.getElementById('ai-building-type')?.value;
    const style = document.getElementById('ai-style')?.value;
    const platform = document.getElementById('ai-platform')?.value;
    const curation = document.getElementById('ai-curation')?.value;

    // Filter the model pool based on selections
    let filteredModels = [...this.modelPool];

    if (platform && platform !== 'all') {
      filteredModels = filteredModels.filter(model => 
        model.platform.toLowerCase().includes(platform.toLowerCase())
      );
    }

    // If no models match, show all models
    if (filteredModels.length === 0) {
      filteredModels = [...this.modelPool];
    }

    // Update the current display
    this.modelPool = filteredModels;
    this.rotateModels();
  }

  updateLastUpdateTime() {
    const lastUpdate = document.getElementById('last-update');
    if (lastUpdate) {
      const now = new Date();
      const minutes = Math.floor(Math.random() * 5) + 1;
      lastUpdate.innerHTML = `Last updated: <span class="text-[var(--accent3-color)]">${minutes} minutes ago</span>`;
    }
  }

  updateModelCount() {
    const modelCountElement = document.getElementById('model-count');
    if (modelCountElement) {
      this.modelCount += Math.floor(Math.random() * 10) + 1;
      modelCountElement.textContent = this.modelCount.toLocaleString();
    }
  }

  animateCounters() {
    const counters = document.querySelectorAll('[data-counter]');
    counters.forEach(counter => {
      const target = parseInt(counter.getAttribute('data-counter'));
      this.animateNumber(counter, 0, target);
    });
  }

  animateNumber(element, start, end, duration = 2000) {
    const range = end - start;
    const increment = range / (duration / 16);
    let current = start;
    
    const timer = setInterval(() => {
      current += increment;
      if (current >= end) {
        current = end;
        clearInterval(timer);
      }
      element.textContent = Math.floor(current);
    }, 16);
  }

  teardown() {
    if (this.rotationInterval) {
      clearInterval(this.rotationInterval);
    }
    if (this.updateInterval) {
      clearInterval(this.updateInterval);
    }
    if (this.discoveryInterval) {
      clearInterval(this.discoveryInterval);
    }
  }
}

// Additional homepage functionality
class HomepageEnhancements {
  constructor() {
    this.init();
  }

  init() {
    this.setupSmoothScrolling();
    this.setupIntersectionObserver();
    this.setupAnimatedElements();
  }

  setupSmoothScrolling() {
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
          target.scrollIntoView({
            behavior: 'smooth',
            block: 'start'
          });
        }
      });
    });
  }

  setupIntersectionObserver() {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('animate-fade-in');
        }
      });
    }, {
      threshold: 0.1,
      rootMargin: '0px 0px -50px 0px'
    });

    // Observe sections
    document.querySelectorAll('section').forEach(section => {
      observer.observe(section);
    });
  }

  setupAnimatedElements() {
    // Add hover effects to cards
    document.querySelectorAll('.group').forEach(card => {
      card.addEventListener('mouseenter', function() {
        this.style.transform = 'translateY(-10px) scale(1.02)';
      });
      
      card.addEventListener('mouseleave', function() {
        this.style.transform = 'translateY(0) scale(1)';
      });
    });
  }
}

// Initialize everything
let aiModelDiscovery;
let homepageEnhancements;

function init() {
  // Initialize AI Model Discovery system
  aiModelDiscovery = new AIModelDiscovery();
  
  // Initialize homepage enhancements
  homepageEnhancements = new HomepageEnhancements();
  
  console.log('Homepage with AI Model Discovery initialized');
}

function teardown() {
  // Clean up AI system
  if (aiModelDiscovery) {
    aiModelDiscovery.teardown();
  }
  
  console.log('Homepage teardown complete');
}

// Export functions for the page system
export { init, teardown };