marriage/src/components/Componentes/navigation-button.tsx

"use client";

import Image from "next/image";
import { useRouter } from "next/navigation";
import type { ButtonHTMLAttributes, ReactNode } from "react";
import { useState } from "react";
import { GoArrowLeft } from "react-icons/go";
import { useMarriageProfileQuery } from "@/hooks/marriage/use-profile-main";
import { useI18n } from "@/translations/provider";
import HelpModal from "./help-modal";
import SupportSheet from "./support-sheet";

type NavigationButtonIcon =
  | "back"
  | "support"
  | "close"
  | "info"
  | "document"
  | "subscription"
  | "consultation";
type NavigationButtonVariant = "default" | "transparent";

export type NavigationButtonProps = Omit<
  ButtonHTMLAttributes<HTMLButtonElement>,
  "children"
> & {
  icon: NavigationButtonIcon;
  iconLabel?: string;
  variant?: NavigationButtonVariant;
  helpTitle?: ReactNode;
  helpDescription?: ReactNode;
  helpButtonText?: ReactNode;
  disableHelpModal?: boolean;
};

export function NavigationButton({
  icon,
  iconLabel,
  variant = "default",
  type = "button",
  className,
  helpTitle,
  helpDescription,
  helpButtonText,
  disableHelpModal = false,
  ...props
}: NavigationButtonProps) {
  const router = useRouter();
  const { dictionary: t } = useI18n();
  const [isHelpOpen, setIsHelpOpen] = useState(false);
  const [isSupportOpen, setIsSupportOpen] = useState(false);
  const { data: profile } = useMarriageProfileQuery();

  const isFemale = profile?.gender === "female";
  const hasActiveSubscription = !!profile?.active_subscription;

  // پشتیبانی برای هم خانم‌ها و هم آقایان در هر وضعیتی فعال و در دسترس است
  const hasSupportAccess = true;

  if (icon === "subscription" && isFemale) {
    return <div className="size-10" />;
  }

  if (icon === "support" && !hasSupportAccess) {
    return <div className="size-10" />;
  }

  const iconNode = (() => {
    switch (icon) {
      case "back":
      case "close":
        return (
          <GoArrowLeft
            aria-hidden="true"
            className={`size-6 ${variant === "transparent" ? "text-white" : "text-[#111111]"}`}
          />
        );
      case "support":
      case "consultation":
        return (
          <Image
            src="/assets/images/support.svg"
            alt=""
            aria-hidden="true"
            className="size-6"
            width={24}
            height={24}
          />
        );
      case "info":
        return (
          <Image
            src="/assets/images/cuida_history-outlfdsaine.svg"
            alt=""
            aria-hidden="true"
            className="size-6"
            width={24}
            height={24}
          />
        );
      case "document":
        return (
          <Image
            src="/assets/images/Frame 1597880477.svg"
            alt=""
            aria-hidden="true"
            className="size-6"
            width={24}
            height={24}
          />
        );
      case "subscription":
        return (
          <Image
            src={
              hasActiveSubscription
                ? "/assets/images/diamond-color.png"
                : "/assets/images/icon-park-outline_diamond.svg"
            }
            alt=""
            aria-hidden="true"
            className="size-6"
            width={24}
            height={24}
          />
        );
      default:
        return null;
    }
  })();

  const isHelpTrigger =
    icon === "info" ||
    icon === "document" ||
    helpTitle !== undefined ||
    helpDescription !== undefined;

  const resolvedHelpDescription =
    helpDescription ??
    (icon === "document"
      ? (t.questions as any)?.testIntroDisclaimer
      : undefined);

  return (
    <>
      <button
        {...props}
        type={type}
        aria-label={
          iconLabel ??
          (icon === "back"
            ? t.common.back
            : icon === "consultation"
              ? (t.common as any).consultation
              : icon)
        }
        onClick={(event) => {
          props.onClick?.(event);

          if (!event.defaultPrevented) {
            if (isHelpTrigger && !disableHelpModal) {
              setIsHelpOpen(true);
            } else if (!props.onClick) {
              if (icon === "back") {
                if (typeof window !== "undefined" && (window as any).HabibApp) {
                  (window as any).HabibApp.postMessage(
                    JSON.stringify({ action: "close_service" }),
                  );
                } else {
                  router.back();
                }
              } else if (icon === "close") {
                router.back();
              } else if (icon === "support") {
                setIsSupportOpen(true);
              }
            }
          }
        }}
        className={[
          "inline-flex items-center justify-center rounded-[15px] p-2 cursor-pointer transition-transform active:scale-95",
          variant === "transparent" ? "bg-white/20" : "bg-[#FFFFFF]",
          className,
        ]
          .filter(Boolean)
          .join(" ")}
      >
        {iconNode}
      </button>

      {isHelpTrigger && !disableHelpModal ? (
        <HelpModal
          isOpen={isHelpOpen}
          onClose={() => setIsHelpOpen(false)}
          title={helpTitle}
          description={resolvedHelpDescription}
          buttonText={helpButtonText}
        />
      ) : null}

      <SupportSheet
        isOpen={isSupportOpen}
        onClose={() => setIsSupportOpen(false)}
      />
    </>
  );
}

export default NavigationButton;