import { Component } from '../core/Component.js';
import { eventBus } from '../core/EventBus.js';
import { ToastComponent } from '../components/toast.js';

/**
 * Controller для главной страницы
 */
export default class IndexPage extends Component {
  static defaultOptions = {
    heroAnimationDelay: 300,
    featuresAnimationDelay: 600
  };

  constructor() {
    // Создаем компонент на основе body
    super(document.body, IndexPage.defaultOptions);
    
    this.heroElement = null;
    this.featuresElements = [];
  }

  beforeInit() {
    console.log('🏠 IndexPage: Initializing...');
    this.bindElements();
  }

  bindElements() {
    this.heroElement = this.find('.hero');
    this.featuresElements = Array.from(this.findAll('.feature'));
  }

  bindEvents() {
    // Привязываем события для демо-кнопок
    this.addEventListener('click', this.handleDemoButtonClick);
    
    // Слушаем события компонентов
    eventBus.on('component:init', this.onComponentInit.bind(this));
    
    // Обработка скролла для анимаций
    this.addEventListener(window, 'scroll', this.handleScroll);
    
    // Обработка resize
    this.addEventListener(window, 'resize', this.handleResize);
  }

  afterInit() {
    this.animateHero();
    this.setupIntersectionObserver();
    
    // Показываем приветственное уведомление
    setTimeout(() => {
      ToastComponent.info('Добро пожаловать в ViteKit Universal!', {
        title: 'Привет! 👋',
        duration: 5000
      });
    }, 1000);
  }

  /**
   * Анимация hero секции
   */
  animateHero() {
    if (!this.heroElement) return;
    
    const title = this.heroElement.querySelector('.hero__title');
    const subtitle = this.heroElement.querySelector('.hero__subtitle');
    const actions = this.heroElement.querySelector('.hero__actions');
    
    // Добавляем классы для анимации
    setTimeout(() => {
      title?.classList.add('animate-fade-in-up');
    }, this.options.heroAnimationDelay);
    
    setTimeout(() => {
      subtitle?.classList.add('animate-fade-in-up');
    }, this.options.heroAnimationDelay + 200);
    
    setTimeout(() => {
      actions?.classList.add('animate-fade-in-up');
    }, this.options.heroAnimationDelay + 400);
  }

