import type { PropsWithChildren, ReactNode } from 'react';
import { View } from '@tarojs/components';
import FloatingToastHost from './FloatingToastHost';
import { pageShellCssVars, useNavBarMetrics } from '../lib/nav-bar';

type PageShellVariant = 'tab' | 'scroll' | 'sub' | 'plain';

type PageShellProps = PropsWithChildren<{
  variant?: PageShellVariant;
  className?: string;
  /** 栈页固定底栏时额外底部留白 */
  hasFixedFooter?: boolean;
}>;

/**
 * 页面壳：唯一注入刘海屏 CSS 变量；统一 min-height / 底栏安全区。
 * 顶栏组件自行调用 navBarStyle，不要在根节点再套 navBarStyle。
 */
export default function PageShell({
  variant = 'tab',
  className = '',
  hasFixedFooter = false,
  children,
}: PageShellProps) {
  const metrics = useNavBarMetrics();
  const classes = [
    'page-shell',
    `page-shell--${variant}`,
    hasFixedFooter ? 'page-shell--fixed-footer' : '',
    variant === 'tab' && process.env.TARO_ENV === 'weapp' ? 'page-shell--native-tabbar' : '',
    className,
  ]
    .filter(Boolean)
    .join(' ');

  return (
    <View className={classes} style={pageShellCssVars(metrics)}>
      {children as ReactNode}
      <FloatingToastHost />
    </View>
  );
}