import { useState, useEffect } from 'react';

import {

  View,

  StyleSheet,

  ScrollView,

  KeyboardAvoidingView,

} from 'react-native';

import { Text } from '@/components/ui/Text';

import { ThemedView } from '@/components/ui/themed-view'

import { Link, useLocalSearchParams, router } from 'expo-router';

import { StatusBar } from 'expo-status-bar';

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';

import { apiClient, ApiError } from '@/lib/api'

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

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

import { Card } from '@/components/ui/Cards';

import AvatarUpload  from '@/components/ui/AvatarUpload';

import { Typography, Spacing, Colors } from '@/constants/theme';

export default function Profile() {

  const { user, updateAuthUser } = useAuth();

  const { showToast } = useToast();

  const [firstName, setFirstName] = useState(user.firstName);

  const [lastName, setLastName] = useState(user.lastName);

  const [email, setEmail] = useState(user.email);

  const [password, setPassword] = useState();

  const [confirmPassword, setConfirmPassword] = useState();

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

  const [errors, setErrors] = useState<{

    firstName?: string;

    password?: string;

    confirmPassword?: string;

  }>({});

  useEffect(() => {

    setFirstName(user.firstName)

    setLastName(user.lastName)

    setEmail(user.email)

  }, [user])

  const backgroundColor = useThemeColor({}, 'background');

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

  const validateForm = () => {

    const newErrors: {

      firstName?: string;

      email?: string;

      password?: string;

      confirmPassword?: string

    } = {};

    if (password) {

      if (!confirmPassword) {

        newErrors.confirmPassword = 'Precisa confirmar a senha';

      } else {

        if (password !== confirmPassword) {

          newErrors.confirmPassword = "Senhas não conferem";

        }

      }

    }

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

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

    }

    if (!firstName) {

      newErrors.firstName = 'É necessário ter um nome';

    }

    setErrors(newErrors);

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

  }

  const handleUpdate = async () => {

    if (!validateForm()) return;

    const data = {};

    data.firstName = firstName

    data.lastName = lastName

    data.email = email

    if (password) {

      data.password = password

    }

    try {

      const id = user.id;

      const response = await apiClient.updateUser({

        id,

        firstName,

        lastName,

        email,

        password

      });

      updateAuthUser(response.user);

      router.replace('/(tabs)/insights');

    } catch (error: any) {

      console.error("[PROFILE]", error)

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

        setErrors(translateFields(error.fields));

      } else {

        showToast(translateError(error.message) || 'Falha ao atualizar o perfil', 'error');

      }

    }

  }

  const onChangeAvatar = (userData) => {

    const { id, avatarKey, avatarURL, firstName, lastName, email } = userData;

    updateAuthUser({

      id,

      avatarKey,

      avatarURL,

      firstName,

      lastName,

      email

    });

  }

  return (

    <SafeAreaView style={[styles.container, { backgroundColor }]}>

      <StatusBar style={'dark'} />

      <KeyboardAvoidingView

        behavior='height'

        style={styles.keyboardView}

      >

        <ScrollView

          contentContainerStyle={styles.scrollContainer}

          showsVerticalScrollIndicator={false}

        >

          <AvatarUpload

            currentAvatar={user.avatarURL}

            onUploadSuccess={onChangeAvatar}

            onRemoveSuccess={onChangeAvatar} />

          <View style={styles.form}>

            <Card style={styles.cardBlock}>

              <Input

                label="Primeiro Nome"

                type="text"

                value={firstName}

                onChangeText={setFirstName}

                placeholder="Qual seu nome?"

                variant="darkGhost"

                error={errors.firstName}

              />

              <Input

                label="Sobrenome"

                type="text"

                value={lastName}

                variant="darkGhost"

                onChangeText={setLastName}

                placeholder="Qual seu sobrenome?"

                error={errors.lastName}

              />

            </Card>

            <Card style={styles.cardBlock}>

              <Input

                label="Email"

                type="text"

                value={email}

                variant="darkGhost"

                onChangeText={setEmail}

                placeholder="Qual seu email?"

                error={errors.email}

              />

            </Card>

            <Card style={styles.cardBlock}>

              <Input

                label="Nova senha"

                type="password"

                value={password}

                onChangeText={setPassword}

                placeholder="Digite uma nova senha"

                error={errors.password}

                variant="darkGhost"

                showPasswordToggle

              />

              <Input

                label="Confirmar nova senha"

                type="password"

                value={confirmPassword}

                onChangeText={setConfirmPassword}

                placeholder="Confirme a nova senha"

                error={errors.confirmPassword}

                variant="darkGhost"

                showPasswordToggle

              />

              <Text style={styles.cardBlockHint}>

                Preencha apenas se quiser mudar a sua senha

              </Text>

            </Card>

            <Button

              title="Atualizar perfil"

              onPress={handleUpdate}

              loading={loading}

              style={styles.resetButton}

            />

          </View>

        </ScrollView>

      </KeyboardAvoidingView>

    </SafeAreaView>

  )

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

  },

  keyboardView: {

    flex: 1,

  },

  scrollContainer: {

    flexGrow: 1,

    paddingHorizontal: 24,

    justifyContent: 'start',

    minHeight: '100%',

  },

  header: {

    alignItems: 'left',

    marginBottom: 40,

  },

  title: {

    fontSize: 28,

    fontWeight: 'bold',

    marginBottom: 8,

  },

  subtitle: {

    fontSize: 16,

    textAlign: 'left',

  },

  form: {

    marginBottom: 32,

  },

  resetButton: {

    marginTop: 8,

  },

  link: {

    textAlign: 'center',

    fontSize: 14,

    fontWeight: '500',

  },

  footer: {

    flexDirection: 'row',

    justifyContent: 'center',

    alignItems: 'center',

    marginTop: 'auto',

    paddingBottom: 20,

  },

  footerText: {

    fontSize: 14,

  },

  cardBlock: {

    padding: Spacing.cardGap

  },

  cardBlockHint: {

    ...Typography.cardHint,

    color: Colors.light.textSecondary

  }

});