import React, { useState } from 'react';
import { View, Modal, Text, TouchableOpacity } from 'react-native';
import { useUsers } from '@/contexts/UserContext';
import AppText from '@/components/AppText';

interface PopupProps {
  isVisible: boolean;
  onClose: () => void;
}

const DeleteProfilePopUp: React.FC<PopupProps> = ({ isVisible, onClose }) => {
  const { users, currentUser, deleteCurrentUser } = useUsers();
  const [error, setError] = useState<string | null>(null);

  const handleDelete = async (username: string) => {
    if (username === currentUser?.username) {
      setError(
        `Impossible de supprimer le profil depuis lequel vous agissez. Changez de profil pour supprimer ${username}.`
      );
      return;
    }
    await deleteCurrentUser(username);
    setError(null);
    onClose();
  };

  return (
    <Modal visible={isVisible} transparent>
      <TouchableOpacity
        style={{
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: 'rgba(0, 0, 0, 0.5)',
        }}
        activeOpacity={1}
        onPress={() => { setError(null); onClose(); }}
      >
        <TouchableOpacity activeOpacity={1}>
          <View
            style={{
              width: 300,
              backgroundColor: 'white',
              borderRadius: 10,
              padding: 16,
              justifyContent: 'center',
              alignItems: 'center',
            }}
          >
            <AppText
              text="Supprimer un profil"
              style={{ fontSize: 18, fontWeight: 'bold', fontStyle : "italic", marginBottom: 16 }}
            />

            {error && (
              <Text style={{
                fontSize: 13,
                color: '#E8437B',
                textAlign: 'center',
                marginBottom: 12,
              }}>
                {error}
              </Text>
            )}

            {users.map((u, index) => (
              <TouchableOpacity
                key={index}
                onPress={() => handleDelete(u.username)}
                style={{
                  paddingVertical: 10,
                  paddingHorizontal: 20,
                  marginVertical: 4,
                  borderRadius: 8,
                  backgroundColor: u.username === currentUser?.username ? '#f0f0f0' : '#fff',
                  borderWidth: 1,
                  borderColor: '#ddd',
                  width: '100%',
                  alignItems: 'center',
                }}
              >
                <Text style={{
                  fontSize: 20,
                  color: u.username === currentUser?.username ? '#aaa' : '#E8437B',
                }}>
                  {u.username}
                </Text>
              </TouchableOpacity>
            ))}
          </View>
        </TouchableOpacity>
      </TouchableOpacity>
    </Modal>
  );
};

export default DeleteProfilePopUp;