import type { ReactNode } from "react";
import { HEADER_LAYOUTS, HEADER_PREVIEWS, FOOTER_LAYOUTS } from "@/components/site-layouts";
import { useSiteSettings } from "@/contexts/SiteSettingsContext";

type SiteChromeFrameProps = {
  children: ReactNode;
  /** Use header preview variants safe for admin (no auth actions). */
  previewMode?: boolean;
  className?: string;
  /** When false, omit the global Site Settings footer (e.g. page already has a Footer block). */
  showGlobalFooter?: boolean;
};

/**
 * Renders the global site header/footer from Site Settings around page content.
 * Used in the page builder and component previews so they match live/preview pages.
 */
export function SiteChromeFrame({
  children,
  previewMode = false,
  className,
  showGlobalFooter = true,
}: SiteChromeFrameProps) {
  const { settings } = useSiteSettings();

  const headerKey = settings.header_layout;
  const footerKey = settings.footer_layout;

  const HeaderComponent = previewMode
    ? (HEADER_PREVIEWS[headerKey] ?? HEADER_PREVIEWS.default)
    : (HEADER_LAYOUTS[headerKey]?.Component ?? HEADER_LAYOUTS.default.Component);

  const FooterComponent =
    FOOTER_LAYOUTS[footerKey]?.Component ?? FOOTER_LAYOUTS.default.Component;

  return (
    <div
      key={`${headerKey}-${footerKey}-${showGlobalFooter ? "global-footer" : "no-global-footer"}`}
      className={className ?? "site-chrome-frame flex flex-col min-h-0 bg-background"}
    >
      <div className="site-chrome-frame-header shrink-0 border-b border-border">
        <HeaderComponent />
      </div>
      <div className="site-chrome-frame-body flex-1 min-h-0">{children}</div>
      {showGlobalFooter ? (
        <div className="site-chrome-frame-footer shrink-0 border-t border-border mt-auto">
          <FooterComponent />
        </div>
      ) : null}
    </div>
  );
}