"use client";

import { Controller, useForm } from "react-hook-form";
import { FaChevronRight } from "react-icons/fa6";
import { useEffect, useRef, useState } from "react";
import {
  Card,
  CardBody,
  CardHeader,
  Progress,
  useDisclosure,
} from "@nextui-org/react";
import { Turnstile, TurnstileInstance } from "@marsidev/react-turnstile";
import { useFormState, useFormStatus } from "react-dom";
import { parsePhoneNumber } from "awesome-phonenumber";
import { useParams, useRouter, useSearchParams } from "next/navigation";
import Link from "next/link";

import { AUTOCOMPLETE_VALUES } from "@/constants/signup-auto-complete-mapping";
import Button from "@/components/common/button";
import { CreateNewAccountData } from "@/types/signup/user-signup-types";
import PasswordInput from "@/components/common/password-input";
import TextInput from "@/components/common/text-input";
import CheckboxSingle from "@/components/common/single-checkbox";
import { Option } from "@/types/options/options-data-types";
import Alert from "@/components/common/alert";
import FormError from "@/components/common/form-error";
import { BasicLinkedInUser } from "@/types/marketing-types";
import { createFastLaneUser } from "@/services/participant/campaigns/lead-signup-actions";
import { ALLOWED_COUNTRY_CALLING_CODES } from "@/constants/allowed-countries";
import { AIRTABLE_INTERNATIONAL } from "@/constants/signup-form-constants";
import BlockedSignupModal from "@/components/pages/participant/sign-up/common/blocked-signup-modal";
import { INTERNAL_PAGES } from "@/constants/pages-mapping/internal-pages-mapping";

type CampaignSignupScreenProps = {
  linkedinUser: BasicLinkedInUser | null;
  userCountryCode: string;
  isExpiredOrNotFound: boolean;
};

function SubmitButton({ isTurnstileReady }: { isTurnstileReady: boolean }) {
  const { pending } = useFormStatus();

  const getButtonLabel = () => {
    if (pending) return "Creating your new account...";
    if (!isTurnstileReady) return "Waiting for security verification...";
    return "Register & access survey";
  };

  return (
    <Button
      fullWidth
      aria-disabled={pending || !isTurnstileReady}
      btnLabel={getButtonLabel()}
      customVariant="primary"
      endContent={pending || !isTurnstileReady ? null : <FaChevronRight />}
      isDisabled={pending || !isTurnstileReady}
      isLoading={pending}
      type="submit"
    />
  );
}

