marriage/src/app/request-sent/request-sent-client.tsx

"use client";

import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useEffect, useMemo, useState } from "react";
import { useHabibWebReady } from "@/hooks/use-habib-web-ready";
import { LoadingThreeDot } from "@/components/Componentes/loading-three-dot";
import AdvisorActionsCard from "@/components/Componentes/advisor-actions-card";
import MarriageAdvisorsOverlay, {
  useMarriageAdvisorsOverlay,
} from "@/components/Componentes/marriage-advisors-overlay";
import MatchProfileOverlay, {
  useMatchProfileOverlay,
} from "@/components/Componentes/match-profile-overlay";
import PageHeader from "@/components/Componentes/page-header";
import { PageBackground } from "@/components/Componentes/page-background";
import { useMarriageProfileQuery } from "@/hooks/marriage/use-profile-main";
import { getSubmitPath } from "@/lib/get-submit-path";
import { localizePath } from "@/translations/config";
import { useI18n } from "@/translations/provider";

const advisorAvatars = [
  { id: "advisor-primary", src: "/assets/images/Avatar Image.png" },
  { id: "advisor-secondary", src: "/assets/images/Avatar Image.png" },
  { id: "advisor-tertiary", src: "/assets/images/Avatar Image.png" },
];

export default function RequestSentClient() {
  const router = useRouter();
  const { dictionary: t, locale } = useI18n();
  const { isAdvisorOpen, openAdvisors, closeAdvisors } =
    useMarriageAdvisorsOverlay();
  const { isProfileOpen, openProfile, closeProfile } =
    useMatchProfileOverlay();
  const [isOpeningProfile, setIsOpeningProfile] = useState(false);
  const { data: profile, isLoading } = useMarriageProfileQuery({
    refetchInterval: 3000,
  });

  useEffect(() => {
    if (!profile) {
      return;
    }
    const targetPath = getSubmitPath(profile);
    if (targetPath !== "/request-sent") {
      router.replace(localizePath(targetPath, locale));
    }
  }, [profile, locale, router]);

  // Signal Flutter to lift its loading cover immediately with 0ms latency.
  useHabibWebReady(true);

  const isRedirecting = useMemo(() => {
    if (!profile) return false;
    return getSubmitPath(profile) !== "/request-sent";
  }, [profile]);

  const handleOpenProfile = () => {
    if (profile) {
      openProfile();
    } else {
      setIsOpeningProfile(true);
    }
  };

  useEffect(() => {
    if (isOpeningProfile && profile) {
      setIsOpeningProfile(false);
      openProfile();
    }
  }, [isOpeningProfile, profile, openProfile]);

  const copy = {
    advisorTitle: t["Get an advisor"],
    advisorDescription:
      t[
        "Not sure what to do next? Our psychology section is here to guide you at every step."
      ],
    getAdvisor: t["Get Advisor"],
  };
  const isFemaleProfile = profile?.gender === "female";
  const requestSentCopy = {
    title: t["Request Sent"],
    description: isFemaleProfile
      ? t[
          "Your request has been sent. Once the gentleman reviews your request, you will be notified."
        ] ||
        "درخواست شما ارسال شد. پس از بررسی درخواست شما توسط آقا، به شما اطلاع‌رسانی خواهد شد."
      : t[
          "Your request has been sent. Once the lady reviews your request, you will be notified."
        ],
    matchProfile: t["View More Details"],
    profileLocked: t["Profile is locked"],
  };

  return (
    <>
      <PageBackground />

      <PageHeader profile={profile} sticky />

      <main
        style={{ paddingBottom: "calc(40px + var(--safe-bottom))" }}
        className="flex min-h-0 flex-1 flex-col text-center"
      >
        <div className="flex flex-1 flex-col justify-between gap-16 pt-8">
          <section className="flex flex-col items-center">
            {/* Illustration */}
            <div className="relative mt-6 flex items-center justify-center">
              {/* soft glow */}
              <div className="absolute h-[115px] w-[115px] rounded-full bg-[#FF5C7D]/10 blur-xl" />

              <div className="relative z-10">
                <Image
                  src="/assets/images/Group 15978804fdasf68.svg"
                  alt="Request sent"
                  width={131}
                  height={125}
                  priority
                />
              </div>
            </div>

            {/* Title */}
            <h1 className="mt-8 text-[20px] leading-none font-black tracking-[0.03em] text-[#171717] uppercase">
              {requestSentCopy.title}
            </h1>

            {/* Description */}
            <p className="mt-5 max-w-[330px] text-[15px] leading-[1.6] font-medium text-[#777777]">
              {requestSentCopy.description}
            </p>

            {/* Button */}
            <button
              type="button"
              disabled={isOpeningProfile && isLoading}
              onClick={handleOpenProfile}
              className="mt-12 w-full max-w-[300px] cursor-pointer transition-transform active:scale-[0.97]"
            >
              <div className="flex items-center justify-center min-h-[54px] rounded-[14px] bg-gradient-to-r from-[#FF6687] to-[#FF456C] px-6 py-4 text-[16px] font-bold text-white shadow-sm hover:opacity-95">
                {isOpeningProfile && isLoading ? (
                  <LoadingThreeDot />
                ) : (
                  requestSentCopy.matchProfile
                )}
              </div>
            </button>
          </section>

          <div className="space-y-8 pb-20">
            <AdvisorActionsCard
              title={copy.advisorTitle}
              description={copy.advisorDescription}
              avatars={advisorAvatars}
              extraCount={7}
              getAdvisorLabel={copy.getAdvisor}
              onGetAdvisor={openAdvisors}
            />

            <section className="pointer-events-none fixed bottom-0 left-1/2 z-20 w-full max-w-[834px] -translate-x-1/2 bg-[#F5F5F5]">
              <div
                style={{ paddingBottom: "calc(20px + var(--safe-bottom))" }}
                className="pointer-events-auto px-[17px] md:px-8 pt-3"
              >
                <div className="flex items-center justify-center w-full gap-1 rounded-[11px] bg-[#DBDBDB] py-3.5">
                  <Image
                    src={"/assets/images/material-symbols_lock.svg"}
                    width={24}
                    height={24}
                    alt="lock"
                  />
                  <h2 className="group-14 leading-none font-semibold text-[#747474]">
                    {requestSentCopy.profileLocked}
                  </h2>
                </div>
              </div>
            </section>
          </div>
        </div>
      </main>

      <MarriageAdvisorsOverlay
        open={isAdvisorOpen}
        onClose={closeAdvisors}
      />

      <MatchProfileOverlay
        open={isProfileOpen}
        profile={profile}
        onClose={closeProfile}
      />
    </>
  );
}