var menuItems         = [].slice.call( document.querySelectorAll( '.menu__item' ) ),
    menuSubs          = [].slice.call( document.querySelectorAll( '.dropdown_menu') ),
    selectedMenu      = undefined,
    subBg			  = document.querySelector( '.dropdown__bg' ),
    subBgBtm		  = document.querySelector( '.dropdown__bg-bottom' ),
    subArr			  = document.querySelector( '.dropdown__arrow' ),
    subCnt            = document.querySelector( '.dropdown__wrap' ),
    header			  = document.querySelector( '.main-header' ),
    closeDropdownTimeout,

    startCloseTimeout = function (){
      closeDropdownTimeout = setTimeout( () => closeDropdown() , 50 );
    },

    stopCloseTimeout   = function () {
      clearTimeout( closeDropdownTimeout );
    },

    openDropdown      = function (el) {
      // Проверяем, что все необходимые элементы существуют
      if (!subBg || !subBgBtm || !subArr || !subCnt || !header) {
        return;
      }

      //- get menu ID
      var menuId     = el.getAttribute( 'data-sub' );
      //- get related sub menu
      var menuSub    = document.querySelector( '.dropdown_menu[data-sub="'+menuId+'"]' );

      if (!menuSub) return;

      //- get menu sub content
      var menuSubCnt = menuSub.querySelector( '.dropdown_menu__content' )
      if (!menuSubCnt) return;

      //- get bottom section of current sub
      //var menuSubBtm = menuSubCnt.querySelector('.bottom-section').getBoundingClientRect();
      //- get height of top section
      var menuSubTop = menuSubCnt.querySelector('.nav-block');
      if (!menuSubTop) return;
      menuSubTop = menuSubTop.getBoundingClientRect();
      //
      //- get menu position
      var menuMeta   = el.getBoundingClientRect();
      //- get sub menu position
      var subMeta    = menuSubCnt.getBoundingClientRect();


      //- set selected menu
      selectedMenu = menuId;


      //- Remove active Menu
      menuItems.forEach( el => el.classList.remove( 'active' ) );
      //- Set current menu to active
      el.classList.add( 'active' );

      //- Remove active sub menu
      menuSubs.forEach( el => el.classList.remove( 'active' ) );
      //- Set current menu to active
      menuSub.classList.add( 'active' );

      //- Set dropdown menu background style to match current submenu style
      subBg.style.opacity    = 1;
      subBg.style.left       = menuMeta.left - ( (subMeta.width / 10) - menuMeta.width / 10 ) + 'px';
      subBg.style.width      = subMeta.width+'px';
      subBg.style.height     = subMeta.height+'px';
      //- Set dropdown menu bottom section background position
      subBgBtm.style.top     = menuSubTop.height+'px';
      // console.log( menuSubBtm );

      //- Set Arrow position
      subArr.style.opacity  = 1;
      subArr.style.left     = menuMeta.left + menuMeta.width/2 - 10 + 'px';

      //- Set sub menu style
      subCnt.style.opacity = 1;
      subCnt.style.left    = menuMeta.left - ( (subMeta.width / 10) - menuMeta.width / 10 ) + 'px';
      subCnt.style.width   = subMeta.width+'px';
      subCnt.style.height  = subMeta.height+'px';

      //- Set current sub menu style
      menuSub.style.opacity = 1;

      header.classList.add('dropdown-active');

    },
    closeDropdown     = function () {
      // Проверяем, что все необходимые элементы существуют
      if (!subBg || !subArr || !header) {
        return;
      }

      //- Remove active class from all menu items
      menuItems.forEach( el => el.classList.remove('active') );
      //- Remove active class from all sub menus
      menuSubs.forEach ( el => {
        el.classList.remove( 'active' );
        el.style.opacity = 0;
      } );
      //- set sub menu background opacity
      subBg.style.opacity   = 0;
      //- set arrow opacity
      subArr.style.opacity = 0;


      // unset selected menu
      selectedMenu = undefined;

      header.classList.remove('dropdown-active');
    };

