"use client"

import { ICONS, DB_SECTMARKET_ICONS } from "@/config/constant"
import { useCallback, useEffect, useRef, useState } from "react"
import LineChart from "@/component/Chart/LineChart"
import BarChart from "@/component/Chart/BarChart"
import FrameBgImage from "@/component/Common/FrameBgImage"
import FrameHV from "@/component/Common/FrameHV"
import { Form } from "antd"
import { useTranslations } from "next-intl"
import dayjs from "dayjs"
import { useSearchParams } from "next/navigation"
import { usePathname, useRouter } from "@/i18n/routing"
import { isEmpty, round } from "lodash"
import {
  useGetAnalyticsFleamarketChartSales,
  useGetAnalyticsFleamarketChartViews,
  useGetAnalyticsFleamarketSalesToday,
  useGetAnalyticsFleamarketSummary,
} from "@/hook/useDashboard"
import { DatePickerCustom } from "@/component/Common/DatePickerCustom"
import AddressForm from "./Location"

export const DbWizzorMarket = () => {
  const [formRef] = Form.useForm()
  const trans = useTranslations("dashboard")
  const icSold = ICONS.find((ic) => ic.key === "sold")?.icon || ""
  const router = useRouter()
  const pathname = usePathname()
  const searchParams = useSearchParams()
  const oldSearch = Object.fromEntries(searchParams.entries())

  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 } = useGetAnalyticsFleamarketSummary(query, Object.keys(query).length ? true : false)
  const { data: dataChartSale, isLoading: loadingChartSale } = useGetAnalyticsFleamarketChartSales(query, Object.keys(query).length ? true : false)
  const { data: dataChartView, isLoading: loadingChartView } = useGetAnalyticsFleamarketChartViews(query, Object.keys(query).length ? true : false)
  const { data: dataDaleToday } = useGetAnalyticsFleamarketSalesToday()

  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_wazzor_marker")}
      </h3>
      <div className="py-4 px-4 lg:px-5 grow overflow-y-auto">
        <div className="flex flex-col lg:flex-row gap-4">
          <DatePickerCustom
            ref={datePickerRef}
            onDateChange={handleDateChange}
          />
          <Form form={formRef}>
            <AddressForm
              query={query}
              setQuery={setQuery}
            />
          </Form>
        </div>
        <div className="grid grid-rows-2 grid-cols-3 gap-3 mb-4 mt-6">
          <FrameBgImage
            src_icon={icSold}
            alt_icon="Sold"
            title={trans("sold")}
            className_title="uppercase"
            data={`${round(dataDaleToday?.data?.percent || 0, 2)}%`}
            desc={trans("revenue_increased_compared_yesterday")}
            bg_img="/img/sold_market.jpg"
            className="row-span-2 col-span-3 lg:col-span-1"
          />

          {DB_SECTMARKET_ICONS?.map((ic, index) => (
            <FrameHV
              key={index}
              keyProps={ic?.key}
              type="horizontal"
              src_icon={ic.icon}
              alt_icon={ic.label}
              title={ic.label}
              data={
                index === 0
                  ? dataSummary?.data?.total_posted_items || 0
                  : index === 1
                    ? dataSummary?.data?.total_sales_amount || 0
                    : index === 2
                      ? "-"
                      : dataSummary?.data?.total_comments || 0
              }
              className="col-span-3 lg:col-span-1 py-5 lg:py-0"
            />
          ))}
        </div>
        <div className="mb-4">
          {!loadingChartSale && (
            <LineChart
              name="Sales"
              labels={dataChartSale?.data?.labels || []}
              data={dataChartSale?.data?.datasets?.sales || []}
            />
          )}
        </div>
        {!loadingChartView && (
          <BarChart
            name={trans("viewed")}
            labels={dataChartView?.data?.labels || []}
            data={dataChartView?.data?.datasets?.views || []}
            name1={trans("shared")}
            data1={dataChartView?.data?.datasets?.shares || []}
          />
        )}
      </div>
    </div>
  )
}