"use client"

/**
 * PageHeader — Full-width content area header.
 *
 * Sits at the top of a page's main content, BELOW the breadcrumb / topbar.
 * Uses Ivy Presto (Adobe Fonts) for the title via the `--font-heading`
 * CSS variable.
 *
 * **Variant `collaboration`** — optional access line + collaborator faces
 * (or **Add collaborator** when the roster is empty) ahead of the primary
 * `actions` slot. The full **Invite people** flow lives in the consuming
 * page's `actions` overflow menu — this primitive only renders the face row.
 *
 * WCAG 2.1 AA:
 *  - `<h1>` landmark — one per page (WCAG 1.3.1)
 *  - Sufficient colour contrast >= 4.5:1 on title + subtitle (SC 1.4.3)
 *  - Face row: `role="group"` + aggregate `aria-label`; each face has a
 *    `Tooltip` name (SC 4.1.2)
 *
 * Promotion note: this file lived at `apps/web/components/page-header.tsx`
 * until 2026-05-20. It moved into `@exxatdesignux/ui` so other apps (and
 * future docs sites) can compose hub headers without duplicating the
 * collaboration variant, h1 styling, or face-row a11y wiring. The
 * `CollaboratorAccessRole` union is duplicated here as a narrow string
 * literal so the primitive stays free of `apps/web/lib/` couplings — the
 * authoritative role labels / icons / capability helpers continue to live
 * in `apps/web/lib/collaborator-access.ts`.
 */

import * as React from "react"
import { createPortal } from "react-dom"

import { usePageHeaderScrollActionsSlot, usePageHeaderScrollRelocateEnabled } from "../shell/page-header-scroll-actions"
import { useScrollStuck } from "../../hooks/use-scroll-stuck"

import { Avatar, AvatarFallback, AvatarImage } from "./avatar"
import { Button } from "./button"
import {
  RESPONSIVE_ACTIONS_COMPACT_MAX_WIDTH_PX,
  RESPONSIVE_ACTIONS_MAX_VISIBLE,
  RESPONSIVE_ACTIONS_OVERFLOW_ONLY_MAX_WIDTH_PX,
  ResponsiveActionRow,
  useResponsiveActionWidth,
} from "./responsive-action-row"
import type { ResponsiveAction } from "./responsive-action-row"
import { Separator } from "./separator"
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "./tooltip"
import { cn } from "../../lib/utils"

/**
 * Library access role for shared hubs. Mirrors
 * `apps/web/lib/collaborator-access.ts > CollaboratorAccessRole` — kept
 * structurally identical so the apps/web type and this type are mutually
 * assignable wherever consumers pass collaborator rosters to `PageHeader`.
 */
export type PageHeaderCollaboratorAccessRole =
  | "owner"
  | "editor"
  | "commenter"
  | "viewer"

export type PageHeaderVariant = "default" | "collaboration"

/**
 * The action-row limits now live with the row itself
 * (`responsive-action-row.tsx`), since the table toolbar answers to the same
 * three. Re-exported under the old names because consumers and tests import
 * them from here.
 */
export const PAGE_HEADER_MAX_VISIBLE_ACTIONS = RESPONSIVE_ACTIONS_MAX_VISIBLE
export const PAGE_HEADER_COMPACT_ACTIONS_MAX_WIDTH_PX =
  RESPONSIVE_ACTIONS_COMPACT_MAX_WIDTH_PX
export const PAGE_HEADER_OVERFLOW_ONLY_MAX_WIDTH_PX =
  RESPONSIVE_ACTIONS_OVERFLOW_ONLY_MAX_WIDTH_PX

