sg-delivery-customer/app/features/screens/LoginScreen/LoginScreen.tsx

import React, { useState } from 'react';
import {
  View,
  Text,
  KeyboardAvoidingView,
  Platform,
  ScrollView,
  TouchableOpacity,
  Alert,
} from 'react-native';
import { getStyles } from './LoginScreen.styles';
import { CustomInput, PrimaryButton, SocialButton } from '@components';
import CheckBox from '@react-native-community/checkbox';
import { useAppTheme } from '@theme';

export const LoginScreen: React.FC = () => {
  const { colors } = useAppTheme();
  const styles = getStyles(colors);

  const [mobileNumber, setMobileNumber] = useState('');
  const [password, setPassword] = useState('');
  const [rememberMe, setRememberMe] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [errors, setErrors] = useState<{ mobile?: string; password?: string }>({});

  const validate = () => {
    const newErrors: { mobile?: string; password?: string } = {};
    if (!mobileNumber) {
      newErrors.mobile = 'Mobile number is required';
    } else if (mobileNumber.length < 9) {
      newErrors.mobile = 'Please enter a valid mobile number';
    }

    if (!password) {
      newErrors.password = 'Password is required';
    } else if (password.length < 6) {
      newErrors.password = 'Password must be at least 6 characters';
    }

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleLogin = () => {
    if (!validate()) return;

    setIsLoading(true);
    // Simulate API request
    setTimeout(() => {
      setIsLoading(false);
      Alert.alert('Success', 'Logged in successfully!');
    }, 1500);
  };

  const handleSocialLogin = (provider: 'google' | 'apple') => {
    Alert.alert('Social Login', `Initiating ${provider} login...`);
  };

  const handleForgotPassword = () => {
    Alert.alert('Forgot Password', 'Redirecting to reset password...');
  };

  const handleSignUp = () => {
    Alert.alert('Sign Up', 'Redirecting to registration...');
  };

  return (
    <KeyboardAvoidingView
      style={styles.container}
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
    >
      <ScrollView
        contentContainerStyle={styles.scrollContainer}
        showsVerticalScrollIndicator={false}
      >
        <View style={styles.headerContainer}>
          <Text style={styles.title}>Welcome back 👋</Text>
          <Text style={styles.subtitle}>Login to continue</Text>
        </View>

        <View style={styles.formContainer}>
          <CustomInput
            label="Mobile number"
            placeholder="+91 98765 43210"
            keyboardType="phone-pad"
            value={mobileNumber}
            onChangeText={(text) => {
              setMobileNumber(text);
              if (errors.mobile) setErrors({ ...errors, mobile: undefined });
            }}
            error={errors.mobile}
          />

          <CustomInput
            label="Password"
            placeholder="••••••••"
            isPassword
            rightActionText="Forgot?"
            onRightActionPress={handleForgotPassword}
            value={password}
            onChangeText={(text) => {
              setPassword(text);
              if (errors.password) setErrors({ ...errors, password: undefined });
            }}
            error={errors.password}
          />

          <View style={styles.row}>
            <TouchableOpacity
              style={styles.rememberMeContainer}
              onPress={() => setRememberMe(!rememberMe)}
              activeOpacity={0.8}
            >
              <CheckBox
                value={rememberMe}
                onValueChange={setRememberMe}
                tintColors={{ true: colors.primary, false: colors.textSecondary }}
                tintColor={colors.textSecondary}
                onTintColor={colors.primary}
                onCheckColor={colors.white}
                onFillColor={colors.primary}
                style={{ marginRight: 8 }}
              />
              <Text style={styles.checkboxText}>Remember me</Text>
            </TouchableOpacity>
          </View>

          <PrimaryButton
            title="Login"
            onPress={handleLogin}
            isLoading={isLoading}
            style={{ marginBottom: 12 }}
          />

          <View style={styles.dividerContainer}>
            <View style={styles.line} />
            <Text style={styles.dividerText}>or continue with</Text>
            <View style={styles.line} />
          </View>

          <View style={styles.socialContainer}>
            <SocialButton provider="google" onPress={() => handleSocialLogin('google')} />
            <SocialButton provider="apple" onPress={() => handleSocialLogin('apple')} />
          </View>

          <TouchableOpacity onPress={handleSignUp} activeOpacity={0.8}>
            <Text style={styles.footerText}>
              Don’t have an account? <Text style={styles.signUpLink}>Sign up</Text>
            </Text>
          </TouchableOpacity>
        </View>
      </ScrollView>
    </KeyboardAvoidingView>
  );
};