timmy-tower/artifacts/mobile/app/settings.tsx

import { Stack } from 'expo-router';
import { View, Text, StyleSheet, ScrollView, TextInput, Switch, Pressable, Linking, Platform } from 'react-native';
import { useState, useEffect } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
import Constants from 'expo-constants';
import { useTimmy } from '@/context/TimmyContext';
import { Ionicons } from '@expo/vector-icons';
import { ConnectionBadge } from '@/components/ConnectionBadge';
import { Colors } from '@/constants/colors';

const STORAGE_KEYS = {
  SERVER_URL: 'settings_server_url',
  NOTIFICATIONS_JOB_COMPLETION: 'settings_notifications_job_completion',
  NOTIFICATIONS_LOW_BALANCE: 'settings_notifications_low_balance',
};

export default function SettingsScreen() {
  const { connectionStatus } = useTimmy();
  const C = Colors.dark;

  const [serverUrl, setServerUrl] = useState('');
  const [jobCompletionNotifications, setJobCompletionNotifications] = useState(false);
  const [lowBalanceWarning, setLowBalanceWarning] = useState(false);

  useEffect(() => {
    const loadSettings = async () => {
      const storedServerUrl = await AsyncStorage.getItem(STORAGE_KEYS.SERVER_URL);
      if (storedServerUrl) setServerUrl(storedServerUrl);
      const storedJobCompletion = await AsyncStorage.getItem(STORAGE_KEYS.NOTIFICATIONS_JOB_COMPLETION);
      if (storedJobCompletion !== null) setJobCompletionNotifications(JSON.parse(storedJobCompletion));
      const storedLowBalance = await AsyncStorage.getItem(STORAGE_KEYS.NOTIFICATIONS_LOW_BALANCE);
      if (storedLowBalance !== null) setLowBalanceWarning(JSON.parse(storedLowBalance));
    };
    loadSettings();
  }, []);

  const handleServerUrlSave = async () => {
    await AsyncStorage.setItem(STORAGE_KEYS.SERVER_URL, serverUrl);
  };

  const toggleJobCompletionNotifications = async () => {
    const newValue = !jobCompletionNotifications;
    setJobCompletionNotifications(newValue);
    await AsyncStorage.setItem(STORAGE_KEYS.NOTIFICATIONS_JOB_COMPLETION, JSON.stringify(newValue));
  };

  const toggleLowBalanceWarning = async () => {
    const newValue = !lowBalanceWarning;
    setLowBalanceWarning(newValue);
    await AsyncStorage.setItem(STORAGE_KEYS.NOTIFICATIONS_LOW_BALANCE, JSON.stringify(newValue));
  };

  const appVersion = Constants.expoConfig?.version ?? 'N/A';
  const buildCommitHash = (Constants.expoConfig?.extra as Record<string, string> | undefined)?.gitCommitHash ?? 'N/A';
  const giteaRepoUrl = 'http://143.198.27.163:3000/replit/timmy-tower';

  const openGiteaLink = () => { Linking.openURL(giteaRepoUrl); };

  return (
    <View style={styles.container}>
      <Stack.Screen options={{ title: 'Settings', headerShown: true, headerStyle: { backgroundColor: C.surface }, headerTintColor: C.text }} />
      <ScrollView contentContainerStyle={styles.scrollContent}>
        <Text style={styles.sectionHeader}>Connection</Text>
        <View style={styles.settingItem}>
          <Text style={styles.settingLabel}>Server URL</Text>
          <View style={styles.serverUrlContainer}>
            <TextInput
              style={[styles.input, { color: C.text, backgroundColor: C.surface }]}
              value={serverUrl}
              onChangeText={setServerUrl}
              onBlur={handleServerUrlSave}
              placeholder="Enter server URL"
              placeholderTextColor={C.textMuted}
              autoCapitalize="none"
              autoCorrect={false}
            />
            <ConnectionBadge status={connectionStatus} />
          </View>
        </View>

        <Text style={styles.sectionHeader}>Notifications</Text>
        <View style={styles.settingItem}>
          <Text style={styles.settingLabel}>Job Completion Push Notifications</Text>
          <Switch
            trackColor={{ false: C.surface, true: C.accentGlow }}
            thumbColor={Platform.OS === 'android' ? C.text : ''}
            ios_backgroundColor={C.surface}
            onValueChange={toggleJobCompletionNotifications}
            value={jobCompletionNotifications}
          />
        </View>
        <View style={styles.settingItem}>
          <Text style={styles.settingLabel}>Low Balance Warning</Text>
          <Switch
            trackColor={{ false: C.surface, true: C.accentGlow }}
            thumbColor={Platform.OS === 'android' ? C.text : ''}
            ios_backgroundColor={C.surface}
            onValueChange={toggleLowBalanceWarning}
            value={lowBalanceWarning}
          />
        </View>

        <Text style={styles.sectionHeader}>About</Text>
        <View style={styles.settingItem}>
          <Text style={styles.settingLabel}>App Version</Text>
          <Text style={[styles.settingValue, { color: C.text }]}>{appVersion}</Text>
        </View>
        <View style={styles.settingItem}>
          <Text style={styles.settingLabel}>Build Commit Hash</Text>
          <Text style={[styles.settingValue, { color: C.text }]}>{buildCommitHash}</Text>
        </View>
        <Pressable onPress={openGiteaLink} style={({ pressed }) => [styles.linkButton, { opacity: pressed ? 0.8 : 1 }]}>
          <Ionicons name="link" size={16} color={C.text} />
          <Text style={[styles.linkButtonText, { color: C.accentGlow }]}>View project on Gitea</Text>
        </Pressable>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Colors.dark.background,
  },
  scrollContent: {
    padding: 20,
    paddingBottom: 40,
  },
  sectionHeader: {
    fontSize: 18,
    fontWeight: 'bold',
    color: Colors.dark.text,
    marginTop: 20,
    marginBottom: 10,
  },
  settingItem: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingVertical: 12,
    borderBottomWidth: 0.5,
    borderBottomColor: Colors.dark.border,
  },
  settingLabel: {
    fontSize: 16,
    color: Colors.dark.text,
    flex: 1,
  },
  settingValue: {
    fontSize: 16,
  },
  serverUrlContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    flex: 2,
  },
  input: {
    flex: 1,
    borderWidth: 1,
    borderColor: Colors.dark.border,
    borderRadius: 8,
    padding: 8,
    fontSize: 14,
    marginRight: 10,
  },
  linkButton: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 6,
    paddingVertical: 12,
  },
  linkButtonText: {
    fontSize: 16,
  },
});