"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import Image from "next/image";
import { SiteHeaderNav } from "./site-header-nav";
import { HeaderLottie } from "./header-lottie";
import { cn } from "@/lib/utils";

type SiteHeaderFrameProps = {
  isLoggedIn: boolean;
  /** On home: transparent over hero, solid after scrolling past hero */
  homeSticky?: boolean;
  /** Static transparent overlay (other pages if needed) */
  overlay?: boolean;
  /** Transparent header with default (dark) nav — for light full-page backgrounds */
  transparent?: boolean;
  /** Transparent at top, solid after the page header scrolls away */
  transparentScroll?: boolean;
};

export function SiteHeaderFrame({
  isLoggedIn,
  homeSticky = false,
  overlay = false,
  transparent = false,
  transparentScroll = false,
}: SiteHeaderFrameProps) {
  const [pastHero, setPastHero] = useState(false);
  const [pastScrollTarget, setPastScrollTarget] = useState(false);

  useEffect(() => {
    if (!homeSticky) return;
    const hero = document.getElementById("home-hero");
    if (!hero) return;

    const observer = new IntersectionObserver(
      ([entry]) => setPastHero(!entry.isIntersecting),
      { threshold: 0, rootMargin: "-1px 0px 0px 0px" }
    );
    observer.observe(hero);
    return () => observer.disconnect();
  }, [homeSticky]);

  useEffect(() => {
    if (!transparentScroll) return;
    const target = document.getElementById("select-header-sentinel");
    if (!target) return;

    const observer = new IntersectionObserver(
      ([entry]) => setPastScrollTarget(!entry.isIntersecting),
      { threshold: 0, rootMargin: "-1px 0px 0px 0px" }
    );
    observer.observe(target);
    return () => observer.disconnect();
  }, [transparentScroll]);

  const isOverlay = homeSticky ? !pastHero : overlay;
  const isTransparentScrollTop = transparentScroll && !pastScrollTarget;
  const showLottie = !homeSticky && !overlay && !transparent && !transparentScroll;

  return (
    <header
      className={cn(
        "z-50 w-full transition-colors duration-300",
        homeSticky
          ? pastHero
            ? "fixed inset-x-0 top-0 border-b border-border/80 bg-[#fbf7f5]/95 shadow-soft backdrop-blur-md supports-[backdrop-filter]:bg-[#fbf7f5]/90"
            : "absolute inset-x-0 top-0 border-transparent bg-transparent shadow-none"
          : overlay
            ? "absolute inset-x-0 top-0 border-transparent bg-transparent shadow-none"
            : transparent || isTransparentScrollTop
              ? "sticky top-0 border-transparent bg-transparent shadow-none"
              : "sticky top-0 border-b border-border/80 bg-[#fbf7f5]/95 shadow-soft backdrop-blur-md supports-[backdrop-filter]:bg-[#fbf7f5]/90"
      )}
    >
      <div className="container mx-auto flex items-center justify-between gap-3 px-4 py-3 md:gap-4 md:py-4">
        <Link
          href="/"
          className="flex min-w-0 shrink items-center gap-2 transition-opacity duration-200 hover:opacity-80"
        >
          <Image
            src="/logo.png"
            alt="فال تاروت"
            width={96}
            height={96}
            className={cn(
              "h-auto w-auto max-w-[min(42vw,9rem)] object-contain md:max-w-none",
              isOverlay ? "h-16 md:h-20" : "h-20 md:h-24"
            )}
            priority
            unoptimized
          />
        </Link>
        <SiteHeaderNav
          isLoggedIn={isLoggedIn}
          variant={isOverlay ? "overlay" : "default"}
        />
      </div>
      {showLottie && <HeaderLottie />}
    </header>
  );
}