import { Redirect, router } from 'expo-router';
import { ActivityIndicator, StyleSheet, Text, View } from 'react-native';

import { Button } from '@/components/common/Button';
import { Catamaran, FunnelSans } from '@/constants/fonts';
import { Palette } from '@/constants/palette';
import { Radius, Spacing } from '@/constants/styles';
import { useAuth } from '@/providers/AuthProvider';
import { logout } from '@/services/auth';

export default function Home() {
  const { initializing, user } = useAuth();

  if (initializing) {
    return (
      <View style={styles.centered}>
        <ActivityIndicator color={Palette.black} />
      </View>
    );
  }

  if (!user) {
    return <Redirect href="/login" />;
  }

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Bienvenue</Text>
      <Text style={styles.subtitle}>
        {user.username || user.email || user.uid}
      </Text>

      <View style={styles.card}>
        <Text style={styles.label}>UID</Text>
        <Text style={styles.value}>{user.uid}</Text>
        <Text style={styles.label}>Email</Text>
        <Text style={styles.value}>{user.email || 'Aucun email'}</Text>
      </View>

      <Button onPress={() => void logout()} title="Se deconnecter" />
      <Button
        onPress={() => router.push('/register')}
        style={styles.secondaryButton}
        textStyle={styles.secondaryButtonText}
        title="Creer un autre compte"
        variant="secondary"
      />
    </View>
  );
}

const styles = StyleSheet.create({
  centered: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: Palette.cream,
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: Spacing.lg,
    gap: 20,
    backgroundColor: Palette.cream,
  },
  title: {
    ...Catamaran.extraBold34,
    color: Palette.black,
  },
  subtitle: {
    ...FunnelSans.regular16,
    color: Palette.gray,
  },
  card: {
    gap: Spacing.sm,
    padding: 18,
    borderRadius: Radius.xl,
    borderWidth: 1,
    borderColor: Palette.cream,
    backgroundColor: Palette.white,
  },
  label: {
    ...FunnelSans.medium12,
    color: Palette.gray,
    textTransform: 'uppercase',
  },
  value: {
    ...FunnelSans.regular16,
    color: Palette.black,
  },
  secondaryButton: {
    borderColor: Palette.black,
  },
  secondaryButtonText: {
    color: Palette.black,
  },
});