function CampaignSignupScreen({
  linkedinUser,
  userCountryCode,
  isExpiredOrNotFound,
}: CampaignSignupScreenProps) {
  const router = useRouter();
  const { slug } = useParams();
  const searchParams = useSearchParams();
  const queryString = searchParams.toString();
  const turnstileSiteKey = process.env
    .NEXT_PUBLIC_CLOUDFLARE_TURNSTILE_SITE_KEY as string;
  const [token, setToken] = useState<string>();
  const turnstileRef = useRef<TurnstileInstance>(null);
  const isTurnstileReady = !!turnstileRef.current?.getResponse();
  const visualIndicator =
    "bg-gradient-to-r from-participant-cerulean from-60% to-green-500";
  const currentStep = 1;
  const totalSteps = isExpiredOrNotFound ? 2 : 3;
  const redirectTo = isExpiredOrNotFound ? "/thanks-for-joining" : "/survey";
  const totalCompletion = Math.floor((currentStep / totalSteps) * 100);
  const utmSource = searchParams.get("utm_source") || "linkedin";

  const {
    isOpen: isOpenBlockSignupModal,
    onOpen: onOpenBlockSignupModal,
    onClose: onCloseBlockSignupModal,
  } = useDisclosure();

  const [state, formAction] = useFormState(
    createFastLaneUser.bind(null, token, utmSource),
    {
      success: false,
      error: "",
      errorCode: "",
    },
  );

  const { firstName, lastName, email } = linkedinUser || {};

  const { control, getValues } = useForm<CreateNewAccountData>({
    defaultValues: {
      firstName,
      lastName,
      email,
      phoneNumber: `${userCountryCode}`,
      password: "",
      isGdprAccepted: false,
    },
    mode: "all",
  });

  const userPhoneNumber = getValues("phoneNumber");

  useEffect(() => {
    if (state.success) {
      router.push(`/${slug}/${redirectTo}?${queryString}`);
    } else {
      turnstileRef.current?.reset();
    }
  }, [
    state.success,
    isExpiredOrNotFound,
    queryString,
    router,
    slug,
    redirectTo,
  ]);

  const handleClickJoin = () => {
    onCloseBlockSignupModal();
    router.push(AIRTABLE_INTERNATIONAL);
  };

  useEffect(() => {
    const currentCountryCode = parsePhoneNumber(userPhoneNumber).countryCode;

    const isCountryAllowed =
      currentCountryCode !== undefined &&
      ALLOWED_COUNTRY_CALLING_CODES.some(
        (country) => country.countryCode === `+${currentCountryCode}`,
      );

    if (state.success && !isCountryAllowed) {
      onOpenBlockSignupModal();
    }

    if (!state.success) {
      turnstileRef.current?.reset();
    }
  }, [onOpenBlockSignupModal, state.success, userPhoneNumber]);

  return (
    <div className="flex items-center justify-center p-0 sm:p-10 m-auto relative">
      <div className="w-full max-w-4xl relative">
        <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">
          <div className="pt-4 pb-2 px-1 sm:px-2">
            <div className="sm:px-4 py-4 sm:py-0">
              <Progress
                showValueLabel
                aria-label={`${totalCompletion}% of your journey is complete`}
                classNames={{
                  label:
                    "text-xs sm:text-sm font-bold text-gray-900 dark:text-gray-100 tracking-tight font-inter",
                  indicator: visualIndicator,
                  value:
                    "text-xs sm:text-sm font-bold text-gray-900 dark:text-gray-100 tracking-tight font-inter",
                }}
                label={`Your PFR journey: Step ${currentStep} of ${totalSteps}`}
                maxValue={100}
                minValue={1}
                value={totalCompletion}
              />
            </div>
          </div>

          <CardHeader className="flex flex-col text-start items-start px-2 sm:px-6">
            <h1 className="text-lg sm:text-xl md:text-2xl font-black font-inter leading-tight text-gray-900 dark:text-white">
              Create an account
            </h1>
            <p className="text-gray-600 dark:text-gray-300 text-sm md:text-base">
              Sign up, apply for research, make an impact!
            </p>
          </CardHeader>

          <CardBody className="px-2 sm:px-6">
            <form
              noValidate
              action={formAction}
              className="flex flex-col gap-4"
            >
              <div className="flex flex-col md:flex-row space-x-0 space-y-2 md:space-y-0 md:space-x-3">
                <div className="flex-grow">
                  <Controller
                    control={control}
                    name="firstName"
                    render={({ fieldState, field }) => (
                      <TextInput
                        forceDarkMode
                        isClearable
                        autoComplete={AUTOCOMPLETE_VALUES.GIVEN_NAME}
                        control={control}
                        fieldProps={field}
                        fieldState={fieldState}
                        label="First name"
                        name={field.name}
                        placeholder="Your first name"
                      />
                    )}
                  />
                  {state?.errors?.firstName && (
                    <FormError forceDarkMode text={state.errors.firstName} />
                  )}
                </div>

                {/* Honeypot anti-bot */}
                <div
                  aria-hidden
                  style={{
                    position: "absolute",
                    left: "-9999px",
                    visibility: "hidden",
                  }}
                >
                  <input
                    aria-hidden
                    autoComplete="new-password"
                    id="middleName"
                    name="hiddenField987"
                    style={{
                      opacity: 0,
                      height: 0,
                      pointerEvents: "none",
                    }}
                    tabIndex={-1}
                    type="text"
                  />
                </div>

                <div className="flex-grow">
                  <Controller
                    control={control}
                    name="lastName"
                    render={({ fieldState, field }) => (
                      <TextInput
                        forceDarkMode
                        isClearable
                        autoComplete={AUTOCOMPLETE_VALUES.FAMILY_NAME}
                        control={control}
                        fieldProps={field}
                        fieldState={fieldState}
                        label="Last name"
                        name={field.name}
                        placeholder="Your last name"
                      />
                    )}
                  />
                  {state?.errors?.lastName && (
                    <FormError forceDarkMode text={state.errors.lastName} />
                  )}
                </div>
              </div>

              <Controller
                control={control}
                name="email"
                render={({ fieldState, field }) => (
                  <TextInput
                    forceDarkMode
                    isClearable
                    autoComplete={AUTOCOMPLETE_VALUES.EMAIL}
                    control={control}
                    fieldProps={field}
                    fieldState={fieldState}
                    label="Email address"
                    name={field.name}
                    placeholder="Your email address"
                  />
                )}
              />
              {state?.errors?.email && (
                <FormError forceDarkMode text={state.errors.email} />
              )}

              <Controller
                control={control}
                name="phoneNumber"
                render={({ fieldState, field }) => (
                  <TextInput
                    forceDarkMode
                    isClearable
                    control={control}
                    description="The country code (e.g. +44) is required. We'll use your phone number to verify your identity."
                    fieldProps={field}
                    fieldState={fieldState}
                    label="Phone number"
                    name={field.name}
                    placeholder="Your phone number"
                  />
                )}
              />
              {state?.errors?.phoneNumber && (
                <FormError forceDarkMode text={state.errors.phoneNumber} />
              )}

              <Controller
                control={control}
                name="password"
                render={({ fieldState, field }) => (
                  <PasswordInput
                    forceDarkMode
                    control={control}
                    fieldProps={field}
                    fieldState={fieldState}
                    label="Password"
                    name={field.name}
                    placeholder="Your password"
                  />
                )}
              />
              {state?.errors?.password && (
                <FormError forceDarkMode text={state.errors.password} />
              )}

              <div className="relative my-4">
                <div className="absolute inset-0 flex items-center">
                  <div className="w-full border-t border-gray-300 dark:border-gray-700"></div>
                </div>
                <div className="relative flex justify-center text-sm">
                  <span className="bg-white dark:bg-zinc-900 px-3 text-gray-500 dark:text-gray-400">
                    Terms and Conditions
                  </span>
                </div>
              </div>

              <Controller
                control={control}
                name="isGdprAccepted"
                render={({ field, fieldState }) => {
                  const gpdrOption: Option = {
                    id: 1,
                    title:
                      "I give permission for my personal information to be held securely by People for Research Ltd in accordance with current data protection legislation, solely for the purpose of contacting me to participate in paid research.",
                  };

                  return (
                    <CheckboxSingle
                      forceDarkMode
                      control={control}
                      fieldProps={field}
                      fieldState={fieldState}
                      name={field.name}
                      option={gpdrOption}
                    />
                  );
                }}
              />

              {state?.errors?.isGdprAccepted && (
                <FormError forceDarkMode text={state.errors.isGdprAccepted} />
              )}

              <Turnstile
                ref={turnstileRef}
                as="aside"
                options={{
                  action: "login",
                  theme: "auto",
                  size: "flexible",
                }}
                siteKey={turnstileSiteKey}
                onSuccess={(token) => setToken(token)}
              />

              {state?.error && (
                <Alert
                  forceDarkMode
                  message={state.error}
                  title={`Error (${state.errorCode})`}
                  variant="error"
                />
              )}
              {state?.errors && (
                <Alert
                  forceDarkMode
                  message="Some fields have missing or incorrect information. Please review the highlighted fields and correct any errors."
                  title="Error"
                  variant="alert"
                />
              )}

              <SubmitButton isTurnstileReady={isTurnstileReady} />

              <div className="flex flex-row font-noto font-medium text-sm text-center items-center justify-center text-gray-700 dark:text-gray-300">
                <span>Already have an account?</span>
                <Link
                  className="ms-1 underline underline-offset-2 decoration-dotted cursor-pointer font-bold text-black dark:text-blue-400"
                  href={INTERNAL_PAGES.participant.login}
                >
                  Log in
                </Link>
                .
              </div>
            </form>
          </CardBody>
        </Card>
      </div>

      <BlockedSignupModal
        firstName={getValues("firstName")}
        isOpen={isOpenBlockSignupModal}
        userCountryCode={parsePhoneNumber(userPhoneNumber).countryCode || 0}
        onClickJoin={handleClickJoin}
        onClose={onCloseBlockSignupModal}
      />
    </div>
  );
}

export default CampaignSignupScreen;