"use client"
import React, { useEffect, useState } from 'react'
import { RadioForm } from '@/components/Form/RadioForm'
import { Form, Formik, FormikProps } from 'formik'
import { getTranslation } from '../../../../../i18n';
import Image from 'next/image'
import Countdown from 'react-countdown';
import { useCreateAnswerMutation, useUpdateAnswerMutation } from '@/services/answer'
import { usePathname, useRouter } from 'next/navigation'
import { useSession } from 'next-auth/react'
import { BASE_URL } from '@/services/api';
import { QuestionsResponse, useExamGetDataByTheoryTrainAttemptIdMutation, useLazyExamGetDataByUserIdAndTheoryTrainIdQuery } from '@/services/exam';
import Paginate from '@/helpers/paginated';
import moment from 'moment';
export interface FormValues {
    id?: string;
    choiceId: string;
    theoryTrainAttemptsId: string;
}
/**
 * ComponentTest component.
 * @param id - The ID of the component.
 * @param number - The number of the component.
 * @returns The ComponentTest component.
 */
export const ComponentTest = ({ id, number }: { id: string, number: string }) => {
    const { t } = getTranslation();
    const { data: sessionData } = useSession();
    const userId = sessionData?.user?.userInfo?.id;
    const router = useRouter();
    const [ExamGetDataByUserIdAndTheoryTrainId, { currentData: dataExamGetDataByUserIdAndTheoryTrainId, isFetching: isFetchingExamGetDataByUserIdAndTheoryTrainId }] = useLazyExamGetDataByUserIdAndTheoryTrainIdQuery()

    const [currentQuestion, setCurrentQuestion] = useState(0)
    useEffect(() => {
        if (userId && id) {
            ExamGetDataByUserIdAndTheoryTrainId({
                userId: String(userId),
                theoryTrainId: String(id),
            }).then((data) => {
                if (data.data && data.data.lastAttempt == null) {
                    router.push(`/theoreticalTraining/${id}`)
                }
            })
        }
    }, [userId, id])


    const [selected, setSelected] = useState("questionsWithNoAnswers")


    if (isFetchingExamGetDataByUserIdAndTheoryTrainId) {
        return <div className='flex justify-center items-center h-[50vh]'>
            <div className="loader !bg-primary"></div>
        </div>
    }
    return (
        <div className='w-full md:px-10'>
            {dataExamGetDataByUserIdAndTheoryTrainId?.lastAttempt == null ? <div>

                <div className='flex justify-center items-center gap-4'>
                    <div className='flex gap-2'>
                        <div>النتيجة</div>
                        <div>التاريخ</div>
                    </div>
                </div>
                {
                    dataExamGetDataByUserIdAndTheoryTrainId?.theoryTrainAttempts?.map((item, index) => (
                        <div key={index} className='flex justify-center items-center gap-4'>
                            <div>  {item.score}</div>
                            <div>{moment(item.endAt).format("YYYY-MM-DD HH:MM:SS")}</div>
                        </div>
                    ))}

            </div> :
                <div className='flex justify-center items-center flex-col max-md:gap-3 md:gap-6 w-full'>
                    <div className='flex justify-center items-center gap-4 bg-primary rounded-2xl '>
                        <div
                            onClick={() => {
                                setCurrentQuestion(0)
                                setSelected("questionsWithNoAnswers")
                            }}
                            className={`w-fit h-[52px] px-4 py-[10px] ${selected == "questionsWithNoAnswers" ? "bg-white/40" : ""}  rounded-2xl justify-center items-center gap-1.5 inline-flex`}>
                            <div className={`text-center text-white text-base font-semibold font-['Alexandria'] `}>
                                الاسئلة المتبقية
                            </div>
                        </div>
                        <div
                            onClick={() => {
                                setCurrentQuestion(0)
                                setSelected("questionsWithAnswers")
                            }}
                            className={`w-fit h-[52px] px-4 py-[10px] ${selected == "questionsWithAnswers" ? "bg-white/40" : ""}  rounded-2xl justify-center items-center gap-1.5 inline-flex`}>
                            <div className={`text-center text-white text-base font-semibold font-['Alexandria'] `}>
                                الاسئلة المكتملة
                            </div>
                        </div>
                    </div>
                    {selected == "questionsWithNoAnswers" &&
                        <ComponentQuestionsWithNoAnswers
                            lastAttempt={dataExamGetDataByUserIdAndTheoryTrainId?.lastAttempt}
                            selected={selected}
                            currentQuestion={currentQuestion}
                            setCurrentQuestion={setCurrentQuestion}
                            endAt={String(dataExamGetDataByUserIdAndTheoryTrainId?.lastAttempt?.endAt)}
                            isFullTime={dataExamGetDataByUserIdAndTheoryTrainId.isFullTime ?? false}

                            theoryTrainAttemptsId={String(dataExamGetDataByUserIdAndTheoryTrainId?.lastAttempt?.id)}
                            listQuestions={
                                Paginate({
                                    list: dataExamGetDataByUserIdAndTheoryTrainId?.questionsWithNoAnswers ?? [],
                                    pageNumber: Number(number),
                                    pageSize: 50
                                })}
                        />
                    }
                    {selected == "questionsWithAnswers" &&
                        <ComponentQuestionsWithNoAnswers
                            lastAttempt={dataExamGetDataByUserIdAndTheoryTrainId?.lastAttempt}
                            selected={selected}
                            currentQuestion={currentQuestion}
                            setCurrentQuestion={setCurrentQuestion}
                            endAt={String(dataExamGetDataByUserIdAndTheoryTrainId?.lastAttempt?.endAt)}
                            isFullTime={dataExamGetDataByUserIdAndTheoryTrainId.isFullTime ?? false}
                            theoryTrainAttemptsId={String(dataExamGetDataByUserIdAndTheoryTrainId?.lastAttempt?.id)}
                            listQuestions={
                                Paginate({
                                    list: dataExamGetDataByUserIdAndTheoryTrainId?.questionsWithAnswers ?? [],
                                    pageNumber: Number(number),
                                    pageSize: 50
                                })}
                        />
                    }
                </div>
            }
        </div>
    )
}



