import React, { useState } from 'react';
import {
  View,
  StyleSheet,
  ScrollView,
  KeyboardAvoidingView,
} from 'react-native';
import { Text } from '@/components/ui/Text';
import { Link, useLocalSearchParams, 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 { Colors } from '@/constants/theme'
import { useAuth } from '@/context/AuthContext';
import { useToast } from '@/context/ToastContext';
import { translateError } from '@/lib/errors/translations';

export default function ActivateScreen() {
  const { userId } = useLocalSearchParams();
  const [code, setCode] = useState('');
  const [errors, setErrors] = useState<{
    code?: string;
  }>({});

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

  const validateForm = () => {
    const newErrors: typeof errors = {};

    if (!code) {
      newErrors.code = 'O código é obrigatório';
    } else if (code.length < 6) {
      newErrors.code = 'O código deve conter pelo menos 6 caracteres';
    }

    setErrors(newErrors);

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

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

    setLoading(true);
    try {
      await activate(code);
      showToast('Conta ativada com sucesso!', 'success');
      router.replace('/');
    } catch (error: any) {
      showToast(translateError(error.message) || 'Falha em ativar a conta', 'error');
    } finally {
      setLoading(false);
    }
  };

  const resendCode = async () => {
    try {
      await requestActivateCode();
      showToast('Novo código enviado. Verifique sua caixa de entrada.', 'success');
    } catch {
      showToast('Falha ao reenviar o código. Tente novamente.', 'error');
    }
  }

  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 }]}>Ativar a conta</Text>
            <Text style={[styles.subtitle, { color: textColor, opacity: 0.7 }]}>
              Digite o código de ativação enviado para seu email
            </Text>
          </View>

          <View style={styles.form}>
            <Input
              label="Código"
              type="text"
              value={code}
              onChangeText={setCode}
              keyboardType="number-pad"
              placeholder="Digite o código enviado para sua conta"
              error={errors.code}
            />

            <Button
              title="Ativar conta"
              onPress={handleActivate}
              loading={loading}
              style={styles.resetButton}
            />
          </View>

          <View style={styles.footer}>
            <Text style={[styles.footerText, { color: textColor, opacity: 0.7 }]}>
              Não recebeu?{' '}
            </Text>

            <Button variant="outline" title="Reenviar um novo código" onPress={resendCode} />
          </View>
        </ScrollView>
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  keyboardView: {
    flex: 1,
  },
  scrollContainer: {
    flexGrow: 1,
    paddingHorizontal: 24,
    justifyContent: 'center',
    minHeight: '100%',
  },
  header: {
    alignItems: 'center',
    marginBottom: 40,
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    marginBottom: 8,
  },
  subtitle: {
    fontSize: 16,
    textAlign: 'center',
  },
  form: {
    marginBottom: 32,
  },
  resetButton: {
    marginTop: 8,
  },
  footer: {
    marginTop: 20,
    borderTopColor: Colors.light.accentBlue,
    borderTopWidth: 1,
    paddingTop: 20
  },
  footerText: {
    textAlign: 'center',
    marginBottom: 10
  }
});