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


interface TaskType {
    id: number;
    title?: string;
    completed?: boolean;

    [key: string]: unknown;
}

interface User {
    id: number;
    name: string;
    lastname: string;
    role: string;
    email: string;
    phone: string | null;
    created_at: string;
    isAdmin: boolean;
    tasks: TaskType[];
}

interface AuthContextType {
    user: User;
    update: () => void;
}


function ProfilePage() {

    const navigate = useNavigate();
    const { id } = useParams();
    const { user, update } = useContext(AuthContext) as AuthContextType;
    const [profileUser, setProfileUser] = useState<User | null>(null);

    const isOwnProfile = !id || user.id.toString() === id;

    useEffect(() => {
        update();
        (async () => {

            if(!isOwnProfile) {
                console.log(id);
                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;
                }

                setProfileUser(res.data);
            } else setProfileUser(user)
        }) ()
    }, []);

    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>
                                {profileUser?.name} {profileUser?.lastname}
                            </h2>
                            {(user?.isAdmin && profileUser && !isOwnProfile) && (
                                <ManageMember userToManage={profileUser} />
                            )}
                        </div>

                        <div className={styles.topDescription}>
                            <div className={`${styles.infoBlock} glassBorder`}>
                                <p>
                                    <strong>Role :</strong> {profileUser?.role}
                                </p>
                                <p>
                                    <strong>Membre depuis :</strong>{" "}
                                    {profileUser && formatDate(profileUser.created_at)}
                                </p>
                            </div>

                            <div className={`${styles.infoBlock} glassBorder`}>
                                <p>
                                    <strong>Mail :</strong> {profileUser?.email}
                                </p>
                                <p>
                                    <strong>Téléphone :</strong>{" "}
                                    {profileUser?.phone ?? "Pas de numéro enregistré"}
                                </p>
                            </div>

                            {isOwnProfile && (
                                <div className={styles.settingImage}>
                                    <SettingsModal />
                                </div>
                            )}
                        </div>

                        <h2>Tâches :</h2>

                        {profileUser && profileUser.tasks.length > 0 ? (
                            profileUser.tasks.map((task) => (
                                <Task key={task.id} task={task}/>
                            ))
                        ) : (
                            <p>Aucune tâche pour le moment.</p>
                        )}
                    </div>
                </div>
            </div>
        </div>
    );
}

export default ProfilePage;