import React, { useState } from 'react';
import { View, Text, StyleSheet, Alert } from 'react-native';
import { useForm, Controller } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { Ionicons } from '@expo/vector-icons';
import { Screen } from '@presentation/components/layout/Screen';
import { Header } from '@presentation/components/layout/Header';
import { Input } from '@presentation/components/ui/Input';
import { Button } from '@presentation/components/ui/Button';
import { colors, typography, spacing } from '@shared/theme';
import { forgotPasswordUseCase } from '@infrastructure/container';

const schema = z.object({
  email: z.string().email('E-mail inválido'),
});

type FormData = z.infer<typeof schema>;

/**
 * Tela de Recuperação de Senha — L2-0
 */
export default function ForgotPasswordScreen(): React.ReactElement {
  const [isLoading, setIsLoading] = useState(false);
  const [sent, setSent] = useState(false);

  const { control, handleSubmit, formState: { errors } } = useForm<FormData>({
    resolver: zodResolver(schema),
    defaultValues: { email: '' },
  });

  async function onSubmit(data: FormData): Promise<void> {
    setIsLoading(true);
    try {
      await forgotPasswordUseCase.execute(data.email);
      setSent(true);
    } catch {
      Alert.alert('Erro', 'Não foi possível enviar o e-mail.');
    } finally {
      setIsLoading(false);
    }
  }

  return (
    <Screen keyboardAvoiding>
      <Header title="Recuperar senha" showBack />

      <View style={styles.content}>
        {sent ? (
          <View style={styles.successCard}>
            <Ionicons name="mail-open-outline" size={48} color={colors.accent} />
            <Text style={styles.successTitle}>E-mail enviado!</Text>
            <Text style={styles.successText}>
              Verifique sua caixa de entrada e siga as instruções para redefinir sua senha.
            </Text>
          </View>
        ) : (
          <>
            <Text style={styles.description}>
              Informe seu e-mail cadastrado. Enviaremos um link para você redefinir sua senha.
            </Text>

            <Controller
              control={control}
              name="email"
              render={({ field }) => (
                <Input
                  label="E-MAIL"
                  placeholder="seu@email.com"
                  keyboardType="email-address"
                  autoComplete="email"
                  leftIcon={<Ionicons name="mail-outline" size={18} color={colors.textSecondary} />}
                  error={errors.email?.message}
                  onChangeText={field.onChange}
                  value={field.value}
                />
              )}
            />

            <Button label="Enviar link" onPress={handleSubmit(onSubmit)} isLoading={isLoading} style={styles.cta} />
          </>
        )}
      </View>
    </Screen>
  );
}

const styles = StyleSheet.create({
  content: {
    flex: 1,
    paddingTop: spacing[6],
    gap: spacing[5],
  },
  description: {
    fontFamily: typography.fontFamily.ui,
    fontSize: typography.fontSize.base,
    color: colors.textSecondary,
    lineHeight: typography.fontSize.base * 1.6,
  },
  cta: {
    marginTop: spacing[2],
  },
  successCard: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    gap: spacing[4],
    paddingHorizontal: spacing[4],
  },
  successTitle: {
    fontFamily: typography.fontFamily.ui,
    fontSize: typography.fontSize.xl,
    fontWeight: typography.fontWeight.bold,
    color: colors.textPrimary,
  },
  successText: {
    fontFamily: typography.fontFamily.ui,
    fontSize: typography.fontSize.base,
    color: colors.textSecondary,
    textAlign: 'center',
    lineHeight: typography.fontSize.base * 1.6,
  },
});