digital-pilates/components/ui/HeaderBar.tsx

import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';
import { Ionicons } from '@expo/vector-icons';
import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
import { router } from 'expo-router';
import React from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

export type HeaderBarProps = {
  title: string | React.ReactNode;
  onBack?: () => void;
  backColor?: string;
  right?: React.ReactNode;
  tone?: 'light' | 'dark';
  showBottomBorder?: boolean;
  withSafeTop?: boolean;
  transparent?: boolean;
  variant?: 'default' | 'elevated' | 'minimal';
};

export function HeaderBar({
  title,
  onBack,
  backColor,
  right,
  tone,
  showBottomBorder = false,
  withSafeTop = true,
  transparent = true,
  variant = 'default',
}: HeaderBarProps) {
  const insets = useSafeAreaInsets();
  const colorScheme = useColorScheme() ?? 'light';
  const theme = Colors[tone ?? colorScheme];

  // 根据变体确定背景色和样式
  const getBackgroundColor = () => {
    if (transparent) return 'transparent';

    switch (variant) {
      case 'elevated':
        return theme.background;
      case 'minimal':
        return theme.background;
      default:
        return theme.card;
    }
  };

  const getBorderStyle = () => {
    if (!showBottomBorder) return {};

    return {
      borderBottomWidth: 1,
      borderBottomColor: variant === 'elevated'
        ? theme.border
        : `${theme.border}40`, // 40% 透明度
    };
  };

  const defaultBackColor = 'rgba(0,0,0,0.8)'

  return (
    <View
      style={[
        styles.header,
        {
          paddingTop: insets.top,
          backgroundColor: getBackgroundColor(),
          ...getBorderStyle(),
          ...(variant === 'elevated' && {
            shadowColor: '#000',
            shadowOffset: { width: 0, height: 1 },
            shadowOpacity: 0.05,
            shadowRadius: 3,
            elevation: 2,
          }),
        },
      ]}
    >
      {isLiquidGlassAvailable() ? (
        <TouchableOpacity
          accessibilityRole="button"
          onPress={() => {
            if (onBack) {
              onBack();
              return
            }
            router.back()
          }}
          activeOpacity={0.7}
        >
          <GlassView
            style={styles.backButton}
            glassEffectStyle="clear"
            tintColor="rgba(255, 255, 255, 0.2)"
            isInteractive={true}
          >
            <Ionicons
              name="chevron-back"
              size={24}
              color={backColor || defaultBackColor}
            />
          </GlassView>
        </TouchableOpacity>
      ) : (
        <TouchableOpacity
          accessibilityRole="button"
          onPress={() => {
            if (onBack) {
              onBack();
              return
            }
            router.back()
          }}
          style={[styles.backButton, styles.fallbackBackground]}
          activeOpacity={0.7}
        >
          <Ionicons
            name="chevron-back"
            size={24}
            color={backColor || defaultBackColor}
          />
        </TouchableOpacity>
      )}
      <View style={styles.titleContainer}>
        {typeof title === 'string' ? (
          <Text style={[
            styles.title,
            {
              color: theme.text,
              fontWeight: variant === 'elevated' ? '700' : '800',
            }
          ]}>
            {title}
          </Text>
        ) : (
          title
        )}
      </View>

      {right ?? <View style={{ width: 32 }} />}
    </View>
  );
}

const styles = StyleSheet.create({
  header: {
    position: 'absolute',
    left: 0,
    top: 0,
    right: 0,
    zIndex: 2,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 16,
    paddingBottom: 12,
    minHeight: 44,
    width: '100%',
  },
  backButton: {
    width: 38,
    height: 38,
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 38,
    overflow: 'hidden',
  },
  fallbackBackground: {
    backgroundColor: 'rgba(255, 255, 255, 0.5)',
  },
  titleContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 8,
  },
  title: {
    fontSize: 18,
    textAlign: 'center',
    letterSpacing: -0.3,
  },
});