"use client"

import { useSearchParams } from "next/navigation"
import { type IntlShape, useIntl } from "react-intl"

import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import ScandicLogoIcon from "@scandic-hotels/design-system/Icons/ScandicLogoIcon"
import Image from "@scandic-hotels/design-system/Image"
import Link from "@scandic-hotels/design-system/Link"
import { Typography } from "@scandic-hotels/design-system/Typography"

import { supportEmail, supportPhone } from "@/constants/contactSupport"
import { employeeBenefits } from "@/constants/routes/dtmc"

import useLang from "@/hooks/useLang"
import background from "@/public/_static/img/Scandic_Computer_Coffee.png"

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

export default function LinkEmploymentErrorPage() {
  const lang = useLang()
  const intl = useIntl()
  const searchParams = useSearchParams()

  const error = searchParams.get("error")
  const errorContent = getErrorContent(error, intl)

  return (
    <div className={styles.pageWrapper}>
      <Image
        src={background}
        alt=""
        fill
        className={styles.backgroundImage}
        priority
        sizes="100vw"
      />

      <div className={styles.contentContainer}>
        <nav className={styles.nav}>
          <ButtonLink href={employeeBenefits[lang]} variant="Text">
            <MaterialIcon
              icon="chevron_left"
              size={20}
              className={styles.backArrow}
            />
            <span className={styles.navBackText}>
              {intl.formatMessage({
                id: "common.goBack",
                defaultMessage: "Go back",
              })}
            </span>
          </ButtonLink>
          <div className={styles.logoContainer}>
            <ScandicLogoIcon height="20px" width="94px" />
          </div>
        </nav>

        <main className={styles.mainContent}>
          <div style={{ textAlign: "center" }} className={styles.card}>
            <Typography variant="Title/Subtitle/lg">
              <h1>{errorContent.heading}</h1>
            </Typography>

            <Typography variant="Body/Paragraph/mdRegular">
              <p>{errorContent.message}</p>
            </Typography>
            <div className={styles.contactSection}>
              <Typography variant="Title/Subtitle/md">
                <h3>
                  {intl.formatMessage({
                    id: "linkEmploymentError.contactHeading",
                    defaultMessage: "Contact our member service",
                  })}
                </h3>
              </Typography>
              <Typography variant="Link/sm">
                <Link
                  color="Text/Interactive/Secondary"
                  href={`tel:${supportPhone[lang].replaceAll(" ", "")}`}
                  textDecoration="underline"
                >
                  {supportPhone[lang]}
                </Link>
              </Typography>
              <Typography variant="Link/sm">
                <Link
                  href={`mailto:${supportEmail[lang]}`}
                  color="Text/Interactive/Secondary"
                  textDecoration="underline"
                >
                  {supportEmail[lang]}
                </Link>
              </Typography>
            </div>
          </div>
        </main>
      </div>
    </div>
  )
}

const getErrorContent = (error: string | null, intl: IntlShape) => {
  const defaultErrorContent = {
    heading: intl.formatMessage({
      id: "linkEmploymentError.genericHeading",
      defaultMessage: "Your account could not be connected",
    }),
    message: intl.formatMessage({
      id: "linkEmploymentError.genericMessage",
      defaultMessage:
        "We couldn't connect your accounts. Please contact us and we'll help you resolve this.",
    }),
  }

  switch (error) {
    case "unable_to_verify_employee_id":
      return {
        heading: intl.formatMessage({
          id: "linkEmploymentError.notEligibleHeading",
          defaultMessage: "You're not eligible for employee benefits",
        }),
        message: intl.formatMessage({
          id: "linkEmploymentError.notEligibleMessage",
          defaultMessage:
            "This may be because your employment has not yet started, has ended, or you are a consultant. If you believe this is an error, please contact us for assistance.",
        }),
      }
    case "employee_id_already_linked":
      return {
        heading: intl.formatMessage({
          id: "linkEmploymentError.alreadyLinkedHeading",
          defaultMessage:
            "Employee number already linked to another Scandic Friends membership.",
        }),
        message: intl.formatMessage({
          id: "linkEmploymentError.alreadyLinkedMessage",
          defaultMessage:
            "If you believe this is an error, please contact us for assistance.",
        }),
      }
    case "missing_employee_id_profile":
    case "missing_employee_id":
    case "no_session":
      return defaultErrorContent
    default:
      return defaultErrorContent
  }
}