import React, { useState } from 'react';
import { StyleSheet, View } from 'react-native';
import { Link } from 'expo-router';
import { useThemeColor } from '@/hooks/use-theme-color';
import { Button, Input } from '@/components/ui';
import { Text } from '@/components/ui/Text';
import { AuthScreen } from '@/components/auth/AuthScreen';
import { useAuth } from '@/context/AuthContext';
import { useToast } from '@/context/ToastContext';
import { translateError } from '@/lib/errors/translations';

export default function ForgotPasswordScreen() {
  const [email, setEmail] = useState('');
  const [emailSent, setEmailSent] = useState(false);
  const [errors, setErrors] = useState<{ email?: string }>({});

  const { forgotPassword } = useAuth();
  const { showToast } = useToast();
  const [loading, setLoading] = useState(false);
  const textColor = useThemeColor({}, 'text');
  const tintColor = useThemeColor({}, 'tint');

  const validateForm = () => {
    const newErrors: { email?: string } = {};

    if (!email) {
      newErrors.email = 'Email é obrigatório';
    } else if (!/\S+@\S+\.\S+/.test(email)) {
      newErrors.email = 'Por favor entre um email válido';
    }

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleForgotPassword = async () => {
    if (!validateForm()) return;

    setLoading(true);
    try {
      await forgotPassword(email);
      setEmailSent(true);
    } catch (error) {
      showToast(translateError(error) || 'Falha ao enviar link de recuperação', 'error');
    } finally {
      setLoading(false);
    }
  };

  if (emailSent) {
    return (
      <AuthScreen
        title="Verifique seu email"
        subtitle={`Enviamos as instruções para resetar sua senha para ${email}`}
        footer={
          <View style={styles.actions}>
            <Button
              title="Reenviar email"
              variant="outline"
              onPress={() => setEmailSent(false)}
            />

            <Link href="/auth/login" asChild style={StyleSheet.flatten([styles.link, { color: tintColor }])}>
              <Text style={StyleSheet.flatten([styles.link, { color: tintColor }])}>
                Voltar para login
              </Text>
            </Link>
          </View>
        }
      />
    );
  }

  return (
    <AuthScreen
      title="Esqueceu a senha?"
      subtitle="Insira seu email para receber as instruções de recuperação"
      footer={
        <View style={styles.footer}>
          <Text style={[styles.footerText, { color: textColor, opacity: 0.7 }]}>
            Lembra tua senha?{' '}
          </Text>
          <Link href="/auth/login" asChild style={StyleSheet.flatten([styles.link, { color: tintColor }])}>
            <Text style={StyleSheet.flatten([styles.link, { color: tintColor }])}>
              Faça login
            </Text>
          </Link>
        </View>
      }
    >
      <View style={styles.form}>
        <Input
          label="Email"
          type="email"
          value={email}
          onChangeText={setEmail}
          placeholder="Qual seu email?"
          error={errors.email}
          autoCapitalize="none"
        />

        <Button
          title="Enviar link de recuperação"
          onPress={handleForgotPassword}
          loading={loading}
          style={styles.resetButton}
        />
      </View>
    </AuthScreen>
  );
}

const styles = StyleSheet.create({
  form: {
    marginBottom: 32,
  },
  resetButton: {
    marginTop: 8,
  },
  actions: {
    gap: 16,
  },
  link: {
    textAlign: 'center',
    fontSize: 14,
    fontWeight: '500',
  },
  footer: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  footerText: {
    fontSize: 14,
  },
});