/**
 * Type for the page `<h1>`: the display serif, and the only place it is used.
 *
 * 18 rising to 20, down from 20 rising to 24. A page title is the one heading a
 * reader never has to hunt for, since it sits alone at the top of the column with
 * the actions opposite it, so it was buying prominence it did not need and paying
 * for it in the space between itself and the first row of content. Ivy's large
 * x-height means it still reads a size above the surrounding sans at 18.
 *
 * Exported because the record switcher on detail routes renders its own `<h1>`
 * (`PageTitleRecordSwitcher`) and had this string copied out by hand, which is two
 * places for one type scale to drift, and the two sit on sibling routes where the
 * difference would show as a title that changes size when you drill in.
 */
export const PAGE_TITLE_TYPE_CLASS =
  "text-lg font-semibold leading-tight tracking-tight text-foreground sm:text-xl font-heading"

/**
 * A page action. Structurally identical to the shared {@link ResponsiveAction}
 * the table toolbar takes, so a command can be moved between the two without
 * being rewritten. Field-level docs live on that type.
 */
export type PageHeaderActionItem = ResponsiveAction

export interface PageHeaderCollaborator {
  id: string
  name: string
  imageUrl?: string | null
  initials?: string
  email?: string
  access?: PageHeaderCollaboratorAccessRole
  /** Org / directory role tags (e.g. Faculty, Program coordinator). */
  roles?: string[]
}

export interface PageHeaderProps {
  /** Primary page title — rendered as `<h1>` in Ivy Presto serif, or pass a custom node (e.g. record switcher). */
  title: React.ReactNode
  /** Short descriptor or date shown below the title (and below `accessInfo` when set). */
  subtitle?: React.ReactNode
  /** Layout preset — `collaboration` enables access line + face row ahead of `actions`. */
  variant?: PageHeaderVariant
  /**
   * Role / access copy or badges — rendered between the title and subtitle
   * when `variant="collaboration"` (e.g. lock icon + "Editors can modify").
   */
  accessInfo?: React.ReactNode
  /** People with access — shown as a horizontal row of faces when `variant="collaboration"`. */
  collaborators?: PageHeaderCollaborator[]
  /** Max faces before a `+N` chip — default 3. */
  collaboratorDisplayLimit?: number
  /** Opens the invite collaborators sheet when a face, overflow chip, or empty-state CTA is activated. */
  onCollaboratorsOpen?: () => void
  /** Label for the empty-roster header control — default `"Add collaborator"`. */
  addCollaboratorLabel?: string
  /** Optional slot for right-aligned actions (buttons, selectors, etc.). */
  actions?: React.ReactNode
  /**
   * Responsive page actions. At most three **row** actions render beside the
   * title (`placement="row"`, default). Items with `placement="overflow"` are
   * tertiary and **always** live under More (Invite people, Export, …).
   * Below the compact width (or on mobile) every visible row action is
   * icon-only with Tip. During WCAG reflow / overflow-only width, **row**
   * secondaries also move into More; the primary CTA stays on the row as
   * icon-only (never in More).
   *
   * Prefer this over `actions` when the controls can be represented as
   * labelled commands. `actions` remains for custom composites.
   */
  actionItems?: PageHeaderActionItem[]
  /** Extra className for the outer wrapper. */
  className?: string
  /** When false, the title + subtitle are visually hidden (actions remain). */
  showTitleBlock?: boolean
  /** Keep h1 on routes. Use h2 only when demonstrating the header inside an existing document. */
  headingLevel?: "h1" | "h2"
}