  /**
   * Настройка Intersection Observer для анимации элементов при скролле
   */
  setupIntersectionObserver() {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('animate-fade-in-up');
          observer.unobserve(entry.target);
        }
      });
    }, {
      threshold: 0.1,
      rootMargin: '0px 0px -50px 0px'
    });

    // Наблюдаем за features
    this.featuresElements.forEach(feature => {
      observer.observe(feature);
    });

    // Наблюдаем за другими секциями
    this.findAll('.technologies .tech-item').forEach(item => {
      observer.observe(item);
    });
  }

  /**
   * Обработка кликов по демо-кнопкам
   */
  handleDemoButtonClick(event) {
    const button = event.target.closest('[data-demo-action]');
    if (!button) return;

    const action = button.dataset.demoAction;
    
    switch (action) {
      case 'show-features':
        this.showFeatures();
        break;
      case 'scroll-to-tech':
        this.scrollToTechnologies();
        break;
      default:
        console.log(`Unknown demo action: ${action}`);
    }
  }

  /**
   * Показ features с анимацией
   */
  showFeatures() {
    const featuresSection = this.find('.features');
    if (featuresSection) {
      featuresSection.scrollIntoView({ 
        behavior: 'smooth',
        block: 'start'
      });
      
      // Анимируем features
      setTimeout(() => {
        this.featuresElements.forEach((feature, index) => {
          setTimeout(() => {
            feature.classList.add('animate-bounce-in');
          }, index * 100);
        });
      }, 500);
    }
  }

  /**
   * Скролл к секции технологий
   */
  scrollToTechnologies() {
    const techSection = this.find('.technologies');
    if (techSection) {
      techSection.scrollIntoView({ 
        behavior: 'smooth',
        block: 'start'
      });
    }
  }

  /**
   * Обработка скролла
   */
  handleScroll(event) {
    const scrollY = window.scrollY;
    
    // Параллакс эффект для hero
    if (this.heroElement && scrollY < this.heroElement.offsetHeight) {
      const speed = 0.5;
      this.heroElement.style.transform = `translateY(${scrollY * speed}px)`;
    }
    
    // Обновление прогресса чтения
    this.updateReadingProgress();
  }

  /**
   * Обновление прогресса чтения страницы
   */
  updateReadingProgress() {
    const scrollTop = window.scrollY;
    const docHeight = document.documentElement.scrollHeight - window.innerHeight;
    const scrollPercent = (scrollTop / docHeight) * 100;
    
    // Создаем прогресс-бар если его нет
    let progressBar = document.querySelector('.reading-progress');
    if (!progressBar) {
      progressBar = document.createElement('div');
      progressBar.className = 'reading-progress';
      progressBar.style.cssText = `
        position: fixed;
        top: 0;
        left: 0;
        width: 0%;
        height: 3px;
        background: linear-gradient(90deg, #3b82f6, #10b981);
        z-index: 9999;
        transition: width 0.1s ease;
      `;
      document.body.appendChild(progressBar);
    }
    
    progressBar.style.width = `${Math.min(100, scrollPercent)}%`;
  }

  /**
   * Обработка изменения размера окна
   */
  handleResize(event) {
    // Обновляем размеры для адаптивности
    this.updateResponsiveElements();
  }

  /**
   * Обновление адаптивных элементов
   */
  updateResponsiveElements() {
    const isMobile = window.innerWidth < 768;
    
    // Переключаем классы для мобильной версии
    document.body.classList.toggle('is-mobile', isMobile);
    
    // Обновляем hero высоту
    if (this.heroElement) {
      const minHeight = isMobile ? '60vh' : '80vh';
      this.heroElement.style.minHeight = minHeight;
    }
  }

  /**
   * Обработка инициализации компонентов
   */
  onComponentInit(data) {
    console.log(`🏠 IndexPage: Component initialized:`, data.component.constructor.name);
    
    // Можем добавить специфичную логику для разных компонентов
    if (data.component.constructor.name === 'TabsComponent') {
      this.setupTabsIntegration(data.component);
    }
  }

  /**
   * Интеграция с табами
   */
  setupTabsIntegration(tabsComponent) {
    // Добавляем обработчик изменения табов
    tabsComponent.element.addEventListener('tabchange', (event) => {
      const { index, tab } = event.detail;
      
      // Трекинг аналитики
      this.trackTabChange(index, tab.textContent);
    });
  }

  /**
   * Трекинг событий (заглушка для аналитики)
   */
  trackTabChange(index, tabName) {
    console.log(`📊 Analytics: Tab changed to "${tabName}" (index: ${index})`);
    
    // Здесь можно добавить отправку данных в Google Analytics, Yandex.Metrica и т.д.
    if (typeof gtag !== 'undefined') {
      gtag('event', 'tab_change', {
        'tab_name': tabName,
        'tab_index': index
      });
    }
  }

  /**
   * Получение метрик страницы
   */
  getPageMetrics() {
    return {
      scrollPosition: window.scrollY,
      viewportSize: {
        width: window.innerWidth,
        height: window.innerHeight
      },
      heroVisible: this.heroElement ? this.isElementInViewport(this.heroElement) : false,
      activeFeatures: this.featuresElements.filter(el => 
        el.classList.contains('animate-fade-in-up')
      ).length
    };
  }

  /**
   * Проверка видимости элемента
   */
  isElementInViewport(element) {
    const rect = element.getBoundingClientRect();
    return rect.top < window.innerHeight && rect.bottom > 0;
  }

  /**
   * Очистка ресурсов
   */
  beforeDestroy() {
    // Удаляем прогресс-бар
    const progressBar = document.querySelector('.reading-progress');
    if (progressBar) {
      progressBar.remove();
    }
    
    // Отписываемся от глобальных событий
    eventBus.off('component:init');
    
    console.log('🏠 IndexPage: Cleaned up');
  }
}