import React from 'react';
import { View, TouchableOpacity, Text, StyleSheet, ActivityIndicator } from 'react-native';
import { useForm, FormProvider } from 'react-hook-form';
import { RHFInput } from './RHFInput';
import { loginRules, type LoginFormValues } from '../../schemas/auth.schema';

interface LoginFormProps {
  onSubmit: (values: LoginFormValues) => Promise<void>;
  isLoading?: boolean;
}

export function LoginForm({ onSubmit, isLoading = false }: LoginFormProps) {
  const methods = useForm<LoginFormValues>({
    defaultValues: { email: '', password: '' },
    mode: 'onBlur',
  });

  return (
    <FormProvider {...methods}>
      <View style={styles.container}>
        <RHFInput
          name="email"
          label="Email"
          rules={loginRules.email}
          autoCapitalize="none"
          keyboardType="email-address"
          autoComplete="email"
        />
        <RHFInput
          name="password"
          label="Password"
          rules={loginRules.password}
          secureTextEntry
          autoComplete="current-password"
        />
        <TouchableOpacity
          style={[styles.button, isLoading && styles.buttonDisabled]}
          onPress={methods.handleSubmit(onSubmit)}
          disabled={isLoading}
        >
          {isLoading ? (
            <ActivityIndicator color="#FFFFFF" />
          ) : (
            <Text style={styles.buttonText}>Sign In</Text>
          )}
        </TouchableOpacity>
      </View>
    </FormProvider>
  );
}

const styles = StyleSheet.create({
  container: { width: '100%' },
  button: {
    backgroundColor: '#6366F1',
    borderRadius: 8,
    paddingVertical: 14,
    alignItems: 'center',
    marginTop: 8,
  },
  buttonDisabled: { opacity: 0.6 },
  buttonText: { color: '#FFFFFF', fontSize: 16, fontWeight: '600' },
});
