"use client" // Error components must be Client Components

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

import { login } from "@/constants/routes/handleAuth"
import { SESSION_EXPIRED } from "@/server/errors/trpc"

import { findLang } from "@/utils/languages"

import styles from "./error.module.css"

import type { LangParams } from "@/types/params"

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  const intl = useIntl()
  const params = useParams<LangParams>()
  const router = useRouter()
  const searchParams = useSearchParams()
  const currentSearchParamsRef = useRef<string>()
  const isFirstLoadRef = useRef<boolean>(true)

  useEffect(() => {
    // Log the error to an error reporting service
    console.error(error)

    if (error.message === SESSION_EXPIRED) {
      const loginUrl = login[params.lang]
      window.location.assign(loginUrl)
    }
  }, [error, params.lang])

  useEffect(() => {
    // This is to reset the error and refresh the page when the search params change, to support the booking widget that is using router.push to navigate to the booking flow page
    const currentSearchParams = searchParams.toString()

    if (
      currentSearchParamsRef.current !== currentSearchParams &&
      !isFirstLoadRef.current
    ) {
      startTransition(() => {
        reset()
        router.refresh()
      })
    }
    isFirstLoadRef.current = false
    currentSearchParamsRef.current = currentSearchParams
  }, [searchParams, reset, router])

  const pathname = usePathname()
  const lang = findLang(pathname)

  return (
    <section className={styles.layout}>
      <div className={styles.content}>
        {lang}: {intl.formatMessage({ id: "Something went wrong!" })}
      </div>
    </section>
  )
}