"use client"

import React, { useCallback, useEffect, useMemo, useState } from "react"
import { Checkbox, Form, Modal, Table } from "antd"
import classNames from "classnames"
import type { MenuProps } from "antd"
import Image from "next/image"
import { useTranslations } from "next-intl"
import HeaderBreadcrumb from "@/component/Layout/HeaderBreadcrumb"
import SearchBox from "@/component/Layout/SearchBox"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faPlus } from "@fortawesome/free-solid-svg-icons"
import { flattenDeep, isEmpty, omitBy } from "lodash"
import { SOURCE_CONTACT } from "@/config/constant"
import { CustomDropDownMenuCss, DropDownMenu } from "@/component/Common/DropDownMenu"
import WizzorContactInfo from "./WizzorContactInfo"
import { renderTooltipText } from "@/component/Common/TooltipText"
import { useDeleteMultipleWizzorContact, useDeleteWizzorContact, useGetWizzorContactList, useUpdateWizzorContact } from "@/hook/useContacts"
import { IContactsQuery, IWizzorContacts } from "@/type/Contacts"

import { useSearchParams } from "next/navigation"
import { usePathname, useRouter } from "@/i18n/routing"
import { useNotificationContext } from "@/component/Layout/NotificationContext"
import AddContact from "./AddContact"
import { AddContactWithFile } from "./AddContactWithFile"
import { useQueryClient } from "@tanstack/react-query"
import { LoadMoreInfinite } from "@/component/Common/LoadMoreInfinite"
import { renderLabelItem } from "@/component/Common/LabelItem"
import { LoadingBox } from "@/component/Common/LoadingBox"

