import { Redirect } from 'expo-router';
import { useState } from 'react';
import { Pressable, StyleSheet, TextInput } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';

import { Button } from '@/components/button';
import { ScreenBackground } from '@/components/screen-background';
import { ThemedText } from '@/components/themed-text';
import { Spacing } from '@/constants/theme';
import { useAuth } from '@/lib/auth-context';
import { useTheme } from '@/hooks/use-theme';

export default function LoginScreen() {
  const { session, signIn, signUp, requestPasswordReset } = useAuth();
  const theme = useTheme();
  const [mode, setMode] = useState<'signIn' | 'signUp' | 'reset'>('signIn');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [displayName, setDisplayName] = useState('');
  const [error, setError] = useState<string | null>(null);
  const [resetSent, setResetSent] = useState(false);
  const [submitting, setSubmitting] = useState(false);

  if (session) return <Redirect href="/" />;

  async function handleSubmit() {
    setError(null);
    setSubmitting(true);

    if (mode === 'reset') {
      const result = await requestPasswordReset(email.trim());
      setSubmitting(false);
      if (result) return setError(result);
      return setResetSent(true);
    }

    const result =
      mode === 'signIn'
        ? await signIn(email.trim(), password)
        : await signUp(email.trim(), password, displayName.trim());
    setSubmitting(false);
    if (result) setError(result);
  }

  function switchMode(next: typeof mode) {
    setMode(next);
    setError(null);
    setResetSent(false);
  }

  return (
    <ScreenBackground style={styles.container}>
      <SafeAreaView style={styles.safeArea}>
        <ThemedText type="small" themeColor="tint" style={styles.eyebrow}>
          Gimnasio
        </ThemedText>
        <ThemedText type="title" style={styles.title}>
          Colossus
        </ThemedText>
        <ThemedText type="small" themeColor="textSecondary" style={styles.subtitle}>
          {mode === 'signIn' ? 'Inicia sesión' : mode === 'signUp' ? 'Crea tu cuenta' : 'Recuperar contraseña'}
        </ThemedText>

        {mode === 'reset' && resetSent ? (
          <ThemedText type="small" style={styles.error}>
            Si ese email tiene una cuenta, te llegó un link para poner una nueva contraseña.
          </ThemedText>
        ) : (
          <>
            {mode === 'signUp' && (
              <TextInput
                placeholder="Nombre"
                placeholderTextColor={theme.text + '80'}
                value={displayName}
                onChangeText={setDisplayName}
                style={[styles.input, { color: theme.text, borderColor: theme.text + '30' }]}
              />
            )}
            <TextInput
              placeholder="Email"
              placeholderTextColor={theme.text + '80'}
              value={email}
              onChangeText={setEmail}
              autoCapitalize="none"
              keyboardType="email-address"
              style={[styles.input, { color: theme.text, borderColor: theme.text + '30' }]}
            />
            {mode !== 'reset' && (
              <TextInput
                placeholder="Contraseña"
                placeholderTextColor={theme.text + '80'}
                value={password}
                onChangeText={setPassword}
                secureTextEntry
                style={[styles.input, { color: theme.text, borderColor: theme.text + '30' }]}
              />
            )}

            {error && (
              <ThemedText type="small" themeColor="error" style={styles.error}>
                {error}
              </ThemedText>
            )}

            <Button
              onPress={handleSubmit}
              loading={submitting}
              style={styles.button}
              label={mode === 'signIn' ? 'Entrar' : mode === 'signUp' ? 'Registrarme' : 'Enviar link'}
            />
          </>
        )}

        {mode === 'signIn' && (
          <Pressable onPress={() => switchMode('reset')}>
            <ThemedText type="link" themeColor="tint">
              ¿Olvidaste tu contraseña?
            </ThemedText>
          </Pressable>
        )}

        <Pressable onPress={() => switchMode(mode === 'signUp' ? 'signIn' : mode === 'reset' ? 'signIn' : 'signUp')}>
          <ThemedText type="link" themeColor="tint">
            {mode === 'signUp'
              ? '¿Ya tienes cuenta? Inicia sesión'
              : mode === 'reset'
                ? '‹ Volver a iniciar sesión'
                : '¿No tienes cuenta? Regístrate'}
          </ThemedText>
        </Pressable>
      </SafeAreaView>
    </ScreenBackground>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  safeArea: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: Spacing.four,
    gap: Spacing.three,
  },
  eyebrow: {
    textAlign: 'center',
    textTransform: 'uppercase',
    letterSpacing: 4,
  },
  title: { textAlign: 'center', letterSpacing: 3 },
  subtitle: { textAlign: 'center', marginBottom: Spacing.three },
  input: {
    borderWidth: 2,
    borderRadius: Spacing.two,
    paddingHorizontal: Spacing.three,
    paddingVertical: Spacing.three,
    fontSize: 16,
  },
  button: {
    marginTop: Spacing.two,
  },
  error: { textAlign: 'center' },
});