import { Component } from '../core/Component.js';
import { eventBus } from '../core/EventBus.js';
import { ToastComponent } from '../components/toast.js';
import { debounce } from '../utils/performance.js';
import { copyToClipboard } from '../utils/helpers.js';

/**
 * Controller для страницы showcase
 */
export default class ShowcasePage extends Component {
  static defaultOptions = {
    highlightCodeBlocks: true,
    enableCodeCopy: true,
    trackInteractions: true
  };

  constructor() {
    super(document.body, ShowcasePage.defaultOptions);
    
    this.codeBlocks = [];
    this.demoSections = [];
    this.interactionStats = {
      toastClicks: 0,
      modalOpens: 0,
      accordionToggles: 0,
      tabSwitches: 0,
      codeCopies: 0
    };
  }

  beforeInit() {
    console.log('🎭 ShowcasePage: Initializing...');
    this.bindElements();
  }

  bindElements() {
    this.codeBlocks = Array.from(this.findAll('.demo-code'));
    this.demoSections = Array.from(this.findAll('.showcase-section'));
  }

  bindEvents() {
    // Обработка кликов по демо-кнопкам
    this.addEventListener('click', this.handleDemoClick);
    
    // Обработка событий компонентов
    this.setupComponentListeners();
    
    // Обработка скролла для навигации
    this.addEventListener(window, 'scroll', debounce(this.handleScroll.bind(this), 100));
    
    // Keyboard shortcuts
    this.addEventListener(document, 'keydown', this.handleKeyDown);
  }

  afterInit() {
    this.setupCodeBlocks();
    this.setupSectionNavigation();
    this.showWelcomeMessage();
    
    if (this.options.trackInteractions) {
      this.setupAnalytics();
    }
  }

  /**
   * Настройка блоков кода
   */
  setupCodeBlocks() {
    this.codeBlocks.forEach((block, index) => {
      // Добавляем кнопку копирования
      if (this.options.enableCodeCopy) {
        this.addCopyButton(block, index);
      }
      
      // Подсветка синтаксиса отключена для избежания конфликтов
      // if (this.options.highlightCodeBlocks) {
      //   this.highlightCode(block);
      // }
    });
  }

  /**
   * Добавление кнопки копирования к блоку кода
   */
  addCopyButton(codeBlock, index) {
    const wrapper = document.createElement('div');
    wrapper.className = 'code-block-wrapper';
    wrapper.style.position = 'relative';
    
    const copyButton = document.createElement('button');
    copyButton.className = 'code-copy-btn';
    copyButton.innerHTML = '📋 Копировать';
    copyButton.style.cssText = `
      position: absolute;
      top: 8px;
      right: 8px;
      background: rgba(255, 255, 255, 0.9);
      border: 1px solid #e5e7eb;
      border-radius: 4px;
      padding: 4px 8px;
      font-size: 12px;
      cursor: pointer;
      transition: all 0.2s;
      z-index: 10;
    `;
    
    copyButton.addEventListener('click', async () => {
      const code = codeBlock.textContent;
      const success = await copyToClipboard(code);
      
      if (success) {
        copyButton.innerHTML = '✅ Скопировано!';
        this.interactionStats.codeCopies++;
        
        setTimeout(() => {
          copyButton.innerHTML = '📋 Копировать';
        }, 2000);
        
        ToastComponent.success('Код скопирован в буфер обмена!');
      } else {
        ToastComponent.error('Не удалось скопировать код');
      }
    });
    
    // Оборачиваем блок кода
    codeBlock.parentNode.insertBefore(wrapper, codeBlock);
    wrapper.appendChild(codeBlock);
    wrapper.appendChild(copyButton);
  }

  /**
   * Подсветка синтаксиса (упрощенная)
   */
  highlightCode(codeBlock) {
    let code = codeBlock.innerHTML;
    
    // Подсвечиваем HTML теги
    code = code.replace(/&lt;(\/?[\w\s="'-.:/]+?)&gt;/g, 
      '<span style="color: #e11d48;">&lt;$1&gt;</span>');
    
    // Подсвечиваем JavaScript ключевые слова
    code = code.replace(/\b(const|let|var|function|class|import|export|default|if|else|for|while|return|new|this)\b/g,
      '<span style="color: #7c3aed;">$1</span>');
    
    // Подсвечиваем строки
    code = code.replace(/'([^']*?)'/g, '<span style="color: #059669;">\'$1\'</span>');
    code = code.replace(/"([^"]*?)"/g, '<span style="color: #059669;">"$1"</span>');
    
