import { useState } from 'react';
import {
  View,
  Text,
  TextInput,
  TouchableOpacity,
  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';
import { KeyboardAwareScreen } from '../../components/KeyboardAwareScreen';

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 [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;
    }
    router.push(`/(auth)/reset-otp?email=${encodeURIComponent(email.trim())}`);
  };

  return (
    <SafeAreaView className="flex-1 bg-white">
      <KeyboardAwareScreen contentContainerStyle={{ paddingHorizontal: 24, justifyContent: '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>

          <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>

          <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>
      </KeyboardAwareScreen>
    </SafeAreaView>
  );
}
