/* ------------------------------------------------------------------ *
 * Screen — enveloppe d'écran. Fond, zone sûre, padding de tab bar.
 * ------------------------------------------------------------------ */
import { ReactNode } from 'react';
import { ScrollView, StyleSheet, View, ViewStyle } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

import { colors } from '@/theme/colors';

/** Hauteur de la tab bar custom, hors safe-area. Source unique. */
import { TAB_BAR_BASE_HEIGHT } from '@/components/navigation/BahlaTabBar';
export const TAB_BAR_HEIGHT = TAB_BAR_BASE_HEIGHT;

type Props = {
  children: ReactNode;
  /** `scroll` enveloppe dans un ScrollView, `static` en View simple. */
  layout?: 'scroll' | 'static';
  /** Applique le padding haut de la zone sûre. false pour un écran à image plein bord. */
  edgeToEdge?: boolean;
  /** Réserve la hauteur de la tab bar en bas. false sur les écrans modaux / (org)/create. */
  tabBar?: boolean;
  /** Halo violet décoratif en haut à gauche (B1, C1). */
  halo?: boolean;
  /** Padding horizontal des enfants. 20 par défaut, 0 pour du plein bord. */
  gutter?: number;
  contentContainerStyle?: ViewStyle;
};

export function Screen({
  children,
  layout = 'scroll',
  edgeToEdge = false,
  tabBar = true,
  halo = false,
  gutter = 20,
  contentContainerStyle,
}: Props) {
  const insets = useSafeAreaInsets();

  const padding: ViewStyle = {
    paddingTop: edgeToEdge ? 0 : insets.top,
    paddingHorizontal: gutter,
    paddingBottom: tabBar ? TAB_BAR_HEIGHT + insets.bottom + 24 : insets.bottom + 24,
  };

  return (
    <View style={styles.root}>
      {halo && <View pointerEvents="none" style={styles.halo} />}
      {layout === 'scroll' ? (
        <ScrollView
          showsVerticalScrollIndicator={false}
          contentContainerStyle={[padding, contentContainerStyle]}
        >
          {children}
        </ScrollView>
      ) : (
        <View style={[styles.flex, padding, contentContainerStyle]}>{children}</View>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  root: { flex: 1, backgroundColor: colors.deepBackground },
  flex: { flex: 1 },
  halo: {
    position: 'absolute',
    width: 380,
    height: 380,
    borderRadius: 190,
    top: -140,
    left: -60,
    backgroundColor: colors.secondarySoft,
  },
});