import React from 'react';
import {
  KeyboardAvoidingView,
  Platform,
  Pressable,
  ScrollView,
  StyleSheet,
  Text,
  View,
  type ViewStyle,
} from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { AppIcon } from './app-icon';
import { colors, fonts, m3Colors, m3Type, spacing } from '../theme/proulr-theme';

type AuthStepShellProps = {
  title: string;
  subtitle?: string;
  onBack?: () => void;
  backLabel?: string;
  headerSlot?: React.ReactNode;
  children: React.ReactNode;
  contentStyle?: ViewStyle;
};

/** Shell de auth/onboarding — título inline, sem chrome pill. */
export function AuthStepShell({
  title,
  subtitle,
  onBack,
  backLabel = 'Voltar',
  headerSlot,
  children,
  contentStyle,
}: AuthStepShellProps) {
  const insets = useSafeAreaInsets();

  return (
    <KeyboardAvoidingView
      style={styles.root}
      behavior={Platform.OS === 'ios' ? 'padding' : undefined}
    >
      <View style={[styles.inner, { paddingTop: insets.top + spacing.md }]}>
        {onBack ? (
          <Pressable
            accessibilityRole="button"
            onPress={onBack}
            style={({ pressed }) => [styles.backBtn, pressed && styles.pressed]}
          >
            <AppIcon name="back" size={24} color={m3Colors.onSurface} />
            <Text style={styles.backLabel}>{backLabel}</Text>
          </Pressable>
        ) : null}

        {headerSlot ? <View style={styles.headerSlot}>{headerSlot}</View> : null}

        <Text style={styles.title}>{title}</Text>
        {subtitle ? <Text style={styles.subtitle}>{subtitle}</Text> : null}

        <ScrollView
          style={styles.scroll}
          contentContainerStyle={[
            styles.scrollContent,
            { paddingBottom: insets.bottom + spacing.xxl },
            contentStyle,
          ]}
          keyboardShouldPersistTaps="handled"
          showsVerticalScrollIndicator={false}
        >
          {children}
        </ScrollView>
      </View>
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  root: {
    flex: 1,
    backgroundColor: m3Colors.surface,
  },
  inner: {
    flex: 1,
    paddingHorizontal: spacing.xl,
  },
  backBtn: {
    flexDirection: 'row',
    alignItems: 'center',
    alignSelf: 'flex-start',
    gap: spacing.xs,
    marginBottom: spacing.md,
    paddingVertical: spacing.xs,
  },
  backLabel: {
    color: colors.textMuted,
    fontSize: 14,
    fontFamily: fonts.medium,
  },
  pressed: {
    opacity: 0.6,
  },
  headerSlot: {
    alignItems: 'center',
    marginBottom: spacing.lg,
  },
  title: {
    ...m3Type.headline,
    fontFamily: fonts.extrabold,
    color: m3Colors.onSurface,
  },
  subtitle: {
    ...m3Type.body,
    color: m3Colors.onSurfaceVariant,
    marginTop: spacing.sm,
  },
  scroll: {
    flex: 1,
    marginTop: spacing.xl,
  },
  scrollContent: {
    gap: spacing.sm,
  },
});