"use client";

import { Suspense, useEffect, useState } from "react";
import { useSearchParams } from "next/navigation";

import { useLocaleRouter } from "@/app/lib/useLocaleRouter";
import Link from "@/app/components/LocaleLink";
import Image from "next/image";
import Header from "@/app/components/layout/Header";
import Footer from "@/app/components/layout/Footer";
import { useForm } from "react-hook-form";
import toast from "react-hot-toast";
import PhoneInput from "react-phone-input-2";
import "react-phone-input-2/lib/style.css";

import { registerAstrologer,
  friendlyErrorMessage,
} from "@/app/lib/astrologer";
import { useLanguage } from "@/app/context/LanguageContext";

interface RegisterFormData {
  name: string;
  email: string;
  countryCode: string;
  mobile: string;
}

/*
* Sign-in is mobile-OTP only, so this form has no password field — but
* the register API's `password` is required server-side. This produces
* a value that satisfies that requirement without the astrologer ever
* seeing or setting one (mirrors app/auth/RegisterForm.tsx's fix for
* the same end-user constraint).
*/
function generateRandomPassword() {
  const random = crypto.randomUUID().replace(/-/g, "");

  return `Aa1!${random.slice(0, 20)}`;
}

function RegisterContent() {
  const router = useLocaleRouter();
  const params = useSearchParams();
  const { t } = useLanguage();

  const prefillMobile = params.get("mobile") || "";

  const [loading, setLoading] = useState(false);

  const {
    register,
    handleSubmit,
    watch,
    setValue,
    formState: { errors },
  } = useForm<RegisterFormData>({
    defaultValues: {
      countryCode: "91",
      mobile: prefillMobile ? `91${prefillMobile}` : "",
    },
  });

  useEffect(() => {
    register("mobile", {
      required: t("astrologerAuth.register.mobileRequired", "Mobile number is required"),
      minLength: {
        value: 10,
        message: t("astrologerAuth.register.mobileInvalid", "Enter a valid mobile number"),
      },
    });

    register("countryCode", {
      required: true,
    });
  }, [register, t]);

  const onSubmit = async (data: RegisterFormData) => {
    try {
      setLoading(true);

      const mobile = data.mobile.startsWith(data.countryCode)
        ? data.mobile.slice(data.countryCode.length)
        : data.mobile;

      const response = await registerAstrologer({
        name: data.name,
        email: data.email,
        mobile,
        country_code: `+${data.countryCode}`,
        password: generateRandomPassword(),
        device_type: "web",
        device_token: "browser-device",
      });

      if (response.success) {
        toast.success(t("astrologerAuth.register.toastRegisterSuccess", "Registration successful"));

        const astrologerId =
          response.data?.user_id ??
          response.data?.id ??
          response.user?.id ??
          response.id;

        router.push(
          `/astrologer/verify-mobile?mobile=${encodeURIComponent(
            mobile
          )}&email=${encodeURIComponent(
            data.email
          )}&countryCode=${data.countryCode}&astrologerId=${
            astrologerId ?? ""
          }`
        );
      } else {
        toast.error(friendlyErrorMessage(response.message, t("astrologerAuth.register.toastRegisterFailedFallback", "Registration failed")));
      }
    } catch (error: any) {
      toast.error(
        error.response?.data?.message ?? t("astrologerAuth.register.toastRegisterErrorFallback", "Something went wrong.")
      );
    } finally {
      setLoading(false);
    }
  };

  return (
    <>
    <Header />
    <section className="d-flex align-items-center min-vh-100" style={{ paddingTop: "120px", paddingBottom: "120px" }}>
      <div className="container">
        <div className="row justify-content-center">
          <div className="col-lg-6">
            <div className="card card-bg-primary border-0 shadow rounded-4">
              <div className="card-body p-4 p-md-5 text-white">
                <h2 className="text-center mb-2">
                  {t("astrologerAuth.register.headingPrefix", "Register as an")}{" "}
                  <span className="text-warning">{t("astrologerAuth.register.headingHighlight", "astrologer")}</span>
                </h2>

                {prefillMobile && (
                  <p className="text-center terms-text-color mb-4">
                    {t("astrologerAuth.register.prefillNoticePrefix", "We couldn't find an astrologer account for")}{" "}
                    <strong>{prefillMobile}</strong> {t("astrologerAuth.register.prefillNoticeSuffix", "— let's create one.")}
                  </p>
                )}

                <form onSubmit={handleSubmit(onSubmit)}>
                  <div className="mb-3">
                    <label className="form-label fw-semibold">
                      {t("astrologerAuth.register.fullNameLabel", "Full Name")}
                    </label>

                    <input
                      className={`form-control form-control-lg ${
                        errors.name ? "is-invalid" : ""
                      }`}
                      {...register("name", {
                        required: t("astrologerAuth.register.fullNameRequired", "Full name is required"),
                      })}
                    />

                    {errors.name && (
                      <div className="invalid-feedback">
                        {errors.name.message}
                      </div>
                    )}
                  </div>

                  <div className="mb-3">
                    <label className="form-label fw-semibold">
                      {t("astrologerAuth.register.emailLabel", "Email")}
                    </label>

                    <input
                      type="email"
                      className={`form-control form-control-lg ${
                        errors.email ? "is-invalid" : ""
                      }`}
                      {...register("email", {
                        required: t("astrologerAuth.register.emailRequired", "Email is required"),
                      })}
                    />

                    {errors.email && (
                      <div className="invalid-feedback">
                        {errors.email.message}
                      </div>
                    )}
                  </div>

                  <div className="mb-3">
                    <label className="form-label fw-semibold">
                      {t("astrologerAuth.register.mobileLabel", "Mobile Number")}
                    </label>

                    <PhoneInput
                      country="in"
                      value={watch("mobile")}
                      onChange={(value, country: any) => {
                        setValue("mobile", value, {
                          shouldValidate: true,
                        });

                        setValue(
                          "countryCode",
                          country.dialCode
                        );
                      }}
                      inputClass={`phone-react-input ${
                        errors.mobile ? "is-invalid" : ""
                      }`}
                      buttonClass="phone-react-btn"
                    />

                    {errors.mobile && (
                      <div className="invalid-feedback d-block">
                        {errors.mobile.message}
                      </div>
                    )}
                  </div>

                  <button
                    type="submit"
                    className="btn btn-primary py-3 w-100"
                    disabled={loading}
                  >
                    {loading
                      ? t("astrologerAuth.register.submittingButton", "Creating account...")
                      : t("astrologerAuth.register.submitButton", "Create account")}
                  </button>
                </form>

                <p className="text-center mt-4 mb-0 terms-text-color">
                  {t("astrologerAuth.register.signinPrompt", "Already registered as an astrologer?")}{" "}
                  <Link
                    href="/astrologer/signin"
                    className="fw-semibold"
                  >
                    {t("astrologerAuth.register.signinLink", "Sign in")}
                  </Link>
                </p>
              </div>
            </div>

            <div className="card card-bg-primary border-0 rounded-4 mt-4">
              <div className="card-body p-4 text-white">
                <h5 className="mb-3">{t("astrologerAuth.register.nextStepsHeading", "What happens next")}</h5>

                <div className="d-flex gap-3 py-2 border-bottom border-secondary-subtle">
                  <span className="astrologer-step-icon">1</span>
                  <div>
                    <div className="fw-semibold">
                      {t("astrologerAuth.register.step1Title", "Verify your mobile & email")}
                    </div>
                    <small className="terms-text-color">
                      {t("astrologerAuth.register.step1Subtitle", "Six-digit codes, valid a few minutes.")}
                    </small>
                  </div>
                </div>

                <div className="d-flex gap-3 py-2 border-bottom border-secondary-subtle">
                  <span className="astrologer-step-icon">2</span>
                  <div>
                    <div className="fw-semibold">
                      {t("astrologerAuth.register.step2Title", "Complete your profile")}
                    </div>
                    <small className="terms-text-color">
                      {t("astrologerAuth.register.step2Subtitle", "Skills, rates, bank and documents.")}
                    </small>
                  </div>
                </div>

                <div className="d-flex gap-3 py-2">
                  <span className="astrologer-step-icon">3</span>
                  <div>
                    <div className="fw-semibold">
                      {t("astrologerAuth.register.step3Title", "Verification and review")}
                    </div>
                    <small className="terms-text-color">
                      {t("astrologerAuth.register.step3Subtitle", "Our team reviews your submission.")}
                    </small>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <Footer />
    </>
  );
}

export default function AstrologerRegisterPage() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <RegisterContent />
    </Suspense>
  );
}