import type { HTMLAttributes, ReactNode } from 'react'
import { Stack } from './Stack.js'

export interface PageContainerProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
  /** Page title rendered as an h1 inside the page header. */
  title?: ReactNode
  /** Optional sub-headline shown beneath the title. */
  description?: ReactNode
  /** Right-aligned action area (buttons, filters). Rendered in the header. */
  actions?: ReactNode
  /**
   * Maximum width of the content. Defaults to `7xl` (Tailwind's max-w-7xl,
   * ~1280px). Pass `'full'` for edge-to-edge content.
   */
  maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | 'full'
  /** Horizontal padding token. Defaults to `6` (24px). */
  paddingX?: '4' | '6' | '8'
  /** Vertical padding token. Defaults to `6`. */
  paddingY?: '4' | '6' | '8' | '10'
  /** Vertical gap between the header and the body. Defaults to `6`. */
  gap?: '4' | '6' | '8'
  children?: ReactNode
}

const MAX_WIDTH_CLASS: Record<NonNullable<PageContainerProps['maxWidth']>, string> = {
  sm: 'max-w-sm',
  md: 'max-w-md',
  lg: 'max-w-lg',
  xl: 'max-w-xl',
  '2xl': 'max-w-2xl',
  '3xl': 'max-w-3xl',
  '4xl': 'max-w-4xl',
  '5xl': 'max-w-5xl',
  '6xl': 'max-w-6xl',
  '7xl': 'max-w-7xl',
  full: 'max-w-none',
}

/**
 * The single canonical wrapper for every admin page. PageContainer owns
 * three responsibilities so individual views can stop redoing them:
 *
 *  1. Consistent max-width + horizontal padding (so dashboards, lists, and
 *     forms all line up visually).
 *  2. A standard header slot with title + description + actions.
 *  3. A standard body slot rendered as a `<Stack>` so children stack with
 *     consistent vertical rhythm.
 *
 * Use PageContainer at the top of every screen. Compose with `<Stack>` /
 * `<Grid>` / `<Cluster>` inside. Never roll a per-screen wrapper.
 */
export function PageContainer({
  title,
  description,
  actions,
  maxWidth = '7xl',
  paddingX = '6',
  paddingY = '6',
  gap = '6',
  className = '',
  children,
  ...rest
}: PageContainerProps) {
  const outerClasses = [
    'mx-auto w-full',
    MAX_WIDTH_CLASS[maxWidth],
    `px-${paddingX}`,
    `py-${paddingY}`,
    className,
  ]
    .filter(Boolean)
    .join(' ')

  return (
    <section className={outerClasses} {...rest}>
      <Stack space={gap}>
        {(title || description || actions) && (
          <header className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
            {(title || description) && (
              <div className="min-w-0">
                {title && (
                  <h1 className="text-foreground truncate text-2xl font-medium tracking-tight">
                    {title}
                  </h1>
                )}
                {description && <p className="text-muted-foreground mt-1 text-sm">{description}</p>}
              </div>
            )}
            {actions && <div className="flex shrink-0 items-center gap-2">{actions}</div>}
          </header>
        )}
        {children}
      </Stack>
    </section>
  )
}
