---
import { pb, getImageUrl } from '@lib/pocketbase';

interface NavItem {
  id: string;
  title: string;
  url: string;
  is_visible: boolean;
  order: number;
}

interface LogoData {
  id: string;
  image: string;
  alt_text: string;
}

interface Props {
  items?: NavItem[];
  currentPath?: string;
}

const { items, currentPath = '/' }: Props = Astro.props;

// Нормализация текущего пути
const normalize = (path: string) => path.replace(/\/$/, '') || '/';
const normalizedCurrentPath = normalize(currentPath);

// Получаем пункты меню из базы, если не переданы извне
const navItems: NavItem[] = items ? items : await pb.collection('nav_items').getFullList({
  filter: 'is_visible = true',
  sort: 'order',
  requestKey: 'mobile_menu_nav'
});

// Фильтруем пункт "Главная" на главной странице
const filteredNavItems = navItems.filter((item) => {
  const itemUrl = normalize(item.url);
  if (itemUrl === '/' && normalizedCurrentPath === '/') {
    return false;
  }
  return true;
});

// Получаем логотип (безопасно, чтобы не ломалось, если базы нет)
let logoData = null;
try {
  logoData = await pb.collection('logo').getFirstListItem('', { requestKey: 'mobile_menu_logo' });
} catch (e) {
  // Игнорируем ошибку, если лого не загрузилось
}
---

<!-- Кнопка открытия -->
<button
  id="mobile-menu-btn"
  type="button"
  aria-label="Открыть меню"
  class="rounded-full bg-neutral-800/50 p-2 lg:hidden relative z-[60]"
>
  <!-- Контейнер для иконок, чтобы обеспечить точное позиционирование -->
  <div class="relative w-6 h-6">
    <!-- Иконка Menu (Hamburger) -->
    <svg id="icon-menu" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white absolute top-0 left-0 w-full h-full"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>

    <!-- Иконка Close (X) - скрыта по умолчанию -->
    <svg id="icon-close" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white absolute top-0 left-0 w-full h-full hidden"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
  </div>
</button>

<!-- Оверлей (затемнение фона) -->
<div
  id="mobile-overlay"
  class="fixed inset-0 z-40 bg-black/60 backdrop-blur-sm transition-opacity duration-300 opacity-0 pointer-events-none"
  aria-hidden="true"
></div>

<!-- Выдвижное меню -->
<div
  id="mobile-drawer"
  class="fixed bottom-0 left-0 top-0 z-50 flex h-full w-[85vw] max-w-sm flex-col border-r border-neutral-800 bg-neutral-900 shadow-lg transition-transform duration-300 ease-in-out -translate-x-full"
>
  <!-- Шапка меню -->
  <div class="flex flex-shrink-0 items-center justify-between border-b border-neutral-800 p-4">
    <a href="/" class="flex items-center gap-x-3">
      {logoData ? (
        <img
          src={getImageUrl(logoData, logoData.image)}
          alt={logoData.alt_text}
          class="h-8 w-8 object-contain"
        />
      ) : (
        <span class="text-white font-bold">LOGO</span>
      )}
    </a>

    <!-- Кнопка поиска внутри меню -->
    <button type="button" id="mobile-search-btn" class="p-2 text-white">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
    </button>
  </div>

  <!-- Ссылки -->
  <nav class="flex flex-grow flex-col items-center justify-start gap-4 p-4 pt-8">
    {filteredNavItems.map((item, index) => (
      <a
        href={item.url}
        class="mobile-link block transform text-center text-xl font-medium text-neutral-300 transition-all duration-300 ease-out hover:text-indigo-400 translate-y-4 opacity-0"
        style={`transition-delay: ${100 + index * 75}ms`}
      >
        {item.title}
      </a>
    ))}
  </nav>
</div>

<script>
  // Логика работы меню (оригинальная)
  const btn = document.getElementById('mobile-menu-btn');
  const overlay = document.getElementById('mobile-overlay');
  const drawer = document.getElementById('mobile-drawer');
  const iconMenu = document.getElementById('icon-menu');
  const iconClose = document.getElementById('icon-close');
  const links = document.querySelectorAll('.mobile-link');
  const mobileSearchBtn = document.getElementById('mobile-search-btn');

  let isOpen = false;

  function toggleMenu() {
    isOpen = !isOpen;

    // Блокировка скролла
    document.body.style.overflow = isOpen ? 'hidden' : '';

    // Иконки
    if (isOpen) {
      iconMenu?.classList.add('hidden');
      iconClose?.classList.remove('hidden');
    } else {
      iconMenu?.classList.remove('hidden');
      iconClose?.classList.add('hidden');
    }

    // Оверлей
    overlay?.classList.toggle('opacity-0', !isOpen);
    overlay?.classList.toggle('pointer-events-none', !isOpen);
    overlay?.classList.toggle('opacity-100', isOpen);

    // Панель (Drawer)
    drawer?.classList.toggle('-translate-x-full', !isOpen);
    drawer?.classList.toggle('translate-x-0', isOpen);

    // Анимация ссылок
    links.forEach((link: Element) => {
      link.classList.toggle('translate-y-4', !isOpen);
      link.classList.toggle('translate-y-0', isOpen);
      link.classList.toggle('opacity-0', !isOpen);
      link.classList.toggle('opacity-100', isOpen);
    });
  }

  btn?.addEventListener('click', toggleMenu);
  overlay?.addEventListener('click', toggleMenu);

  // Закрываем меню при клике на ссылку
  links.forEach((link: Element) => {
    link.addEventListener('click', toggleMenu);
  });

  // Обработка кнопки поиска в мобильном меню
  mobileSearchBtn?.addEventListener('click', () => {
    toggleMenu(); // Закрываем меню
    // Вызываем открытие глобального поиска (событие слушается в Search.astro)
    window.dispatchEvent(new CustomEvent('open-search'));
  });
</script>