// botnav.jsx — premium typography-only bottom navigation (tattu-inspired)
// Glassmorphism floating bar · gold active glow · fluid sliding indicator
// Exposes: BottomNav
const { useState: useBN, useRef: useBNR, useLayoutEffect: useBNL } = React;
const trBN = (o, lang) => (o ? (o[lang] ?? o.de) : '');

function BottomNav({ items, activeId, lang, onSelect, isDrawerOpen }) {
  const wrapRef = useBNR(null);
  const itemRefs = useBNR({});
  const [ind, setInd] = useBN({ left: 0, width: 0, ready: false });

  const place = () => {
    const wrap = wrapRef.current;
    const el = itemRefs.current[activeId];
    if (!wrap || !el) return;
    // Use offset metrics (local CSS px) — getBoundingClientRect is post-scale and breaks
    // positioning inside the scaled #stage. el.offsetParent is the row; label.offsetParent is el.
    const label = el.querySelector('.bn-label');
    const w = Math.max(18, label ? label.offsetWidth : el.offsetWidth);
    const centerInRow = el.offsetLeft + (label ? label.offsetLeft + label.offsetWidth / 2 : el.offsetWidth / 2);
    setInd({ left: centerInRow - w / 2, width: w, ready: true });
  };

  useBNL(() => { place(); }, [activeId, lang, items]);
  React.useEffect(() => {
    const onR = () => place();
    window.addEventListener('resize', onR);
    const t = setTimeout(place, 240); // after fonts settle
    return () => { window.removeEventListener('resize', onR); clearTimeout(t); };
  }, []);

  return (
    <nav className="botnav2">
      <div className="botnav2-glass" />
      <div className="botnav2-row" ref={wrapRef}>
        {items.map(n => {
          const on = n.id === activeId;
          return (
            <button key={n.id} ref={el => (itemRefs.current[n.id] = el)}
              className={'bn-item ' + (on ? 'on' : '')}
              onClick={() => onSelect(n.id)}>
              {n.isIcon ? (
                <span className="bn-label" style={{ display: 'flex', alignItems: 'center' }}>
                  <Icon name={(n.id === 'more' && isDrawerOpen) ? 'close' : n.icon} size={20} />
                </span>
              ) : (
                <span className="bn-label">{trBN(SHIKI_STRINGS[n.label], lang)}</span>
              )}
            </button>
          );
        })}
        {/* fluid sliding indicator */}
        <span className="bn-trail" style={{ left: ind.left, width: ind.width, opacity: ind.ready ? 1 : 0 }} />
        <span className="bn-indicator" style={{ left: ind.left, width: ind.width, opacity: ind.ready ? 1 : 0 }} />
      </div>
    </nav>
  );
}

Object.assign(window, { BottomNav });