import React, { useState } from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  KeyboardAvoidingView,
  Platform,
  Alert,
} from 'react-native';
import { Link, router } from 'expo-router';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useThemeColor } from '@/hooks/use-theme-color';
import { Button, Input } from '@/components/ui';
import { useAuth } from '@/context/AuthContext';

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

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

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

    if (!email) {
      newErrors.email = 'Email is required';
    } else if (!/\S+@\S+\.\S+/.test(email)) {
      newErrors.email = 'Please enter a valid email';
    }

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

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

    setLoading(true);
    try {
      const data = await forgotPassword(email);
      setEmailSent(true);
      // In development, show the reset token
      if (data.token) {
        setResetToken(data.token);
      }
    } catch (error: any) {
      Alert.alert('Erro: ', error.message || 'Falha ao enviar link de recuperação');
    } finally {
      setLoading(false);
    }
  };

  const handleUseToken = () => {
    if (resetToken) {
      router.push({
        pathname: '/auth/reset-password',
        params: { token: resetToken },
      });
    }
  };

  if (emailSent) {
    return (
      <SafeAreaView style={[styles.container, { backgroundColor }]}>
        <View style={styles.successContainer}>
          <Text style={[styles.title, { color: textColor }]}>Verifique seu email</Text>
          <Text style={[styles.message, { color: textColor, opacity: 0.7 }]}>
            Enviamos as instruções para resetar sua senha para {email}
          </Text>

          {/* Development only - show reset token */}
          {resetToken && (
            <View style={styles.devSection}>
              <Text style={[styles.devTitle, { color: tintColor }]}>
                Dev mode:
              </Text>
              <Text style={[styles.devText, { color: textColor, opacity: 0.7 }]}>
                Token: {resetToken}
              </Text>
              <Button
                title="Usar token para resetar senha"
                onPress={handleUseToken}
                style={styles.devButton}
              />
            </View>
          )}

          <View style={styles.actions}>
            <Button
              title="Reenviar email"
              variant="outline"
              onPress={() => setEmailSent(false)}
              style={styles.resendButton}
            />

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

  return (
    <SafeAreaView style={[styles.container, { backgroundColor }]}>
      <KeyboardAvoidingView
        behavior='height'
        style={styles.keyboardView}
      >
        <ScrollView
          contentContainerStyle={styles.scrollContainer}
          showsVerticalScrollIndicator={false}
        >
          <View style={styles.header}>
            <Text style={[styles.title, { color: textColor }]}>Esqueceu a senha?</Text>
            <Text style={[styles.subtitle, { color: textColor, opacity: 0.7 }]}>
              Insira seu email para receber as instruções de recuperação
            </Text>
          </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>

          <View style={styles.footer}>
            <Text style={[styles.footerText, { color: textColor, opacity: 0.7 }]}>
              Lembra tua senha?{' '}
            </Text>
            <Link href="/auth/login" asChild style={[styles.link, { color: tintColor }]}>
              <Text style={[styles.link, { color: tintColor }]}>
                Faça login
              </Text>
            </Link>
          </View>
        </ScrollView>
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  keyboardView: {
    flex: 1,
  },
  scrollContainer: {
    flexGrow: 1,
    paddingHorizontal: 24,
    justifyContent: 'center',
    minHeight: '100%',
  },
  successContainer: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 24,
  },
  header: {
    alignItems: 'center',
    marginBottom: 40,
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    marginBottom: 8,
    textAlign: 'center',
  },
  subtitle: {
    fontSize: 16,
    textAlign: 'center',
    lineHeight: 24,
  },
  message: {
    fontSize: 16,
    textAlign: 'center',
    lineHeight: 24,
    marginBottom: 32,
  },
  form: {
    marginBottom: 32,
  },
  resetButton: {
    marginTop: 8,
  },
  actions: {
    gap: 16,
  },
  resendButton: {
    marginBottom: 8,
  },
  devSection: {
    marginBottom: 32,
    padding: 16,
    borderRadius: 8,
    backgroundColor: 'rgba(74, 144, 226, 0.1)',
  },
  devTitle: {
    fontSize: 14,
    fontWeight: '600',
    marginBottom: 8,
  },
  devText: {
    fontSize: 12,
    marginBottom: 12,
    fontFamily: 'monospace',
  },
  devButton: {
    marginTop: 8,
  },
  link: {
    textAlign: 'center',
    fontSize: 14,
    fontWeight: '500',
  },
  footer: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 'auto',
    paddingBottom: 20,
  },
  footerText: {
    fontSize: 14,
  },
});