import { Alert, Modal, Text, TouchableOpacity, View } from 'react-native';
import { useApp } from '../context/AppContext';
import { useAuth } from '../context/AuthContext';
import styles from '../styles/index';

export function AccountModal() {
  const {
    accountVisible,
    setAccountVisible,
    themeColor,
    effectiveCanPick,
    effectiveCanPack,
    effectiveCanPrint,
  } = useApp();
  const { currentUser, handleSessionExpired } = useAuth();

  return (
    <Modal visible={accountVisible} animationType="slide">
      <View style={[styles.container, { paddingBottom: 40, paddingTop: 0 }]}>
        <View style={styles.modalHeader}>
          <Text style={styles.modalHeaderTitle}>👤 My Account</Text>
          <TouchableOpacity onPress={() => setAccountVisible(false)}>
            <Text style={{ fontSize: 24, color: '#333', padding: 5 }}>✕</Text>
          </TouchableOpacity>
        </View>

        <View style={{ padding: 24 }}>
          <View style={{ alignItems: 'center', marginBottom: 28 }}>
            <View style={{
              width: 72, height: 72, borderRadius: 36,
              backgroundColor: themeColor,
              alignItems: 'center', justifyContent: 'center', marginBottom: 12,
            }}>
              <Text style={{ fontSize: 30, color: '#fff', fontWeight: 'bold' }}>
                {(currentUser?.name || '?')[0].toUpperCase()}
              </Text>
            </View>
            <Text style={{ fontSize: 22, fontWeight: 'bold', color: '#202223' }}>{currentUser?.name}</Text>
            <View style={{
              backgroundColor: currentUser?.role === 'master' ? '#007a58' : '#6b7280',
              borderRadius: 20, paddingHorizontal: 14, paddingVertical: 4, marginTop: 6,
            }}>
              <Text style={{ color: '#fff', fontSize: 12, fontWeight: '800', textTransform: 'uppercase', letterSpacing: 0.8 }}>
                {currentUser?.role === 'master' ? '★ Master' : 'Secondary'}
              </Text>
            </View>
          </View>

          <Text style={{ fontSize: 12, fontWeight: '800', color: '#888', textTransform: 'uppercase', letterSpacing: 0.6, marginBottom: 12 }}>
            Permissions
          </Text>
          <View style={{ flexDirection: 'row', gap: 10, marginBottom: 28 }}>
            {[['Pick', effectiveCanPick], ['Pack', effectiveCanPack], ['Print', effectiveCanPrint]].map(([label, allowed]) => (
              <View
                key={label}
                style={{
                  flex: 1, alignItems: 'center', padding: 14, borderRadius: 12,
                  backgroundColor: allowed ? '#e6f4ef' : '#f4f4f4',
                  borderWidth: 1,
                  borderColor: allowed ? '#a3d9c3' : '#e0e0e0',
                }}
              >
                <Text style={{ fontSize: 20, marginBottom: 4 }}>{allowed ? '✅' : '🚫'}</Text>
                <Text style={{ fontSize: 13, fontWeight: '700', color: allowed ? '#007a58' : '#aaa' }}>{label}</Text>
              </View>
            ))}
          </View>

          <TouchableOpacity
            style={{ backgroundColor: '#e74c3c', borderRadius: 12, padding: 16, alignItems: 'center' }}
            onPress={() => {
              Alert.alert('Log Out', 'Sign out of this device?', [
                { text: 'Cancel', style: 'cancel' },
                {
                  text: 'Log Out', style: 'destructive', onPress: async () => {
                    setAccountVisible(false);
                    await handleSessionExpired();
                  },
                },
              ]);
            }}
          >
            <Text style={{ color: '#fff', fontWeight: 'bold', fontSize: 16 }}>LOG OUT</Text>
          </TouchableOpacity>
        </View>
      </View>
    </Modal>
  );
}
