"use client";

import {
  Card,
  CardHeader,
  CardBody,
  CardFooter,
  Divider,
} from "@nextui-org/react";
import Link from "next/link";
import { FaUserLock, FaUsers } from "react-icons/fa";
import { useRouter } from "next/navigation";

import { INTERNAL_PAGES } from "@/constants/pages-mapping/internal-pages-mapping";
import Button from "@/components/common/button";

type BlockedSignupCampaignProps = {
  countryName: string;
};

function BlockedSignupCampaign({ countryName }: BlockedSignupCampaignProps) {
  const router = useRouter();

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

  return (
    <div className="flex items-center justify-center p-0 sm:p-4 m-auto sm:min-h-screen sm:my-8 lg:my-16 relative">
      <div className="w-full max-w-2xl mx-0 sm:mx-4 lg:mx-16 relative">
        <div className="absolute -top-10 left-1/2 -translate-x-1/2 z-30 bg-participant-cerulean rounded-full p-4 ring-4 ring-participant-cerulean/20">
          <FaUsers className="w-10 h-10 text-white" />
        </div>
        <Card className="shadow border-0 p-4 sm:p-6 md:p-8 lg:p-10 rounded-none sm:rounded-3xl  text-gray-900 dark:text-gray-100">
          <CardHeader className="text-center flex flex-col pt-8">
            <h1 className="text-4xl font-black mb-3 font-inter">
              We&apos;re sorry, but we can&apos;t register you.
            </h1>
            <p>
              Unfortunately, our verification system doesn&apos;t process
              registrations from your country{" "}
              {countryName ? ` (${countryName})` : ""}.
            </p>
          </CardHeader>
          <CardBody className="space-y-4 text-center">
            <p className="text-sm">
              As part of the application process, we use a third-party platform
              to verify mobile numbers. This platform can&apos;t process
              sign-ups from some countries. Please accept our sincere apologies,
              we&apos;re working hard to address this.
            </p>
            <Divider className="w-48 flex justify-center items-center m-auto my-8" />
            <div className="flex flex-col items-center justify-center space-y-4">
              <p className="text-sm text-center">
                If you believe you already have an account with us, please log
                in.
              </p>
              <Button
                fullWidth
                btnLabel="Login"
                customVariant="primary"
                startContent={<FaUserLock />}
                onPress={handleClickLogin}
              />
            </div>
          </CardBody>
          <CardFooter className="flex flex-col gap-4">
            <p className="text-xs text-center">
              If you have any questions or need further assistance, please refer
              to our{" "}
              <Link
                className="underline underline-offset-2 decoration-dotted cursor-pointer font-semibold"
                href={INTERNAL_PAGES.participant.contactUs}
                rel="noopener noreferrer"
                target="_blank"
              >
                contact us
              </Link>{" "}
              page.
            </p>
          </CardFooter>
        </Card>
      </div>
    </div>
  );
}

export default BlockedSignupCampaign;