"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;
  /**
   * When true, header stays fixed/sticky at the top with Flutter native toolbar height (56px),
   * safe area top padding, and frosted backdrop blur during scroll.
   */
  sticky?: boolean;
};

export function PageHeader({
  className,
  leftButton,
  rightButton,
  enableProfileQuery = true,
  profile: profileProp,
  sticky = false,
}: 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
      style={sticky ? {
        marginInline: "calc(-1 * var(--app-shell-px, 17px))",
        paddingInline: "var(--app-shell-px, 17px)",
      } : undefined}
      className={[
        sticky
          ? "sticky top-0 z-30 pt-[max(12px,calc(var(--safe-top)+6px))] bg-[#F5F5F5] dark:bg-[#1A1A1A] bg-[url('/assets/images/home-Checkups-List.svg')] bg-top bg-no-repeat bg-cover"
          : "pb-3 pt-[max(8px,calc(var(--safe-top)+4px))]",
        className,
      ]
        .filter(Boolean)
        .join(" ")}
    >
      <div className="relative flex h-[56px] w-full max-w-[834px] mx-auto items-center justify-between">
        {leftButton?.className?.includes("hidden") ? (
          <div className="size-10 shrink-0" />
        ) : (
          <NavigationButton icon="back" profile={profile} {...leftButton} />
        )}

        <h1 className="pointer-events-none absolute left-1/2 -translate-x-1/2 font-faminela text-[20px] leading-none text-foreground text-center truncate max-w-[60%]">
          {t["Marriage"] || "Marriage"}
        </h1>

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

export default PageHeader;