plebdevs/src/components/profile/progress/UserProgress.js

import React, { useState, useEffect } from 'react';
import { ProgressBar } from 'primereact/progressbar';
import { Accordion, AccordionTab } from 'primereact/accordion';
import { useSession, signIn, getSession } from 'next-auth/react';
import { useRouter } from 'next/router';
import { useBadge } from '@/hooks/badges/useBadge';
import GenericButton from '@/components/buttons/GenericButton';
import UserProgressFlow from './UserProgressFlow';
import { Tooltip } from 'primereact/tooltip';
import RepoSelector from '@/components/profile/RepoSelector';
import MoreInfo from '@/components/MoreInfo';

const allTasks = [
    {
        status: 'Connect GitHub', 
        completed: false, 
        tier: 'Pleb', 
        courseId: null,
        subTasks: [
            { status: 'Connect your GitHub account', completed: false },
        ]
    },
    {
        status: 'PlebDevs Starter',
        completed: false,
        tier: 'Plebdev',
        courseId: "f538f5c5-1a72-4804-8eb1-3f05cea64874",
        courseNAddress: "naddr1qvzqqqr4xspzpueu32tp0jc47uzlcuxdgcw06m40ytu7ynpna2adnqty3e0vda6pqy88wumn8ghj7mn0wvhxcmmv9uq32amnwvaz7tmjv4kxz7fwv3sk6atn9e5k7tcpr9mhxue69uhhyetvv9ujuumwdae8gtnnda3kjctv9uq3wamnwvaz7tmjv4kxz7fwdehhxarj9e3xzmny9uq36amnwvaz7tmjv4kxz7fwd46hg6tw09mkzmrvv46zucm0d5hsz9mhwden5te0wfjkccte9ec8y6tdv9kzumn9wshszynhwden5te0dehhxarjxgcjucm0d5hszynhwden5te0dehhxarjw4jjucm0d5hsz9nhwden5te0wp6hyurvv4ex2mrp0yhxxmmd9uq3wamnwvaz7tmjv4kxz7fwv3jhvueww3hk7mrn9uqzge34xvuxvdtrx5knzcfhxgkngwpsxsknsetzxyknxe3sx43k2cfkxsurwdq68epwa",
        subTasks: [
            { status: 'Complete the course', completed: false },
        ]
    },
    {
        status: 'Frontend Course',
        completed: false,
        tier: 'Frontend Dev',
        courseId: 'f73c37f4-df2e-4f7d-a838-dce568c76136',
        courseNAddress: "naddr1qvzqqqr4xspzpueu32tp0jc47uzlcuxdgcw06m40ytu7ynpna2adnqty3e0vda6pqy88wumn8ghj7mn0wvhxcmmv9uq32amnwvaz7tmjv4kxz7fwv3sk6atn9e5k7tcpr9mhxue69uhhyetvv9ujuumwdae8gtnnda3kjctv9uq3wamnwvaz7tmjv4kxz7fwdehhxarj9e3xzmny9uq36amnwvaz7tmjv4kxz7fwd46hg6tw09mkzmrvv46zucm0d5hsz9mhwden5te0wfjkccte9ec8y6tdv9kzumn9wshszynhwden5te0dehhxarjxgcjucm0d5hszynhwden5te0dehhxarjw4jjucm0d5hsz9nhwden5te0wp6hyurvv4ex2mrp0yhxxmmd9uq3wamnwvaz7tmjv4kxz7fwv3jhvueww3hk7mrn9uqzge3hxd3nxdmxxskkge3jv5knge3hvskkzwpn8qkkgcm9x5mrscehxccnxdsc53n8w",
        subTasks: [
            { status: 'Complete the course', completed: false },
            { status: 'Submit your project repository', completed: false },
        ]
    },
    {
        status: 'Backend Course',
        completed: false,
        tier: 'Backend Dev',
        courseId: 'f6825391-831c-44da-904a-9ac3d149b7be',
        courseNAddress: "naddr1qvzqqqr4xspzpueu32tp0jc47uzlcuxdgcw06m40ytu7ynpna2adnqty3e0vda6pqy88wumn8ghj7mn0wvhxcmmv9uq32amnwvaz7tmjv4kxz7fwv3sk6atn9e5k7tcpr9mhxue69uhhyetvv9ujuumwdae8gtnnda3kjctv9uq3wamnwvaz7tmjv4kxz7fwdehhxarj9e3xzmny9uq36amnwvaz7tmjv4kxz7fwd46hg6tw09mkzmrvv46zucm0d5hsz9mhwden5te0wfjkccte9ec8y6tdv9kzumn9wshszynhwden5te0dehhxarjxgcjucm0d5hszynhwden5te0dehhxarjw4jjucm0d5hsz9nhwden5te0wp6hyurvv4ex2mrp0yhxxmmd9uq3wamnwvaz7tmjv4kxz7fwv3jhvueww3hk7mrn9uqzge3k8qer2veexyknsve3vvkngdryvyknjvp5vyknjctrxdjrzdpevgmkyegqyn0ns",
        subTasks: [
            { status: 'Complete the course', completed: false },
            { status: 'Submit your project repository', completed: false },
        ]
    },
];

