import { useRouter } from 'expo-router';
import { Alert, Pressable, StyleSheet, Text, View } from 'react-native';

import { useAuth } from '../../../lib/authContext';
import { colors } from '../../../theme/colors';

export default function SettingsIndex() {
  const router = useRouter();
  const { signOut } = useAuth();

  function confirmLogout() {
    Alert.alert('Abmelden', 'Diese Sitzung beenden?', [
      { text: 'Abbrechen', style: 'cancel' },
      { text: 'Abmelden', style: 'destructive', onPress: () => void signOut() },
    ]);
  }

  return (
    <View style={styles.container}>
      <Pressable style={styles.row} onPress={() => router.push('/(app)/settings/security')}>
        <Text style={styles.rowTitle}>Sicherheit</Text>
        <Text style={styles.rowHint}>PIN ändern, Recovery-Code, Identität zurücksetzen</Text>
      </Pressable>
      <Pressable style={[styles.row, styles.danger]} onPress={confirmLogout}>
        <Text style={[styles.rowTitle, styles.dangerText]}>Abmelden</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: colors.bg, padding: 16, gap: 12 },
  row: {
    backgroundColor: colors.surface,
    padding: 16,
    borderRadius: 12,
    borderColor: colors.border,
    borderWidth: 1,
  },
  rowTitle: { color: colors.text, fontSize: 16, fontWeight: '600' },
  rowHint: { color: colors.textMuted, fontSize: 13, marginTop: 4 },
  danger: { borderColor: colors.danger },
  dangerText: { color: colors.danger },
});