const WizzorList = () => {
  const router = useRouter()
  const pathname = usePathname()
  const queryClient = useQueryClient()
  const searchParams = useSearchParams()
  const oldSearch = Object.fromEntries(searchParams.entries())
  const [formRef] = Form.useForm()
  const [modal, modalContextHolder] = Modal.useModal()
  const { notify } = useNotificationContext()

  const trans = useTranslations("contact")
  const transBook = useTranslations("book")
  const transButton = useTranslations("button")
  const transMessage = useTranslations("message")
  const transGeneral = useTranslations("general")

  const [inforContact, setInforContact] = useState<any>("")
  const [keyword, setKeyword] = useState<string>("")
  const [openDrawer, setOpenDrawer] = useState<boolean>(false)
  const [loadingDetailContact, setLoadingDetailContact] = useState<boolean>(true)
  const [widthCol, setWidthCol] = useState<number>(238)
  const [openDrawerAddContact, setOpenDrawerAddContact] = useState<boolean>(false)
  const [loadingAddContact, setLoadingAddContact] = useState<boolean>(true)
  const [isHeart, setIsHeart] = useState(false)
  const [isNextPage, setIsNextPage] = useState(true)
  const [query, setQuery] = useState<IContactsQuery>({})
  const [selectedRowKeys, setSelectedRowKeys] = useState<any>([])

  const deleteContact = useDeleteWizzorContact()
  const updateWizzorContact = useUpdateWizzorContact()
  const DeleteMultipleContact = useDeleteMultipleWizzorContact()

  const { data, isLoading, fetchNextPage, hasNextPage, isFetchingNextPage } = useGetWizzorContactList(query)

  const dataContacts = useMemo(
    () => (flattenDeep(data?.pages.map((e: any) => e.data!)).length > 0 ? flattenDeep(data?.pages.map((e: any) => e?.data?.data?.contacts)) : []),
    [data?.pages],
  )

  const dataContactsLength = dataContacts?.length
  const isAllSelected = selectedRowKeys?.length === dataContactsLength
  const isSomeSelected = selectedRowKeys?.length > 0 && !isAllSelected
  const isEmptySelectRowKey = isEmpty(selectedRowKeys)

  const countData = useMemo(() => dataContacts?.length, [dataContacts?.length])

  useEffect(() => {
    setIsHeart(Boolean(inforContact?.is_favourite))
  }, [inforContact])

  useEffect(() => {
    if (Number(data?.pageParams?.at(-1)) === Number(data?.pages?.at(-1)?.data?.data?.total_pages)) {
      setIsNextPage(false)
    }
    if (!isNextPage && Number(data?.pageParams?.at(-1)) < Number(data?.pages?.at(-1)?.data?.data?.total_pages)) {
      setIsNextPage(true)
    }
  }, [isNextPage, data?.pages, data?.pageParams])

  useEffect(() => {
    const updateTabPosition = () => {
      setWidthCol(window.innerWidth >= 768 ? 238 : 158)
    }
    updateTabPosition()
    window.addEventListener("resize", updateTabPosition)

    return () => {
      window.removeEventListener("resize", updateTabPosition)
    }
  }, [])

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

      if (searchParams.has("search")) {
        setKeyword(oldSearch?.search)
      }
    }
  }, [])

  const showLoading = () => {
    setOpenDrawer(true)
    setLoadingDetailContact(true)

    setTimeout(() => {
      setLoadingDetailContact(false)
    }, 1000)
  }

  const showLoadingAddContact = () => {
    setOpenDrawerAddContact(true)
    setLoadingAddContact(true)

    setTimeout(() => {
      setLoadingAddContact(false)
    }, 1000)
  }

  const updateSearchQuery = useCallback(
    (updatedQuery: any) => {
      const params = new URLSearchParams(searchParams)

      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 })
    },
    [searchParams, pathname, query],
  )

  const handleSearchKeyword = (keyword: string) => {
    if (keyword && keyword?.length >= 3) {
      const updatedQuery = { ...oldSearch, search: keyword?.trim() }
      const cleanedObj = omitBy(updatedQuery, (value) => value === null || value === undefined || value === "")

      setQuery(cleanedObj)
      updateSearchQuery(cleanedObj)
    }
    if (keyword === "" && query?.search) {
      setQuery({})
      updateSearchQuery({})
    }
  }

  const updateContact = (detailContact: IWizzorContacts) => {
    updateWizzorContact
      .mutateAsync({
        id: detailContact ? detailContact?.id : "",
        req: { is_favourite: !detailContact?.is_favourite },
      })
      .then((res: any) => {
        if (res?.status === 200) {
          notify({
            type: "success",
            message: transMessage("congratulation"),
            description: !detailContact?.is_favourite ? transMessage("add_favorite_success") : transMessage("remove_favorite_success"),
          })

          queryClient.invalidateQueries({ queryKey: ["contacts.infinite_get_wizzor_list", query] })
        }
      })
      .catch((errors) => {
        notify({
          type: "error",
          message: transMessage("something_wrong"),
          description: errors?.response?.data.msgs || transMessage("fail"),
        })
      })
  }

  const handleDeleteContact = (contact?: IWizzorContacts) => {
    deleteContact
      .mutateAsync(contact?.id || "")
      .then((res: any) => {
        if (res?.status === 200) {
          notify({
            type: "success",
            message: transMessage("congratulation"),
            description: transGeneral("deleted_successfully"),
          })

          if (openDrawer) {
            setOpenDrawer(false)
          }
          queryClient.invalidateQueries({ queryKey: ["contacts.infinite_get_wizzor_list", query] })
        }
      })
      .catch((errors) => {
        notify({
          type: "error",
          message: transMessage("something_wrong"),
          description: errors?.response?.data.msgs || transMessage("fail"),
        })
      })
  }

  const handleDeleteMultipleContact = (arrId?: string[]) => {
    DeleteMultipleContact.mutateAsync({ ids: arrId || [] })
      .then((res: any) => {
        if (res?.status === 200) {
          notify({
            type: "success",
            message: transMessage("congratulation"),
            description: res?.data?.msg || transGeneral("deleted_successfully"),
          })
          setSelectedRowKeys([])
          queryClient.invalidateQueries({ queryKey: ["contacts.infinite_get_wizzor_list", query] })
        }
      })
      .catch((errors) => {
        notify({
          type: "error",
          message: transMessage("something_wrong"),
          description: errors?.response?.data?.msgs || transMessage("fail"),
        })
      })
  }

  const confirmDelete = (contact?: IWizzorContacts) => {
    modal.confirm({
      title: transGeneral("confirm_delete"),
      okText: transButton("ok"),
      cancelText: transButton("cancel"),
      onOk() {
        handleDeleteContact(contact)
      },
    })
  }

  const confirmDeleteMultiple = (arrId: string[]) => {
    modal.confirm({
      title: transGeneral("confirm_delete"),
      okText: transButton("ok"),
      cancelText: transButton("cancel"),
      onOk() {
        handleDeleteMultipleContact(arrId)
      },
    })
  }

  const handleSelectAll = (checked: any) => {
    setSelectedRowKeys(checked ? dataContacts?.map((item) => item.id) : [])
  }

  const handleOpenChange = (inforContact: any) => {
    setInforContact(inforContact)
  }

  const buttonAction = (record: IWizzorContacts) => {
    const items: MenuProps["items"] = [
      {
        label: renderLabelItem(transBook("go_detail"), "/img/icon/information_circle_outline.svg", "information_circle_outline"),
        key: "0",
        onClick: () => {
          showLoading()
        },
      },
      {
        label: renderLabelItem(transBook("delete"), "/img/icon/trash_outline.svg", "trash_outline"),
        key: "1",
        onClick: () => confirmDelete(record),
      },
    ]
    return (
      <div key={`${record?.id}-${record?.is_favourite}`}>
        <DropDownMenu
          menu={{ items, className: classNames("", CustomDropDownMenuCss) }}
          onOpenChange={() => {
            handleOpenChange(record)
          }}
        />
      </div>
    )
  }

  const columns: any = useMemo(
    () => [
      {
        title: "Name",
        key: "name",
        align: "center",
        fixed: "left",
        className: "!p-1",
        width: widthCol,
        ellipsis: {
          showTitle: false,
        },
        render: (record: IWizzorContacts) => {
          return (
            <div className="flex">
              <div
                className="mr-2 w-[37px] h-[2.625rem] flex items-center justify-center cursor-pointer"
                onClick={() => {
                  updateContact(record)
                }}>
                <Image
                  src={`/img/icon/${record?.is_favourite ? "heart" : "heart_outline"}.svg`}
                  alt={"heart"}
                  width={24}
                  height={24}
                />
              </div>
              {record?.name
                ? renderTooltipText(record?.name, "border-l-[3px] border-solid border-[var(--primary--70)] bg-[var(--secondary-10)] text-left", "flex-1")
                : "--"}
            </div>
          )
        },
      },
      {
        title: "Title",
        dataIndex: "title",
        key: "title",
        align: "center",
        className: "!p-1",
        width: 174,
        ellipsis: {
          showTitle: false,
        },
        render: (title: string) => {
          return title ? renderTooltipText(title, "bg-[var(--secondary-10)]") : "--"
        },
      },
      {
        title: "Organization",
        dataIndex: "organization",
        key: "organization",
        align: "center",
        className: "!p-1",
        width: 202,
        render: (organization: string) => (organization ? renderTooltipText(organization, "bg-[var(--secondary-10)]") : "--"),
      },
      {
        title: "Phone",
        dataIndex: "phone",
        key: "phone",
        align: "center",
        className: "!p-1",
        width: 168,
        ellipsis: {
          showTitle: false,
        },
        render: (phone: string) => {
          return phone ? renderTooltipText(phone, "bg-[var(--secondary-10)]") : "--"
        },
      },
      {
        title: "Type",
        dataIndex: "type",
        key: "type",
        align: "center",
        className: "!p-1",
        width: 135,
        ellipsis: {
          showTitle: false,
        },
        render: (type: string) => {
          // const contactType = find(TYPE_CONTACT, { value: type })
          // return renderTooltipText(contactType?.label || "", `bg-[var(--secondary-10)] ${contactType?.textColor || ""}`, contactType?.bgColor)
          return type ? renderTooltipText(type, "bg-[var(--secondary-10)]") : ""
        },
      },
      {
        title: "Source",
        dataIndex: "source",
        key: "source",
        align: "center",
        className: "!p-1",
        width: 135,
        ellipsis: {
          showTitle: false,
        },
        render: (source: string) => {
          // const contactSource = find(SOURCE_CONTACT, { value: source })
          // return renderTooltipText(contactSource?.label || "", `bg-[var(--secondary-10)] ${contactSource?.textColor || ""}`, contactSource?.bgColor)
          return source ? renderTooltipText(source, "bg-[var(--secondary-10)]") : ""
        },
      },
      Table.SELECTION_COLUMN,
      {
        key: "action",
        fixed: "right",
        className: "!p-1",
        width: 80,
        render: (record: IWizzorContacts) => {
          return (
            <div className="flex gap-3">
              <Checkbox
                checked={selectedRowKeys.includes(record.id)}
                onChange={(e) => {
                  const checked = e.target.checked
                  setSelectedRowKeys((prev: any) => (checked ? [...prev, record.id] : prev.filter((key: any) => key !== record.id)))
                }}
              />
              {buttonAction(record)}
            </div>
          )
        },
      },
    ],
    [dataContacts, SOURCE_CONTACT, openDrawer, selectedRowKeys],
  )

  return (
    <div className="h-full flex flex-col">
      <HeaderBreadcrumb
        showButton={false}
        items={[
          {
            aria_label: trans("my_wizzor_list"),
            href: "#",
            title: trans("my_wizzor_list"),
          },
        ]}
        className="flex-col !items-start lg:flex-row lg:items-center"
        slot={
          <div className={`flex items-center mt-2 lg:mt-0`}>
            <SearchBox
              value={keyword}
              onSearch={handleSearchKeyword}
              onChange={setKeyword}
              placeholder={trans("search_contact_here")}
              className="h-12"
              classInput="!h-12 lg:!w-56 xl:!w-56"
              classButton="!h-12 md:!pl-2"
            />
            <span className="hidden md:block mx-2 lg:mx-4 h-10 w-[1px] bg-[var(--secondary-20)]"></span>
            <AddContactWithFile query={query} />
            <button
              onClick={showLoadingAddContact}
              type="button"
              className="whitespace-nowrap rounded-lg border border-solid border-[var(--primary--70)] h-12 px-2 md:px-4 lg:px-8 font-semibold bg-[var(--primary--70)] text-white hover:opacity-80 ml-2">
              <FontAwesomeIcon
                icon={faPlus}
                className="mr-1 md:mr-2"
              />
              {trans("add_contact")}
            </button>
          </div>
        }
      />
      <div className="px-5 py-6 text-[var(--secondary-60)] text-base leading-[22px] font-normal flex gap-4 justify-between">
        <p>{`${trans("we_found")} ${countData || 0} ${countData > 1 ? trans("contacts") : trans("contact")}`}</p>
        <div className="flex gap-5">
          {Boolean(dataContactsLength) && (
            <>
              <Checkbox
                className="flex-row-reverse !items-center"
                indeterminate={isSomeSelected}
                checked={isAllSelected}
                onChange={(e) => handleSelectAll(e.target.checked)}>
                {transGeneral("select_all")}
              </Checkbox>

              <button
                disabled={isEmptySelectRowKey}
                type="button"
                onClick={() => {
                  confirmDeleteMultiple(selectedRowKeys)
                }}
                className={`group bg-[var(--secondary-20)] inline-flex justify-center items-center rounded w-8 h-8 ${
                  isEmptySelectRowKey ? "" : "hover:bg-[var(--primary--70)]"
                }`}>
                <Image
                  src="/img/icon/trash_outline.svg"
                  alt="share"
                  width={24}
                  height={24}
                  className={`${isEmptySelectRowKey ? "" : "group-hover:hidden"}`}
                />
                <Image
                  src="/img/icon/trash_outline_white.svg"
                  alt="share"
                  width={24}
                  height={24}
                  className={`hidden ${isEmptySelectRowKey ? "" : "group-hover:block"}`}
                />
              </button>
            </>
          )}
        </div>
      </div>
      <div className="grow overflow-y-auto rounded-b-lg">
        {isLoading ? (
          <LoadingBox icon="/img/gif/Contact.gif" />
        ) : (
          <Table
            rowKey={"id"}
            columns={columns}
            dataSource={dataContacts}
            pagination={false}
            loading={isFetchingNextPage || deleteContact?.isPending || updateWizzorContact?.isPending || DeleteMultipleContact?.isPending}
            rowSelection={{
              selectedRowKeys,
              onChange: setSelectedRowKeys,
              columnWidth: 0,
            }}
          />
        )}
        <LoadMoreInfinite
          isLoading={isLoading}
          isNextPage={isNextPage}
          hasNextPage={hasNextPage}
          fetchNextPage={fetchNextPage}
        />
      </div>

      <WizzorContactInfo
        formRef={formRef}
        open={openDrawer}
        setOpen={setOpenDrawer}
        loading={loadingDetailContact}
        inforContact={inforContact}
        confirmDelete={confirmDelete}
        isHeart={isHeart}
        setIsHeart={setIsHeart}
        updateContact={updateContact}
        loadingUpdate={updateWizzorContact?.isPending}
      />
      <AddContact
        open={openDrawerAddContact}
        setOpen={setOpenDrawerAddContact}
        loading={loadingAddContact}
        query={query}
      />
      {modalContextHolder}
    </div>
  )
}

export default WizzorList