"use client"

import { useEffect, useRef, useState, useCallback, useMemo, use } from "react";
import { useSearchParams } from "next/navigation";
import { useLang,useConfig,useUtility } from "@/lib";
import { Grid,useData,FeatherIcon,Tools,Frame,Pic } from "@/Theme/Midone";
import { Button,ButtonContainer,Input,Box } from "@/Theme/Midone/Forms";
import { YearGroupFilter } from "@/Components/Public/YearGroupFilter";
import { useAccess } from "@/lib/access";
import Link from "next/link";

export default function page() {
    const studentId = useSearchParams().get('student');
    const semesterId = useSearchParams().get('semester');
    const {Lang,local} = useLang();
    const { laraAdmin,nextAdmin,mediaPath } = useConfig();
    const { componentPermission } = useAccess();
    componentPermission("reportStudent.class");
    const { getNeedles } = useData();
    const formUrl = "/reports";
    const nextUrl =  nextAdmin+formUrl;
    const laravelUrl = laraAdmin+formUrl+"/student-class";
    const [parametr, setParametr] = useState({ semester: "", group: "" , courseInfo:"" });
    const [needles, setNeedles] = useState();
    const effectRan = useRef(false);
    const [isLoading, setIsLoading] = useState(false);
    const { getYearSemester, getGroupCode, reportData } = useUtility();
    const queryStr = `user=${studentId}`;

    let studentInfo = "";
    let semesterInfo = "";
    let queryItems = [];
    if(studentId)
    {
        queryItems.push('id='+studentId);
        studentInfo = needles?.user?.[0]? Lang("student")+" "+needles?.user[0]?.firstname+" "+needles?.user[0]?.lastname+" , " : ""
    }
    if(semesterId)
    {
        queryItems.push('semester='+semesterId);
        semesterInfo = Lang("semester")+" "+semesterId
    }
    let query = queryItems.join("&");
    let [url, setUrl] = useState(`${laravelUrl}?${query}`);

    useEffect(() => {
        if (!effectRan.current) {
            reportData(setNeedles, queryStr);
            effectRan.current = true;
        }
    }, [getNeedles]);

    const urlItems = useMemo(() => {
        return Object.keys(parametr)
            .filter(key => parametr[key])
            .map(key => `${key}=${parametr[key]}`)
            .join("&");
    }, [parametr]);

    useEffect(() => {
        setUrl(`${laravelUrl}?${query}&${urlItems}`);
    }, [urlItems]);
   
    const filterList = useCallback((e, filter) => {
        setParametr((prevParametr) => ({ ...prevParametr, [filter]: e.target.value }));
    }, []);
   
    const clearFilter = useCallback(() => {
        setParametr({ semester: "", group: "", courseInfo: "" });
    }, []);
    
    let classBgCourse = "bg-blue-100 text-blue-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300";
    let classBgCourse1 = "bg-blue-100 text-blue-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded";
    let classBgCount = "bg-white text-theme-17 border border-blue-700 text-xs font-medium me-2 px-2.5 py-0.5 rounded ";
    let classBgTotal = "bg-white text-theme-10 border border-green-700 text-xs font-medium me-2 px-2.5 py-0.5 rounded ";
    let classBg3 = "bg-white text-theme-23 border border-orange-700 text-xs font-medium me-2 px-2.5 py-0.5 rounded";
    let classBg4 = "bg-white text-gray-700 border border-orange-700 text-xs font-medium me-2 px-2.5 py-0.5 rounded";

    let info = {
        url: url,
        headerTitle: <b className="text-lg text-theme-17 font-medium leading-none">{studentInfo+semesterInfo}</b>,
        columns: [
            {label: "",jsx: (item) => (
                <Pic src={`${mediaPath}/courses/${item?.thumbnail}`} defaultImg={`${mediaPath}/public/default/course.jpg`} classImg="user-avatar" key={"img"+item?.thumbnail} />
            ), },
            {label: "class", minWidth:"200px", jsx: (item)=>
                <span title={item?.course?.title}>
                    <span className="max-w-[150px] truncate">{item?.course?.title}</span>
                    <div>{item?.course_id}</div>
                    <div className={classBgCourse}>{getYearSemester(item.group, Lang)} {Lang('public.group')}{getGroupCode(item?.group, Lang)}</div>
                </span>
            },
            {label: "onlineclass_reports", minWidth:"200px", jsx: (item)=>
                <>
                    <span>
                        <div className={classBgCount}>{Lang("public.online_attendance_count")+" : "+item?.online_attendance_count }</div>
                        <div className={classBg4}>{Lang("public.online_attendance_ontime_count")+" : "+item?.online_attendance_ontime_count}</div>
                        <div className={classBg3}>{Lang("public.online_attendance_students_percent")+" : "+item?.online_attendance_percent}</div>
                        <div className={classBgTotal}>{Lang("public.online_attendance_students_ontime_percent")+" : "+item?.online_attendance_ontime_percent}</div>
                    </span>
                    
                </>
            },
            {label: "quiz", minWidth:"150px", jsx: (item)=>
                <>
                    <span>
                        <div className={classBgCount}>{Lang("public.all_count")+" : "+item?.quiz_count}</div>
                        <div className={classBgCount}>{Lang("public.answers")+" : "+item?.quiz_attach_count}</div>
                        <div className={classBgCount}>{Lang("public.corrected")+" : "+item?.quiz_attach_corrected_count}</div>
                        <div className={classBgCount}>{Lang("public.quiz_score_min")+" : "}{item?.quiz_score_min!=null? item?.quiz_score_min:"---"}</div>
                        <div className={classBgCount}>{Lang("public.quiz_score_max")+" : "}{item?.quiz_score_max!=null? item?.quiz_score_max:"---"}</div>
                        <div className={classBgCount}>{Lang("public.quiz_score_avg")+" : "}{item?.quiz_score_avg!=null? item?.quiz_score_avg:"---"}</div>
                    </span>
                </>
            },
            !studentId? "" :
                {label: "", sort: false, width: "110px", jsx: (item) =>
                    <div className='flex justify-center '>
                        <FeatherIcon name="Book" tooltip={Lang('public.onlineclass_reports')} target="_blank"
                            url={`${nextUrl}/students/onlineClass?student=${item?.user_id}&course=${item?.course?.code}&group=${item?.group}`}
                        />
                        <FeatherIcon name="Target" tooltip={Lang('public.quizs')} target="_blank"
                            url={`${nextUrl}/students/quizs?student=${item?.user_id}&course=${item?.course?.code}&group=${item?.group}`}
                        />
                </div>
                },
        ],
        perPage:50,
    }

    return(
        <>
            <Frame title={Lang(["public.reports"])}>
                <Box shadow={false} minIcon={true} min={true} cols={"grid-cols-12"} display={!semesterId&& true}>
                    <YearGroupFilter needles={needles} Lang={Lang} filterList={filterList} params={parametr} />
                    <ButtonContainer className="mt-7 md:mt-6 text-right flex gap-4">
                        <div className="grid-cols-12">
                            <Button label="clear_filter" className="btn btn-secondary w-40" onClick={clearFilter} />
                        </div>
                    </ButtonContainer>
                </Box>
                <div className="intro-y col-span-12" style={{ filter: isLoading ? 'blur(4px)' : 'none', opacity: isLoading ? 0.8 : 1,transition: 'all 0.3s ease'}}>
                    <Grid {...info} key={"table key"} activeSearch={false} />
                </div>
            </Frame>
        </>
    );
}