digital-pilates/components/ui/HeaderBar.tsx

import { Ionicons } from '@expo/vector-icons';
import React from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';

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

export function HeaderBar({
  title,
  onBack,
  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 getBackButtonStyle = () => {
    const baseStyle = [styles.backButton];
    
    switch (variant) {
      case 'elevated':
        return [...baseStyle, { 
          backgroundColor: `${theme.primary}15`, // 15% 透明度
          borderWidth: 1,
          borderColor: `${theme.primary}20`, // 20% 透明度
        }];
      case 'minimal':
        return [...baseStyle, { 
          backgroundColor: `${theme.neutral100}80`, // 80% 透明度
        }];
      default:
        return [...baseStyle, { 
          backgroundColor: `${theme.accentGreen}20`, // 20% 透明度
        }];
    }
  };

  const getBackButtonIconColor = () => {
    switch (variant) {
      case 'elevated':
        return theme.primary;
      case 'minimal':
        return theme.textSecondary;
      default:
        return theme.onPrimary;
    }
  };

  const getBorderStyle = () => {
    if (!showBottomBorder) return {};
    
    return {
      borderBottomWidth: 1,
      borderBottomColor: variant === 'elevated' 
        ? theme.border 
        : `${theme.border}40`, // 40% 透明度
    };
  };

  return (
    <View
      style={[
        styles.header,
        {
          paddingTop: (withSafeTop ? insets.top : 0) + 8,
          backgroundColor: getBackgroundColor(),
          ...getBorderStyle(),
          ...(variant === 'elevated' && {
            shadowColor: '#000',
            shadowOffset: { width: 0, height: 1 },
            shadowOpacity: 0.05,
            shadowRadius: 3,
            elevation: 2,
          }),
        },
      ]}
    >
      {onBack ? (
        <TouchableOpacity 
          accessibilityRole="button" 
          onPress={onBack} 
          style={getBackButtonStyle()}
          activeOpacity={0.7}
        >
          <Ionicons 
            name="chevron-back" 
            size={20} 
            color={getBackButtonIconColor()} 
          />
        </TouchableOpacity>
      ) : (
        <View style={{ width: 32 }} />
      )}

      <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: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 16,
    paddingBottom: 12,
    minHeight: 44,
    width: '100%',
  },
  backButton: {
    width: 32,
    height: 32,
    borderRadius: 16,
    alignItems: 'center',
    justifyContent: 'center',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.1,
    shadowRadius: 2,
    elevation: 2,
  },
  titleContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 8,
  },
  title: {
    fontSize: 18,
    textAlign: 'center',
    letterSpacing: -0.3,
  },
});