"use client";

import { usePathname } from "next/navigation";
import { HeaderScrollShell } from "@/components/HeaderScrollShell";
import { BANNER_HEIGHT } from "@/lib/layoutMetrics";

// Eckklammern + HeaderScrollShell brauchen den EFFEKTIVEN bannerEnabled-Wert
// (Business-Einstellung UND nicht auf /admin), um korrekt zu wissen, ob über
// ihnen noch ein Banner sitzt. SiteHeader (async Server Component) kann
// diesen Wert nicht mehr selbst reaktiv berechnen — [locale]/layout.tsx wird
// bei einer client-seitigen Navigation zwischen Geschwister-Routen NICHT neu
// ausgeführt (Next.js "Partial Rendering" behält das Layout bei), ein dort
// einmalig aus x-pathname berechnetes isAdminRoute bliebe also auf dem Stand
// der ERSTEN in der Session geladenen Seite hängen (Fund vom Nutzer,
// 21.09.2026: Admin-Nav überschneidet sich weiterhin mit der Site-Nav, auch
// nach Erhöhung von HEADER_HEIGHT — lag nicht an der Höhe, sondern daran,
// dass der Wert bei einem normalen Link-Klick in den Admin-Bereich praktisch
// nie neu berechnet wurde). usePathname() aus next/navigation ist dagegen
// reaktiv und liefert bei jeder Navigation, auch client-seitig, den
// aktuellen Pfad — deshalb dieser dünne Client-Wrapper.
//
// Die Eckklammern bleiben bewusst GESCHWISTER von HeaderScrollShell, nicht
// seine Kinder — HeaderScrollShell setzt beim Scrollen backdrop-filter auf
// den <header>, und jedes Element mit aktivem filter/backdrop-filter wird
// laut CSS-Spec selbst zum Bezugsrahmen für position:fixed-Nachfahren. Lägen
// die Klammern als Kinder drin, sprängen sie beim Einblenden des
// Scroll-Hintergrunds nach unten (ursprünglicher Fund vom Nutzer, 08.09.2026).
export function HeaderPositioning({
  bannerEnabled,
  children,
}: {
  bannerEnabled?: boolean;
  children: React.ReactNode;
}) {
  const pathname = usePathname() || "";
  const isAdminRoute = pathname.split("/")[2] === "admin";
  const effectiveBannerEnabled = Boolean(bannerEnabled) && !isAdminRoute;
  const cornerTop = `calc(${effectiveBannerEnabled ? BANNER_HEIGHT : "0px"} + 1.5rem)`;

  return (
    <>
      <span className="rk-corner" data-pos="tl" style={{ position: "fixed", top: cornerTop, zIndex: 40 }} />
      <span className="rk-corner" data-pos="tr" style={{ position: "fixed", top: cornerTop, zIndex: 40 }} />
      <HeaderScrollShell style={{ top: effectiveBannerEnabled ? BANNER_HEIGHT : 0 }}>
        {children}
      </HeaderScrollShell>
    </>
  );
}