"use client";

import AppHeader from "@comp/AppHeader/page";
// import TaskCard from "@comp/TaskCard/page";
import AppContext from "@ctx/AppContext";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { getToken } from "plugins/Chapar";
import ParseJwt from "plugins/ParseJwt/page";
import PersianNumber from "plugins/PersianNumber";
import React, { useContext, useEffect, useMemo } from "react";
// import { Swiper, SwiperSlide } from "swiper/react";
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
import { Doughnut, Pie } from "react-chartjs-2";
import BottomSheetChangeRole from "plugins/BottomSheet/BottomSheetChangeRole";
import HasPermission from "plugins/HasPermission/page";
import Avatar from "boring-avatars";
import moment from "jalali-moment";
import CoffeeBrewCard from "@comp/CoffeeBrew/CoffeeBrewCard/page";
import FormatJalaliDate from "plugins/FormatJalaliDate/page";
import { useState } from "react";

ChartJS.register(ArcElement, Tooltip, Legend);

const Home = (props) => {
  const CTX = useContext(AppContext);
  const router = useRouter();
  const homePageData = CTX.state.homePageData;
  const latesCoffeeBrewData = CTX.state.latesCoffeeBrewData;
  const profile = CTX.state.profile;

  const [activeShiftPlanHome, setActiveShiftPlanHome] = useState(-1);

  useEffect(() => {
    CTX.GetHomePageData();
    CTX.GetLatesCoffeeBrewData();
  }, []);

  const dataChart = (totalActivitiesCount, doneActivitiesCount) => {
    const data = {
      datasets: [
        {
          label: ["", " "],
          data: [totalActivitiesCount, doneActivitiesCount],
          backgroundColor: ["rgba(203, 203, 203, 0.28)", "#9bd19d"],
          borderColor: ["transparent"],
          cutout: 35,
        },
      ],
    };

    return data;
  };

  const percentage = (totalActivitiesCount, doneActivitiesCount) => {
    return (doneActivitiesCount / totalActivitiesCount) * 100;
  };

  const handleGoToReport = () => {
    CTX.setReportDetail({
      title: "فعالیت های مجموعه",
      shiftId: "",
      typeReport: "TASK",
    });
    CTX.setBottomSheetReportOpen(true);
  };

  const today = new Date();
  const formattedDate = FormatJalaliDate(today);

  return (
    <div className="pb-20">
      <AppHeader
        title={profile?.user?.firstName + "     " + profile?.user?.lastName}
        sub={profile?.user?.selectedComplexName}
        userIcon={true}
        userIconData={profile?.user?.firstName}
        userRole={profile?.roles}
        userIconHref="/acount"
        iconEvent3={() => CTX.setBottomSheetChangeRoleOpen(true)}
        iconName3={
          profile?.roles?.find((e) => e.id == profile?.user.selectedRoleId)
            ?.roleName
        }
      />

      <div className="bg-white overflow-hidden p-5 rtl">
        <div className="px-3  text-right flex">
          <div>
            <h3 className=" text-[14px] font-medium">
              <PersianNumber number={formattedDate} />
            </h3>

            <p className="mb-0 text-[12px] text-gray-500">
              {homePageData?.currentShift}-{homePageData?.currentPosition}
            </p>
          </div>
        </div>

        <div className="">
          <div className="flex justify-between mt-4">
            <div className="  w-full">
              <div className=" p-3 rounded-2xl">
                <div>
                  <p className="mb-0 text-[12px] mt-3 font-medium text-center">
                    <PersianNumber
                      number={homePageData?.totalActivitiesToday}
                      style={"!text-[25px]  font-bold ml-2 "}
                    />
                    کل فعالیت های امروز{" "}
                  </p>
                </div>
              </div>
            </div>

            <div className="w-[2px] h-9 bg-primary-200 opacity-75 mt-4"></div>
            <div className=" w-full">
              <div className=" p-3 rounded-2xl">
                <div>
                  <p className="mb-0 text-black text-[12px] mt-3 font-medium text-center">
                    <PersianNumber
                      number={homePageData?.totalShiftToday}
                      style={"!text-[25px]  font-bold ml-2"}
                    />
                    کل شیفت های امروز{" "}
                  </p>
                </div>
              </div>
            </div>
          </div>

          <div className="col-span-2 mt-5">
            <Link href={"/coffee-brew"}>
              <CoffeeBrewCard data={latesCoffeeBrewData} />
            </Link>
          </div>

          <div className="col-span-2">
            {homePageData?.shiftPlans?.map((e, index) => (
              <>
                <div
                  className="flex  justify-between mt-5 bg-gray-50 p-2 rounded-xl"
                  onClick={() => setActiveShiftPlanHome(index)}
                >
                  <div className="flex">
                    {homePageData?.currentShiftId == e.id && (
                      <div className="relative mt-1 ml-1  ">
                        <div className="blink_me  w-3 h-3 rounded-full bg-green-600 "></div>
                      </div>
                    )}

                    <p className="mb-0 text-sm">{e.shiftTitle} </p>
                  </div>

                  <div className="bg-gray-100 w-[30px] h-[30px] rounded-xl">
                    <svg
                      width="13"
                      height="13"
                      viewBox="0 0 151 89"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      className="opacity-80 mt-2 mx-auto"
                    >
                      <path
                        d="M13.0444 13.1674L75.3606 75.8506L138.044 13.5345"
                        stroke="#424242"
                        stroke-opacity="0.81"
                        stroke-width="25"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      />
                    </svg>
                  </div>
                </div>

                {activeShiftPlanHome == index && (
                  <>
                    <div className="flex justify-between">
                      <div className="w-full">
                        <div className=" p-1 rounded-2xl">
                          <div>
                            <p className="mb-0 text-black text-[12px] mt-3 font-medium text-center">
                              <PersianNumber
                                number={e.totalActivitiesCount}
                                style={"!text-[22px]  font-bold ml-2"}
                              />
                              کل اکتیویتی های{" "}
                            </p>
                          </div>
                        </div>
                        <div className="w-[180px] mx-auto h-[1px] bg-primary-200 opacity-75 mt-4"></div>
                        <div className=" p-1 rounded-2xl">
                          <div>
                            <p className="mb-0 text-black text-[12px] mt-3 font-medium text-center">
                              <PersianNumber
                                number={e.doneActivitiesCount}
                                style={"!text-[22px]  font-bold ml-2"}
                              />
                              اکتیویتی انجام شده{" "}
                            </p>
                          </div>
                        </div>
                        <div className="w-[180px] mx-auto h-[1px] bg-primary-200 opacity-75 mt-4"></div>
                        <div className=" p-1 pb-5 rounded-2xl">
                          <div>
                            <p className="mb-0 text-black text-[12px] mt-3 font-medium text-center">
                              <PersianNumber
                                number={e.undoneActivitiesCount}
                                style={"!text-[22px]  font-bold ml-2"}
                              />
                              اکتیویتی انجام نشده{" "}
                            </p>
                          </div>
                        </div>
                      </div>

                      <div className="w-[1px] bg-primary-300 opacity-75 mt-4"></div>

                      <div className=" w-full rounded-2xl p-2">
                        {e?.totalActivitiesCount > 0 ? (
                          <>
                            <div className="flex justify-center ">
                              <div className="absolute mt-[40px]">
                                <h2 className="text-lg text-black">
                                  <PersianNumber
                                    number={Math.floor(
                                      percentage(
                                        e.totalActivitiesCount,
                                        e.doneActivitiesCount
                                      )
                                    )}
                                  />
                                  <small className="text-black text-[11px] ml-1">
                                    %
                                  </small>
                                </h2>
                              </div>
                            </div>
                            <div className="flex justify-center">
                              <div className="w-[100px]">
                                <Doughnut
                                  data={dataChart(
                                    e.totalActivitiesCount,
                                    e.doneActivitiesCount
                                  )}
                                />
                              </div>
                            </div>

                            <div className="mt-3">
                              <p className="mb-0 text-black text-[12px] text-center">
                                درصد پیشرفت شیفت
                              </p>
                            </div>
                          </>
                        ) : (
                          <div className="mt-20">
                            <p className="mb-0 text-gray-200 text-[12px] text-center">
                              شما شیفت بازی ندارید
                            </p>
                          </div>
                        )}
                      </div>
                    </div>
                    {/* line */}
                    <div className="w-full mx-auto h-[1px] bg-primary-200 opacity-75 "></div>

                    {/* user */}
                    <div className="flex  p-2 rounded-2xl flex-wrap">
                      {e.users.map((user) => (
                        <div className="flex bg-gray-50 p-1 rounded-full m-1 justify-start mb-2 w-fit ">
                          <div className="w-[30px] h-[30px] rounded-full bg-gray-400 ">
                            <Avatar
                              size={30}
                              name={user.userFullName}
                              variant="beam"
                              colors={["#9d9f88", "#83af96", "#b2de93"]}
                            />
                          </div>

                          <div>
                            <p className="mb-0 px-3 text-sm mt-1">
                              {user.userFullName}{" "}
                            </p>
                          </div>
                        </div>
                      ))}

                      <div className="flex bg-primary-400 p-1 rounded-full m-1 justify-start mb-2 w-fit ">
                        <div className="px-4 h-[30px] rounded-full bg-primary-200 ">
                          <p className="mb-0 text-center   mt-[2px] text-sm">
                            سوپروایزر
                          </p>
                        </div>

                        <div>
                          <p className="mb-0 px-3 text-sm mt-1 text-white">
                            {e.supervisorFullName}
                          </p>
                        </div>
                      </div>
                    </div>
                  </>
                )}
              </>
            ))}

            <h3 className="text-right p-3 font-medium mt-4 text-sm">
              گزارش های مجموعه
            </h3>

            <div className="rtl mt-2">
              <div className="flex ">
                <div className="w-[50px] h-[50px] rounded-2xl bg-white shadow">
                  <svg
                    width="25"
                    height="25"
                    viewBox="0 0 251 226"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                    className="mx-auto mt-3"
                    s
                  >
                    <path
                      d="M246.65 100.5L196.612 13.0002C194.463 9.19349 191.338 6.02857 187.559 3.83143C183.78 1.63429 179.483 0.48438 175.112 0.50016H75.062C70.6812 0.545125 66.3859 1.71914 62.5912 3.9088C58.7966 6.09846 55.6307 9.22974 53.3995 13.0002L3.36204 100.5C1.16661 104.3 0.0107422 108.611 0.0107422 113C0.0107422 117.389 1.16661 121.7 3.36204 125.5L53.3995 213C55.6307 216.771 58.7966 219.902 62.5912 222.092C66.3859 224.281 70.6812 225.455 75.062 225.5H175.137C179.507 225.515 183.801 224.365 187.578 222.167C191.355 219.97 194.478 216.806 196.625 213L246.662 125.5C248.857 121.7 250.013 117.389 250.013 113C250.013 108.611 248.845 104.3 246.65 100.5ZM175 200.5H74.9995L24.9995 113L74.9995 25.5002H175L225 113L175 200.5Z"
                      fill="#ABABAB"
                    />
                    <path
                      d="M112 63.5C112 56.5964 117.596 51 124.5 51V51C131.404 51 137 56.5964 137 63.5V126C137 132.904 131.404 138.5 124.5 138.5V138.5C117.596 138.5 112 132.904 112 126V63.5Z"
                      fill="#ABABAB"
                    />
                    <path
                      d="M124.5 173C131.404 173 137 167.404 137 160.5C137 153.596 131.404 148 124.5 148C117.596 148 112 153.596 112 160.5C112 167.404 117.596 173 124.5 173Z"
                      fill="#ABABAB"
                    />
                  </svg>
                </div>
                <div className="mx-2 mt-1" onClick={() => handleGoToReport()}>
                  <h3 className="text-sm font-bold "> فعالیت ها </h3>
                  <p className="mb-0 text-right text-sm text-gray-500">
                    خروجی اکسل
                  </p>
                </div>
              </div>
            </div>

            <div className="rtl mt-2">
              <div className="flex ">
                <div className="w-[50px] h-[50px] rounded-2xl bg-white shadow">
                  <svg
                    width="25"
                    height="25"
                    viewBox="0 0 251 226"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                    className="mx-auto mt-3"
                    s
                  >
                    <path
                      d="M246.65 100.5L196.612 13.0002C194.463 9.19349 191.338 6.02857 187.559 3.83143C183.78 1.63429 179.483 0.48438 175.112 0.50016H75.062C70.6812 0.545125 66.3859 1.71914 62.5912 3.9088C58.7966 6.09846 55.6307 9.22974 53.3995 13.0002L3.36204 100.5C1.16661 104.3 0.0107422 108.611 0.0107422 113C0.0107422 117.389 1.16661 121.7 3.36204 125.5L53.3995 213C55.6307 216.771 58.7966 219.902 62.5912 222.092C66.3859 224.281 70.6812 225.455 75.062 225.5H175.137C179.507 225.515 183.801 224.365 187.578 222.167C191.355 219.97 194.478 216.806 196.625 213L246.662 125.5C248.857 121.7 250.013 117.389 250.013 113C250.013 108.611 248.845 104.3 246.65 100.5ZM175 200.5H74.9995L24.9995 113L74.9995 25.5002H175L225 113L175 200.5Z"
                      fill="#ABABAB"
                    />
                    <path
                      d="M112 63.5C112 56.5964 117.596 51 124.5 51V51C131.404 51 137 56.5964 137 63.5V126C137 132.904 131.404 138.5 124.5 138.5V138.5C117.596 138.5 112 132.904 112 126V63.5Z"
                      fill="#ABABAB"
                    />
                    <path
                      d="M124.5 173C131.404 173 137 167.404 137 160.5C137 153.596 131.404 148 124.5 148C117.596 148 112 153.596 112 160.5C112 167.404 117.596 173 124.5 173Z"
                      fill="#ABABAB"
                    />
                  </svg>
                </div>
                <div
                  className="mx-2 mt-1"
                  onClick={() => CTX.setBottomSheetReportManageShiftOpen(true)}
                >
                  <h3 className="text-sm font-bold "> شیفت های هفته</h3>
                  <p className="mb-0 text-right text-sm text-gray-500">
                    خروجی متن
                  </p>
                </div>
              </div>
            </div>

            <div className="rtl mt-4">
              <div className="flex ">
                <div className="w-[50px] h-[50px] rounded-2xl bg-white shadow">
                  <svg
                    width="25"
                    height="25"
                    viewBox="0 0 251 226"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                    className="mx-auto mt-3 opacity-50"
                    s
                  >
                    <path
                      d="M246.65 100.5L196.612 13.0002C194.463 9.19349 191.338 6.02857 187.559 3.83143C183.78 1.63429 179.483 0.48438 175.112 0.50016H75.062C70.6812 0.545125 66.3859 1.71914 62.5912 3.9088C58.7966 6.09846 55.6307 9.22974 53.3995 13.0002L3.36204 100.5C1.16661 104.3 0.0107422 108.611 0.0107422 113C0.0107422 117.389 1.16661 121.7 3.36204 125.5L53.3995 213C55.6307 216.771 58.7966 219.902 62.5912 222.092C66.3859 224.281 70.6812 225.455 75.062 225.5H175.137C179.507 225.515 183.801 224.365 187.578 222.167C191.355 219.97 194.478 216.806 196.625 213L246.662 125.5C248.857 121.7 250.013 117.389 250.013 113C250.013 108.611 248.845 104.3 246.65 100.5ZM175 200.5H74.9995L24.9995 113L74.9995 25.5002H175L225 113L175 200.5Z"
                      fill="#ABABAB"
                    />
                    <path
                      d="M112 63.5C112 56.5964 117.596 51 124.5 51V51C131.404 51 137 56.5964 137 63.5V126C137 132.904 131.404 138.5 124.5 138.5V138.5C117.596 138.5 112 132.904 112 126V63.5Z"
                      fill="#ABABAB"
                    />
                    <path
                      d="M124.5 173C131.404 173 137 167.404 137 160.5C137 153.596 131.404 148 124.5 148C117.596 148 112 153.596 112 160.5C112 167.404 117.596 173 124.5 173Z"
                      fill="#ABABAB"
                    />
                  </svg>
                </div>
                <div className="mx-2 mt-1 opacity-50">
                  <h3 className="text-sm font-bold "> شیفت های تمام شده </h3>
                  <p className="mb-0 text-right text-sm text-gray-500">
                    خروجی اکسل
                  </p>
                </div>
              </div>
            </div>

            <div className="rtl mt-4">
              <div className="flex ">
                <div className="w-[50px] h-[50px] rounded-2xl bg-white shadow">
                  <svg
                    width="25"
                    height="25"
                    viewBox="0 0 251 226"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                    className="mx-auto mt-3 opacity-50"
                    s
                  >
                    <path
                      d="M246.65 100.5L196.612 13.0002C194.463 9.19349 191.338 6.02857 187.559 3.83143C183.78 1.63429 179.483 0.48438 175.112 0.50016H75.062C70.6812 0.545125 66.3859 1.71914 62.5912 3.9088C58.7966 6.09846 55.6307 9.22974 53.3995 13.0002L3.36204 100.5C1.16661 104.3 0.0107422 108.611 0.0107422 113C0.0107422 117.389 1.16661 121.7 3.36204 125.5L53.3995 213C55.6307 216.771 58.7966 219.902 62.5912 222.092C66.3859 224.281 70.6812 225.455 75.062 225.5H175.137C179.507 225.515 183.801 224.365 187.578 222.167C191.355 219.97 194.478 216.806 196.625 213L246.662 125.5C248.857 121.7 250.013 117.389 250.013 113C250.013 108.611 248.845 104.3 246.65 100.5ZM175 200.5H74.9995L24.9995 113L74.9995 25.5002H175L225 113L175 200.5Z"
                      fill="#ABABAB"
                    />
                    <path
                      d="M112 63.5C112 56.5964 117.596 51 124.5 51V51C131.404 51 137 56.5964 137 63.5V126C137 132.904 131.404 138.5 124.5 138.5V138.5C117.596 138.5 112 132.904 112 126V63.5Z"
                      fill="#ABABAB"
                    />
                    <path
                      d="M124.5 173C131.404 173 137 167.404 137 160.5C137 153.596 131.404 148 124.5 148C117.596 148 112 153.596 112 160.5C112 167.404 117.596 173 124.5 173Z"
                      fill="#ABABAB"
                    />
                  </svg>
                </div>
                <div className="mx-2 mt-1 opacity-50">
                  <h3 className="text-sm font-bold "> شیفت های مجموعه </h3>
                  <p className="mb-0 text-right text-sm text-gray-500">
                    خروجی اکسل
                  </p>
                </div>
              </div>
            </div>

            <div className="rtl mt-4">
              <div className="flex ">
                <div className="w-[50px] h-[50px] rounded-2xl bg-white shadow">
                  <svg
                    width="25"
                    height="25"
                    viewBox="0 0 251 226"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                    className="mx-auto mt-3 opacity-50"
                    s
                  >
                    <path
                      d="M246.65 100.5L196.612 13.0002C194.463 9.19349 191.338 6.02857 187.559 3.83143C183.78 1.63429 179.483 0.48438 175.112 0.50016H75.062C70.6812 0.545125 66.3859 1.71914 62.5912 3.9088C58.7966 6.09846 55.6307 9.22974 53.3995 13.0002L3.36204 100.5C1.16661 104.3 0.0107422 108.611 0.0107422 113C0.0107422 117.389 1.16661 121.7 3.36204 125.5L53.3995 213C55.6307 216.771 58.7966 219.902 62.5912 222.092C66.3859 224.281 70.6812 225.455 75.062 225.5H175.137C179.507 225.515 183.801 224.365 187.578 222.167C191.355 219.97 194.478 216.806 196.625 213L246.662 125.5C248.857 121.7 250.013 117.389 250.013 113C250.013 108.611 248.845 104.3 246.65 100.5ZM175 200.5H74.9995L24.9995 113L74.9995 25.5002H175L225 113L175 200.5Z"
                      fill="#ABABAB"
                    />
                    <path
                      d="M112 63.5C112 56.5964 117.596 51 124.5 51V51C131.404 51 137 56.5964 137 63.5V126C137 132.904 131.404 138.5 124.5 138.5V138.5C117.596 138.5 112 132.904 112 126V63.5Z"
                      fill="#ABABAB"
                    />
                    <path
                      d="M124.5 173C131.404 173 137 167.404 137 160.5C137 153.596 131.404 148 124.5 148C117.596 148 112 153.596 112 160.5C112 167.404 117.596 173 124.5 173Z"
                      fill="#ABABAB"
                    />
                  </svg>
                </div>
                <div className="mx-2 mt-1 opacity-50">
                  <h3 className="text-sm font-bold ">
                    {" "}
                    کاست تمام شده آیتم ها{" "}
                  </h3>
                  <p className="mb-0 text-right text-sm text-gray-500">
                    خروجی اکسل
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <BottomSheetChangeRole />
    </div>
  );
};

export default Home;