import React, { useState } from 'react';
import { View, Text, SafeAreaView, Alert } from 'react-native';
import { InputField, Button, InlineButton } from '@components';
import { styles } from './forgotPassword.styles';

interface ForgotPasswordScreenProps {
  onSendCode: (emailOrPhone: string) => void;
  onSignInPress: () => void;
}

export function ForgotPasswordScreen({
  onSendCode,
  onSignInPress,
}: ForgotPasswordScreenProps) {
  const [emailOrPhone, setEmailOrPhone] = useState('');
  const [loading, setLoading] = useState(false);

  const handleSendCode = async () => {
    if (!emailOrPhone.trim()) {
      Alert.alert('Error', 'Please enter your email or phone number');
      return;
    }

    setLoading(true);

    try {
      // Simulating verification code API call
      await new Promise((resolve) => {
        setTimeout(() => {
          resolve('');
        }, 1000);
      });
      Alert.alert('Success', `Verification code sent to ${emailOrPhone}`);
      onSendCode(emailOrPhone);
    } finally {
      setLoading(false);
    }
  };

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.card}>
        {/* Header */}
        <View style={styles.headerContainer}>
          <Text style={styles.title}>Forgot Password</Text>
          <Text style={styles.subtitle}>
            Enter your registered email address or phone number to reset your password.
          </Text>
        </View>

        {/* Email or Phone Input */}
        <InputField
          label="EMAIL OR PHONE NUMBER"
          placeholder="email@example.com or phone number"
          value={emailOrPhone}
          onChangeText={setEmailOrPhone}
          keyboardType="email-address"
          autoCapitalize="none"
          autoCorrect={false}
        />

        {/* Send Verification Code Button */}
        <Button
          title="SEND VERIFICATION CODE"
          onPress={handleSendCode}
          loading={loading}
        />

        {/* Remember your password? Sign In */}
        <View style={styles.footerContainer}>
          <InlineButton
            onPress={onSignInPress}
            text="Remember your password?"
            highlightedText="Sign In"
          />
        </View>
      </View>
    </SafeAreaView>
  );
}