import React from 'react';
import { View, StyleSheet } from 'react-native';
import { Card, Text, Button, Divider, List } from 'react-native-paper';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useAuth } from '../hooks/useAuth';

export function SettingsScreen() {
  const { user, logout } = useAuth();

  return (
    <SafeAreaView style={styles.container} edges={['bottom']}>
      <View style={styles.content}>
        <Card style={styles.card} mode="elevated">
          <Card.Content>
            <Text variant="titleLarge" style={styles.name}>
              {user?.displayName}
            </Text>
            <Text variant="bodyMedium" style={styles.email}>
              {user?.email}
            </Text>
            <View style={styles.roleBadge}>
              <Text variant="labelMedium" style={styles.roleText}>
                {user?.role}
              </Text>
            </View>
          </Card.Content>
        </Card>

        <Card style={styles.card} mode="elevated">
          <List.Item
            title="About"
            description="Sea Haven Proposal System v0.1.0"
            left={(props) => <List.Icon {...props} icon="information-outline" />}
          />
          <Divider />
          <List.Item
            title="Help & Support"
            description="Contact IT for assistance"
            left={(props) => <List.Icon {...props} icon="help-circle-outline" />}
          />
        </Card>

        <Button
          mode="outlined"
          icon="logout"
          onPress={logout}
          textColor="#D32F2F"
          style={styles.logoutButton}
        >
          Sign Out
        </Button>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#FAFAFA',
  },
  content: {
    flex: 1,
    padding: 16,
  },
  card: {
    marginBottom: 16,
  },
  name: {
    fontWeight: '700',
    marginBottom: 4,
  },
  email: {
    color: '#757575',
    marginBottom: 8,
  },
  roleBadge: {
    alignSelf: 'flex-start',
    backgroundColor: '#E3F2FD',
    paddingHorizontal: 12,
    paddingVertical: 4,
    borderRadius: 12,
  },
  roleText: {
    color: '#1565C0',
    fontWeight: '600',
  },
  logoutButton: {
    marginTop: 'auto',
    borderColor: '#D32F2F',
  },
});