import { useFocusEffect } from '@react-navigation/native';
import React from 'react';
import { Pressable, SafeAreaView, ScrollView, StyleSheet, Text, View } from 'react-native';

import { useApp } from '@/src/app-context';

export default function SettingsScreen() {
  const { state, actions } = useApp();

  useFocusEffect(
    React.useCallback(() => {
      actions.setPage('settings');
      return undefined;
    }, [actions]),
  );

  const profileName = state.session?.user?.name || 'User';
  const profileEmail = state.session?.user?.email || 'user@example.com';
  const profileInitial = (profileName[0] || 'U').toUpperCase();

  return (
    <SafeAreaView style={styles.safe}>
      <ScrollView contentContainerStyle={styles.content}>
        <Text style={styles.title}>Settings</Text>

        <View style={styles.profileCard}>
          <View style={styles.avatar}>
            <Text style={styles.avatarText}>{profileInitial}</Text>
          </View>
          <View>
            <Text style={styles.profileName}>{profileName}</Text>
            <Text style={styles.profileEmail}>{profileEmail}</Text>
          </View>
        </View>

        <View style={styles.menuCard}>
          <Pressable style={styles.menuItem} onPress={actions.runDiagnostics}>
            <Text style={styles.menuTitle}>Run Diagnostics</Text>
            <Text style={styles.menuArrow}>{'>'}</Text>
          </Pressable>
          <View style={styles.divider} />
          <View style={styles.menuItem}>
            <Text style={styles.menuTitle}>Device Information</Text>
            <Text style={styles.menuArrow}>{'>'}</Text>
          </View>
        </View>

        <Pressable style={styles.signOutButton} onPress={() => void actions.signOut()}>
          <Text style={styles.signOutText}>Sign Out</Text>
        </Pressable>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safe: {
    flex: 1,
    backgroundColor: '#0a0a0c',
  },
  content: {
    padding: 14,
    gap: 14,
  },
  title: {
    color: '#f9fafb',
    fontSize: 22,
    fontWeight: '700',
  },
  profileCard: {
    borderRadius: 16,
    padding: 14,
    borderWidth: 1,
    borderColor: 'rgba(255,255,255,0.08)',
    backgroundColor: '#111218',
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12,
  },
  avatar: {
    width: 56,
    height: 56,
    borderRadius: 28,
    backgroundColor: '#1d4ed8',
    alignItems: 'center',
    justifyContent: 'center',
  },
  avatarText: {
    color: '#f9fafb',
    fontSize: 24,
    fontWeight: '700',
  },
  profileName: {
    color: '#f3f4f6',
    fontSize: 17,
    fontWeight: '600',
  },
  profileEmail: {
    color: '#9ca3af',
    marginTop: 3,
    fontSize: 13,
  },
  menuCard: {
    borderRadius: 16,
    borderWidth: 1,
    borderColor: 'rgba(255,255,255,0.08)',
    backgroundColor: '#111218',
    overflow: 'hidden',
  },
  menuItem: {
    minHeight: 52,
    paddingHorizontal: 14,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  menuTitle: {
    color: '#e5e7eb',
    fontSize: 14,
    fontWeight: '500',
  },
  menuArrow: {
    color: '#6b7280',
    fontSize: 14,
  },
  divider: {
    height: 1,
    backgroundColor: 'rgba(255,255,255,0.08)',
  },
  signOutButton: {
    height: 48,
    borderRadius: 12,
    borderWidth: 1,
    borderColor: 'rgba(248,113,113,0.5)',
    alignItems: 'center',
    justifyContent: 'center',
  },
  signOutText: {
    color: '#fca5a5',
    fontWeight: '700',
    fontSize: 14,
  },
});