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

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

function formatDate(value?: Date | null) {
  if (!value) {
    return '-';
  }

  return value.toLocaleDateString('fr-FR', {
    day: '2-digit',
    month: 'long',
    year: 'numeric',
  });
}

function InfoRow({ label, value }: { label: string; value: string }) {
  return (
    <View style={styles.infoRow}>
      <Text style={styles.infoLabel}>{label}</Text>
      <Text style={styles.infoValue}>{value}</Text>
    </View>
  );
}

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

  if (initializing) {
    return <View style={styles.screen} />;
  }

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

  return (
    <ScrollView
      contentContainerStyle={styles.content}
      style={styles.screen}
    >
      <View style={styles.header}>
        <Avatar
          name={user.username ?? user.email}
          size="lg"
          uri={user.profilePicture}
        />
        <View style={styles.headerContent}>
          <Text style={styles.title}>{user.username || 'Profil'}</Text>
          <Text style={styles.subtitle}>{user.email}</Text>
        </View>
      </View>

      <View style={styles.card}>
        <InfoRow label="Username" value={user.username || '-'} />
        <InfoRow label="Email" value={user.email || '-'} />
        <InfoRow label="UID" value={user.uid} />
        <InfoRow
          label="Photo"
          value={user.profilePicture ? 'Renseignee' : 'Aucune'}
        />
        <InfoRow label="Cree le" value={formatDate(user.createdAt)} />
        <InfoRow label="Mis a jour le" value={formatDate(user.updatedAt)} />
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    backgroundColor: Palette.cream,
  },
  content: {
    paddingHorizontal: Spacing.lg,
    paddingTop: Spacing.xl,
    paddingBottom: Spacing.xxl,
    gap: Spacing.lg,
  },
  header: {
    alignItems: 'center',
    gap: Spacing.md,
  },
  headerContent: {
    alignItems: 'center',
    gap: Spacing.xs,
  },
  title: {
    ...Catamaran.extraBold34,
    color: Palette.black,
  },
  subtitle: {
    ...FunnelSans.regular16,
    color: Palette.gray,
  },
  card: {
    gap: Spacing.md,
    padding: Spacing.md,
    borderWidth: 1,
    borderColor: Palette.cream,
    borderRadius: Radius.xl,
    backgroundColor: Palette.white,
  },
  infoRow: {
    gap: Spacing.xs,
    paddingBottom: Spacing.sm,
    borderBottomWidth: 1,
    borderBottomColor: Palette.cream,
  },
  infoLabel: {
    ...FunnelSans.medium12,
    color: Palette.gray,
    textTransform: 'uppercase',
  },
  infoValue: {
    ...FunnelSans.regular16,
    color: Palette.black,
  },
});