import React from 'react';
import { View, Text, TouchableOpacity, useColorScheme } from 'react-native';
import { getThemeStyles, commonStyles } from '../theme/styles';
import { useAuthStore } from '../store/useAuthStore';

export default function HomeScreen() {
  const { user, logout } = useAuthStore();
  const colorScheme = useColorScheme();
  const isDark = colorScheme === 'dark';
  const themeStyles = getThemeStyles(isDark);

  if (!user) return null; // Should not happen if navigation logic is correct

  return (
    <View style={commonStyles.content}>
      <Text style={[commonStyles.title, themeStyles.text]}>Welcome Back!</Text>
      <View style={[commonStyles.card, themeStyles.card]}>
        <View style={commonStyles.userInfo}>
          <View style={themeStyles.avatar}>
            <Text style={commonStyles.avatarText}>
              {user.user?.email?.charAt(0).toUpperCase() || 'U'}
            </Text>
          </View>
          <View>
            <Text style={[commonStyles.label, themeStyles.subtitle]}>Logged in as:</Text>
            <Text style={[commonStyles.value, themeStyles.text]}>{user.user?.email}</Text>
          </View>
        </View>
        
        <View style={[commonStyles.tokenBox, themeStyles.tokenBox]}>
          <Text style={[commonStyles.label, themeStyles.subtitle]}>Your API Token:</Text>
          <Text style={commonStyles.token} numberOfLines={1}>
            {user.token}
          </Text>
        </View>
      </View>

      <TouchableOpacity style={commonStyles.logoutButton} onPress={logout}>
        <Text style={commonStyles.logoutText}>Sign Out</Text>
      </TouchableOpacity>
    </View>
  );
}
