settings.tsx

import Constants from 'expo-constants';
import * as Device from 'expo-device';
import * as React from 'react';
import { Linking, Pressable, StyleSheet, Switch, Text, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

import { setShowLogs, useShowLogs } from '@/components/settings-store';
import viroPkg from '@reactvision/react-viro/package.json';

const APP_VERSION =
  Constants.expoConfig?.version ?? Constants.nativeAppVersion ?? 'unknown';
const VIRO_VERSION = (viroPkg as { version?: string }).version ?? 'unknown';
const DEVICE_MODEL = Device.modelName ?? 'unknown';
const DEVICE_OS = Device.osName ?? 'unknown';
const DEVICE_OS_VERSION = Device.osVersion ?? 'unknown';

function openLink(url: string): void {
  Linking.openURL(url).catch(() => {});
}

export default function SettingsScreen() {
  const showLogs = useShowLogs();
  const insets = useSafeAreaInsets();

  return (
    <View style={[styles.container, { paddingBottom: insets.bottom + 16 }]}>
      <View style={styles.section}>
        <Pressable
          onPress={() => setShowLogs(!showLogs)}
          style={styles.row}
          accessibilityRole="switch"
          accessibilityState={{ checked: showLogs }}
        >
          <View style={styles.rowText}>
            <Text style={styles.rowTitle}>Show logs</Text>
            <Text style={styles.rowSubtitle}>
              Display the on-screen debug log overlay inside scenes.
            </Text>
          </View>
          <Switch
            value={showLogs}
            onValueChange={setShowLogs}
            trackColor={{ false: '#3a3a44', true: '#4ea1ff' }}
            thumbColor="#ffffff"
          />
        </Pressable>

        <View style={styles.versionBlock}>
          <View style={styles.versionRow}>
            <Text style={styles.versionLabel}>App version</Text>
            <Text style={styles.versionValue}>{APP_VERSION}</Text>
          </View>
          <View style={styles.versionRow}>
            <Text style={styles.versionLabel}>ViroReact version</Text>
            <Text style={styles.versionValue}>{VIRO_VERSION}</Text>
          </View>
          <View style={styles.versionRow}>
            <Text style={styles.versionLabel}>Device</Text>
            <Text style={styles.versionValue}>{DEVICE_MODEL}</Text>
          </View>
          <View style={styles.versionRow}>
            <Text style={styles.versionLabel}>OS</Text>
            <Text style={styles.versionValue}>{DEVICE_OS}</Text>
          </View>
          <View style={styles.versionRow}>
            <Text style={styles.versionLabel}>OS version</Text>
            <Text style={styles.versionValue}>{DEVICE_OS_VERSION}</Text>
          </View>
          <Pressable
            onPress={() => openLink('https://reactvision.xyz/quest-demo')}
            style={({ pressed }) => [
              styles.updateButton,
              pressed && styles.updateButtonPressed,
            ]}
            accessibilityRole="button"
          >
            <Text style={styles.updateButtonText}>Check For App Update</Text>
          </Pressable>
        </View>
      </View>

      <Text style={styles.footer}>
        This demo app is built by{' '}
        <Text
          style={styles.footerLink}
          onPress={() => openLink('https://x.com/oliedis')}
        >
          Oli Edis
        </Text>
        , the founder and CEO of{' '}
        <Text
          style={styles.footerLink}
          onPress={() => openLink('https://reactvision.xyz')}
        >
          ReactVision
        </Text>
        . You can find the source code for this app on{' '}
        <Text
          style={styles.footerLink}
          onPress={() =>
            openLink(
              'https://github.com/oliedis/reactvision-studio-integration-test'
            )
          }
        >
          GitHub
        </Text>
        .
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000000',
    paddingHorizontal: 16,
    paddingTop: 24,
  },
  section: {
    backgroundColor: 'rgba(20, 10, 40, 0.55)',
    borderRadius: 14,
    borderWidth: 1,
    borderColor: 'rgba(255, 255, 255, 0.18)',
    overflow: 'hidden',
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 16,
    paddingHorizontal: 16,
    gap: 16,
  },
  rowText: {
    flex: 1,
  },
  rowTitle: {
    color: '#ffffff',
    fontFamily: 'Inter_600SemiBold',
    fontSize: 16,
  },
  rowSubtitle: {
    color: 'rgba(255, 255, 255, 0.65)',
    fontFamily: 'Inter_400Regular',
    fontSize: 13,
    marginTop: 2,
  },
  versionBlock: {
    borderTopWidth: StyleSheet.hairlineWidth,
    borderTopColor: 'rgba(255, 255, 255, 0.15)',
    paddingHorizontal: 16,
    paddingVertical: 12,
    gap: 8,
  },
  versionRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  versionLabel: {
    color: 'rgba(255, 255, 255, 0.7)',
    fontFamily: 'Inter_400Regular',
    fontSize: 13,
  },
  versionValue: {
    color: '#ffffff',
    fontSize: 13,
    fontFamily: 'Courier',
  },
  footer: {
    color: 'rgba(255, 255, 255, 0.55)',
    fontFamily: 'Inter_400Regular',
    fontSize: 12,
    lineHeight: 18,
    marginTop: 16,
    paddingHorizontal: 4,
    textAlign: 'center',
  },
  footerLink: {
    color: '#ffffff',
    fontFamily: 'Inter_600SemiBold',
    textDecorationLine: 'underline',
  },
  updateButton: {
    marginTop: 12,
    paddingVertical: 12,
    paddingHorizontal: 16,
    borderRadius: 10,
    backgroundColor: 'rgba(78, 161, 255, 0.18)',
    borderWidth: 1,
    borderColor: 'rgba(78, 161, 255, 0.5)',
    alignItems: 'center',
    justifyContent: 'center',
  },
  updateButtonPressed: {
    backgroundColor: 'rgba(78, 161, 255, 0.32)',
  },
  updateButtonText: {
    color: '#ffffff',
    fontFamily: 'Inter_600SemiBold',
    fontSize: 14,
  },
});