import React, { useState } from 'react';

import { Pressable, StyleSheet, View } from 'react-native';

import { Ionicons } from '@expo/vector-icons';

import { Link, router } 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 { ApiError } from '@/lib/api';

import { useToast } from '@/context/ToastContext';

import { translateError, translateFields } from '@/lib/errors/translations';

export default function SignupScreen() {

  const [firstName, setFirstName] = useState('');

  const [lastName, setLastName] = useState('');

  const [email, setEmail] = useState('');

  const [password, setPassword] = useState('');

  const [confirmPassword, setConfirmPassword] = useState('');

  const [acceptedTerms, setAcceptedTerms] = useState(false);

  const [errors, setErrors] = useState<{

    firstName?: string;

    email?: string;

    password?: string;

    confirmPassword?: string;

    acceptedTerms?: string;

  }>({});

  const [loading, setLoading] = useState(false);

  const { signup } = useAuth();

  const { showToast } = useToast();

  const textColor = useThemeColor({}, 'text');

  const tintColor = useThemeColor({}, 'tint');

  const validateForm = () => {

    const newErrors: typeof errors = {};

    if (!firstName.trim()) {

      newErrors.firstName = 'O nome é obrigatório';

    }

    if (!email) {

      newErrors.email = 'Email é obrigatório';

    } else if (!/\S+@\S+\.\S+/.test(email)) {

      newErrors.email = 'Por favor entre um email válido';

    }

    if (!password) {

      newErrors.password = 'Senha é obrigatório';

    } else if (password.length < 6) {

      newErrors.password = 'A senha deve conter pelo menos 6 caracteres';

    }

    if (!confirmPassword) {

      newErrors.confirmPassword = 'Por favor confirme sua senha';

    } else if (password !== confirmPassword) {

      newErrors.confirmPassword = 'As senhas não coincidem';

    }

    if (!acceptedTerms) {

      newErrors.acceptedTerms = 'Você precisa aceitar os termos para continuar';

    }

    setErrors(newErrors);

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

  };

  const handleSignup = async () => {

    if (!validateForm()) return;

    setLoading(true);

    try {

      await signup({ firstName, lastName, email, password, acceptedTerms });

      router.replace('/');

    } catch (error) {

      if (error instanceof ApiError && error.fields) {

        setErrors(translateFields(error.fields));

      } else {

        showToast(translateError(error) || 'Falha no cadastro. Tente novamente.', 'error');

      }

    } finally {

      setLoading(false);

    }

  };

  return (

    <AuthScreen

      title="Criar conta"

      subtitle="Cadastre-se para começar a monitorar o seu humor."

      footer={

        <View style={styles.footer}>

          <Text style={[styles.footerText, { color: textColor, opacity: 0.7 }]}>

            Já tem uma conta?{' '}

          </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="Nome"

          value={firstName}

          onChangeText={setFirstName}

          placeholder="Digite seu nome"

          error={errors.firstName}

        />

        <Input

          label="Sobrenome (opcional)"

          value={lastName}

          onChangeText={setLastName}

          placeholder="Digite seu sobrenome"

        />

        <Input

          label="Email"

          type="email"

          value={email}

          onChangeText={setEmail}

          placeholder="Qual seu email?"

          error={errors.email}

          autoCapitalize="none"

        />

        <Input

          label="Senha"

          type="password"

          value={password}

          onChangeText={setPassword}

          placeholder="Deve ter no min. 6 caracteres"

          error={errors.password}

          showPasswordToggle

        />

        <Input

          label="Confirme a senha"

          type="password"

          value={confirmPassword}

          onChangeText={setConfirmPassword}

          placeholder="Confirme sua senha"

          error={errors.confirmPassword}

          showPasswordToggle

        />

        <View style={styles.termsRow}>

          <Pressable

            onPress={() => setAcceptedTerms((value) => !value)}

            hitSlop={8}

            accessibilityRole="checkbox"

            accessibilityState={{ checked: acceptedTerms }}

            testID="checkbox-terms"

          >

            <Ionicons

              name={acceptedTerms ? 'checkbox' : 'square-outline'}

              size={22}

              color={acceptedTerms ? tintColor : textColor}

            />

          </Pressable>

          <Text style={[styles.termsText, { color: textColor }]}>

            Li e aceito os{' '}

          </Text>

          <Link href="/terms" asChild style={StyleSheet.flatten([styles.termsLink, { color: tintColor }])}>

            <Text style={StyleSheet.flatten([styles.termsLink, { color: tintColor }])}>

              Termos e Condições

            </Text>

          </Link>

        </View>

        {errors.acceptedTerms && (

          <Text style={[styles.termsError, { color: '#ef4444' }]}>

            {errors.acceptedTerms}

          </Text>

        )}

        <Button

          title="Criar conta"

          onPress={handleSignup}

          loading={loading}

          style={styles.signupButton}

        />

      </View>

    </AuthScreen>

  );

}

const styles = StyleSheet.create({

  form: {

    marginBottom: 32,

  },

  signupButton: {

    marginTop: 8,

  },

  termsRow: {

    flexDirection: 'row',

    alignItems: 'center',

    flexWrap: 'wrap',

    marginBottom: 8,

  },

  termsText: {

    fontSize: 14,

  },

  termsLink: {

    fontSize: 14,

    fontWeight: '600',

  },

  termsError: {

    fontSize: 12,

    marginBottom: 8,

  },

  link: {

    textAlign: 'center',

    fontSize: 14,

    fontWeight: '500',

  },

  footer: {

    flexDirection: 'row',

    justifyContent: 'center',

    alignItems: 'center',

  },

  footerText: {

    fontSize: 14,

  },

});