import React, { useState } from 'react';
import { View, TextInput, Button, Text } from 'react-native';
import { login, verifyOtp } from '../../services/authService';

const LoginScreen = ({ navigation }) => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [otp, setOtp] = useState('');
  const [isOtpSent, setIsOtpSent] = useState(false);

  const handleLogin = async () => {
    try {
      const response = await login(email, password);
      if (response.data.otpSent) setIsOtpSent(true);
    } catch (error) {
      console.error('Login error:', error);
    }
  };

  const verifyOtp = async () => {
    try {
      const response = await verifyOtp(email, otp);
      if (response.data.success) navigation.navigate('MallSelection');
    } catch (error) {
      console.error('OTP verification error:', error);
    }
  };

  return (
    <View>
      <TextInput placeholder="Email" value={email} onChangeText={setEmail} />
      <TextInput placeholder="Password" value={password} onChangeText={setPassword} secureTextEntry />
      <Button title="Login" onPress={handleLogin} />

      {isOtpSent && (
        <View>
          <TextInput placeholder="Enter OTP" value={otp} onChangeText={setOtp} />
          <Button title="Verify OTP" onPress={verifyOtp} />
        </View>
      )}
    </View>
  );
};

export default LoginScreen;