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;
  children: ReactNode;
  footer?: ReactNode;
  scroll?: boolean;
  /** 兼容旧调用保留，已不再渲染（统一使用系统真实状态栏） */
  time?: string;
  battery?: number;
}

/** 每屏统一外壳：系统状态栏 + 可选返回箭头 + 标题 + 滚动内容 + 底部固定区 */
export function ScreenShell({ title, showBack, onBack, children, footer, scroll = true, time: _time, battery: _battery }: Props) {
  return (
    <SafeAreaView style={styles.container} edges={['top', 'bottom']}>
      <StatusBar style="dark" />
      {showBack ? (
        <Pressable style={styles.backRow} onPress={onBack} hitSlop={10}>
          <Ionicons name="chevron-back" size={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: 20, paddingBottom: 28 },
  footer: { padding: 16, paddingBottom: 22, backgroundColor: colors.pageBg },
});