function PageHeaderCollaborationAccess({
  people,
  limit,
  onOpenCollaborators,
  addCollaboratorLabel,
  countOnly = false,
}: {
  people: PageHeaderCollaborator[]
  limit: number
  onOpenCollaborators?: () => void
  addCollaboratorLabel: string
  /** Compact header — one count control instead of face stack. */
  countOnly?: boolean
}) {
  if (people.length === 0) {
    if (countOnly) {
      return (
        <TooltipProvider>
          <Tooltip>
            <TooltipTrigger asChild>
              <Button
                type="button"
                size="icon-sm"
                variant="outline"
                aria-label={addCollaboratorLabel}
                onClick={onOpenCollaborators}
                disabled={!onOpenCollaborators}
              >
                <i className="fa-light fa-user-plus" aria-hidden="true" />
              </Button>
            </TooltipTrigger>
            <TooltipContent side="bottom">{addCollaboratorLabel}</TooltipContent>
          </Tooltip>
        </TooltipProvider>
      )
    }
    return (
      <div
        role="group"
        aria-label="People with access"
        className="flex shrink-0 items-center"
      >
        <Button
          type="button"
          variant="outline"
          onClick={onOpenCollaborators}
          disabled={!onOpenCollaborators}
        >
          <i className="fa-light fa-user-plus" aria-hidden="true" />
          {addCollaboratorLabel}
        </Button>
      </div>
    )
  }

  const names = people.map((p) => p.name).join(", ")
  const groupLabel = names
    ? `People with access: ${names}`
    : "People with access"

  if (countOnly) {
    return (
      <TooltipProvider>
        <div
          role="group"
          aria-label={groupLabel}
          className="flex h-8 shrink-0 items-center"
        >
          <Tooltip>
            <TooltipTrigger asChild>
              <Button
                type="button"
                size="icon-sm"
                variant="outline"
                data-slot="page-header-collaborator-count"
                className="tabular-nums"
                aria-label={`Open collaborators — ${people.length} ${people.length === 1 ? "person" : "people"} with access`}
                onClick={onOpenCollaborators}
                disabled={!onOpenCollaborators}
              >
                {people.length}
              </Button>
            </TooltipTrigger>
            <TooltipContent side="bottom">
              {people.length} {people.length === 1 ? "person" : "people"} with access
            </TooltipContent>
          </Tooltip>
        </div>
      </TooltipProvider>
    )
  }

  const visible = people.slice(0, limit)
  const overflow = Math.max(0, people.length - visible.length)

  return (
    <TooltipProvider>
    <div
      role="group"
      aria-label={groupLabel}
      className="flex shrink-0 items-center gap-2 sm:gap-2.5"
    >
      <div className="flex shrink-0 items-center gap-1.5">
        {visible.map((c) => (
          <Tooltip key={c.id}>
            <TooltipTrigger asChild>
              <button
                type="button"
                className="relative shrink-0 rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
                aria-label={`Open collaborators — ${c.name}`}
                onClick={onOpenCollaborators}
                disabled={!onOpenCollaborators}
              >
                <Avatar size="sm" shape="circle" className="pointer-events-none">
                  {c.imageUrl ? (
                    <AvatarImage src={c.imageUrl} alt="" referrerPolicy="no-referrer" />
                  ) : null}
                  <AvatarFallback className="text-xs font-semibold">
                    {(c.initials ?? c.name.slice(0, 2)).toUpperCase()}
                  </AvatarFallback>
                </Avatar>
              </button>
            </TooltipTrigger>
            <TooltipContent side="bottom">{c.name}</TooltipContent>
          </Tooltip>
        ))}
        {overflow > 0 && (
          <button
            type="button"
            data-compact-touch
            className="inline-flex aspect-square size-6 shrink-0 items-center justify-center rounded-full bg-muted text-2xs font-semibold tabular-nums text-muted-foreground ring-1 ring-border/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
            aria-label={`Open collaborators — ${overflow} more people with access`}
            onClick={onOpenCollaborators}
            disabled={!onOpenCollaborators}
          >
            +{overflow}
          </button>
        )}
      </div>
    </div>
    </TooltipProvider>
  )
}

