"use client"

import { DB_SECTDOCUMENTS_ICONS } from "@/config/constant"
import { useCallback, useEffect, useRef, useState } from "react"
import LineChart from "@/component/Chart/LineChart"
import FrameHV from "@/component/Common/FrameHV"
import FrameBgImageHorizontal from "@/component/Common/FrameBgImageHozizontal"
import { useTranslations } from "next-intl"
import dayjs from "dayjs"
import { useSearchParams } from "next/navigation"
import { usePathname, useRouter } from "@/i18n/routing"
import { isEmpty } from "lodash"
import { useGetAnalyticsRemindersChart, useGetAnalyticsRemindersSummary } from "@/hook/useDashboard"
import { DatePickerCustom } from "@/component/Common/DatePickerCustom"

export const DbReminder = () => {
  const router = useRouter()
  const pathname = usePathname()
  const searchParams = useSearchParams()
  const oldSearch = Object.fromEntries(searchParams.entries())

  const trans = useTranslations("dashboard")

  const startOfMonth = dayjs().startOf("month").unix()
  const endOfMonth = dayjs().endOf("month").unix()
  const defaultQuery = { startDate: startOfMonth, endDate: endOfMonth }
  const [query, setQuery] = useState<any>({})
  const datePickerRef = useRef<null | { updateDatePicker: (start: number, end: number) => void }>(null)

  const { data: dataSummary } = useGetAnalyticsRemindersSummary(query, Object.keys(query).length ? true : false)
  const { data: dataChart, isLoading: loadingChart } = useGetAnalyticsRemindersChart(query, Object.keys(query).length ? true : false)

  const handleDateChange = (start: number, end: number) => {
    if (start && end) {
      const updatedQuery = { startDate: start, endDate: end }
      setQuery(updatedQuery)
      updateSearchQuery(updatedQuery)
    }
  }
  
  const updateSearchQuery = useCallback(
    (updatedQuery: any) => {
      const params = new URLSearchParams(updatedQuery)

      if (Object.keys(updatedQuery).length === 0) {
        router.push(pathname, { scroll: false })
      } else {
        Object.entries(updatedQuery).forEach(([key, value]) => {
          value ? params.set(key, String(value)) : params.delete(key)
        })

        Array.from(params.keys()).forEach((key) => {
          if (!(key in updatedQuery)) {
            params.delete(key)
          }
        })
        router.push(`?${params.toString()}`, { scroll: false })
      }
    },
    [pathname, query],
  )

  useEffect(() => {
    if (!isEmpty(Object.fromEntries(searchParams.entries()))) {
      const updatedQuery = { ...oldSearch }
      setQuery(updatedQuery)
      updateSearchQuery(updatedQuery)

      if (searchParams.has("startDate") && searchParams.has("endDate")) {
        datePickerRef.current?.updateDatePicker(Number(oldSearch?.startDate), Number(oldSearch?.endDate))
      }
    } else {
      const updatedQuery = { ...oldSearch, ...defaultQuery }
      setQuery(updatedQuery)
      updateSearchQuery(updatedQuery)
      datePickerRef.current?.updateDatePicker(startOfMonth, endOfMonth)
    }
  }, [])

  return (
    <div className="md:h-full md:flex md:flex-col">
      <h3 className="pb-4 pt-5 text-xl lg:text-2xl leading-[30px] font-bold border-b border-[var(--secondary-20)] border-solid px-4 lg:px-5">
        {trans("ana_reminder")}
      </h3>
      <div className="py-4 px-4 lg:px-5 grow overflow-y-auto">
        <DatePickerCustom
          ref={datePickerRef}
          onDateChange={handleDateChange}
        />
        <div className="grid grid-rows-1 grid-cols-10 gap-3 mb-4 mt-6">
          <FrameBgImageHorizontal
            src_icon={"/img/icon/db_reminder.svg"}
            alt_icon="db_remnider"
            title={trans("post")}
            className_title="uppercase"
            data={dataSummary?.data?.total_posted_videos || 0}
            bg_img="/img/bg_document.jpg"
            className="col-span-10 lg:col-span-4 flex-row-reverse"
            classNameReverse="!pl-0 pr-[17px]"
          />

          {DB_SECTDOCUMENTS_ICONS?.map((ic, index) => (
            <FrameHV
              key={index}
              keyProps={ic?.key}
              type="vertical"
              src_icon={ic.icon}
              alt_icon={ic.label}
              title={ic.label}
              data={index === 0 ? dataSummary?.data?.total_views || 0 : dataSummary?.data?.total_shares || 0}
              className="col-span-10 lg:col-span-3 py-5 lg:py-0"
            />
          ))}
        </div>
        {!loadingChart && (
          <>
            <div className="mb-4">
              <LineChart
                name={trans("viewed")}
                labels={dataChart?.data?.labels || []}
                data={dataChart?.data?.datasets?.views || []}
              />
            </div>
            <LineChart
              name={trans("shared")}
              labels={dataChart?.data?.labels || []}
              data={dataChart?.data?.datasets?.shares || []}
            />
          </>
        )}
      </div>
    </div>
  )
}