import { ArrowLeft } from 'lucide-react';
import Button from './Button';

/**
 * FullScreenPage — 全屏操作页容器（B端设计系统，Tailwind 内联）
 *
 * 覆盖整个定位父级（含侧边导航）的全屏操作页，用于内容量大、需长时间沉浸编辑的场景。
 * 定位原理：absolute inset-0，须挂在 relative 定位父级内（如 BasePageFramePattern 根节点）。
 *
 * 两种背景色模式，对应不同的内容承载规范：
 *   white — 白底，内容直接铺在页面上（如轻量创建表单）
 *   grey  — 浅灰底，内容须在 children 内自行包白色卡片容器承载（如复杂配置编辑页）
 *
 * 与 Modal / Sheet 的场景区别：
 *   Modal          — 内容量少，快速确认，居中浮层
 *   Sheet          — 内容中等，侧边补充信息
 *   Modal fullscreen — 内容较多，结构化表单，覆盖右侧内容区
 *   FullScreenPage — 内容非常多，沉浸长时间编辑，覆盖整个框架含侧边导航
 *
 * @prop {'white'|'grey'} [bg='white'] — 背景色模式
 * @prop {string} [title='页面标题'] — 顶栏标题
 * @prop {function} [onBack=null] — 返回/关闭回调，传入才显示返回按钮
 * @prop {ReactNode} [headerActions=null] — 顶栏右侧操作区插槽（保存/发布等按钮）
 * @prop {ReactNode} [children] — 页面主体内容
 * @prop {boolean} [contained=false] — 预览/嵌入模式：true 时改用相对定位填满父容器，而非 absolute 覆盖
 * @prop {string} [className=''] — 附加类名
 * @prop {object} [style] — 内联样式
 */

/* ── 背景色模式 → Tailwind 类名 ── */
const BG_CLASS = {
  /* 白底：内容直接铺在页面上 */
  white: 'bg-surface',
  /* 灰底：内容须在 children 内自行包白色卡片容器承载 */
  grey: 'bg-blueGrey-200',
};

/* ── 顶栏：透明背景，无分割线，左右/上下均使用页面四周间距 16px ── */
const HEADER = [
  'flex shrink-0 items-center justify-between gap-3',
  'px-4 py-4',
].join(' ');

/* ── 顶栏标题 ── */
const TITLE = 'text-base [font-weight:var(--font-semibold)] text-foreground truncate min-w-0';

export default function FullScreenPage({
  bg = 'white',
  title = '页面标题',
  onBack,
  headerActions,
  children,
  contained = false,
  className = '',
  style,
}) {
  const positionClass = contained
    ? 'relative flex h-full min-h-0 min-w-0 w-full flex-col overflow-hidden'
    : 'absolute inset-0 z-50 flex h-full min-h-0 min-w-0 w-full flex-col overflow-hidden';

  return (
    <div
      className={[`tfds-full-screen-page`, positionClass, BG_CLASS[bg], className].filter(Boolean).join(' ')}
      style={style}
      data-tfds-component="FullScreenPage"
    >
      {/* 顶栏：返回键 + 标题 + 右侧操作区 */}
      <header className={HEADER} data-tfds-component="FullScreenPage.Header">
        <div className="flex items-center gap-2 min-w-0 flex-1">
          {onBack ? (
            <Button
              type="button"
              variant="ghost-black"
              size="sm"
              icon={<ArrowLeft size={16} strokeWidth={2} />}
              iconOnly
              onClick={onBack}
              tooltip="返回"
              aria-label="返回"
              className="shrink-0"
              data-tfds-component="FullScreenPage.Back"
            />
          ) : null}
          <h1 className={TITLE}>{title}</h1>
        </div>

        {headerActions ? (
          <div className="flex items-center gap-2 shrink-0">{headerActions}</div>
        ) : null}
      </header>

      {/* 内容区：flex-1 独立滚动，具体布局由 children 自定义 */}
      <div className="flex flex-1 min-h-0 min-w-0 overflow-hidden" data-tfds-component="FullScreenPage.Content">
        {children}
      </div>
    </div>
  );
}
