import { StyleSheet, Dimensions, Platform } from 'react-native';
import { typography } from '@theme';

const { width } = Dimensions.get('window');

export const getStyles = (colors: any) =>
  StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: colors.primary,
    },
    scrollContainer: {
      flexGrow: 1,
    },

    // ---------- Hero ----------
    hero: {
      backgroundColor: colors.primary,
      paddingTop: Platform.OS === 'ios' ? 70 : 48,
      paddingBottom: 56,
      alignItems: 'center',
      overflow: 'hidden',
    },
    heroDecoCircleLg: {
      position: 'absolute',
      width: 220,
      height: 220,
      borderRadius: 110,
      backgroundColor: 'rgba(255,255,255,0.06)',
      top: -100,
      right: -60,
    },
    heroDecoCircleSm: {
      position: 'absolute',
      width: 120,
      height: 120,
      borderRadius: 60,
      backgroundColor: 'rgba(255,255,255,0.08)',
      top: 30,
      left: -50,
    },
    logoBadge: {
      width: 68,
      height: 68,
      borderRadius: 20,
      backgroundColor: 'rgba(255,255,255,0.95)',
      alignItems: 'center',
      justifyContent: 'center',
      marginBottom: 16,
      ...Platform.select({
        ios: {
          shadowColor: '#000',
          shadowOffset: { width: 0, height: 4 },
          shadowOpacity: 0.15,
          shadowRadius: 10,
        },
        android: { elevation: 4 },
      }),
    },
    logoEmoji: {
      fontSize: 32,
    },
    brandName: {
      fontSize: typography.fontSize.xl,
      fontWeight: typography.fontWeight.bold,
      color: '#FFFFFF',
      marginBottom: 4,
    },
    brandTagline: {
      fontSize: typography.fontSize.sm,
      color: 'rgba(255,255,255,0.85)',
    },

    // ---------- Form card ----------
    formCard: {
      flex: 1,
      backgroundColor: colors.background,
      borderTopLeftRadius: 32,
      borderTopRightRadius: 32,
      marginTop: -28,
      paddingTop: 32,
      paddingHorizontal: 24,
      paddingBottom: 24,
    },
    headerContainer: {
      marginBottom: 28,
    },
    title: {
      fontSize: typography.fontSize.xxl,
      fontWeight: typography.fontWeight.bold,
      color: colors.text,
      marginBottom: 8,
    },
    subtitle: {
      fontSize: typography.fontSize.md,
      color: colors.textSecondary,
    },
    formContainer: {
      width: '100%',
    },

    // Phone prefix chip rendered via CustomInput's leftElement
    prefixChip: {
      flexDirection: 'row',
      alignItems: 'center',
    },
    prefixFlag: {
      fontSize: 16,
      marginRight: 6,
    },
    prefixText: {
      fontSize: typography.fontSize.md,
      fontWeight: typography.fontWeight.semibold,
      color: colors.text,
    },

    helperText: {
      fontSize: typography.fontSize.xs,
      color: colors.textSecondary,
      marginTop: -12,
      marginBottom: 20,
      marginLeft: 4,
    },

    // ---------- Footer ----------
    footerSpacer: {
      flex: 1,
      minHeight: 24,
    },
    termsText: {
      fontSize: typography.fontSize.xs,
      color: colors.textSecondary,
      textAlign: 'center',
      lineHeight: 18,
      marginTop: 20,
      paddingHorizontal: 8,
    },
    termsLink: {
      color: colors.primary,
      fontWeight: typography.fontWeight.semibold,
    },
  });