marriage/src/app/finding-match/finding-match-client.tsx

"use client";

import Image from "next/image";
import { useRouter } from "next/navigation";
import { useEffect, useMemo } from "react";
import { useHardwareBackHandler } from "@/hooks/use-hardware-back-handler";
import { useHabibWebReady } from "@/hooks/use-habib-web-ready";
import { Ic } from "@/icons";
import AdvisorActionsCard from "@/components/Componentes/advisor-actions-card";
import MarriageAdvisorsOverlay, {
  useMarriageAdvisorsOverlay,
} from "@/components/Componentes/marriage-advisors-overlay";
import Button from "@/components/Componentes/button";
import { FixToTheEnd } from "@/components/Componentes/fix-to-the-end";
import { PageBackground } from "@/components/Componentes/page-background";
import PageHeader from "@/components/Componentes/page-header";
import { useMarriageProfileQuery } from "@/hooks/marriage/use-profile-main";
import { useRejectionSeenMutation } from "@/hooks/marriage/use-rejection-seen";
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 FindingMatchClient() {
  const router = useRouter();
  const { dictionary: t, locale } = useI18n();
  const { isAdvisorOpen, openAdvisors, closeAdvisors } =
    useMarriageAdvisorsOverlay();
  const { data: profile, isLoading, isFetched } = useMarriageProfileQuery({
    refetchInterval: 3000,
  });

  const { mutate: markRejectionSeen, isPending: isMarkingSeen } =
    useRejectionSeenMutation();

  useHardwareBackHandler(() => {
    if (isAdvisorOpen) {
      closeAdvisors();
      return true;
    }
    return false; // Hardware back closes the service in Flutter
  });

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

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

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

  const copy = {
    title: t["SEARCH IN PROGRESS"],
    description:
      t[
        "Our system is actively looking for compatible partners based on your criteria. This process requires time and patience. We will notify you immediately once a profile is ready for your review."
      ],
    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"],
    editProfile: t["Edit Profile"],
  };
  const matchImageSrc = "/assets/images/Group 1597880466.svg";
  // This notice belongs exclusively to the gentleman whose accepted request
  // was later rejected by the lady. The API enforces the same rule.
  const unseenRejection =
    profile?.gender === "male" ? profile.unseen_rejection : null;

  return (
    <>
      <PageBackground />

      <PageHeader
        profile={profile}
        sticky
        leftButton={{
          icon: "back",
          onClick: () => {
            if (typeof window !== "undefined" && (window as any).HabibApp) {
              (window as any).HabibApp.postMessage(
                JSON.stringify({ action: "close_service" }),
              );
            } else {
              router.back();
            }
          },
        }}
      />

      <main
        style={{
          minHeight: "calc(100dvh - 56px - max(12px, calc(var(--safe-top) + 6px)))",
          paddingBottom: "calc(90px + var(--safe-bottom))",
        }}
        className="flex min-h-0 flex-1 flex-col justify-between text-center page-slide-enter"
      >
        <section className="mt-20 flex flex-1 flex-col items-center w-full">
          <div className="relative h-[124px] w-[130px]" aria-hidden="true">
            <Image
              src={matchImageSrc}
              alt=""
              fill
              sizes="130px"
              className="object-cover"
              priority
            />
          </div>
          <h1 className="mt-5 group-16 font-bold leading-none tracking-[0.02em] text-[#171717] uppercase">
            {copy.title}
          </h1>
          <p className="mt-3 max-w-[320px] mx-auto text-center group-12 leading-[1.4] font-semibold text-[#747474]">
            {copy.description}
          </p>
          {unseenRejection && (
            <aside
              className="mt-5 w-full rounded-[20px] border border-[#F2465F]/15 bg-white p-4 text-start shadow-[0_10px_28px_rgba(242,70,95,0.08)]"
              aria-live="polite"
              aria-labelledby="rejection-notice-title"
            >
              <div className="flex items-start gap-3">
                <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[#FFF0F2] text-[#F2465F]">
                  <Ic name="alert" className="h-6 w-6" aria-hidden="true" />
                </div>

                <div className="min-w-0 flex-1">
                  <h2
                    id="rejection-notice-title"
                    className="text-[16px] font-bold leading-[1.3] text-[#171717]"
                  >
                    {t["Your request was rejected"]}
                  </h2>

                  <p className="mt-1.5 text-[13px] font-semibold leading-[1.5] text-[#747474]">
                    {
                      t[
                        "Your request was rejected by the lady. You will be introduced to other candidates in the future."
                      ]
                    }
                  </p>
                </div>
              </div>

              <div className="mt-4 w-full">
                <Button
                  isLoading={isMarkingSeen}
                  onClick={() => {
                    markRejectionSeen({
                      rejection_id: unseenRejection.id,
                    });
                  }}
                >
                  {t["Got it"]}
                </Button>
              </div>
            </aside>
          )}{" "}
        </section>

        <div className="mt-auto pt-6 pb-2 w-full">
          <AdvisorActionsCard
            title={copy.advisorTitle}
            description={copy.advisorDescription}
            avatars={advisorAvatars}
            extraCount={7}
            getAdvisorLabel={copy.getAdvisor}
            onGetAdvisor={openAdvisors}
          />
        </div>
      </main>

      {/* Outside <main>: page-slide-enter sets will-change:transform which makes
          main the containing block for position:fixed and narrows the button. */}
      <FixToTheEnd>
        {profile?.can_edit_profile === false ? (
          <div
            className="inline-flex h-[52px] w-full items-center justify-center gap-2 rounded-[9px] border-none bg-[#D1D1D6] dark:bg-[#3D3E42] px-4 text-center text-[#747474] dark:text-[#A1A1A1] shadow-none"
            aria-live="polite"
          >
            <Ic name="lock" aria-hidden="true" className="size-[18px] shrink-0" />
            <span className="group-16 leading-none font-semibold">
              {t["Profile is locked"]}
            </span>
          </div>
        ) : (
          <Button
            variant="dark"
            href={localizePath("/questions-list", locale)}
          >
            <Ic name="pencil" aria-hidden="true" className="size-[18px] shrink-0" />
            <span>{copy.editProfile}</span>
          </Button>
        )}
      </FixToTheEnd>

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