import * as React from "react"

import { SiteHeader, type SiteHeaderProps } from "@/components/site-header"
import { SidebarInset } from "@/components/ui/sidebar"
import { cn } from "@/lib/utils"

/** Default max width for primary hub pages (Placements, Team, Compliance, …). */
export const PRIMARY_PAGE_MAX_WIDTH_CLASS = "max-w-[1440px]"

export interface PrimaryPageTemplateProps {
  /** Optional chrome before `SiteHeader` (e.g. `RotationsPanelActivator`, `SidebarAutoCollapse`). */
  beforeSiteHeader?: React.ReactNode
  /** Top bar — breadcrumbs and Ask Leo. Omit for focused flows (e.g. full-page form with no chrome). */
  siteHeader?: SiteHeaderProps
  /** Page body — typically `*Client` with `ListPageTemplate` inside. */
  children: React.ReactNode
  /** Override default `max-w-[1440px]` for narrower shells (patterns showcase, detail routes). */
  maxWidthClassName?: string
  /** Extra classes on the `@[container]main` content column. */
  contentClassName?: string
  /** Extra classes on the flex wrapper between `SiteHeader` and the content column. */
  bodyClassName?: string
  /** Optional extra classes on `SidebarInset` (advanced — rarely needed). */
  sidebarInsetClassName?: string
  /**
   * New question (`form-inspector`) only — viewport-height inset with scroll inside
   * builder/inspector cards. Hub routes scroll inside `[data-page-scroll]` so
   * `SiteHeader` stays pinned (window scroll breaks sticky under shell overflow).
   */
  containScroll?: boolean
  /**
   * Optional full-page canvas behind `SiteHeader` + body (e.g. FigJam dot grid on New question).
   * Renders as `absolute inset-0` on `SidebarInset` — not inside scroll panes or cards.
   */
  pageCanvas?: React.ReactNode
  /**
   * When false, the `@container/main` column uses `min-h-0` instead of
   * `min-h-full`. Short marketing-style pages (products home) should not
   * stretch to the scrollport — it makes bottom inset hard to reach at max
   * scroll when combined with flex scroll owners.
   */
  contentFillViewport?: boolean
}

/**
 * Primary page shell — same composition as Placements / Team / Compliance routes:
 * `SidebarInset` (single `main` landmark) + `SiteHeader` + max-width content column.
 *
 * Use with `ListPageTemplate` + data client per `AGENTS.md` §6.3 and `docs/data-views-pattern.md`.
 */
export function PrimaryPageTemplate({
  beforeSiteHeader,
  siteHeader,
  children,
  maxWidthClassName = PRIMARY_PAGE_MAX_WIDTH_CLASS,
  contentClassName,
  bodyClassName,
  containScroll = false,
  pageCanvas,
  sidebarInsetClassName,
  contentFillViewport = true,
}: PrimaryPageTemplateProps) {
  return (
    <SidebarInset
      id="main-content"
      tabIndex={-1}
      className={cn(
        pageCanvas && "relative",
        "flex min-h-0 flex-1 flex-col overflow-hidden h-full",
        containScroll &&
          "max-h-[calc(100svh-0.75rem)] px-2 pb-4 [--composer-card-shadow-inset:0.75rem]",
        sidebarInsetClassName,
      )}
    >
      {pageCanvas}
      {beforeSiteHeader}
      {siteHeader ? <SiteHeader {...siteHeader} /> : null}
      <div
        data-page-scroll=""
        className={cn(
          "flex min-h-0 min-w-0 flex-1 flex-col outline-none",
          containScroll
            ? "relative z-[1] min-h-0 flex-1 overflow-hidden py-1"
            : // `overflow-x-clip` (not `hidden`) — `hidden` makes this a dual-axis
              // scrollport and breaks `position: sticky` for hub view tabs /
              // floating table heads in Chromium.
              "overflow-y-auto overflow-x-clip",
          bodyClassName,
        )}
      >
        <div
          className={cn(
            // Block formatting context — not `flex flex-col`. Sticky view tabs
            // as flex items stretch/fail inconsistently across hubs (Library vs
            // Tokens) even with the same template. `min-h-full` fills short pages;
            // tall hubs grow `[data-page-scroll]` scrollHeight.
            "@container/main mx-auto w-full min-w-0",
            containScroll
              ? "flex min-h-0 flex-1 flex-col"
              : contentFillViewport
                ? "block min-h-full"
                : "block min-h-0",
            maxWidthClassName,
            contentClassName,
          )}
        >
          {children}
        </div>
      </div>
    </SidebarInset>
  )
}