import styles from "./VolunteerProfilePage.module.css";
import { useParams, useNavigate } from "react-router";
import { useEffect, useState, useContext } from "react";
import getUserById from "../../utils/users/getUserById.js";
import formatDate from "../../utils/date/formatDate.js";
import Task from "../../components/Task/Task.jsx";
import ManageMember from "./components/manageMember/ManageMember.jsx";
import { AuthContext } from "../../contexts/auth/AuthContext.js";

export default function VolunteerProfilePage() {
    const { id } = useParams();
    const navigate = useNavigate();
    const { user: currentUser } = useContext(AuthContext);

    const [user, setUser] = useState(null);

    useEffect(() => {
        (async () => {
            const res = await getUserById(id);

            if (res.status === 404) {
                navigate("/404");
                return;
            }

            if (res.status !== 200) {
                console.error("Erreur lors du chargement du profil", res);
                return;
            }

            setUser(res.data);
        })();
    }, [id, navigate]);

    if (!user) return null;

    return (
        <div className={styles.container}>
            <div className={`${styles.profileboard} glassCard`}>
                <div className={styles.contentWrapper}>
                    <div className={styles.profilePictureContainer}>
                        <img
                            src="/react.svg"
                            alt="Photo de profil"
                            className={styles.profilePicture}
                        />
                    </div>

                    <div className={styles.description}>
                        <div className={styles.headerProfile}>
                            <h2>{user.name} {user.lastname}</h2>
                            {currentUser?.isAdmin && (
                                <ManageMember userToManage={user} />
                            )}
                        </div>

                        <div className={styles.topDescription}>
                            <div className={`${styles.infoBlock} glassBorder`}>
                                <p><strong>Role :</strong> {user.role}</p>
                                <p><strong>Membre depuis :</strong> {formatDate(user.created_at)}</p>
                            </div>
                            <div className={`${styles.infoBlock} glassBorder`}>
                                <p><strong>Mail :</strong> {user.email}</p>
                                <p>
                                    <strong>Téléphone :</strong>{" "}
                                    {user.phone ?? "Pas de numéro enregistré"}
                                </p>
                            </div>
                        </div>

                        <h2>Tâches :</h2>
                        {user.tasks?.length > 0 ? (
                            user.tasks.map((task, index) => (
                                <Task key={index} task={task} />
                            ))
                        ) : (
                            <p>Aucune tâche pour le moment.</p>
                        )}
                    </div>
                </div>
            </div>
        </div>
    );
}