"use client"

import { useGetProfile, useLogout } from "@/hook/useAuth"
import { css } from "@emotion/css"
import { faArrowRightFromBracket, faEllipsisVertical } from "@fortawesome/free-solid-svg-icons"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { Dropdown } from "antd"
import classNames from "classnames"
import { useCookies } from "next-client-cookies"
import Image from "next/image"
import Link from "next/link"
import { useNotificationContext } from "@component/Layout/NotificationContext"
import { useTranslations } from "next-intl"
import { useEffect, useState } from "react"
import { useRouter } from "@/i18n/routing"
import { useRecoilState, useSetRecoilState } from "recoil"
import { loggedInUserState, unreadMessageCountState } from "@/recoil"
import { appConfig } from "@/config/app"
import { CometChatUIKit } from "@cometchat/chat-uikit-react"
import { UIKitSettingsBuilder } from "@cometchat//chat-uikit-react"
import { useQueryClient } from "@tanstack/react-query"
import { messaging } from "@/util/firebase"
import { CometChat } from "@cometchat/chat-sdk-javascript"
import ChangePassword from "./ChangePassword"
import dayjs from "dayjs"

type Props = {
  className?: string
}

type UnreadCountResponse = {
  users?: Record<string, number>
  groups?: Record<string, number>
}

