rebreak-monorepo/apps/rebreak-native/components/LockScreen.tsx

import { useCallback, useEffect, useRef, useState } from 'react';
import { Alert, Animated, AppState, Image, Text, TouchableOpacity, View } from 'react-native';
import { StatusBar } from 'expo-status-bar';
import { Ionicons } from '@expo/vector-icons';
import { useTranslation } from 'react-i18next';
import { useRouter } from 'expo-router';
import { useAppLockStore } from '../stores/appLock';
import { useAuthStore } from '../stores/auth';

/**
 * Vollbild-Overlay, das den App-Inhalt verdeckt solange die App-Sperre aktiv und
 * `locked` ist (siehe AppLockGate). Beim Mount — und jedes Mal wenn man aus dem
 * Hintergrund zur noch-gesperrten App zurückkommt — wird automatisch der
 * Face-ID/Touch-ID/Passcode-Prompt ausgelöst; schlägt er fehl oder bricht der
 * User ab, bleibt der „Entsperren"-Button stehen (kein Auto-Retry-Loop — die
 * inactive→active-Transition direkt nach einem abgebrochenen Prompt löst NICHT
 * neu aus, nur background→active).
 *
 * „Abmelden" unten ist die Notausfahrt: clear't die Session → beim nächsten Start
 * gibt es keine Session → keine Sperre → frischer Login. Verhindert ein echtes
 * Aussperren falls Biometrie + Passcode versagen.
 */
export function LockScreen() {
  const { t } = useTranslation();
  const router = useRouter();
  const authenticate = useAppLockStore((s) => s.authenticate);
  const signOut = useAuthStore((s) => s.signOut);
  const [busy, setBusy] = useState(false);
  const inFlight = useRef(false);

  // dezenter Atem-Puls auf dem Icon (matcht den Splash-Vibe, ohne dessen ganze Choreo)
  const pulse = useRef(new Animated.Value(1)).current;
  useEffect(() => {
    Animated.loop(
      Animated.sequence([
        Animated.timing(pulse, { toValue: 1.04, duration: 1300, useNativeDriver: true }),
        Animated.timing(pulse, { toValue: 1, duration: 1300, useNativeDriver: true }),
      ]),
    ).start();
  }, [pulse]);

  const tryUnlock = useCallback(async () => {
    if (inFlight.current) return;
    inFlight.current = true;
    setBusy(true);
    try {
      await authenticate(t('applock.prompt'));
    } finally {
      inFlight.current = false;
      setBusy(false);
    }
  }, [authenticate, t]);

  // Auto-Prompt beim ersten Erscheinen — aber NUR wenn die App schon im
  // Foreground ist. Wird LockScreen während eines `background`/`inactive`-State
  // gemountet (typisch wenn der Lock durch das background-Event selbst getriggert
  // wurde), zeigt FaceID keinen sichtbaren Prompt und failed silent — der User
  // sieht dann nur den Fallback-Button.
  // Wenn beim Mount nicht active, fängt der background→active-Listener unten
  // den Foreground-Wechsel und prompted dann.
  useEffect(() => {
    if (AppState.currentState === 'active') {
      tryUnlock();
    }
  }, [tryUnlock]);

  // Rückkehr aus dem Hintergrund zur noch gesperrten App → erneut prompten
  useEffect(() => {
    let prev = AppState.currentState;
    const sub = AppState.addEventListener('change', (next) => {
      if (prev === 'background' && next === 'active') tryUnlock();
      prev = next;
    });
    return () => sub.remove();
  }, [tryUnlock]);

  function handleSignOut() {
    Alert.alert(t('applock.signOut_title'), t('applock.signOut_body'), [
      { text: t('common.cancel'), style: 'cancel' },
      {
        text: t('auth.signOut'),
        style: 'destructive',
        onPress: async () => {
          await signOut();
          router.replace('/');
        },
      },
    ]);
  }

  return (
    <View
      style={{
        flex: 1,
        backgroundColor: '#0f172a',
        alignItems: 'center',
        justifyContent: 'center',
        paddingHorizontal: 32,
        gap: 24,
      }}
    >
      <StatusBar style="light" />
      <Animated.View style={{ transform: [{ scale: pulse }] }}>
        <Image
          source={require('../assets/icon.png')}
          style={{ width: 96, height: 96, borderRadius: 22 }}
          resizeMode="contain"
        />
      </Animated.View>

      <View style={{ alignItems: 'center', gap: 8 }}>
        <Text
          style={{
            fontFamily: 'Nunito_800ExtraBold',
            fontSize: 24,
            color: '#ffffff',
            textAlign: 'center',
          }}
        >
          {t('applock.title')}
        </Text>
        <Text
          style={{
            fontFamily: 'Nunito_400Regular',
            fontSize: 14,
            color: 'rgba(255,255,255,0.55)',
            textAlign: 'center',
            lineHeight: 20,
          }}
        >
          {t('applock.subtitle')}
        </Text>
      </View>

      <TouchableOpacity
        onPress={tryUnlock}
        disabled={busy}
        activeOpacity={0.8}
        style={{
          flexDirection: 'row',
          alignItems: 'center',
          gap: 10,
          backgroundColor: '#6366f1',
          paddingVertical: 14,
          paddingHorizontal: 28,
          borderRadius: 14,
          opacity: busy ? 0.6 : 1,
        }}
      >
        <Ionicons name="lock-open-outline" size={18} color="#ffffff" />
        <Text style={{ fontFamily: 'Nunito_700Bold', fontSize: 16, color: '#ffffff' }}>
          {t('applock.unlock')}
        </Text>
      </TouchableOpacity>

      <TouchableOpacity onPress={handleSignOut} activeOpacity={0.6} style={{ marginTop: 8 }}>
        <Text
          style={{
            fontFamily: 'Nunito_600SemiBold',
            fontSize: 13,
            color: 'rgba(255,255,255,0.35)',
          }}
        >
          {t('auth.signOut')}
        </Text>
      </TouchableOpacity>
    </View>
  );
}