"use client"

import { DOCS_PAGE_GAP_PX } from "@/lib/drive/docs-page-layout-constants"
import type { DocPageLayout } from "@/lib/drive/doc-page-setup"
import {
  pageFooterGeometry,
  pageHeaderGeometry,
} from "@/lib/drive/docs-header-footer-layout"

/** Hides body text that bleeds into header/footer margin bands on each page. */
export function DocsBodyMarginMasks({
  pageCount,
  pageLayout,
  pageWidth,
  pageHeight,
  pageColor,
  pageRegionHeights,
}: {
  pageCount: number
  pageLayout: DocPageLayout
  pageWidth: number
  pageHeight: number
  pageColor: string
  pageRegionHeights?: Record<string, number>
}) {
  return (
    <>
      {Array.from({ length: pageCount }, (_, index) => {
        const pageTop = index * (pageHeight + DOCS_PAGE_GAP_PX)
        const header = pageHeaderGeometry(pageLayout, pageTop, index)
        const footer = pageFooterGeometry(pageLayout, pageTop, pageHeight, index)
        const headerHeight =
          pageRegionHeights?.[`header-${index}`] ?? header.zoneHeight
        const footerHeight =
          pageRegionHeights?.[`footer-${index}`] ?? footer.zoneHeight
        const headerBottom = header.zoneTop + headerHeight
        const footerTop = footer.zoneBottom - footerHeight
        return (
          <div key={`body-mask-${index}`} aria-hidden>
            <div
              className="pointer-events-none absolute z-[15]"
              style={{
                top: pageTop,
                left: 0,
                width: pageWidth,
                height: headerBottom,
                backgroundColor: pageColor,
              }}
            />
            <div
              className="pointer-events-none absolute z-[15]"
              style={{
                top: footerTop,
                left: 0,
                width: pageWidth,
                height: pageTop + pageHeight - footerTop,
                backgroundColor: pageColor,
              }}
            />
          </div>
        )
      })}
    </>
  )
}