export function PageHeader({
  title,
  subtitle,
  variant = "default",
  accessInfo,
  collaborators,
  collaboratorDisplayLimit = 3,
  onCollaboratorsOpen,
  addCollaboratorLabel = "Add collaborator",
  actions,
  actionItems,
  className,
  showTitleBlock = true,
  headingLevel = "h1",
}: PageHeaderProps) {
  const {
    ref: headerRef,
    compact: headerCompact,
    overflowOnly: headerOverflowOnly,
  } = useResponsiveActionWidth<HTMLDivElement>()
  const relocateActions = usePageHeaderScrollRelocateEnabled()
  const scrollActionsSlot = usePageHeaderScrollActionsSlot()
  const isStuck = useScrollStuck()

  const isCollaboration = variant === "collaboration"
  const showAccess = Boolean(isCollaboration && accessInfo)
  const showCollaborationAccess = isCollaboration
  const showResponsiveActions = Boolean(actionItems?.length)
  const showActionsColumn =
    Boolean(actions) || showResponsiveActions || showCollaborationAccess
  const showCollaboratorActionsSeparator =
    showCollaborationAccess && (Boolean(actions) || showResponsiveActions)
  const TitleHeading = headingLevel

  const actionsNode =
    showActionsColumn ? (
      <div
        data-slot="page-header-actions"
        className="flex h-8 shrink-0 flex-nowrap items-center justify-end gap-2"
      >
        {showCollaborationAccess ? (
          <PageHeaderCollaborationAccess
            people={collaborators ?? []}
            limit={collaboratorDisplayLimit}
            onOpenCollaborators={onCollaboratorsOpen}
            addCollaboratorLabel={addCollaboratorLabel}
            countOnly={headerCompact}
          />
        ) : null}
        {showCollaboratorActionsSeparator ? (
          <Separator
            orientation="vertical"
            decorative
            className="self-center data-[orientation=vertical]:h-5 data-[orientation=vertical]:self-center"
          />
        ) : null}
        {showResponsiveActions ? (
          <ResponsiveActionRow
            items={actionItems ?? []}
            compact={headerCompact}
            overflowOnly={headerOverflowOnly}
            ariaLabel="Page actions"
            dataSlot="page-header-responsive-actions"
            debugOwner="PageHeader"
          />
        ) : null}
        {actions}
      </div>
    ) : null

  const portActionsToUtilityBar =
    Boolean(actionsNode) &&
    relocateActions &&
    isStuck &&
    Boolean(scrollActionsSlot)
  const showActionsInHeader = Boolean(actionsNode) && !portActionsToUtilityBar

  return (
    <div
      ref={headerRef}
      data-slot="page-header"
      data-variant={variant}
      data-compact={headerCompact ? "true" : undefined}
      className={cn(
        // pt matches action hit height breathing room; was pt-1 and read flush
        // against the chrome above (utility bar / sticky subheader).
        "flex flex-col px-4 pt-3 pb-2 lg:px-6 lg:pt-4 lg:pb-4",
        className,
      )}
    >
      <div
        data-slot="page-header-title-row"
        className="flex w-full flex-col gap-1"
      >
        {/* Title + actions share one midline (h-8). Subtitle / access sit under
            this row so they never pull the More button off-center. */}
        <div className="flex w-full min-h-8 items-center justify-between gap-3 sm:gap-4">
          <div
            data-slot="page-header-title"
            className={cn(
              "flex min-w-0 flex-1 basis-0 items-center",
              !showTitleBlock && "sr-only",
            )}
          >
            {typeof title === "string" ? (
              <TitleHeading
                className={cn("line-clamp-2 overflow-hidden break-words", PAGE_TITLE_TYPE_CLASS)}
                suppressHydrationWarning
              >
                {title}
              </TitleHeading>
            ) : (
              title
            )}
          </div>

          {showActionsInHeader ? actionsNode : null}
        </div>

        {showAccess ? (
          <div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-xs leading-snug text-muted-foreground">
            {accessInfo}
          </div>
        ) : null}
        {subtitle && showTitleBlock ? (
          <p
            data-slot="page-header-subtitle"
            className="line-clamp-2 min-w-0 overflow-hidden break-words text-xs leading-tight text-muted-foreground sm:text-sm"
          >
            {subtitle}
          </p>
        ) : null}
      </div>
      {portActionsToUtilityBar && actionsNode && scrollActionsSlot
        ? createPortal(actionsNode, scrollActionsSlot)
        : null}
    </div>
  )
}