import { View, Text } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { useState, useEffect } from 'react';

let cached = null;

/** 顶部安全区（沉浸式自定义导航用）：状态栏 + 胶囊高度。 */
export function getTopInset() {
  if (!cached) {
    try {
      const win = Taro.getWindowInfo ? Taro.getWindowInfo() : Taro.getSystemInfoSync();
      const statusBar = win.statusBarHeight || 44;
      const windowWidth = win.windowWidth || 375;
      let navH = statusBar + 44;
      try {
        const menu = Taro.getMenuButtonBoundingClientRect ? Taro.getMenuButtonBoundingClientRect() : null;
        if (menu && menu.height) navH = statusBar + (menu.top - statusBar) * 2 + menu.height;
      } catch { /* 无胶囊环境用默认 */ }
      cached = { statusBar, navH, windowWidth };
    } catch {
      cached = { statusBar: 44, navH: 88, windowWidth: 375 };
    }
  }
  return cached;
}

/** 统一固定标题区（fixed 不随滚动）：像素字 kicker + 彩虹渐变标题 + 像素字注脚。
 *  back：传入函数=自定义返回；true=自动返回（无上一页则回首页 Tab）。
 *  shift：内容整体上移量（rpx），默认 65；底部占位高度不受影响。
 *  占位高度由 createSelectorQuery 实测 navbar 真实高度，绝无空白/覆盖/重复。 */
export function PageHeader({ no, title, en, sub, back, shift = 65 }) {
  const { navH, windowWidth } = getTopInset();
  // 标题区整体上移 shift rpx：从状态栏让位空间中扣除（不是容器偏移，占位实测自动跟随，无空白）
  const SHIFT_PX = Math.round((shift * (windowWidth || 375)) / 750);
  const topPad = Math.max(navH - SHIFT_PX, 24);   // 下限：至少给状态栏留 24px
  // 默认占位高度 = 状态栏+导航区+标题内容，避免异步测量前内容被遮挡
  const defaultH = navH + 80;
  const [h, setH] = useState(defaultH);

  useEffect(() => {
    Taro.nextTick(() => {
      Taro.createSelectorQuery()
        .select('.page-navbar')
        .boundingClientRect((r) => { if (r && r.height) setH(r.height); })
        .exec();
    });
  }, [no, title, en, sub, back]);

  const goBack = () => {
    if (typeof back === 'function') { back(); return; }
    const pages = Taro.getCurrentPages ? Taro.getCurrentPages() : [];
    if (pages.length > 1) Taro.navigateBack({ delta: 1 });
    else Taro.switchTab({ url: '/pages/index/index' });
  };

  return (
    <>
      <View className="page-navbar" style={{ paddingTop: `${topPad}px` }}>
        <View className="page-navbar-col">
          {no || back ? (
            <View className="page-navbar-norow">
              {back ? (
                <View className="page-navbar-back-hit" hoverClass="pressed" onClick={goBack}>
                  <Text className="page-navbar-back-ic ic ic-arrow-left" aria-hidden />
                </View>
              ) : null}
              {no ? <Text className="page-navbar-no">{no}</Text> : null}
            </View>
          ) : null}
          <View className="page-navbar-titlerow">
            <Text className="page-navbar-title">{title}</Text>
            {sub ? <Text className="page-navbar-sub">{sub}</Text> : null}
          </View>
          {en ? <Text className="page-navbar-en">{en}</Text> : null}
        </View>
      </View>
      <View style={{ height: `${h}px` }} />
    </>
  );
}

/** 沉浸式顶部占位：配合页面 navigationStyle=custom 使用。 */
export default function TopInset() {
  const { navH } = getTopInset();
  return <View style={{ height: `${navH}px` }} />;
}