import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useRouter } from 'expo-router';
import { useTheme } from '../../theme';
import { useT } from '../../i18n';
import { Touchable } from '../ui/Touchable';

interface ScreenHeaderProps {
  title: string;
  /** 右侧操作位（图标按钮/文本按钮）。 */
  right?: React.ReactNode;
  /** 自定义返回行为；默认 router.back()。 */
  onBack?: () => void;
  /** 返回按钮的无障碍标签。 */
  backLabel?: string;
}

/** 统一二级页头：返回 + 标题 + 右操作位（替换各页手写 header）。 */
export function ScreenHeader({ title, right, onBack, backLabel }: ScreenHeaderProps) {
  const { theme } = useTheme();
  const router = useRouter();
  const t = useT();
  return (
    <View style={styles.row}>
      <Touchable
        onPress={onBack ?? (() => router.back())}
        hitSlop={8}
        accessibilityRole="button"
        accessibilityLabel={backLabel ?? t('common.back')}
      >
        <Ionicons name="chevron-back" size={24} color={theme.colors.fgPrimary} />
      </Touchable>
      <Text style={[theme.typography.h2, styles.title, { color: theme.colors.fgPrimary }]} numberOfLines={1}>
        {title}
      </Text>
      {right ?? <View style={styles.rightPlaceholder} />}
    </View>
  );
}

const styles = StyleSheet.create({
  row: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16, paddingTop: 8, paddingBottom: 12, gap: 8 },
  title: { flex: 1 },
  rightPlaceholder: { width: 24 },
});
