import React, {useState, useEffect} from "react";
import Button from "../../../../components/ui/button/button.jsx";
import styles from "./PendingMembers.module.css";
import Modal from "../../../../components/ui/modal/modal.jsx";
import getUserToValidate from "../../../../utils/users/getUserToValidate.js";
import getUserById from "../../../../utils/users/getUserById.js";
import validateUser from "../../../../utils/users/validateUser.js";
import deleteOtherUser from "../../../../utils/users/deleteOtherUser.js";

function PendingMembers() {


    const [open, setOpen] = useState(false);
    const [message, setMessage] = useState("");
    const [title, setTitle] = useState("");

    const [pendingMembers, setPendingMembers] = useState([]);

    const fetchUsers = async () => {

        const result = await getUserToValidate();
        const userIds = result.data;

        if (userIds && userIds.length > 0) {
            const users = await Promise.all(userIds.map(id => getUserById(id)));
            const usersData = users.map(u => u.data);
            setPendingMembers(usersData);
        } else setPendingMembers([]);
    }

    useEffect(() => {
        fetchUsers();
    }, []);

    const handleValidate = async (id, name) => {
        const result = await validateUser(id);

        if(result.status === 200) {
            setTitle("Utilisateur accepté avec succès")
            setMessage(`L'utilisateur ${name} a été accepté avec succès`)
            setOpen(true);
        } else {
            setTitle("Erreur")
            setMessage(`Une erreur est survenue durant l'acceptation de l'utilisateur ${name}`)
            setOpen(true);
        }

        fetchUsers();
    }

    const handleRefuse = async (id, name) => {
        const result = await deleteOtherUser(id);

        if(result.status === 200) {
            setTitle("Utilisateur refusé avec succès")
            setMessage(`L'utilisateur ${name} a été refusé avec succès`)
            setOpen(true);
        } else {
            setTitle("Erreur")
            setMessage(`Une erreur est survenue durant le refus de l'utilisateur ${name}`)
            setOpen(true);
        }

        fetchUsers();
    }

    return (
        <div className={`${styles.rightBlock} glassCard`}>
            <h2>Membres en attente de validation</h2>

            <div className={styles.membersContainer}>

                {pendingMembers.length === 0 && <p>Aucun membre en attente</p>}

                {pendingMembers.map((member, index) => (

                    <div key={index} className={`glassCard ${styles.memberCard}`}>

                        <p>{member.name} {member.lastname}</p>

                        <div className={styles.buttonGroup}>
                            <Button variant="primary" onClick={() => handleValidate(member.id, `${member.name} ${member.lastname}`)}>Valider</Button>
                            <Button variant="danger" onClick={() => handleRefuse(member.id, `${member.name} ${member.lastname}`)}>Refuser</Button>
                        </div>

                    </div>

                ))}

            </div>

            <Modal open={open} onClose={() => setOpen(false)} title={title}>
                {message}
            </Modal>

        </div>
    );
}

export default PendingMembers;