import React from 'react';
import {
  KeyboardAvoidingView,
  ScrollView,
  StyleSheet,
  View,
  type StyleProp,
  type ViewStyle,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { Text } from '@/components/ui/Text';
import { useThemeColor } from '@/hooks/use-theme-color';

interface AuthScreenProps {
  title?: string;
  subtitle?: string;
  titleTestID?: string;
  // Sits above the title — login puts its animated logo here.
  header?: React.ReactNode;
  footer?: React.ReactNode;
  children?: React.ReactNode;
  contentContainerStyle?: StyleProp<ViewStyle>;
}

// The one layout every auth screen shares. Top-aligned on purpose: a form whose
// error rows grow must not re-center (and scroll) the whole screen when it does.
export function AuthScreen({
  title,
  subtitle,
  titleTestID,
  header,
  footer,
  children,
  contentContainerStyle,
}: AuthScreenProps) {
  const textColor = useThemeColor({}, 'text');
  const backgroundColor = useThemeColor({}, 'background');

  return (
    <SafeAreaView style={[styles.container, { backgroundColor }]}>
      <KeyboardAvoidingView behavior="height" style={styles.keyboardView}>
        <ScrollView
          contentContainerStyle={[styles.scrollContainer, contentContainerStyle]}
          showsVerticalScrollIndicator={false}
          keyboardShouldPersistTaps="handled"
        >
          {header}

          {(title || subtitle) && (
            <View style={styles.header}>
              {title && (
                <Text testID={titleTestID} style={[styles.title, { color: textColor }]}>
                  {title}
                </Text>
              )}
              {subtitle && (
                <Text style={[styles.subtitle, { color: textColor, opacity: 0.7 }]}>
                  {subtitle}
                </Text>
              )}
            </View>
          )}

          {children}

          {footer && <View style={styles.footer}>{footer}</View>}
        </ScrollView>
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  keyboardView: {
    flex: 1,
  },
  scrollContainer: {
    flexGrow: 1,
    paddingHorizontal: 24,
    paddingTop: 24,
    paddingBottom: 24,
  },
  header: {
    alignItems: 'center',
    marginBottom: 40,
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    marginBottom: 8,
    textAlign: 'center',
  },
  subtitle: {
    fontSize: 16,
    textAlign: 'center',
    lineHeight: 24,
  },
  footer: {
    marginTop: 'auto',
    paddingTop: 24,
  },
});