"use client";

import { useI18n } from "@/translations/provider";
import { useMarriageProfileQuery } from "@/hooks/marriage/use-profile-main";
import {
  NavigationButton,
  type NavigationButtonProps,
} from "./navigation-button";
import { hasSupportAccess } from "./support-access";

type PageHeaderProps = {
  className?: string;
  /** Props for the left button. Defaults to icon="back". */
  leftButton?: NavigationButtonProps;
  /** Props for the right button. Defaults to icon="support" with support label. */
  rightButton?: NavigationButtonProps;
  /**
   * When false, skip the profile query entirely. Useful on pages where the
   * right button has an explicit onClick and no icon resolution is needed
   * (e.g. Intro's "support" icon that opens a report sheet).
   * Defaults to true.
   */
  enableProfileQuery?: boolean;
  profile?: any;
};

export function PageHeader({
  className,
  leftButton,
  rightButton,
  enableProfileQuery = true,
  profile: profileProp,
}: PageHeaderProps) {
  const { dictionary: t } = useI18n();

  // Only fetch profile when needed for icon resolution (subscription/support
  // visibility depends on profile data). Pages that pass an explicit onClick
  // for the right button can set enableProfileQuery=false to avoid an
  // unnecessary API call (e.g. anonymous Intro).
  const iconFromProp = rightButton?.icon;
  const isCustomRightButton =
    !!rightButton?.onClick ||
    (iconFromProp !== undefined &&
      iconFromProp !== "subscription" &&
      iconFromProp !== "support");

  const needsProfile =
    enableProfileQuery && !rightButton?.onClick && !profileProp;

  const { data: queriedProfile } = useMarriageProfileQuery({
    enabled: needsProfile,
  });

  const profile = profileProp !== undefined ? profileProp : queriedProfile;
  const isMale = profile?.gender === "male";
  const { icon: rightButtonIcon, ...rightButtonRest } = rightButton || {};

  return (
    <header
      className={["flex h-[56px] items-center justify-between", className]
        .filter(Boolean)
        .join(" ")}
    >
      {leftButton?.className?.includes("hidden") ? (
        <div className="size-10 shrink-0" />
      ) : (
        <NavigationButton icon="back" profile={profile} {...leftButton} />
      )}
      <h1 className="font-faminela text-[20px] font-normal text-foreground leading-none select-none">
        {t["Habib Marriage"]}
      </h1>

      {isCustomRightButton ? (
        <NavigationButton
          icon={iconFromProp || "support"}
          profile={profile}
          {...(iconFromProp === "support" ? { iconLabel: t["Support"] } : {})}
          {...rightButtonRest}
        />
      ) : isMale ? (
        <div className="flex items-center gap-2">
          <NavigationButton
            icon="subscription"
            profile={profile}
            iconLabel={t["Subscription Status"] || "Subscription"}
          />
          <NavigationButton
            icon="support"
            profile={profile}
            iconLabel={t["Support"]}
            {...rightButtonRest}
          />
        </div>
      ) : (
        <NavigationButton
          icon="support"
          profile={profile}
          iconLabel={t["Support"]}
          {...rightButtonRest}
        />
      )}
    </header>
  );
}

export default PageHeader;