import type { ReactNode } from 'react'
import { colors } from '../tokens'

interface PageWrapperProps {
  title: string
  description?: string
  extra?: ReactNode
  children: ReactNode
  /**
   * 内联模式：title + 竖线 + description 横排，right-align extra。
   * 搭配 fullHeight 使用，是全高页面的标准页头样式。
   */
  inline?: boolean
  /**
   * 撑满父容器高度：header 固定，children 填充剩余空间。
   * 适用于所有管理页面。
   */
  fullHeight?: boolean
}

export default function PageWrapper({
  title, description, extra, children, inline, fullHeight,
}: PageWrapperProps) {
  // Inline mode: horizontal header with padding (used with fullHeight)
  if (inline) {
    return (
      <div style={{ height: fullHeight ? '100%' : undefined, display: 'flex', flexDirection: 'column', overflow: fullHeight ? 'hidden' : undefined }}>
        <div style={{
          padding: '10px 16px 8px', flexShrink: 0,
          display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <h2 style={{ margin: 0, fontSize: 20, fontWeight: 600, color: colors.text }}>{title}</h2>
          {description && (
            <>
              <span style={{ width: 1, height: 18, background: '#d9d9d9', display: 'inline-block' }} />
              <span style={{ fontSize: 13, color: colors.textSecondary }}>{description}</span>
            </>
          )}
          {extra && <div style={{ marginLeft: 'auto' }}>{extra}</div>}
        </div>
        {fullHeight
          ? <div style={{ flex: 1, minHeight: 0 }}>{children}</div>
          : children}
      </div>
    )
  }

  // Block mode: stacked header with marginBottom (legacy, scrollable pages)
  const header = (
    <div style={{
      display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16,
    }}>
      <div>
        <h2 style={{ margin: 0, fontSize: 20, fontWeight: 600, color: colors.text }}>{title}</h2>
        {description && (
          <p style={{ margin: '4px 0 0', fontSize: 13, color: colors.textSecondary }}>{description}</p>
        )}
      </div>
      {extra && <div>{extra}</div>}
    </div>
  )

  if (fullHeight) {
    return (
      <div style={{ height: '100%', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
        {header}
        <div style={{ flex: 1, minHeight: 0 }}>{children}</div>
      </div>
    )
  }

  return <div>{header}{children}</div>
}