// Боковая навигация панелей — кабинета и админки.
//
// Одна на обе: разделы у них разные, а поведение одинаковое, и когда навигация
// была написана дважды, дровер пришлось бы чинить дважды тоже.
//
// На широком экране это колонка слева. На узком — выдвижная панель за кнопкой:
// лентой сверху разделы всё так же уезжали за край, и в мини-аппе, где экран
// узкий всегда, половина кабинета была недоступна без горизонтальной прокрутки,
// о которой никто не догадывается.

// PanelNav — groups: [{ title?, items: [{ id, label, badge?, cta? }] }].
// footer — что показать под списком (профиль, выход); может быть пустым.
const PanelNav = ({ groups, subPage, onSubPage, label, brand, footer }) => {
  const [open, setOpen] = React.useState(false);

  // Раздел выбран — панель закрывается: на узком экране она перекрывает то,
  // ради чего её открыли.
  const pick = (id) => { onSubPage(id); setOpen(false); };

  // Esc закрывает — привычка, которой ждут от любой выдвижной панели.
  React.useEffect(() => {
    if (!open) return undefined;
    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
    document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, [open]);

  // Пока панель открыта, страница под ней не прокручивается: иначе палец
  // листает фон, а не меню.
  React.useEffect(() => {
    if (!open) return undefined;
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => { document.body.style.overflow = prev; };
  }, [open]);

  const current = groups.flatMap(g => g.items).find(it => it.id === subPage);

  return (
    <>
      {/* Полоса с кнопкой — только на узком экране (скрыта в CSS на широком).
          Показывает текущий раздел: иначе, закрыв панель, человек не видит,
          где он находится. */}
      <div className="panel-bar">
        <button className="panel-burger" onClick={() => setOpen(true)}
          aria-label="Открыть меню" aria-expanded={open}>
          <IconMenu size={18} />
        </button>
        <span className="panel-bar-title">{current ? current.label : label}</span>
      </div>

      {open && <div className="panel-scrim" onClick={() => setOpen(false)} aria-hidden="true" />}

      <nav className={`panel-side ${open ? 'open' : ''}`} aria-label={label}>
        {brand}
        {groups.map((group, gi) => (
          <div className="panel-side-group" key={group.title || `g${gi}`}>
            {group.title && <div className="panel-side-title">{group.title}</div>}
            {group.items.map(it => (
              <button key={it.id}
                className={`panel-side-link ${it.cta ? 'panel-side-cta' : ''} ${subPage === it.id ? 'active' : ''}`}
                // Ключ раздела атрибутом: по нему цепляются смоуки. Искать
                // кнопку по тексту хрупко — надпись меняется при первой же
                // правке копирайта, а раздел остаётся тем же.
                data-nav={it.id}
                aria-current={subPage === it.id ? 'page' : undefined}
                onClick={() => pick(it.id)}>
                {it.icon ? (
                  <span className="row gap-2" style={{ alignItems: 'center' }}>{it.icon}{it.label}</span>
                ) : it.label}
                {it.badge}
              </button>
            ))}
          </div>
        ))}
        {footer && <div className="panel-side-foot">{footer}</div>}
      </nav>
    </>
  );
};

Object.assign(window, { PanelNav });
