"use client"

/**
 * Shared chrome for list-hub split surfaces (finder / tree / multi-column explorers).
 *
 * Side gutters via `ListPageViewFrame` keep Tree / List & details aligned with
 * table-view rhythm on a flush Compact canvas. The surface is a bordered card
 * that **grows with page content** — `[data-page-scroll]` owns vertical scroll
 * (same as table hubs). Column headers stick under the views strip.
 *
 * See `AGENTS.md` §4.5 and `.cursor/rules/exxat-list-page-hub-scroll.mdc`.
 */

import * as React from "react"
import { cn } from "../../lib/utils"
import {
  ListPageViewFrame,
  LIST_PAGE_VIEW_FRAME_GUTTER,
} from "../ui/list-page-view-frame"

/** Side gutters + bottom margin so the card sits in the page scroll stack. */
const SPLIT_HUB_GUTTER = LIST_PAGE_VIEW_FRAME_GUTTER

/**
 * Grow with content — never lock `100dvh` (that steals page scroll).
 * `minHeight` keeps empty / short hubs from collapsing.
 */
export const LIST_PAGE_SPLIT_HUB_FILL_STYLE: React.CSSProperties = {
  minHeight: 420,
}

/**
 * Alias — same grow-with-page style as {@link LIST_PAGE_SPLIT_HUB_FILL_STYLE}.
 */
export const LIST_PAGE_SPLIT_HUB_HEIGHT_STYLE: React.CSSProperties =
  LIST_PAGE_SPLIT_HUB_FILL_STYLE

/**
 * Alias for Compact PageHeader-only hubs — same style.
 */
export const LIST_PAGE_SPLIT_HUB_COMPACT_HEIGHT_STYLE: React.CSSProperties =
  LIST_PAGE_SPLIT_HUB_FILL_STYLE

/** Inset split surface — gutters on the frame; card chrome; page owns scroll. */
const SURFACE_CLASS =
  "flex w-full flex-col rounded-xl border border-border bg-card isolate"

export interface ListPageSplitHubChromeProps {
  children: React.ReactNode
  "aria-label"?: string
  /** Override outer gutter; default side gutters + `mb-6`. */
  gutterClassName?: string
  /**
   * Optional max-width. Default is unset (full width inside gutters). Pass a
   * frame max only when a specific hub must stay constrained.
   */
  maxWidthClassName?: string
  /** Override default min-height */
  surfaceStyle?: React.CSSProperties
  surfaceClassName?: string
}

export function ListPageSplitHubChrome({
  children,
  "aria-label": ariaLabel,
  gutterClassName = SPLIT_HUB_GUTTER,
  maxWidthClassName,
  surfaceStyle,
  surfaceClassName,
}: ListPageSplitHubChromeProps) {
  return (
    <ListPageViewFrame
      gutterClassName={gutterClassName}
      maxWidthClassName={maxWidthClassName}
    >
      <div
        className={cn(SURFACE_CLASS, surfaceClassName)}
        style={{ ...LIST_PAGE_SPLIT_HUB_FILL_STYLE, ...surfaceStyle }}
        aria-label={ariaLabel}
      >
        {children}
      </div>
    </ListPageViewFrame>
  )
}