// Transition horizontale unique pour les relations parent → enfant.
// Les changements d'onglets frères passent `direction="none"`; les feuilles
// verticales restent volontairement hors de ce composant.

function useVascoReducedMotion(forcedValue) {
  const [reduced, setReduced] = React.useState(() => {
    if (typeof forcedValue === 'boolean') return forcedValue;
    return Boolean(window.matchMedia?.('(prefers-reduced-motion: reduce)').matches);
  });

  React.useEffect(() => {
    if (typeof forcedValue === 'boolean') { setReduced(forcedValue); return undefined; }
    const media = window.matchMedia?.('(prefers-reduced-motion: reduce)');
    if (!media) return undefined;
    const update = () => setReduced(media.matches);
    update();
    media.addEventListener?.('change', update);
    return () => media.removeEventListener?.('change', update);
  }, [forcedValue]);
  return reduced;
}

function VascoNavigationTransition({ screenKey, direction = 'forward', children,
  reducedMotion: forcedReducedMotion, onEntered = null, style = null }) {
  const reducedMotion = useVascoReducedMotion(forcedReducedMotion);
  const previousKeyRef = React.useRef(screenKey);
  const previousNodeRef = React.useRef(children);
  const transitionIdRef = React.useRef(0);
  const timerRef = React.useRef(null);
  const [transition, setTransition] = React.useState(null);

  const finish = React.useCallback((id) => {
    setTransition((current) => {
      if (!current || current.id !== id) return current;
      window.clearTimeout(timerRef.current);
      timerRef.current = null;
      window.setTimeout(() => onEntered?.(), 0);
      return null;
    });
  }, [onEntered]);

  const keyChanged = previousKeyRef.current !== screenKey;
  const leavingNode = keyChanged ? previousNodeRef.current : null;

  React.useLayoutEffect(() => {
    const fromKey = previousKeyRef.current;
    const outgoing = previousNodeRef.current;
    const next = window.VascoNavigationContract.plan(fromKey, screenKey, direction, reducedMotion);
    previousKeyRef.current = screenKey;
    previousNodeRef.current = children;
    window.clearTimeout(timerRef.current);
    timerRef.current = null;

    if (!next.animate) {
      setTransition(null);
      window.setTimeout(() => onEntered?.(), 0);
      return undefined;
    }

    const id = ++transitionIdRef.current;
    setTransition({ id, direction: next.direction, leavingNode: outgoing });
    timerRef.current = window.setTimeout(() => finish(id), next.durationMs + 80);
    return () => window.clearTimeout(timerRef.current);
  }, [screenKey, direction, reducedMotion]);

  if (!keyChanged) previousNodeRef.current = children;
  const active = transition;
  const currentDirection = active?.direction || 'none';
  const incomingAnimation = currentDirection === 'forward' ? 'vascoNavForwardIn' : 'vascoNavBackIn';
  const outgoingAnimation = currentDirection === 'forward' ? 'vascoNavForwardOut' : 'vascoNavBackOut';
  const duration = `${window.VascoNavigationContract.DURATION_MS}ms`;

  return <div data-vasco-navigation="true" data-direction={currentDirection}
    data-transitioning={active ? 'true' : 'false'} style={{
      position: 'relative', width: '100%', height: '100%', minHeight: 0,
      overflow: 'hidden', background: 'inherit', ...style,
    }}>
    {active && <div data-vasco-nav-layer="outgoing" aria-hidden="true" style={{
      position: 'absolute', inset: 0, zIndex: 1, display: 'flex', flexDirection: 'column',
      minHeight: 0, overflow: 'hidden', pointerEvents: 'none',
      animation: `${outgoingAnimation} ${duration} cubic-bezier(.2,.7,.2,1) both`,
      willChange: 'transform, opacity',
    }}>{active.leavingNode}</div>}
    <div key={screenKey} data-vasco-nav-layer="incoming"
      onAnimationEnd={(event) => {
        if (active && event.target === event.currentTarget) finish(active.id);
      }} style={{
        position: 'absolute', inset: 0, zIndex: 2, display: 'flex', flexDirection: 'column',
        minHeight: 0, overflow: 'hidden',
        pointerEvents: active ? 'none' : 'auto',
        animation: active ? `${incomingAnimation} ${duration} cubic-bezier(.2,.7,.2,1) both` : 'none',
        willChange: active ? 'transform, opacity' : 'auto',
      }}>{children}</div>
    <style>{`
      @keyframes vascoNavForwardIn { from { transform: translate3d(100%,0,0); } to { transform: translate3d(0,0,0); } }
      @keyframes vascoNavForwardOut { from { transform: translate3d(0,0,0); opacity: 1; } to { transform: translate3d(-24%,0,0); opacity: .72; } }
      @keyframes vascoNavBackIn { from { transform: translate3d(-24%,0,0); opacity: .72; } to { transform: translate3d(0,0,0); opacity: 1; } }
      @keyframes vascoNavBackOut { from { transform: translate3d(0,0,0); } to { transform: translate3d(100%,0,0); } }
      @media (prefers-reduced-motion: reduce) {
        [data-vasco-navigation="true"] > [data-vasco-nav-layer] { animation: none !important; }
      }
    `}</style>
  </div>;
}

window.VascoNavigationTransition = VascoNavigationTransition;