"use client";

import Image from "next/image";
import Link from "next/link";
import { FaPen } from "react-icons/fa6";
import AdvisorActionsCard from "@/components/ui/advisor-actions-card";
import NavigationButton from "@/components/ui/navigation-button";
import { PageBackground } from "@/components/utils/page-background";
import { useEffect } from "react";
import { useRouter } from "next/navigation";
import { useMarriageProfileQuery } from "@/hooks/marriage/use-profile-main";
import { localizePath } from "@/translations/config";
import { useI18n } from "@/translations/provider";
import { getSubmitPath } from "@/lib/get-submit-path";

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

export default function FindingMatchPage() {
  const router = useRouter();
  const { dictionary: t, locale } = useI18n();
  const { data: profile } = useMarriageProfileQuery({
    refetchInterval: 3000,
  });

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

  const copy = t.findingMatch;
  const matchImageSrc =
    profile?.gender === "female"
      ? "/assets/images/Group 15978fdsa80467.svg"
      : "/assets/images/Group 159788fd0467.svg";

  return (
    <>
      <PageBackground />

      <main 
        style={{ paddingBottom: "calc(20px + var(--safe-bottom))" }}
        className="-mx-[17px] flex min-h-screen flex-col px-[23px] pt-[max(16px,calc(var(--safe-top)+8px))] text-center"
      >
        <header className="-mx-[6px] flex items-center justify-between pb-3">
          <NavigationButton icon="back" />
          <h1 className="font-faminela group-16">{t.common.appName}</h1>
          <NavigationButton icon="subscription" iconLabel="Subscribe" />
        </header>

        <section className="flex flex-1 flex-col items-center mt-32">
          <div className="relative h-[124px] w-[130px]" aria-hidden="true">
            <Image
              src={matchImageSrc}
              alt=""
              fill
              sizes="58px"
              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] group-12 leading-[1.35] font-semibold text-[#747474]">
            {copy.description}
          </p>
        </section>

        <AdvisorActionsCard
          title={copy.advisorTitle}
          description={copy.advisorDescription}
          avatars={advisorAvatars}
          extraCount={7}
          getAdvisorLabel={copy.getAdvisor}
          getAdvisorHref="/questions-list"
        />

        <Link
          className="inline-flex mt-3.5 w-full cursor-pointer items-center justify-center rounded-[9px] border-none bg-[#2B2C31] bg-none px-4 py-[17px] text-center text-white shadow-none transition-opacity"
          href={localizePath("/questions-list", locale)}
        >
          <span className="flex min-w-0 items-center justify-center gap-2 text-center group-16 leading-none font-semibold">
            <FaPen aria-hidden="true" className="h-3.5 w-3.5 shrink-0" />
            <span>{copy.editProfile}</span>
          </span>
        </Link>
      </main>
    </>
  );
}