import { useEffect } from 'react';
import { AppState } from 'react-native';
import { useAppLockStore } from '../stores/appLock';
import { useAuthStore } from '../stores/auth';
import { LockScreen } from './LockScreen';

/**
 * Hängt die App-Sperre vor den App-Inhalt:
 *  - sperrt sofort wenn die App in den Hintergrund geht (`background`-State —
 *    NICHT `inactive`, sonst würde der App-Switcher-Peek schon sperren)
 *  - rendert den LockScreen solange `enabled && locked && session` gilt
 *
 * `init()` der appLock-Store wird im RootLayout zusammen mit den anderen Stores
 * aufgerufen; der Splash wartet auf `ready`, daher gibt es hier kein Flash-of-
 * unlocked-content beim Kaltstart (init setzt `locked = enabled`).
 */
export function AppLockGate({ children }: { children: React.ReactNode }) {
  const enabled = useAppLockStore((s) => s.enabled);
  const locked = useAppLockStore((s) => s.locked);
  const lock = useAppLockStore((s) => s.lock);
  const session = useAuthStore((s) => s.session);

  useEffect(() => {
    if (!enabled) return;
    const sub = AppState.addEventListener('change', (state) => {
      if (state === 'background') lock();
    });
    return () => sub.remove();
  }, [enabled, lock]);

  if (enabled && locked && session) {
    return <LockScreen />;
  }
  return <>{children}</>;
}