//- Binding mouse event to each menu items (только если элементы существуют)
if (menuItems.length > 0) {
  menuItems.forEach( el => {

    //- mouse enter event
    el.addEventListener( 'mouseenter', function() {
      stopCloseTimeout();
      openDropdown( this );
    }, false );

    //- mouse leave event
    el.addEventListener( 'mouseleave', () => startCloseTimeout(), false);

  });
}


//- Binding mouse event to each sub menus (только если элементы существуют)
if (menuSubs.length > 0) {
  menuSubs.forEach( el => {

    el.addEventListener( 'mouseenter', () => stopCloseTimeout(), false );
    el.addEventListener( 'mouseleave', () => startCloseTimeout(), false );

  } );
}


// Мобильное меню функции
function openMobileMenu() {
    const overlay = document.getElementById('mobile-menu-overlay');
    const navbarToggle = document.querySelector('.navbar-toggle');
    
    overlay.classList.add('active');
    navbarToggle.classList.add('active');
    document.body.style.overflow = 'hidden'; // Блокируем скролл
}

function closeMobileMenu() {
    const overlay = document.getElementById('mobile-menu-overlay');
    const navbarToggle = document.querySelector('.navbar-toggle');
    
    overlay.classList.remove('active');
    navbarToggle.classList.remove('active');
    document.body.style.overflow = ''; // Возвращаем скролл
    
    // Закрываем все dropdown'ы
    closeMobileDropdown();
}

function openMobileDropdown(subType) {
    const dropdown = document.getElementById(`mobile-${subType}-dropdown`);
    if (dropdown) {
        dropdown.classList.add('active');
    }
}

function closeMobileDropdown() {
    const dropdowns = document.querySelectorAll('.mobile-dropdown-content');
    dropdowns.forEach(dropdown => {
        dropdown.classList.remove('active');
    });
}

// Переключатель меню (открыть/закрыть)
function toggleMobileMenu() {
    const overlay = document.getElementById('mobile-menu-overlay');
    if (overlay.classList.contains('active')) {
        closeMobileMenu();
    } else {
        openMobileMenu();
    }
}

// Закрытие меню при клике вне его
document.addEventListener('click', function(event) {
    const overlay = document.getElementById('mobile-menu-overlay');
    const navbarToggle = document.querySelector('.navbar-toggle');
    
    if (overlay.classList.contains('active') && 
        !overlay.contains(event.target) && 
        !navbarToggle.contains(event.target)) {
        closeMobileMenu();
    }
});

// Закрытие меню при нажатии Escape
document.addEventListener('keydown', function(event) {
    if (event.key === 'Escape') {
        closeMobileMenu();
    }
});

// Функциональность модерации отзывов
document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('.reviews-demonstration__form');
    const input = document.getElementById('demonstration');
    const resultBlock = document.querySelector('.reviews-demonstration__block');
    
    if (form && input && resultBlock) {
        form.addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const text = input.value.trim();
            if (!text) {
                resultBlock.innerHTML = '<p style="color: red;">Пожалуйста, введите текст отзыва</p>';
                return;
            }
            
            // Показываем индикатор загрузки
            resultBlock.innerHTML = '<p>Отправка запроса...</p>';
            
            try {
                const response = await fetch('https://api.zynero.tech/v1/reviews/moderation/moderate', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': 'Bearer TEST_API_KEY'
                    },
                    body: JSON.stringify({
                        text: text,
                        entity_id: 'product-123'
                    })
                });
                
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                
                const data = await response.json();
                
                // Отображаем результат в виде JSON
                resultBlock.innerHTML = `
                    <h4>Результат модерации:</h4>
                    <pre style="background: #06182c; overflow-x: auto;">${JSON.stringify(data, null, 2)}</pre>
                `;
                
            } catch (error) {
                console.error('Ошибка при отправке запроса:', error);
                resultBlock.innerHTML = `
                    <p style="color: red;">Ошибка при отправке запроса:</p>
                    <pre style="background: #06182c; color: red;">${error.message}</pre>
                `;
            }
        });
    }
});