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

import { apiClient, User } from '@/lib/api';

export default function LoginScreen() {

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

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

  const [errors, setErrors] = useState<{ email?: string; password?: string }>({});

  const { login, isLoading } = useAuth();

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

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

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

  const validateForm = () => {

    const newErrors: { email?: string; password?: string } = {};

    if (!email) {

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

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

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

    }

    if (!password) {

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

    }

    setErrors(newErrors);

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

  };

  const handleLogin = async () => {

    if (!validateForm()) return;

    try {

      await login(email, password);

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

    } catch (error: any) {

	  Alert.alert('Erro: ', 'Falha ao fazer login');

    }

  };

  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 }]}>Bem vindo de volta</Text>

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

              Logue na sua conta

            </Text>

          </View>

          <View style={styles.form}>

            <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="Qual sua senha?"

              error={errors.password}

              showPasswordToggle

            />

            <Button

              title="Entrar"

              onPress={handleLogin}

              loading={isLoading}

              style={styles.loginButton}

            />

            <Link href="/auth/forgot-password" style={[styles.link, {color: tintColor }]} asChild>

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

                Esqueceu a senha?

              </Text>

            </Link>

          </View>

          <View style={styles.footer}>

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

              Não tem uma conta ainda?{' '}

            </Text>

            <Link href="/auth/signup" asChild style={[styles.link, { color: tintColor }]}>

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

                Cadastre-se

              </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%',

  },

  header: {

    alignItems: 'center',

    marginBottom: 40,

  },

  title: {

    fontSize: 28,

    fontWeight: 'bold',

    marginBottom: 8,

  },

  subtitle: {

    fontSize: 16,

    textAlign: 'center',

  },

  form: {

    marginBottom: 32,

  },

  loginButton: {

    marginTop: 8,

    marginBottom: 16,

  },

  link: {

    textAlign: 'center',

    fontSize: 14,

    fontWeight: '500',

  },

  footer: {

    flexDirection: 'row',

    justifyContent: 'center',

    alignItems: 'center',

    marginTop: 'auto',

    paddingBottom: 20,

  },

  footerText: {

    fontSize: 14,

  },

});