export const ComponentQuestionsWithNoAnswers = ({
    lastAttempt,
    selected,
    listQuestions,
    isFullTime,
    currentQuestion,
    setCurrentQuestion,
    theoryTrainAttemptsId,
    endAt,
}: {
    lastAttempt: {
        id: string
        endAt: string
        score: null | number,
        status: boolean,
        UserTheoryTrainId: string
    }
    listQuestions: QuestionsResponse[],
    isFullTime: boolean,
    currentQuestion: number,
    setCurrentQuestion: any,
    theoryTrainAttemptsId: string,
    endAt: string,
    selected: "questionsWithAnswers" | "questionsWithNoAnswers"
}
) => {
    const pathname = usePathname()
    const router = useRouter();
    const [CreateAnswer, { isLoading }] = useCreateAnswerMutation()
    const [UpdateAnswer, { isLoading: isLoadingUpdateAnswer }] = useUpdateAnswerMutation()
    const [ExamGetDataByTheoryTrainAttemptId, { isLoading: isLoadingExamGetDataByTheoryTrainAttemptId }] = useExamGetDataByTheoryTrainAttemptIdMutation()
    const handleResult = async () => {
        try {
            await ExamGetDataByTheoryTrainAttemptId({
                theoryTrainAttemptId: lastAttempt.id
            }).unwrap();

            router.push(pathname + `?start=true&result=true&theoryTrainAttemptId=${lastAttempt.id}`)
        }
        catch (error) {
            console.log("error", error);
        }
    }

    return (
        <>

            <div className="justify-between items-center flex w-full">
                <CloseButton />
                <div className='hidden md:flex md:w-[33%]  justify-center'>
                    <ComponentNumberOfQuestion
                        numberquestionsWithAnswers={listQuestions?.length ?? 0}
                        numberquestionsWithNoAnswers={currentQuestion + 1}
                    />
                </div>
                <div className='md:w-[33%] flex justify-end'>
                    {!isFullTime && <ComponentCountdown endTime={new Date(endAt) as any} handleResult={handleResult} />
                    }                </div>
            </div>
            <div className='hidden max-md:flex justify-center'>
                <ComponentNumberOfQuestion
                    numberquestionsWithAnswers={listQuestions.length ?? 0}
                    numberquestionsWithNoAnswers={currentQuestion + 1}
                />
            </div>
            {listQuestions.length > 0 ?
                <>

                    <div className='md:w-[50%] flex-col flex justify-center items-center gap-4'>
                        <ComponentImageTest
                            src={`${BASE_URL}questions/${listQuestions[currentQuestion]?.img}`}
                        />
                        <div className="w-full text-black text-opacity-90 text-lg font-bold font-['Alexandria'] leading-[27px]">
                            {listQuestions[currentQuestion]?.question}
                        </div>

                        <Formik<FormValues>
                            initialValues={{
                                choiceId: listQuestions[currentQuestion]?.answer?.ChoiceId ?? "",
                                theoryTrainAttemptsId: theoryTrainAttemptsId
                            }}
                            onSubmit={(values, props) => {
                                if (selected == "questionsWithNoAnswers") {
                                    CreateAnswer({
                                        status: true,
                                        choiceId: values.choiceId,
                                        theoryTrainAttemptsId: values.theoryTrainAttemptsId,
                                    })
                                } else {
                                    UpdateAnswer({
                                        id: listQuestions[currentQuestion]?.answer?.id ?? "",
                                        choiceId: values.choiceId,
                                        theoryTrainAttemptsId: values.theoryTrainAttemptsId,
                                    })
                                }

                                props.setFieldValue("choiceId", "")
                            }}

                        >
                            {(props: FormikProps<any>) => (
                                <Form className={'flex flex-col w-full'}>
                                    {

                                        listQuestions[currentQuestion]?.Choices?.map((item, index) => (
                                            <RadioForm
                                                id={item.id}
                                                key={index}
                                                className="text-black text-opacity-90 text-xl font-bold font-['Alexandria'] leading-[30px]"
                                                formikProps={props}
                                                name={`choiceId`}
                                                title={`${item.choice}`}

                                                props={{
                                                    value: item.id,
                                                    checked: item.id === props.values.choiceId,
                                                    onClick: (event: any) => {
                                                        props.setFieldValue("choiceId", item.id)
                                                        props.setFieldValue("choiceId", item.id)
                                                    },
                                                }}
                                            />
                                        ))
                                    }

                                    <div className='flex justify-center items-center gap-4'>
                                        {selected == "questionsWithNoAnswers" && listQuestions.length == 0 &&
                                            <button
                                                disabled={isLoading}
                                                type='button'
                                                onClick={async () => {
                                                    if (selected == "questionsWithNoAnswers") {
                                                        props.setFieldValue("choiceId", "")

                                                    } else {
                                                        props.setFieldValue("choiceId", listQuestions[currentQuestion == 0 ? 0 : currentQuestion - 1]?.answer?.ChoiceId ?? "")
                                                    }
                                                    setCurrentQuestion(currentQuestion == 0 ? 0 : currentQuestion - 1)

                                                }
                                                }
                                                className="w-fit  px-4 py-[10px] bg-indigo-600 rounded-[96px] justify-center items-center gap-1.5 inline-flex">
                                                <div className="w-[18px] h-[18px] relative" >
                                                    <svg className='rotate-180' width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path fillRule="evenodd" clipRule="evenodd" d="M11.6161 3.32293C11.8519 3.5251 11.8793 3.88021 11.6771 4.11608L7.49086 9.00001L11.6771 13.8839C11.8793 14.1198 11.8519 14.4749 11.6161 14.6771C11.3802 14.8793 11.0251 14.852 10.8229 14.6161L6.32292 9.36608C6.14236 9.15543 6.14236 8.84459 6.32292 8.63394L10.8229 3.38394C11.0251 3.14807 11.3802 3.12075 11.6161 3.32293Z" fill="white" />
                                                    </svg>
                                                </div>
                                                <div className="text-center text-white text-lg font-semibold font-['Alexandria'] leading-[27px]">السابق</div>
                                            </button>
                                        }
                                        <button
                                            disabled={isLoading}
                                            type='button'
                                            onClick={async () => {
                                                if (selected == "questionsWithNoAnswers") {
                                                    props.setFieldValue("choiceId", "")

                                                } else {
                                                    props.setFieldValue("choiceId", listQuestions[currentQuestion == 0 ? 0 : currentQuestion - 1]?.answer?.ChoiceId ?? "")
                                                }
                                                setCurrentQuestion(currentQuestion == 0 ? 0 : currentQuestion - 1)

                                            }
                                            }
                                            className="w-fit  px-4 py-[10px] bg-indigo-600 rounded-[96px] justify-center items-center gap-1.5 inline-flex">
                                            <div className="w-[18px] h-[18px] relative" >
                                                <svg className='rotate-180' width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path fillRule="evenodd" clipRule="evenodd" d="M11.6161 3.32293C11.8519 3.5251 11.8793 3.88021 11.6771 4.11608L7.49086 9.00001L11.6771 13.8839C11.8793 14.1198 11.8519 14.4749 11.6161 14.6771C11.3802 14.8793 11.0251 14.852 10.8229 14.6161L6.32292 9.36608C6.14236 9.15543 6.14236 8.84459 6.32292 8.63394L10.8229 3.38394C11.0251 3.14807 11.3802 3.12075 11.6161 3.32293Z" fill="white" />
                                                </svg>
                                            </div>
                                            <div className="text-center text-white text-lg font-semibold font-['Alexandria'] leading-[27px]">السابق</div>
                                        </button>
                                        <button
                                            disabled={isLoading || isLoadingUpdateAnswer}
                                            type='button'
                                            onClick={async () => {

                                                if (props.values.choiceId && listQuestions[currentQuestion]?.answer?.ChoiceId != props.values.choiceId) {
                                                    await props.submitForm()
                                                }
                                                else if (currentQuestion != listQuestions.length - 1) {
                                                    props.setFieldValue("choiceId", listQuestions[currentQuestion + 1]?.answer?.ChoiceId ?? "")
                                                    setCurrentQuestion(currentQuestion + 1)

                                                } else {
                                                    // setIsViewResult(true)
                                                }
                                            }
                                            }
                                            className="w-fit  px-4 py-[10px] bg-indigo-600 rounded-[96px] justify-center items-center gap-1.5 inline-flex">
                                            <div className="text-center text-white text-lg font-semibold font-['Alexandria'] leading-[27px]">التالي</div>
                                            <div className="w-[18px] h-[18px] relative" >
                                                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path fillRule="evenodd" clipRule="evenodd" d="M11.6161 3.32293C11.8519 3.5251 11.8793 3.88021 11.6771 4.11608L7.49086 9.00001L11.6771 13.8839C11.8793 14.1198 11.8519 14.4749 11.6161 14.6771C11.3802 14.8793 11.0251 14.852 10.8229 14.6161L6.32292 9.36608C6.14236 9.15543 6.14236 8.84459 6.32292 8.63394L10.8229 3.38394C11.0251 3.14807 11.3802 3.12075 11.6161 3.32293Z" fill="white" />
                                                </svg>
                                            </div>
                                        </button>
                                    </div>
                                </Form>
                            )}
                        </Formik>
                    </div>

                </> :
                listQuestions.length == 0 && selected == "questionsWithAnswers" ? <>
                    لاتوجد اسئلة
                </>
                    :
                    <>
                        لاتوجد اسئلة

                        <div className='w-full md:px-10 flex-col flex justify-center items-center gap-10'>
                            <div className="text-center"><span className="px-1 text-black text-opacity-90 text-[28px] font-bold font-['Alexandria'] leading-[42px]">
                                {"تمت الاجابة ع كل الاسئلة"}
                            </span>
                            </div>
                            <button onClick={handleResult} className="w-[261px] h-[62px] px-8 py-[26px] bg-indigo-600 rounded-[96px] justify-center items-center gap-1.5 inline-flex">
                                <div className="text-center text-white text-lg font-semibold font-['Alexandria'] leading-[27px]"> عرض النتيجة</div>
                                {isLoadingExamGetDataByTheoryTrainAttemptId && <div className="loaderDotsWhite" />}
                            </button>
                        </div>
                    </>
            }
        </>
    )
}



