"use client";
import { useLang } from "@/lib/lang";
import { useAccess } from "@/lib/access";
import { BackBtn, Box, Button, ButtonContainer, CourseToolsBtn, DatePicker, DateTimePicker, Input, TimePicker, useFormRefs } from "@/Theme/Midone/Forms";
import { YearGroupFilter } from "@/Components/Public/YearGroupFilter";
import { Grid, Frame, useData, FeatherIcon } from "@/Theme/Midone/Utils";
import { useEffect, useRef, useState, useCallback, useMemo } from "react";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { useConfig, useUtility } from "@/lib";
import moment from 'moment-jalaali';
import { Select } from "@/Theme/Midone/Forms/Select";

export function Page({ laraPath, nextPath, formUrl , formUrl2=null, course=0 }) {
    const { Lang,local } = useLang();
    const getJalaliDate = () => {
        // console.log(local);
        if(local=="fa"){
            return moment().format('jYYYY-jMM-jDD');
        }
        else{

            const today = new Date();
            return today.toISOString().split('T')[0]; // فرمت YYYY-MM-DD
        }

    }
    const firstDate=formUrl2!= null ? getJalaliDate() : "";
    let component = useFormRefs();

    const menuPath = usePathname().split('/').includes('myCourses') ? 'myCourses' : 'courses';
    const { destroy,close, getNeedles, get } = useData();
    const router = useRouter();
    const { componentPermission,checkPermission } = useAccess();
    const accessStroe = checkPermission("onlineClassrooms.store");
    const accessReport = checkPermission("onlineClassrooms.store");
    const isAdmin = checkPermission("onlineClassrooms.store");
    const toolsFilters = checkPermission("toolsFilters.index");
    // componentPermission(`onlineClassrooms.list`);
    const back = () => router.back();
    const [params, setParams] = useState({ semester: "", group: "", date:firstDate,hour:"",code:"",menuPath:menuPath });
    let [url, setUrl] = useState(laraPath + "/onlineClassroom-list/" + course);
    const [needles, setNeedles] = useState();
    const effectRan = useRef(false);
    const { mediaPath } = useConfig();

    const handleFilterChange = (e, filter) => {
        // console.log(e);
    //   setParams(prev => ({ ...prev, [filter]: e?.target ? e?.target?.value : e }));
      setParams(prev => ({ ...prev, [filter]: e.target.value,
        page: 1 // تغییر صفحه به ۱ بعد از فیلتر
       }));
    };

    useEffect(() => {
        if (!effectRan.current) {
            getNeedles(`${laraPath}/onlineClassrooms/get-needles?course=${course}`, setNeedles);
            effectRan.current = true;
        }
    }, [getNeedles, laraPath]);

    const urlItems = useMemo(() => {
        params['code'] = window.$('#codeSearch').val();
        params['date'] = window.$('#dateSearch').val();
        return Object.keys(params)
            .filter(key => params[key])
            .map(key => `${key}=${params[key]}`)
            .join("&");
    }, [params]);

    useEffect(() => {
        setUrl(`${laraPath}/onlineClassroom-list/${course}?${urlItems}`);
    }, [urlItems, laraPath]);

    const filterList = useCallback((e, filter) => {
        setParams((prevParams) => ({ ...prevParams, [filter]: e.target.value }));
    }, []);

    const clearFilter = useCallback(() => {
        setParams({ semester: "", group: "",date:"",hour:"",code:"",menuPath });
        window.$(`input#codeSearch`).val("");
        window.$(`input#dateSearch`).val("");
    }, []);

    const { getYearSemester, getGroupCode } = useUtility();

    // تابع مجزا برای onClick
    const handleClick = useCallback((e, item) => {
        e.preventDefault();
        if (document.getElementById('a-loading')) return;
        e.target.innerHTML = loading + e.target.innerHTML;
        // console.log("item is ", item);
        get(laraPath + "/bbb/" + item?.id, "", "", (data) => {
            // console.log("callback!!");
            let a = document.createElement("a");
            const id = "a-" + Math.random();
            a.href = data.url;
            a.target = "_blank";
            a.id = id;
            document.body.appendChild(a);
            Element.prototype.remove = function () {
                this.parentElement.removeChild(this);
            };
            document.getElementById('a-loading').remove();
            document.getElementById(id).click();
        });
    }, [get, laraPath]);
   

    const info = useMemo(() => ({
      activeSearch:false,
      ...(menuPath == "courses") && accessStroe && formUrl2 == null ? { insertLink: formUrl + "/new" } : {},
      ...(menuPath == "courses") && accessStroe && formUrl2 == null ? { exportExcel: true } : {},
      perPage: 20,
      url: url,
      columns: [
          ...(formUrl2 ? [{ label: "course", jsx: (item) => <span>{item?.course?.title}-{item?.course_id}</span> }] : []),
          ...(formUrl2 ? [{ label: "teacher", jsx: (item) => <span>{item?.course_presented?.teacher?.firstname} {item?.course_presented?.teacher?.lastname}</span> }] : []),
          { label: "title", field: "title" ,minWidth: "90px", },
          {
            label: "class",
            width: "180px",
            minWidth: "180px",
            jsx: (item) => (
                <span className="inline grid">
                    {item?.is_cancel != null ? (
                        <span className="btn btn-rounded btn-danger-soft">{Lang('public.cancel_class')}</span>
                    ) : (
                        <>
                            {item?.checkDateTime?.status == "before_time" && (
                                <span className="btn btn-rounded btn-warning-soft">{Lang('public.before_time_class')}</span>
                            )}
                            {item?.checkDateTime?.status == "after_time" && (
                                <span className={`btn btn-rounded btn-${item?.userInClass == "غائب" ? "danger" : "success"}-soft`}>
                                    {item?.userInClass == "غائب"
                                        ? item?.userInClass
                                        : Lang("public.arrival_time") + ": " + item?.userInClass?.presence_time}
                                </span>
                            )}
                            {item?.checkDateTime?.status == "on_time" && (
                                item?.close == 1 ?
                                    <span className="btn btn-rounded btn-danger-soft mt-1">{Lang('public.close_class')}</span>
                                :
                                    <a className="btn btn-rounded btn-success-soft" href="#" onClick={(e) => handleClick(e, item)}>
                                        {Lang('public.login_to_class')}
                                    </a>
                            )}
                            {/* {item?.checkDateTime?.status == "on_time" && (
                                <a className="btn btn-rounded btn-success-soft" href="#" onClick={(e) => handleClick(e, item)}>
                                    {Lang('public.login_to_class')}
                                </a>
                            )} */}
                        </>
                    )}
                    {/* {item?.close == 1 ? (
                        <span className="btn btn-rounded btn-danger-soft mt-1">{Lang('public.close_class')}</span>
                    ) : ""} */}
                </span>
            )
        },  
          { label: "date", jsx: (item) =><span dir="ltr"> {item?.date+" "+item?.start_hour}</span> },
          { label: "year_semester", jsx: (item) =><span> {getYearSemester(item.group, Lang)}</span> },
          { label: "group", jsx: (item) =><span>{getGroupCode(item.group, Lang)} </span> },
                    
          accessReport ? {
              label: "report", jsx: (item) => ( item?.checkDateTime?.status == "before_time" ? "-" :
                  <Link className="btn btn-rounded btn-primary-soft" href={`${formUrl}${formUrl2!=null?item.course_id+formUrl2 : ""}/${item.id}/students`}>
                      {Lang('public.attendees')} ({item?.presence_count})
                  </Link>
              )
          } : "",
         
          {
              label: "",
              sort: false,
              width: "110px",
              jsx: (item) => (
                <div className='flex justify-center '>
                    <FeatherIcon permission="onlineClassrooms.update" name="Edit"   displayIf={item?.checkDateTime?.status=="before_time"}
                        url={`${formUrl}${formUrl2!=null?item.course_id+formUrl2 : ""}/${item.id}/edit`} 
                        tooltip={Lang('public.edit')} />
                    <FeatherIcon name="Eye"
                        url={`${formUrl}${formUrl2!=null?item.course_id+formUrl2 : ""}/${item.id}`} 
                        tooltip={Lang('public.view')} />
                    <FeatherIcon permission="onlineClassrooms.canceledInsert" name="Delete" displayIf={item?.is_cancel==null}
                        // displayIf={item?.checkDateTime?.status=="before_time"}
                        url={`${formUrl}${formUrl2 ? item.course_id + formUrl2 : ""}/${item.id}/canceledInsert`}
                        tooltip={Lang('public.canceledInsert')} />
                    <FeatherIcon permission="onlineClassrooms.canceledRemove" displayIf={item?.is_cancel!=null} name="Delete" color="darkred" 
                        onClick={() => destroy(laraPath + "/onlineClassroom/" + item.id+"/canceledRemove")}
                        tooltip={Lang('public.canceledRemove')} />
                    <FeatherIcon permission="onlineClassrooms.close" displayIf={item?.close==0} name="Bell"  tooltip={Lang('public.close')} onClick={() => close(laraPath + "/onlineClassroom/" + item.id+"/close")} />
                    <FeatherIcon permission="onlineClassrooms.destroy" displayIf={item?.checkDateTime?.status=="before_time"} name="XOctagon"  tooltip={Lang('public.delete')} color="darkred" onClick={() => destroy(laraPath + "/onlineClassrooms/" + item.id)} />
                </div>
              )
          },
      ],
  }), [url, Lang, formUrl, destroy, laraPath, getYearSemester, getGroupCode, handleClick]);

  const hours = Array.from({ length: 11 }, (_, i) => {
    const hour = (7 + i).toString().padStart(2, "0") + ":00";
    return { value: hour, label: hour };
  });

    return (
        <Frame title={Lang(["public.onlineClassroom"])}>
            {toolsFilters && (
                <Box shadow={false} minIcon={true} min={true}>
                    <YearGroupFilter params={params} needles={needles} Lang={Lang} filterList={handleFilterChange} />
                    {formUrl2 && (
                        <>
                            <Input
                                onEnter={(e) => handleFilterChange(e, "code")} note={Lang("public.filter_report_classes_course")}
                                defaultValue={params.code}
                                id="codeSearch"
                                dir="ltr"
                                className="col-span-2"
                                label="course_search"
                            />
                            <Input
                                defaultValue={getJalaliDate()}
                                onEnter={(e) => handleFilterChange(e, "date")}
                                id="dateSearch"
                                dir="ltr"
                                className="col-span-2"
                                placeholder={local=="fa" ? "1403-01-01":"2026-01-01"}
                                label="date"
                            />
                            <Select
                                dir="ltr"
                                defaultValue={params?.hour ? params?.hour : ''}
                                className="col-span-2"
                                placeholder="10:00"
                                label="start_hour"
                                onChange={(e) => handleFilterChange(e, "hour")}
                            >
                                {hours.map((h) => (
                                    <option key={h.value} value={h.value}>
                                    {h.label}
                                    </option>
                                ))}
                            </Select>
                        </>
                    )}
                    <ButtonContainer className={formUrl2 ? "m-0" : "mt-5 pt-2"}>
                        <Button label="clear_filter" className="btn btn-secondary w-20" onClick={clearFilter} />
                    </ButtonContainer>
                </Box>
            )}
            <div className="intro-y col-span-12">
                <Grid {...info} key={url} />
                {formUrl2 == null ?
                    <>
                        <ButtonContainer>
                            <CourseToolsBtn href={`${nextPath}/${menuPath}/${course}/tools`} />
                            <BackBtn onClick={back} />
                        </ButtonContainer>
                    </>
                :
                    <>
                        <ButtonContainer>
                            <Link className="btn btn-primary mr-1 ml-1" target="_blanket" href={`${mediaPath}/public/example_class_online_${local}.xlsx`}>{Lang(["public.example_excel"])}</Link>
                            <Link className="btn btn-success mr-1 ml-1" href={`${nextPath}/onlineClasses/excel`}>{Lang(["public.enter_excel"])}</Link>
                        </ButtonContainer>
                    </>
                }
            </div>
        </Frame>
    );
}

const loading = '<svg id="a-loading" style="display: inline-block; margin: 0 6px" width="25" viewBox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="rgb(45, 55, 72)"><circle cx="15" cy="15" r="15"><animate attributeName="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="60" cy="15" r="9" fill-opacity="0.3"><animate attributeName="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcMode="linear" repeatCount="indefinite"></animate></circle><circle cx="105" cy="15" r="15"><animate attributeName="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcMode="linear" repeatCount="indefinite"></animate><animate attributeName="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcMode="linear" repeatCount="indefinite"></animate></circle></svg>';