import type { ReactNode } from 'react';
import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
import { StatusBar } from 'expo-status-bar';
import { Ionicons } from '@expo/vector-icons';
import { SafeAreaView } from 'react-native-safe-area-context';
import { colors } from '../../../src/theme';

interface Props {
  title?: string;
  showBack?: boolean;
  onBack?: () => void;
  /** 返回图标：默认 chevron-back，可传 close（对齐验证码页的 × 关闭） */
  backIcon?: 'chevron-back' | 'close';
  children: ReactNode;
  footer?: ReactNode;
  scroll?: boolean;
}

/** 每屏统一外壳：系统状态栏 + 可选返回箭头 + 标题 + 滚动内容 + 底部固定区 */
export function ScreenShell({ title, showBack, onBack, backIcon = 'chevron-back', children, footer, scroll = true }: Props) {
  return (
    <SafeAreaView style={styles.container} edges={['top', 'bottom']}>
      <StatusBar style="dark" />
      {showBack ? (
        <Pressable style={styles.backRow} onPress={onBack} hitSlop={10}>
          <Ionicons name={backIcon} size={backIcon === 'close' ? 26 : 24} color={colors.textPrimary} />
          {title ? <Text style={styles.titleInline}>{title}</Text> : null}
        </Pressable>
      ) : title ? (
        <Text style={styles.titleCenter}>{title}</Text>
      ) : null}
      {scroll ? (
        <ScrollView style={styles.scroll} contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
          {children}
        </ScrollView>
      ) : (
        <View style={styles.scrollContent}>{children}</View>
      )}
      {footer ? <View style={styles.footer}>{footer}</View> : null}
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: colors.pageBg },
  backRow: { flexDirection: 'row', alignItems: 'center', gap: 2, paddingHorizontal: 16, paddingVertical: 10 },
  titleInline: { fontSize: 17, fontWeight: '700', color: colors.textPrimary },
  titleCenter: { fontSize: 18, fontWeight: '800', color: colors.textPrimary, textAlign: 'center', paddingVertical: 12 },
  scroll: { flex: 1 },
  scrollContent: { flexGrow: 1, padding: 8, paddingBottom: 28 },
  footer: { padding: 16, paddingBottom: 22, backgroundColor: colors.pageBg },
});