"use client"
import TitleCard from "@/components/TitleCard/TitleCard";
import { DashboardContent } from "@/types/staticContent/dashboard.content.type";
import { getClientDictionary } from "@/utils/getClientDictionary";
import { ROUTES } from "@/utils/Routing";
import { useAuthStore } from "@/zustand/auth/useAuthStore";
import { useDashboardStore } from "@/zustand/dashboard/useDashboardStore";
import Link from "next/link";
import { useEffect } from "react";

type Props = {};

const page = (props: Props) => {
  const { language } = useAuthStore();
  const DASHBOARD = getClientDictionary(language, 'dashboard') as DashboardContent;
  const { getDashboardCounts, dashboardCounts } = useDashboardStore();

  const dashboardCardContent = [
    {
      iconName: "icon-total-documents",
      title: DASHBOARD.TOTAL_DOCUMENTS,
      numbers: dashboardCounts?.documents?.completed ?? 0,
      linkUrl: ROUTES.DOCUMENTS,
    },
    {
      iconName: "icon-documents",
      title: DASHBOARD.DOCUMENTS_REVIEWED,
      numbers: 0,
      linkUrl: ROUTES.DOCUMENTS,
    },
    {
      iconName: "icon-gap",
      title: DASHBOARD.COMPLIANCE_GAPS,
      numbers: 0,
      linkUrl: ROUTES.POLICY_COMPLIANCE_REVIEW,
    },
    {
      iconName: "icon-ai-assistant",
      title: DASHBOARD.AI_ANALYSES,
      numbers: 0,
      linkUrl: ROUTES.AI_ASSISTANT,
    },
    {
      iconName: "icon-risk",
      title: DASHBOARD.ACTIVE_RISKS,
      numbers: 0,
    },
    {
      iconName: "icon-control-suggestion",
      title: DASHBOARD.CONTROL_SUGGESTIONS,
      numbers: 0,
      linkUrl: ROUTES.POLICY_COMPLIANCE_REVIEW,
    },
  ];
  useEffect(() => {
    getDashboardCounts();
  }, [getDashboardCounts]);

  return (
    <>
      <TitleCard
        title={DASHBOARD.DASHBOARD}
        description={DASHBOARD.DASHBOARD_DESCRIPTION}
      />

      <div className="grid grid-cols-2 gap-3 sm:gap-4 lg:gap-6 2xl:gap-7.5">
        {dashboardCardContent?.map((items, i) => {
          return (
            <div
              key={i}
              className="relative bg-secondary border border-grey2b hover:border-primary rounded-2xl p-3 sm:p-4 lg:p-6 2xl:p-7.5 flex flex-col sm:flex-row items-center gap-2 sm:gap-3 lg:gap-5 duration-300 ease-in-out"
            >
              <div className="2xl:w-[102px] w-11 h-11 sm:w-16 sm:h-16 lg:w-20 lg:h-20 2xl:h-[102px] rounded-xl lg:rounded-[20px] bg-dark-green3c flex justify-center items-center shrink-0">
                <i
                  className={`icon ${items?.iconName} bg-primary-c1 w-5 h-5 sm:w-7 sm:h-7 lg:w-9 lg:h-9 2xl:w-11 2xl:h-11`}
                ></i>
              </div>
              <div className={`w-full text-center sm:text-left ${language === "en" ? "sm:text-left" : "sm:text-right"}`}>
                <h3 className="text-sm sm:text-base 2xl:text-lg font-medium text-grey99 leading-tight capitalize mb-1 sm:mb-2 2xl:mb-2.5">
                  {items?.title}
                </h3>
                <span className="text-base sm:text-xl 2xl:text-2xl font-semibold text-light">
                  {items?.numbers}
                </span>
              </div>
              {items?.linkUrl &&
                <Link href={items?.linkUrl} className="text-[0px] leading-0 absolute inset-0 w-full h-full cursor-pointer">Link</Link>
              }
            </div>
          );
        })}
      </div>

    </>
  );
};

export default page;