import React, { useState } from 'react';
import { useRouter } from 'expo-router';
import { api } from '@/api';
import { useT } from '@/i18n';
import { AuthShell } from '@/components/AuthShell';
import { Button, Field, TextField } from '@/components/ui';
import { spacing } from '@/theme';

export default function ForgotPasswordScreen() {
  const router = useRouter();
  const t = useT();

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

  async function onSubmit() {
    const mail = email.trim();
    if (!mail || !mail.includes('@')) return setError(t('register.badEmail'));

    setError(null);
    setLoading(true);
    try {
      await api.auth.forgotPassword(mail);
    } catch (e: any) {
      setError(e?.message ?? t('common.tryAgain'));
      setLoading(false);
      return;
    }
    setLoading(false);
    // The endpoint succeeds even for unknown addresses, and the screen must
    // not reveal whether the account exists.
    router.replace(`/reset?email=${encodeURIComponent(mail)}`);
  }

  return (
    <AuthShell title={t('forgot.title')} subtitle={t('forgot.subtitle')} back error={error}>
      <Field label={t('login.email')}>
        <TextField
          icon="mail-outline"
          value={email}
          onChangeText={setEmail}
          placeholder={t('login.emailPlaceholder')}
          autoCapitalize="none"
          keyboardType="email-address"
          autoComplete="email"
          textContentType="emailAddress"
          autoFocus
        />
      </Field>

      <Button
        title={t('forgot.submit')}
        size="lg"
        block
        loading={loading}
        onPress={onSubmit}
        style={{ marginTop: spacing[2] }}
      />
    </AuthShell>
  );
}