/**
 * Shared two-tab bottom strip (Power Up · Explore / NuAsk · Explore / etc.) — same chrome as app-shell
 * `sf-app-shell-nav-pulse`, legal gate aligned with NuAsk `navigateFromCorridorTab`.
 */
(function () {
  'use strict';

  const { useState, useEffect } = React;

  function getShellView() {
    try {
      return window.appState?.get?.()?.view || '';
    } catch {
      return '';
    }
  }

  function twinNavigate(targetView) {
    const legalAgreed = localStorage.getItem('sylvanflow_legal_agreed');
    const restricted = ['explore', 'flow-plan', 'ask-sylvan', 'nu-ask-sylvan'];
    if (restricted.includes(targetView) && !legalAgreed) {
      window.location.href = '/legal?return=/power-up'; // SF_ALLOW_HARDEXIT_REDIRECT
      return;
    }
    if (window.appState?.set) window.appState.set({ view: targetView });
  }

  function tabLabelStyle(active) {
    return {
      display: 'inline-block',
      color: '#5EEAD4',
      textDecoration: 'none',
      animation: active
        ? 'sf-tab-label-glow-active 2s ease-in-out infinite'
        : 'sf-tab-label-glow-inactive 2s ease-in-out infinite'
    };
  }

  /** Aligns with app shell `isActiveTab` for the Explore tab cluster. */
  function viewIsExploreCluster(v) {
    return (
      v === 'explore' ||
      v === 'flow-plan' ||
      v === 'explore-detail' ||
      v === 'activity-detail'
    );
  }

  /**
   * @param {{ variant: 'nuask' | 'explore' | 'powerup', leftLabel: string, rightLabel: string, ariaLabel?: string }} props
   */
  function InternalShellTwinNav({ variant, leftLabel, rightLabel, ariaLabel }) {
    const [v, setV] = useState(getShellView);

    useEffect(() => {
      const onState = () => setV(getShellView());
      window.addEventListener('state-change', onState);
      onState();
      return () => window.removeEventListener('state-change', onState);
    }, []);

    let leftView;
    let rightView;
    let leftActive;
    let rightActive;

    if (variant === 'nuask') {
      leftView = 'power-up';
      rightView = 'explore';
      leftActive = v === 'power-up';
      rightActive = viewIsExploreCluster(v);
    } else if (variant === 'explore') {
      leftView = 'power-up';
      rightView = 'nu-ask-sylvan';
      leftActive = v === 'power-up';
      rightActive = v === 'nu-ask-sylvan';
    } else if (variant === 'powerup') {
      leftView = 'nu-ask-sylvan';
      rightView = 'explore';
      leftActive = v === 'nu-ask-sylvan';
      rightActive = viewIsExploreCluster(v);
    } else {
      return null;
    }

    const aria =
      ariaLabel ||
      (variant === 'explore'
        ? 'Power Up and NuAsk'
        : variant === 'powerup'
          ? 'NuAsk and Explore'
          : 'Power Up and Explore');

    return (
      <nav
        data-sf-internal-twin-nav="true"
        data-sf-internal-twin-variant={variant}
        className="sf-app-shell-nav-pulse relative z-[41] grid h-[60px] min-h-[60px] w-full shrink-0 grid-cols-2 items-stretch overflow-visible border-t border-cyan-400/40 bg-[#030508]/95 backdrop-blur-sm pb-[env(safe-area-inset-bottom,0px)] text-[10px] sm:text-xs"
        aria-label={aria}
      >
        <button
          type="button"
          onClick={() => twinNavigate(leftView)}
          className="relative z-[2] flex h-full min-h-[44px] w-full min-w-0 flex-col items-center justify-center gap-0.5 border-b-0 px-1 py-2 no-underline outline-none transition-colors focus-visible:outline-none"
        >
          <span
            className="relative z-10 max-w-full overflow-visible text-center font-mono text-[10px] leading-tight sm:text-[11px]"
            style={tabLabelStyle(leftActive)}
          >
            {leftLabel}
          </span>
        </button>
        <button
          type="button"
          onClick={() => twinNavigate(rightView)}
          className="relative z-[2] flex h-full min-h-[44px] w-full min-w-0 flex-col items-center justify-center gap-0.5 border-b-0 px-1 py-2 no-underline outline-none transition-colors focus-visible:outline-none"
        >
          <span
            className="relative z-10 max-w-full overflow-visible text-center font-mono text-[10px] leading-tight sm:text-[11px]"
            style={tabLabelStyle(rightActive)}
          >
            {rightLabel}
          </span>
        </button>
      </nav>
    );
  }

  if (typeof window !== 'undefined') {
    window.InternalShellTwinNav = InternalShellTwinNav;
  }
})();