    // Подсвечиваем комментарии
    code = code.replace(/(\/\/.*$)/gm, '<span style="color: #6b7280;">$1</span>');
    
    codeBlock.innerHTML = code;
  }

  /**
   * Настройка навигации по секциям
   */
  setupSectionNavigation() {
    // Создаем фиксированную навигацию
    const nav = document.createElement('nav');
    nav.className = 'showcase-nav';
    nav.style.cssText = `
      position: fixed;
      top: 80px;
      right: 20px;
      background: white;
      border-radius: 8px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      padding: 16px;
      z-index: 1000;
      max-width: 200px;
    `;
    
    const navTitle = document.createElement('h4');
    navTitle.textContent = 'На этой странице';
    navTitle.style.cssText = 'margin: 0 0 12px 0; font-size: 14px; font-weight: 600;';
    nav.appendChild(navTitle);
    
    const navList = document.createElement('ul');
    navList.style.cssText = 'list-style: none; margin: 0; padding: 0;';
    
    this.demoSections.forEach((section, index) => {
      const h2 = section.querySelector('h2');
      if (!h2) return;
      
      const sectionId = `section-${index}`;
      section.id = sectionId;
      
      const listItem = document.createElement('li');
      listItem.style.cssText = 'margin-bottom: 8px;';
      
      const link = document.createElement('a');
      link.href = `#${sectionId}`;
      link.textContent = h2.textContent;
      link.style.cssText = `
        display: block;
        padding: 4px 8px;
        color: #6b7280;
        text-decoration: none;
        border-radius: 4px;
        font-size: 13px;
        transition: all 0.2s;
      `;
      
      link.addEventListener('click', (e) => {
        e.preventDefault();
        section.scrollIntoView({ behavior: 'smooth' });
      });
      
      listItem.appendChild(link);
      navList.appendChild(listItem);
    });
    
    nav.appendChild(navList);
    document.body.appendChild(nav);
  }

  /**
   * Настройка слушателей событий компонентов
   */
  setupComponentListeners() {
    // Toast события
    eventBus.on('toast:show', (data) => {
      this.interactionStats.toastClicks++;
      console.log('🎭 ShowcasePage: Toast shown', data);
    });
    
    // Modal события
    eventBus.on('modal:open', (data) => {
      this.interactionStats.modalOpens++;
      console.log('🎭 ShowcasePage: Modal opened', data);
    });
    
    // Accordion события
    this.addEventListener(document, 'accordionopen', (event) => {
      this.interactionStats.accordionToggles++;
      this.trackInteraction('accordion_open', {
        accordion_id: event.target.id,
        panel_index: event.detail.index
      });
    });
    
    // Tab события
    this.addEventListener(document, 'tabchange', (event) => {
      this.interactionStats.tabSwitches++;
      this.trackInteraction('tab_change', {
        tabs_id: event.target.id,
        tab_index: event.detail.index,
        tab_title: event.detail.tab.textContent
      });
    });
  }

  /**
   * Обработка кликов по демо-элементам
   */
  handleDemoClick(event) {
    // Отслеживаем клики по toast кнопкам
    const toastTrigger = event.target.closest('[data-toast-trigger]');
    if (toastTrigger) {
      this.handleToastDemo(toastTrigger);
      return;
    }
    
    // Отслеживаем клики по modal кнопкам
    const modalTrigger = event.target.closest('[data-micromodal-trigger]');
    if (modalTrigger) {
      this.handleModalDemo(modalTrigger);
      return;
    }
  }

  /**
   * Обработка демо toast
   */
  handleToastDemo(trigger) {
    const type = trigger.dataset.toastTrigger;
    const title = trigger.dataset.toastTitle;
    const message = trigger.dataset.toastMessage;
    
    console.log(`🎭 ShowcasePage: Showing ${type} toast`);
    
    // Добавляем визуальную обратную связь
    trigger.style.transform = 'scale(0.95)';
    setTimeout(() => {
      trigger.style.transform = '';
    }, 150);
    
    this.trackInteraction('toast_demo', { type, title });
  }

  /**
   * Обработка демо modal
   */
  handleModalDemo(trigger) {
    const modalId = trigger.dataset.micromodalTrigger;
    console.log(`🎭 ShowcasePage: Opening modal ${modalId}`);
    
    this.trackInteraction('modal_demo', { modal_id: modalId });
  }

  /**
   * Обработка скролла
   */
  handleScroll() {
    this.updateActiveNavigation();
    this.updateScrollProgress();
  }

  /**
   * Обновление активной навигации
   */
  updateActiveNavigation() {
    const scrollY = window.scrollY + 100;
    const navLinks = document.querySelectorAll('.showcase-nav a');
    
    this.demoSections.forEach((section, index) => {
      const sectionTop = section.offsetTop;
      const sectionHeight = section.offsetHeight;
      const navLink = navLinks[index];
      
      if (!navLink) return;
      
      if (scrollY >= sectionTop && scrollY < sectionTop + sectionHeight) {
        navLink.style.cssText += 'background: #3b82f6; color: white;';
      } else {
        navLink.style.cssText = navLink.style.cssText.replace(/background:.*?;|color:.*?;/g, '');
      }
    });
  }

  /**
   * Обновление прогресса прокрутки
   */
  updateScrollProgress() {
    const scrollTop = window.scrollY;
    const docHeight = document.documentElement.scrollHeight - window.innerHeight;
    const scrollPercent = (scrollTop / docHeight) * 100;
    
    // Обновляем прогресс в навигации
    const nav = document.querySelector('.showcase-nav');
    if (nav) {
      nav.style.opacity = scrollPercent > 10 ? '1' : '0.7';
    }
  }

  /**
   * Обработка клавиатурных сокращений
   */
  handleKeyDown(event) {
    // Ctrl/Cmd + K - фокус на поиск (если будет добавлен)
    if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
      event.preventDefault();
      ToastComponent.info('Поиск будет добавлен в следующей версии!');
    }
    
    // Escape - закрыть все модалы
    if (event.key === 'Escape') {
      ToastComponent.clear();
    }
  }

  /**
   * Показ приветственного сообщения
   */
  showWelcomeMessage() {
    setTimeout(() => {
      ToastComponent.success('Добро пожаловать в Showcase! Изучайте компоненты интерактивно.', {
        title: 'Showcase готов! 🎭',
        duration: 4000
      });
    }, 800);
  }

  /**
   * Настройка аналитики
   */
  setupAnalytics() {
    // Отправляем данные о посещении страницы
    this.trackInteraction('page_view', {
      page: 'showcase',
      sections_count: this.demoSections.length,
      code_blocks_count: this.codeBlocks.length
    });
    
    // Отправляем статистику при уходе со страницы
    window.addEventListener('beforeunload', () => {
      this.trackInteraction('page_stats', this.interactionStats);
    });
  }

  /**
   * Трекинг взаимодействий
   */
  trackInteraction(action, data = {}) {
    if (!this.options.trackInteractions) return;
    
    console.log(`📊 Showcase Analytics: ${action}`, data);
    
    // Здесь можно добавить отправку в Google Analytics, Yandex.Metrica и т.д.
    if (typeof gtag !== 'undefined') {
      gtag('event', action, {
        event_category: 'showcase',
        ...data
      });
    }
  }

  /**
   * Получение статистики страницы
   */
  getStats() {
    return {
      ...this.interactionStats,
      sectionsViewed: this.demoSections.filter(section => 
        this.isElementInViewport(section)
      ).length,
      currentSection: this.getCurrentSection(),
      timeOnPage: Date.now() - this.initTime
    };
  }

  /**
   * Получение текущей секции
   */
  getCurrentSection() {
    const scrollY = window.scrollY + 100;
    
    for (const section of this.demoSections) {
      const sectionTop = section.offsetTop;
      const sectionHeight = section.offsetHeight;
      
      if (scrollY >= sectionTop && scrollY < sectionTop + sectionHeight) {
        return section.querySelector('h2')?.textContent || 'Unknown';
      }
    }
    
    return 'Top';
  }

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

  /**
   * Очистка ресурсов
   */
  beforeDestroy() {
    // Удаляем навигацию
    const nav = document.querySelector('.showcase-nav');
    if (nav) {
      nav.remove();
    }
    
    // Отправляем финальную статистику
    this.trackInteraction('page_exit', this.getStats());
    
    console.log('🎭 ShowcasePage: Cleaned up');
  }
}