rebreak-monorepo/apps/rebreak-native/app/(auth)/forgot-password.tsx

import { useState } from 'react';
import {
  View,
  Text,
  TextInput,
  TouchableOpacity,
  KeyboardAvoidingView,
  Platform,
  ActivityIndicator,
} from 'react-native';
import { useRouter } from 'expo-router';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useTranslation } from 'react-i18next';
import { useAuthStore } from '../../stores/auth';

const INPUT_STYLE = {
  fontSize: 16,
  lineHeight: 22,
  paddingVertical: 14,
  paddingHorizontal: 16,
  color: '#0a0a0a',
  fontFamily: 'Nunito_400Regular',
} as const;

export default function ForgotPasswordScreen() {
  const router = useRouter();
  const { t } = useTranslation();
  const { resetPasswordForEmail } = useAuthStore();

  const [email, setEmail] = useState('');
  const [loading, setLoading] = useState(false);
  const [sent, setSent] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const onSubmit = async () => {
    if (!email.trim()) return;
    setError(null);
    setLoading(true);
    const res = await resetPasswordForEmail(email.trim());
    setLoading(false);
    if (res.error) {
      setError(res.error);
      return;
    }
    setSent(true);
  };

  return (
    <SafeAreaView className="flex-1 bg-white">
      <KeyboardAvoidingView
        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
        className="flex-1"
      >
        <View className="flex-1 px-6 justify-center">
          <Text className="text-3xl text-neutral-900 mb-2" style={{ fontFamily: 'Nunito_700Bold' }}>{t('auth.resetPasswordTitle')}</Text>
          <Text className="text-base text-neutral-500 mb-8 leading-6" style={{ fontFamily: 'Nunito_400Regular' }}>
            {t('auth.resetPasswordSubtitle')}
          </Text>

          {!sent ? (
            <>
              <TextInput
                className="bg-neutral-100 rounded-xl mb-3"
                style={INPUT_STYLE}
                placeholder={t('auth.emailPlaceholder')}
                placeholderTextColor="#a3a3a3"
                autoCapitalize="none"
                autoComplete="email"
                keyboardType="email-address"
                value={email}
                onChangeText={setEmail}
                autoFocus
              />

              {error && (
                <View className="bg-red-50 border border-red-200 rounded-xl px-4 py-3 mb-3">
                  <Text className="text-red-600 text-sm" style={{ fontFamily: 'Nunito_400Regular' }}>{error}</Text>
                </View>
              )}

              <TouchableOpacity
                onPress={onSubmit}
                disabled={loading || !email.trim()}
                activeOpacity={0.8}
                className="bg-rebreak-500 rounded-xl items-center mt-1 disabled:opacity-40"
                style={{ paddingVertical: 16 }}
              >
                {loading ? (
                  <ActivityIndicator color="white" size="small" />
                ) : (
                  <Text className="text-white text-base" style={{ fontFamily: 'Nunito_600SemiBold' }}>{t('auth.resetPasswordSend')}</Text>
                )}
              </TouchableOpacity>
            </>
          ) : (
            <View className="bg-green-50 border border-green-200 rounded-xl px-5 py-6 mb-4">
              <Text className="text-green-700 text-base mb-2" style={{ fontFamily: 'Nunito_600SemiBold' }}>{t('auth.resetPasswordSent')}</Text>
              <Text className="text-green-600 text-sm leading-5" style={{ fontFamily: 'Nunito_400Regular' }}>
                {t('auth.resetPasswordSentDescPrefix')}<Text style={{ fontFamily: 'Nunito_600SemiBold' }}>{email}</Text>{t('auth.resetPasswordSentDescSuffix')}
              </Text>
            </View>
          )}

          <TouchableOpacity
            onPress={() => router.back()}
            activeOpacity={0.7}
            className="py-4 items-center mt-2"
          >
            <Text className="text-neutral-500 text-sm" style={{ fontFamily: 'Nunito_400Regular' }}>{t('auth.backToLogin')}</Text>
          </TouchableOpacity>
        </View>
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
}