MeowSpool/mobile/app/(auth)/login.tsx

import React, { useState } from 'react';
import { View, Text, Image, StyleSheet, TouchableOpacity, Alert } from 'react-native';
import { Link, useRouter } from 'expo-router';
import { useForm, Controller } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { Ionicons } from '@expo/vector-icons';
import { Screen } from '@presentation/components/layout/Screen';
import { Input } from '@presentation/components/ui/Input';
import { Button } from '@presentation/components/ui/Button';
import { colors, typography, spacing } from '@shared/theme';

const schema = z.object({
  email: z.string().email('E-mail inválido'),
  password: z.string().min(1, 'Senha obrigatória'),
});

type FormData = z.infer<typeof schema>;

/**
 * Tela de Login — G3-0
 * E-mail + Senha, "Esqueci minha senha" e OAuth Google.
 */
export default function LoginScreen(): React.ReactElement {
  const router = useRouter();
  const [isLoading, setIsLoading] = useState(false);
  const [isGoogleLoading, setIsGoogleLoading] = useState(false);

  const { control, handleSubmit, formState: { errors } } = useForm<FormData>({
    resolver: zodResolver(schema),
    defaultValues: { email: '', password: '' },
  });

  async function onSubmit(data: FormData): Promise<void> {
    setIsLoading(true);
    try {
      // TODO: injetar LoginUseCase via container de DI
      console.log('login', data);
      router.replace('/(app)/(tabs)/home');
    } catch (err) {
      Alert.alert('Erro', 'E-mail ou senha incorretos.');
    } finally {
      setIsLoading(false);
    }
  }

  async function onGoogleLogin(): Promise<void> {
    setIsGoogleLoading(true);
    try {
      // TODO: Google Sign-In + GoogleLoginUseCase
      router.replace('/(app)/(tabs)/home');
    } catch {
      Alert.alert('Erro', 'Não foi possível entrar com o Google.');
    } finally {
      setIsGoogleLoading(false);
    }
  }

  return (
    <Screen scrollable keyboardAvoiding>
      {/* Logo */}
      <View style={styles.hero}>
        <View style={styles.logoContainer}>
          <Ionicons name="paw" size={48} color={colors.accent} />
        </View>
        <Text style={styles.appName}>MeowSpool</Text>
        <Text style={styles.tagline}>Gerencie seus filamentos com precisão.</Text>
      </View>

      {/* Formulário */}
      <View style={styles.form}>
        <Controller
          control={control}
          name="email"
          render={({ field }) => (
            <Input
              label="E-MAIL"
              placeholder="seu@email.com"
              keyboardType="email-address"
              autoComplete="email"
              leftIcon={<Ionicons name="mail-outline" size={18} color={colors.textSecondary} />}
              error={errors.email?.message}
              onChangeText={field.onChange}
              value={field.value}
            />
          )}
        />

        <Controller
          control={control}
          name="password"
          render={({ field }) => (
            <Input
              label="SENHA"
              placeholder="••••••••"
              isPassword
              leftIcon={<Ionicons name="lock-closed-outline" size={18} color={colors.textSecondary} />}
              error={errors.password?.message}
              onChangeText={field.onChange}
              value={field.value}
            />
          )}
        />

        <TouchableOpacity onPress={() => router.push('/(auth)/forgot-password')} style={styles.forgotRow}>
          <Text style={styles.forgotText}>Esqueci minha senha</Text>
        </TouchableOpacity>

        <Button label="Entrar" onPress={handleSubmit(onSubmit)} isLoading={isLoading} />

        {/* Divisor */}
        <View style={styles.divider}>
          <View style={styles.dividerLine} />
          <Text style={styles.dividerText}>ou continue com</Text>
          <View style={styles.dividerLine} />
        </View>

        {/* Google */}
        <Button
          label="Entrar com Google"
          variant="secondary"
          leftIcon={<Ionicons name="logo-google" size={18} color={colors.textPrimary} />}
          onPress={onGoogleLogin}
          isLoading={isGoogleLoading}
        />

        {/* Criar conta */}
        <View style={styles.footer}>
          <Text style={styles.footerText}>Não tem uma conta? </Text>
          <Link href="/(auth)/register" asChild>
            <TouchableOpacity>
              <Text style={styles.footerLink}>Criar conta</Text>
            </TouchableOpacity>
          </Link>
        </View>
      </View>
    </Screen>
  );
}

const styles = StyleSheet.create({
  hero: {
    alignItems: 'center',
    paddingTop: spacing[12],
    paddingBottom: spacing[10],
    gap: spacing[2],
  },
  logoContainer: {
    width: 80,
    height: 80,
    borderRadius: 20,
    backgroundColor: colors.bgSurface,
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: spacing[2],
  },
  appName: {
    fontFamily: typography.fontFamily.ui,
    fontSize: typography.fontSize['2xl'],
    fontWeight: typography.fontWeight.bold,
    color: colors.textPrimary,
  },
  tagline: {
    fontFamily: typography.fontFamily.ui,
    fontSize: typography.fontSize.base,
    color: colors.textSecondary,
  },
  form: {
    gap: spacing[4],
    paddingBottom: spacing[8],
  },
  forgotRow: {
    alignSelf: 'flex-end',
    marginTop: -spacing[2],
  },
  forgotText: {
    fontFamily: typography.fontFamily.ui,
    fontSize: typography.fontSize.sm,
    color: colors.accent,
  },
  divider: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: spacing[3],
    marginVertical: spacing[2],
  },
  dividerLine: {
    flex: 1,
    height: 1,
    backgroundColor: colors.border,
  },
  dividerText: {
    fontFamily: typography.fontFamily.ui,
    fontSize: typography.fontSize.sm,
    color: colors.textSecondary,
  },
  footer: {
    flexDirection: 'row',
    justifyContent: 'center',
    marginTop: spacing[2],
  },
  footerText: {
    fontFamily: typography.fontFamily.ui,
    fontSize: typography.fontSize.sm,
    color: colors.textSecondary,
  },
  footerLink: {
    fontFamily: typography.fontFamily.ui,
    fontSize: typography.fontSize.sm,
    color: colors.accent,
    fontWeight: typography.fontWeight.semibold,
  },
});