export const ComponentImageTest = ({ src }: { src: string }) => {
    const [Error, setError] = useState(false)

    return (
        <>
            {!Error && <Image className="w-full md:w-[464px] h-[234px] rounded-[32px]"
                onError={() => {
                    setError(true)
                }}
                src={src} alt={''} width={1000} height={1000}
            />
            }
        </>
    )
}



export const ComponentNumberOfQuestion = ({ numberquestionsWithNoAnswers, numberquestionsWithAnswers }: { numberquestionsWithNoAnswers: number, numberquestionsWithAnswers: number }) => {
    return (
        <div className="px-4 py-2 rounded-[67px] border-2 border-zinc-300 flex-col justify-center items-center inline-flex">
            <div className="text-center text-indigo-600 text-xl font-medium font-['Alexandria'] leading-[30px]">السؤال: {numberquestionsWithNoAnswers} / {numberquestionsWithAnswers} </div>
        </div>
    )
}



export const ComponentCountdown = ({ endTime, handleResult }: { endTime: number | string, handleResult: () => Promise<void> }) => {
    // Renderer for the countdown timer
    const renderer = ({ hours, minutes, seconds, completed }: any) => {
        if (completed) {
            // Handle completion state here, e.g., navigate away or show a message
            console.log("completed", completed);
            // handleResult()

            return <div>00:00</div>;
        } else {
            // Display the remaining time
            return <span>{hours}:{minutes}:{seconds}</span>;
        }
    };
    return (
        <div className="px-4 py-2 rounded-[67px] border-2 border-zinc-300 justify-center items-center gap-3.5 inline-flex">
            <div className="text-center text-black text-opacity-60 text-xl font-medium font-['Alexandria'] leading-[30px]">
                متبقي

                <Countdown
                    key={endTime}
                    date={endTime} renderer={renderer} />
            </div>
            <div className="w-[30px] h-[30px] relative" >
                <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fillRule="evenodd" clipRule="evenodd" d="M15 27.5C21.0452 27.5 25.9458 22.6453 25.9458 16.6567C25.9458 10.6681 21.0452 5.81336 15 5.81336C8.95479 5.81336 4.05417 10.6681 4.05417 16.6567C4.05417 22.6453 8.95479 27.5 15 27.5ZM15 10.9338C15.5038 10.9338 15.9122 11.3384 15.9122 11.8374V16.2824L18.6855 19.0298C19.0417 19.3826 19.0417 19.9548 18.6855 20.3077C18.3293 20.6605 17.7517 20.6605 17.3955 20.3077L14.355 17.2956C14.184 17.1262 14.0878 16.8963 14.0878 16.6567V11.8374C14.0878 11.3384 14.4962 10.9338 15 10.9338Z" fill="#4A3AFF" />
                    <path fillRule="evenodd" clipRule="evenodd" d="M10.3006 2.92482C10.5676 3.34801 10.4377 3.9055 10.0106 4.16999L5.14571 7.18203C4.71852 7.44652 4.15576 7.31787 3.88877 6.89467C3.62177 6.47148 3.75164 5.914 4.17884 5.6495L9.04368 2.63747C9.47087 2.37298 10.0336 2.50163 10.3006 2.92482Z" fill="#4A3AFF" />
                    <path fillRule="evenodd" clipRule="evenodd" d="M19.6994 2.92482C19.9664 2.50163 20.5292 2.37298 20.9564 2.63747L25.8212 5.6495C26.2484 5.914 26.3782 6.47148 26.1112 6.89468C25.8442 7.31787 25.2815 7.44652 24.8543 7.18202L19.9895 4.16999C19.5623 3.90549 19.4324 3.34801 19.6994 2.92482Z" fill="#4A3AFF" />
                </svg>
            </div>
        </div>
    )
}


export const CloseButton = () => {
    const router = useRouter();
    const pathname = usePathname()
    return (
        <button
            onClick={() => {
                // if (currentQuestion != 0) {
                //     setCurrentQuestion(currentQuestion - 1)
                // }
                router.push(pathname + "?start=true")
            }}
            className='md:w-[33%]'>
            <svg className='w-10' width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M27.2769 6.75977L6.72363 27.2404" stroke="#130F26" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round" />
                <path d="M27.2769 27.2404L6.72363 6.75977" stroke="#130F26" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
        </button>
    )
}