const UserProgress = () => {
    const [progress, setProgress] = useState(0);
    const [currentTier, setCurrentTier] = useState(null);
    const [expandedItems, setExpandedItems] = useState({});
    const [completedCourses, setCompletedCourses] = useState([]);
    const [tasks, setTasks] = useState([]);
    const [isLoading, setIsLoading] = useState(true);

    const router = useRouter();
    const { data: session, update } = useSession();
    useBadge();
    
    useEffect(() => {
        if (session?.user) {
            setIsLoading(true);
            const user = session.user;
            const ids = user?.userCourses?.map(course => course?.completed ? course.courseId : null).filter(id => id !== null);
            if (ids && ids.length > 0) {
                setCompletedCourses(ids);
                generateTasks(ids);
                calculateProgress(ids);
                calculateCurrentTier(ids);
            } else {
                generateTasks([]);
                calculateProgress([]);
                calculateCurrentTier([]);
            }
            setIsLoading(false);
        }
    }, [session]);

    const generateTasks = (completedCourseIds) => {
        const updatedTasks = allTasks.map(task => {
            if (task.status === 'Connect GitHub') {
                return {
                    ...task,
                    completed: session?.account?.provider === 'github' ? true : false,
                    subTasks: task.subTasks.map(subTask => ({
                        ...subTask,
                        completed: session?.account?.provider === 'github' ? true : false
                    }))
                };
            }

            const userCourse = session?.user?.userCourses?.find(uc => uc.courseId === task.courseId);
            const courseCompleted = completedCourseIds.includes(task.courseId);
            const repoSubmitted = userCourse?.submittedRepoLink ? true : false;

            return {
                ...task,
                completed: courseCompleted && (task.courseId === null || repoSubmitted),
                subTasks: task.subTasks.map(subTask => ({
                    ...subTask,
                    completed: subTask.status.includes('Complete') 
                        ? courseCompleted 
                        : subTask.status.includes('repository') 
                            ? repoSubmitted 
                            : false
                }))
            };
        });

        setTasks(updatedTasks);
    };

    const calculateProgress = (completedCourseIds) => {
        let progressValue = 0;

        if (session?.account?.provider === 'github') {
            progressValue += 25;
        }

        const remainingTasks = allTasks.slice(1);
        remainingTasks.forEach(task => {
            if (completedCourseIds.includes(task.courseId)) {
                progressValue += 25;
            }
        });

        setProgress(progressValue);
    };

    const calculateCurrentTier = (completedCourseIds) => {
        let tier = null;

        if (completedCourseIds.includes("f6825391-831c-44da-904a-9ac3d149b7be")) {
            tier = 'Backend Dev';
        } else if (completedCourseIds.includes("f73c37f4-df2e-4f7d-a838-dce568c76136")) {
            tier = 'Frontend Dev';
        } else if (completedCourseIds.includes("f6daa88a-53d6-4901-8dbd-d2203a05b7ab")) {
            tier = 'Plebdev';
        } else if (session?.account?.provider === 'github') {
            tier = 'Pleb';
        }

        setCurrentTier(tier);
    };

    const handleAccordionChange = (index, isExpanded) => {
        setExpandedItems(prev => ({
            ...prev,
            [index]: isExpanded
        }));
    };

    const handleGitHubLink = async () => {
        try {
            // If user is already signed in, we'll link the accounts
            if (session?.user) {
              const result = await signIn("github", { 
                redirect: false,
                // Pass existing user data for linking
                userId: session?.user?.id,
                pubkey: session?.user?.pubkey,
                privkey: session?.user?.privkey || null
              });
      
              if (result?.ok) {
                // Wait for session update
                await new Promise(resolve => setTimeout(resolve, 1000));
                const updatedSession = await getSession();
                if (updatedSession?.account?.provider === 'github') {
                  router.push('/profile'); // Accounts linked successfully
                }
              }
            } else {
              // Normal GitHub sign in
              await signIn("github");
            }
          } catch (error) {
            console.error("GitHub sign in error:", error);
        }
    };

    return (
        <div className="bg-gray-800 rounded-lg p-4 pb-0 m-2 mb-0 w-full border border-gray-700 shadow-md max-lap:mx-0">
            <div className="flex flex-row justify-between items-center">
                <h1 className="text-3xl font-bold text-white mb-2">Dev Journey</h1>
                <MoreInfo 
                    tooltip="Learn about the Dev Journey"
                    modalTitle="Dev Journey"
                    modalBody="This is an optional Dev Journey that will walk you through the primary course materials and help you learn how to code, gain the required experience to Build Bitcoin/Lightning/Nostr Apps, and set you up to go through the rest of the free workshops and other content on the platform."
                    className="text-2xl text-gray-200"
                />
            </div>
            <p className="text-gray-400 mb-4">Track your progress through the courses, showcase your GitHub contributions, submit projects, and earn badges!</p>

            <div className="flex justify-between items-center mb-2">
                <span className="text-gray-300">Progress</span>
                <span className="text-gray-300">{progress}%</span>
            </div>
            <ProgressBar value={progress} className="h-2 mb-6" pt={{
                label: {
                    className: 'hidden'
                }
            }} />

            <div className="mb-6">
                <span className="text-white text-lg font-semibold">Current Tier: </span>
                {currentTier ? (
                    <span className="bg-green-500 text-white px-3 py-1 rounded-full">
                        {currentTier}
                    </span>
                ) : (
                    <span className="bg-gray-700 text-gray-400 px-3 py-1 rounded-full text-sm">
                        Not Started
                    </span>
                )}
            </div>

            <div className="flex max-sidebar:flex-col gap-6 mb-6">
                <div className="w-1/2 max-sidebar:w-full">
                    <ul className="space-y-6 pt-2">
                        {tasks.map((task, index) => (
                            <li key={index}>
                                <Accordion 
                                    activeIndex={expandedItems[index] ? 0 : null}
                                    onTabChange={(e) => handleAccordionChange(index, e.index === 0)}
                                >
                                    <AccordionTab
                                        header={
                                            <div className="flex items-center justify-between w-full">
                                                <div className="flex items-center">
                                                    {task.completed ? (
                                                        <div className="w-6 h-6 bg-green-500 rounded-full flex items-center justify-center mr-3">
                                                            <i className="pi pi-check text-white text-lg"></i>
                                                        </div>
                                                    ) : (
                                                        <div className="w-6 h-6 bg-gray-700 rounded-full flex items-center justify-center mr-3">
                                                            <i className="pi pi-info-circle text-white text-lg"></i>
                                                        </div>
                                                    )}
                                                    <span className={`text-lg ${task.completed ? 'text-white' : 'text-gray-400'}`}>{task.status}</span>
                                                </div>
                                                <span className="bg-blue-500 text-white text-sm px-2 py-1 rounded-full w-24 text-center">
                                                    {task.tier}
                                                </span>
                                            </div>
                                        }
                                    >
                                        {task.status === 'Connect GitHub' && !task.completed && (
                                            <div className="mb-4">
                                                <GenericButton 
                                                    label="Connect GitHub"
                                                    icon="pi pi-github"
                                                    onClick={handleGitHubLink}
                                                    className="w-fit bg-[#24292e] hover:bg-[#2f363d] border border-[#f8f8ff] text-[#f8f8ff] font-semibold" 
                                                    rounded
                                                />
                                            </div>
                                        )}
                                        {task.subTasks && (
                                            <ul className="space-y-2">
                                                {task.subTasks.map((subTask, subIndex) => (
                                                    <li key={subIndex}>
                                                        <div className="flex items-center pl-[28px]">
                                                            {subTask.completed ? (
                                                                <div className="w-4 h-4 bg-green-500 rounded-full flex items-center justify-center mr-3">
                                                                    <i className="pi pi-check text-white text-sm"></i>
                                                                </div>
                                                            ) : (
                                                                <div className="w-4 h-4 bg-gray-700 rounded-full flex items-center justify-center mr-3">
                                                                    <i className="pi pi-info-circle text-white text-sm"></i>
                                                                </div>
                                                            )}
                                                            <span className={`${subTask.completed ? 'text-white' : 'text-gray-400'}`}>
                                                                {subTask.status}
                                                            </span>
                                                            {subTask.status === 'Connect your GitHub account' && (
                                                                <MoreInfo 
                                                                    tooltip="GitHub Connection Info"
                                                                    modalTitle="Connect GitHub Account"
                                                                    modalBody="Connect your GitHub account to track your progress and submit projects. This allows us to verify your project submissions and track your development journey."
                                                                    className="ml-2 text-sm text-gray-200"
                                                                />
                                                            )}
                                                        </div>
                                                        {subTask.status.includes('repository') && !subTask.completed && (
                                                            <RepoSelector 
                                                                courseId={task.courseId}
                                                                onSubmit={() => {
                                                                    const updatedTasks = tasks.map(t => 
                                                                        t.courseId === task.courseId 
                                                                            ? {
                                                                                ...t,
                                                                                subTasks: t.subTasks.map(st => 
                                                                                    st.status === subTask.status 
                                                                                        ? { ...st, completed: true }
                                                                                        : st
                                                                                )
                                                                            }
                                                                            : t
                                                                    );
                                                                    setTasks(updatedTasks);
                                                                    router.push('/profile');
                                                                }}
                                                            />
                                                        )}
                                                    </li>
                                                ))}
                                            </ul>
                                        )}
                                        {task.courseNAddress && (
                                            <div className="mt-2 flex justify-end">
                                                <GenericButton 
                                                    icon="pi pi-external-link"
                                                    label="View Course"
                                                    onClick={() => router.push(`/course/${task.courseNAddress}`)}
                                                    outlined
                                                    size="small"
                                                />
                                            </div>
                                        )}
                                    </AccordionTab>
                                </Accordion>
                            </li>
                        ))}
                    </ul>
                </div>

                <div className="w-1/2 max-sidebar:w-full">
                    {isLoading ? (
                        <div className="h-[400px] bg-gray-800 rounded-3xl flex items-center justify-center">
                            <i className="pi pi-spin pi-spinner text-4xl text-gray-600"></i>
                        </div>
                    ) : (
                        <UserProgressFlow tasks={tasks} />
                    )}
                </div>
            </div>
        </div>
    );
};

export default UserProgress;