circle-collect/src/screens/LoginScreen.tsx

import React, { useState, useEffect, useRef } from 'react';
import {
  View,
  Text,
  StyleSheet,
  Animated,
  KeyboardAvoidingView,
  Platform,
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { StackNavigationProp } from '@react-navigation/stack';
import { responsiveFontSize } from 'react-native-responsive-dimensions';
import { RootStackParamList } from '../navigation/AppNavigator';
import { useTheme } from '../hooks/ui/useTheme';
import { useFetch } from '../hooks/core/useFetch';
import { LOGIN_URL } from '../utils/ApiUrls';
import { CustomInput, CustomButton } from '../components/common/Custom';
import AppView from '../components/AppView';
import FontsFamily from '../constents/FontsFamily';

export default function LoginScreen() {
  const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
  const theme = useTheme();
  const [mobile, setMobile] = useState('');
  const [error, setError] = useState('');

  const fadeAnim = useRef(new Animated.Value(0)).current;
  const slideAnim = useRef(new Animated.Value(20)).current;

  useEffect(() => {
    Animated.parallel([
      Animated.timing(fadeAnim, {
        toValue: 1,
        duration: 800,
        useNativeDriver: true,
      }),
      Animated.spring(slideAnim, {
        toValue: 0,
        tension: 20,
        useNativeDriver: true,
      }),
    ]).start();
  }, [fadeAnim, slideAnim]);

  const { refetch: sendOtp, isFetching: loading } = useFetch<any>(
    LOGIN_URL + mobile,
    {},
    {
      enabled: false,
      retry: false,
    }
  );

  const handleContinue = async () => {
if (!/^\d{9}$/.test(mobile)) {
  setError('Please enter a 9-digit mobile number');
  return;
}

    setError('');
    try {
      const { data } = await sendOtp();
      if (data?.statusCode === 200) {
        navigation.navigate('OtpVarify', { mobile });
      } else {
        setError(data?.message || 'Failed to send OTP. Please try again.');
      }
    } catch (err) {
      setError('Something went wrong. Please check your connection.');
    }
  };

  return (
    <AppView keyboardSafe={false} style={styles.container}>
      <KeyboardAvoidingView
        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
        style={styles.keyboardView}
      >
        <Animated.View
          style={[
            styles.content,
            {
              opacity: fadeAnim,
              transform: [{ translateY: slideAnim }],
            },
          ]}
        >
          <View style={styles.headerSection}>
            <Text style={[styles.brand, { color: theme.colors.primary }]}>CircleCollect</Text>
            <Text style={[styles.title, { color: theme.colors.textPrimary }]}>Welcome back</Text>
            <Text style={[styles.subtitle, { color: theme.colors.textSecondary }]}>
              Enter your mobile number to sign in to your community.
            </Text>
          </View>

          <View style={styles.formSection}>
            <CustomInput
              label="Mobile Number"
              placeholder="e.g. 987654321"
              value={mobile}
              onChangeText={(text) => {
                setMobile(text.replace(/\D/g, ''));

                if (error) setError('');
              }}
              keyboardType="phone-pad"
              maxLength={9}
              icon="call-outline"
              error={error}
            />

            <CustomButton
              title="Continue"
              onPress={handleContinue}
              loading={loading}
              icon="arrow-forward-outline"
              style={styles.button}
            />
          </View>

          <View style={styles.footerSection}>
            <Text style={[styles.footerText, { color: theme.colors.textMuted }]}>
              Your information is secure and private.
            </Text>
          </View>
        </Animated.View>
      </KeyboardAvoidingView>
    </AppView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  keyboardView: {
    flex: 1,
    justifyContent: 'center',
  },
  content: {
    paddingHorizontal: 12,
  },
  headerSection: {
    alignItems: 'center',
    marginBottom: 48,
  },
  brand: {
    fontSize: responsiveFontSize(2.2),
    fontFamily: FontsFamily.nunitoExtraBold,
    letterSpacing: 1.5,
    textTransform: 'uppercase',
    marginBottom: 16,
  },
  title: {
    fontSize: responsiveFontSize(3.5),
    fontFamily: FontsFamily.nunitoBold,
    marginBottom: 8,
  },
  subtitle: {
    fontSize: responsiveFontSize(1.6),
    fontFamily: FontsFamily.nunitoRegular,
    textAlign: 'center',
    paddingHorizontal: 24,
    lineHeight: 24,
  },
  formSection: {
    marginBottom: 32,
  },
  button: {
    marginTop: 16,
  },
  footerSection: {
    alignItems: 'center',
  },
  footerText: {
    fontSize: responsiveFontSize(1.3),
    fontFamily: FontsFamily.nunitoRegular,
    textAlign: 'center',
  },
});