"use client"

import { usePathname, useRouter } from "next/navigation"
import { useEffect, useRef } from "react"
import { useIntl } from "react-intl"

import { partnerSas } from "@scandic-hotels/common/constants/routes/myPages"
import { logger } from "@scandic-hotels/common/logger"
import { toast } from "@scandic-hotels/design-system/Toast"
import { trpc } from "@scandic-hotels/trpc/client"

import { TIER_TO_FRIEND_MAP } from "@/constants/membershipLevels"

import useLang from "@/hooks/useLang"

export function SASLevelUpgradeCheck() {
  const firedRef = useRef(false)
  const intl = useIntl()
  const lang = useLang()
  const pathname = usePathname()
  const router = useRouter()

  const { mutate } = trpc.partner.sas.performLevelUpgrade.useMutation({
    onSuccess(result) {
      if (result.tierMatchState === "matched") {
        toast.success(
          intl.formatMessage(
            {
              id: "myPages.yourSasLevelUpgradedToWithLevel",
              defaultMessage:
                "Your SAS EuroBonus level has upgraded you to {level}!",
            },
            {
              level: TIER_TO_FRIEND_MAP[result.toLevel],
            }
          )
        )

        // If we are on the SAS partner page we need to refresh the data to show the new level
        const sasPartnerPagePathname = partnerSas[lang]
        if (pathname === sasPartnerPagePathname) {
          router.refresh()
        }
      }
    },
    onError() {
      logger.error("[sas] something went wrong")
    },
  })

  useEffect(() => {
    // We must make sure this only runs once to avoid sending multiple notifications to the user.
    // This aint great, but this entire thing is temporary until tier matching is event based on the server.
    if (firedRef.current) {
      return
    }

    mutate()
    firedRef.current = true
  }, [mutate])

  return null
}