import Link from "next/link";
import { FaUserLock } from "react-icons/fa6";
import { useRouter } from "next/navigation";
import { Divider } from "@nextui-org/react";

import { INTERNAL_PAGES } from "@/constants/pages-mapping/internal-pages-mapping";
import { AIRTABLE_INTERNATIONAL } from "@/constants/signup-form-constants";
import PFRDefaultLogo from "@/components/common/sprites/pfr-default-logo-sprite";
import Button from "@/components/common/button";
import CompanyContactsFooter from "@/components/pages/participant/sign-up/common/company-contacts-footer";

type BlockedSignupProps = {
  userCountry?: string;
};

function BlockedSignup({ userCountry }: BlockedSignupProps) {
  const router = useRouter();

  const handleClickLogin = () => {
    router.push(INTERNAL_PAGES.participant.login);
  };

  const handleClickForgotPassword = () => {
    router.push(INTERNAL_PAGES.participant.forgotPassword);
  };

  return (
    <main
      className="xl:w-7/12 relative bg-white xl:pt-0 pt-6 pb-8"
      id="main-content"
    >
      <div className="absolute xl:hidden top-0 w-full h-2 bg-participant-bittersweet dark:bg-participant-cerulean" />
      <div className="flex items-center justify-center mt-0 xl:justify-end xl:me-16">
        <Link href={INTERNAL_PAGES.participant.homepage}>
          <PFRDefaultLogo fill="text-black" width={100} />
        </Link>
      </div>
      <div className=" text-black space-y-4 flex flex-col justify-center items-center text-center mt-8 text-sm px-8 xl:px-24">
        <h1 className="text-4xl font-black font-inter">Access restricted</h1>
        <h2 className="text-2xl font-black font-inter">
          Registration unavailable
        </h2>
        <p className="pt-8">
          Unfortunately, we cannot process new account registrations from your
          country{userCountry ? ` (${userCountry})` : ""} at this time.
        </p>
        <p>
          Although our database is open to people from around the world, at the
          moment, the third-party platform that helps us verify phone numbers is
          unable to process sign-ups from specific countries. In other words,
          our phone verification system has limitations in certain regions,
          preventing us from accepting sign-ups from those locations. This is a
          technical constraint that we hope will improve overtime.
        </p>

        <p>
          You can still join our community by signing up
          <Link
            className="ms-1 underline underline-offset-2 decoration-dotted cursor-pointer font-bold"
            href={AIRTABLE_INTERNATIONAL}
            rel="noopener noreferrer"
            target="_blank"
          >
            here
          </Link>
          .
        </p>
      </div>
      <Divider className="bg-gray-200 w-48 flex justify-center items-center m-auto my-8" />
      <div className="flex flex-col items-center justify-center space-y-4 px-24 pb-8">
        <p className="text-black text-sm text-center">
          If you believe you already have an account, please log in.
        </p>
        <Button
          fullWidth
          btnLabel="Login"
          customVariant="black"
          startContent={<FaUserLock />}
          onClick={handleClickLogin}
        />
        <p className="text-black text-sm text-center">
          If you already have an account with us, but forgot your password,
          please click the button below to reset it.
        </p>
        <Button
          fullWidth
          btnLabel="Forgot password?"
          customVariant="transparent-black"
          startContent={<FaUserLock />}
          onClick={handleClickForgotPassword}
        />
      </div>
      <CompanyContactsFooter />
    </main>
  );
}

export default BlockedSignup;