/* global React, LanguageSwitch */
const { useEffect, useState } = React;

// Те же данные что в TABS орбиты, с описаниями и ссылками
const NAV_ITEMS = [
  { id: 'planetarium', i18n: 'nav.planetarium',  href: '#planetarium',              dropdown: ['tab.planetarium.d1', 'tab.planetarium.d2', 'tab.planetarium.d3'] },
  { id: 'blog',        i18n: 'nav.blog',          href: 'https://inf.wotrafa.com',   dropdown: ['tab.blog.d1'],        target: '_blank' },
  { id: 'academy',     i18n: 'nav.academyShort',  href: '#academy',                 dropdown: ['tab.academy.d1'] },
  { id: 'about',       i18n: 'nav.about',         href: '#about',                   dropdown: ['tab.about.d1', 'tab.about.d2'] },
];

function SocialIcons() {
  return (
    <div className="wt-social">
      <a href="https://www.youtube.com/@wotrafablog" target="_blank" className="wt-social__link" aria-label="YouTube">
        <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
          <path fillRule="evenodd" clipRule="evenodd"
            d="M20.7 5.5a2.55 2.55 0 00-1.8-1.8C17.4 3.3 12 3.3 12 3.3s-5.4 0-6.9.4a2.55 2.55 0 00-1.8 1.8C3 7 3 12 3 12s0 5 .3 6.5a2.55 2.55 0 001.8 1.8c1.5.4 6.9.4 6.9.4s5.4 0 6.9-.4a2.55 2.55 0 001.8-1.8C21 17 21 12 21 12s0-5-.3-6.5zM10 15V9l5.5 3-5.5 3z" />
        </svg>
      </a>
      <a href="https://www.instagram.com/wotrafa" target="_blank" className="wt-social__link" aria-label="Instagram">
        <svg viewBox="0 0 24 24" width="22" height="22" fill="none"
          stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
          <circle cx="12" cy="12" r="5" />
          <circle cx="17.5" cy="6.5" r="1.5" fill="currentColor" stroke="none" />
        </svg>
      </a>
      <a href="https://t.me/wotrafa" target="_blank" className="wt-social__link" aria-label="Telegram">
        <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
          <path d="M9.78 18.65l.28-4.23 7.68-6.92c.34-.31-.07-.46-.52-.19L7.74 13.3 3.64 12c-.88-.25-.89-.86.2-1.3l15.97-6.16c.73-.33 1.43.18 1.15 1.3l-2.72 12.81c-.19.91-.74 1.13-1.5.71L12.6 16.3l-1.99 1.93c-.23.23-.42.42-.83.42z" />
        </svg>
      </a>
    </div>
  );
}

function Nav() {
  const [locale, setLocale] = useState(() => (window.WTi18n && WTi18n.current) || 'ru');
  const [menuOpen, setMenuOpen] = useState(false);
  // Какая карточка раскрыта (null = ни одна)
  const [activeCard, setActiveCard] = useState(null);

  useEffect(() => {
    const onLocale = (e) => setLocale(e.detail.locale);
    window.addEventListener('wt:locale', onLocale);
    return () => window.removeEventListener('wt:locale', onLocale);
  }, []);

  // Закрытие по Escape
  useEffect(() => {
    if (!menuOpen) return;
    const onKey = (e) => { if (e.key === 'Escape') { setMenuOpen(false); setActiveCard(null); } };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [menuOpen]);

  // Когда новостная панель открывается — закрываем бургер
  useEffect(() => {
    const onNewsOpen = () => { setMenuOpen(false); setActiveCard(null); };
    window.addEventListener('wt:news-open', onNewsOpen);
    return () => window.removeEventListener('wt:news-open', onNewsOpen);
  }, []);

  const t = (key) => window.WTi18n ? WTi18n.t(key) : key;

  const handleCardClick = (item) => {
    if (activeCard === item.id) {
      // Второй тап — переход по ссылке
      if (item.target === '_blank') window.open(item.href, '_blank');
      else window.location.href = item.href;
      setMenuOpen(false);
      setActiveCard(null);
    } else {
      // Первый тап — раскрыть описание
      setActiveCard(item.id);
    }
  };

  const toggleMenu = () => {
    const opening = !menuOpen;
    if (opening) window.dispatchEvent(new CustomEvent('wt:burger-open'));
    setMenuOpen(opening);
    setActiveCard(null);
  };

  return (
    <nav className="wt-nav" data-screen-label="Top Nav">
      <div className="wt-nav__brand">
        <img src="../../assets/wotrafa-logo.jpg" alt="WoTraFa" />
        <span className="wt-brand-text">
          <span className="wt-brand-short">WoTraFa</span>
          <span className="wt-brand-full">World Traveling Family</span>
        </span>
      </div>

      {/* Десктоп: ссылки */}
      <ul className="wt-nav__links">
        <li><a href="#planetarium">{t('nav.planetarium')}</a></li>
        <li><a href="https://inf.wotrafa.com">{t('nav.blog')}</a></li>
        <li><a href="#academy">{t('nav.academy')}</a></li>
        <li><a href="#about">{t('nav.about')}</a></li>
      </ul>

      {/* Десктоп: соцсети + язык */}
      <div className="wt-nav__right">
        <SocialIcons />
        <LanguageSwitch />
      </div>

      {/* Мобильный: кнопка-бургер */}
      <button
        className={'wt-nav__burger' + (menuOpen ? ' is-open' : '')}
        onClick={toggleMenu}
        aria-label={menuOpen ? 'Закрыть меню' : 'Открыть меню'}
        aria-expanded={menuOpen}
      >
        <span /><span /><span />
      </button>

      {/* Мобильный: выпадающее меню под хедером */}
      {menuOpen && (
        <div className="wt-nav__mobile-menu">
          {/* Карточки навигации */}
          <div className="wt-nav__mobile-cards">
            {NAV_ITEMS.map(item => {
              const isActive = activeCard === item.id;
              return (
                <button
                  key={item.id}
                  className={'wt-nav__mobile-card' + (isActive ? ' is-active' : '')}
                  onClick={() => handleCardClick(item)}
                >
                  {/* Заголовок карточки — как в орбит-табе */}
                  <div className="wt-nav__mobile-card__header">
                    <span className="wt-nav__mobile-card__line" aria-hidden="true" />
                    <span className="wt-nav__mobile-card__label">{t(item.i18n)}</span>
                    <span className="wt-nav__mobile-card__line" aria-hidden="true" />
                  </div>

                  {/* Описание — раскрывается при первом тапе */}
                  <div className={'wt-nav__mobile-card__desc' + (isActive ? ' is-open' : '')}>
                    <div className="wt-nav__mobile-card__desc-inner">
                      <div className="wt-nav__mobile-card__divider" />
                      <div className="wt-nav__mobile-card__desc-content">
                        {item.dropdown.map((key, idx) => (
                          <span key={idx} className="wt-nav__mobile-card__desc-line">
                            {t(key)}
                          </span>
                        ))}
                        {/* Подсказка — нажми ещё раз */}
                        <span className="wt-nav__mobile-card__hint">→</span>
                      </div>
                    </div>
                  </div>
                </button>
              );
            })}
          </div>

          {/* Соцсети и язык под карточками — только на телефоне (≤768px) */}
          <div className="wt-nav__mobile-bottom">
            <SocialIcons />
            <LanguageSwitch />
          </div>
        </div>
      )}
    </nav>
  );
}

window.Nav = Nav;