export default function UserShort({ className }: Props) {
  const router = useRouter()
  const cookies = useCookies()
  const logout = useLogout()

  const transMessage = useTranslations("message")
  const tranButton = useTranslations("button")
  const tranAccount = useTranslations("account")

  const [loggedInUser, setLoggedInUser] = useRecoilState(loggedInUserState)
  const setUnreadMessageCount = useSetRecoilState(unreadMessageCountState)

  const { notify } = useNotificationContext()
  const { data: user, error: profileError, isError: isErrorProfile } = useGetProfile()
  const queryClient = useQueryClient()
  const [openChangePassword, setOpenChangePassword] = useState(false)

  useEffect(() => {
    if (user && user?.data) {
      cookies.set("logged_user", JSON.stringify(user.data), {
        expires: new Date(Date.now() + 365 * 24 * 60 * 60 * 1000),
        path: "/",
        sameSite: "strict",
      })
      const expirationDate = dayjs(user.data?.subsendon)
      const now = dayjs()
      if (!expirationDate.isAfter(now)) {
        router.push("/subscription")
      }
    } else {
      cookies.remove("logged_user")
    }
  }, [user])

  // Handle profile fetch error - auto logout
  useEffect(() => {
    if (isErrorProfile) {
      console.error("Profile fetch failed")
      // Auto logout when profile fetch fails
      cookies.remove("access_token")
      cookies.remove("isRemember")
      setLoggedInUser(null)
      queryClient.removeQueries({ queryKey: ["auth.profile"] })
      CometChatUIKit.logout()
      setTimeout(() => {
        router.refresh()
        router.push(`/login`)
      }, 500)
    }
  }, [isErrorProfile])

  useEffect(() => {
    if (loggedInUser) {
      messaging
        // .getToken({
        //   vapidKey: "YOUR_WEB_PUSH_CERTIFICATE_KEY_PAIR",
        // })
        .getToken()
        .then((token) => {
          if (token) {
            // register token với CometChat
            CometChat.registerTokenForPushNotification(token)
            localStorage.setItem("fcmToken", token)
          }
        })
        .catch((err) => {
          console.error("FCM error", err)
        })
    }
      
  }, [loggedInUser])

  useEffect(() => {
    /**
     * Initialize CometChat
     */
    if (user) {
      if (!loggedInUser) {
        const uiKitSettings = new UIKitSettingsBuilder()
          .setAppId(appConfig.appID)
          .setRegion(appConfig.region)
          .setAuthKey(appConfig.authKey)
          .subscribePresenceForAllUsers()
          .build()
        try {
          CometChatUIKit.init(uiKitSettings).then(() => {
            login(`${user?.data?.id}`)
          })
        } catch (error) {
          console.log("Initialization failed with error:", error)
        }
      }
    }
  }, [user])

  const login = async (uid: string) => {
    try {
      CometChatUIKit.login(uid)?.then((loggedInUser: any) => {
        setLoggedInUser(loggedInUser)
      })
    } catch (error) {
      console.log("login failed", error)
    }
  }

  useEffect(() => {
    if (loggedInUser) {
      getUnreadMessageCount()
    }

    const listenerID = "unread-message-listener"
    CometChat.addMessageListener(
      listenerID,
      new CometChat.MessageListener({
        onTextMessageReceived: () => {
          getUnreadMessageCount()
        },
        onMediaMessageReceived: () => {
          getUnreadMessageCount()
        },
        onCustomMessageReceived: () => {
          getUnreadMessageCount()
        },
      }),
    )

    return () => {
      CometChat.removeMessageListener(listenerID)
    }
  }, [loggedInUser])

  const getUnreadMessageCount = () => {
    CometChat.getUnreadMessageCount()
      .then((res) => {
        const response = res as UnreadCountResponse
        const totalGroupUnread = Object.values(response?.groups || {}).reduce((acc, count) => acc + count, 0)
        const totalUserUnread = Object.values(response?.users || {}).reduce((acc, count) => acc + count, 0)
        setUnreadMessageCount(totalGroupUnread + totalUserUnread)
      })
      .catch((error) => {
        console.error("Error getting unread messages count:", error)
      })
  }

  const items: any[] = [
    {
      label: tranAccount("profile"),
      key: "user-profile",
      icon: (
        <Image
          src="/img/icon/person-circle-outline.svg"
          alt="User"
          width={24}
          height={24}
        />
      ),
      onClick: () => router.push("/profile"),
    },
    {
      type: "divider",
    },
    {
      label: tranAccount("change_password"),
      key: "change-password",
      icon: (
        <Image
          src="/img/icon/key.svg"
          alt="Key"
          width={24}
          height={24}
        />
      ),
      onClick: () => {
        setOpenChangePassword(pre => !pre)
      }
    },
    {
      type: "divider",
    },
    {
      label: tranAccount("logout"),
      key: "logout",
      icon: (
        <FontAwesomeIcon
          icon={faArrowRightFromBracket}
          className="!text-xl"
        />
      ),
      onClick: () => handleLogout(),
    }
  ]

  const handleLogout = () => {
    logout
      .mutateAsync()
      .then(() => {
        cookies.remove("access_token")
        cookies.remove("isRemember")
        setLoggedInUser(null)
        queryClient.removeQueries({ queryKey: ["auth.profile"] })
        CometChatUIKit.logout()
        setTimeout(() => {
          router.refresh()
          router.push(`/login`)
        }, 500)
      })
      .catch((error) => {
        const concatenatedMsgs = error?.response?.data.msgs || transMessage("fail")
        notify({
          type: "error",
          message: transMessage("something_wrong"),
          description: concatenatedMsgs,
        })
      })
  }

  const CustomCss = css`
    .ant-dropdown-menu {
      padding-left: 1rem;
      padding-right: 1rem;
      .ant-dropdown-menu-item {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
      }
    }
  `

  return (
    <div className={classNames("bg-[var(--primary--20)] rounded-lg p-2 md:px-4 lg:py-4 lg:px-3 xl:px-5 flex items-center", className)}>
      <div className="flex gap-2 items-center grow">
        <div className="w-8 h-8 lg:w-13 lg:h-13">
          {user?.data?.photo ? (
            <Image
              src={user?.data?.photo}
              alt="avatar"
              width={42}
              height={42}
              style={{
                width: "100%",
                height: "100%",
              }}
              className="rounded-full"
              onError={(e) => (e.currentTarget.src = "/img/clipped.svg")}
            />
          ) : (
            <Image
              src="/img/clipped.svg"
              alt="avatar"
              width={42}
              height={42}
              style={{
                width: "100%",
                height: "100%",
              }}
              className="rounded-full"
            />
          )}
        </div>
        <div className="hidden lg:block">
          <p className="m-0 font-bold xl:text-base whitespace-nowrap line-clamp-1">{`${user?.data?.firstname || "--"} ${user?.data?.lastname || ""}`}</p>
          <p className="m-0 text-[var(--secondary-60)] text-xs xl:text-sm">{`${user?.data?.phone_cc || ""} ${user?.data?.phonenumber || ""}`}</p>
        </div>
      </div>
      <Dropdown
        menu={{ items }}
        placement="bottomRight"
        overlayClassName={classNames(CustomCss)}
        trigger={["click"]}>
        <Link
          href="#"
          scroll={false}
          className="px-3 py-1">
          <FontAwesomeIcon icon={faEllipsisVertical} />
        </Link>
      </Dropdown>
      <ChangePassword
        show={openChangePassword}
        onClose={() => setOpenChangePassword(false)}
      />
    </div>
  )
}