rebreak-monorepo/apps/rebreak-native/app/debug.tsx

import { useEffect } from 'react';
import { View, Text, ScrollView, Pressable } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useRouter } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';
import { colors } from '../lib/theme';

export default function DebugScreen() {
  const router = useRouter();

  useEffect(() => {
    if (!__DEV__) {
      router.replace('/');
    }
  }, [router]);

  if (!__DEV__) {
    return <View style={{ flex: 1, backgroundColor: '#ffffff' }} />;
  }

  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: '#ffffff' }} edges={['top']}>
      <View
        style={{
          paddingHorizontal: 12,
          paddingTop: 4,
          paddingBottom: 12,
          flexDirection: 'row',
          alignItems: 'center',
          gap: 8,
          borderBottomWidth: 1,
          borderBottomColor: 'rgba(0,0,0,0.06)',
        }}
      >
        <Pressable
          onPress={() => router.back()}
          hitSlop={8}
          style={({ pressed }) => ({
            opacity: pressed ? 0.6 : 1,
          })}
        >
          <View style={{
            width: 40,
            height: 40,
            alignItems: 'center',
            justifyContent: 'center',
          }}>
            <Ionicons name="chevron-back" size={26} color={colors.text} />
          </View>
        </Pressable>
        <Text style={{ fontSize: 20, color: '#0a0a0a', fontFamily: 'Nunito_700Bold' }}>
          Debug
        </Text>
      </View>

      <ScrollView
        style={{ flex: 1 }}
        contentContainerStyle={{ paddingHorizontal: 16, paddingTop: 16, paddingBottom: 60 }}
        showsVerticalScrollIndicator={false}
      >
        <View
          style={{
            backgroundColor: '#fef3c7',
            borderRadius: 14,
            padding: 14,
            marginBottom: 20,
            borderWidth: 1,
            borderColor: '#fde68a',
            flexDirection: 'row',
            gap: 10,
            alignItems: 'flex-start',
          }}
        >
          <Ionicons name="warning-outline" size={20} color="#b45309" style={{ marginTop: 1 }} />
          <View style={{ flex: 1 }}>
            <Text style={{ fontSize: 14, fontFamily: 'Nunito_700Bold', color: '#78350f' }}>
              Dev only
            </Text>
            <Text
              style={{
                fontSize: 12,
                fontFamily: 'Nunito_400Regular',
                color: '#92400e',
                marginTop: 4,
                lineHeight: 17,
              }}
            >
              Diese Page ist nur in __DEV__ verfügbar. Production-Builds redirecten auf /.
            </Text>
          </View>
        </View>

        <DebugStub
          title="LLM-Provider Toggle"
          subtitle="Phase C: aus app/urge.tsx hierher migrieren"
          icon="bulb-outline"
        />
        <DebugStub
          title="TTS-Provider Toggle"
          subtitle="Phase C: aus app/urge.tsx hierher migrieren"
          icon="volume-high-outline"
        />
        <DebugStub
          title="Bench-Output"
          subtitle="TTS/LLM-Latenz-Logs anzeigen (TODO)"
          icon="speedometer-outline"
        />
      </ScrollView>
    </SafeAreaView>
  );
}

function DebugStub({
  title,
  subtitle,
  icon,
}: {
  title: string;
  subtitle: string;
  icon: React.ComponentProps<typeof Ionicons>['name'];
}) {
  return (
    <View
      style={{
        backgroundColor: '#fafafa',
        borderRadius: 14,
        borderWidth: 1,
        borderColor: 'rgba(0,0,0,0.05)',
        padding: 14,
        marginBottom: 12,
        flexDirection: 'row',
        gap: 12,
        alignItems: 'flex-start',
        opacity: 0.6,
      }}
    >
      <View
        style={{
          width: 36,
          height: 36,
          borderRadius: 11,
          backgroundColor: '#e5e7eb',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <Ionicons name={icon} size={18} color="#525252" />
      </View>
      <View style={{ flex: 1 }}>
        <Text style={{ fontSize: 14, color: '#0a0a0a', fontFamily: 'Nunito_700Bold' }}>{title}</Text>
        <Text
          style={{
            fontSize: 12,
            color: '#737373',
            fontFamily: 'Nunito_400Regular',
            marginTop: 3,
            lineHeight: 17,
          }}
        >
          {subtitle}
        </Text>
      </View>
    </View>
  );
}