import { View, Text, TouchableOpacity, Alert, ScrollView } from 'react-native';
import { useAuthStore } from '../../stores/authStore';
import { router } from 'expo-router';

export default function ProfileScreen() {
  const { user, logout, tenantSlug } = useAuthStore();

  const handleLogout = () => {
    Alert.alert('Sign Out', 'Are you sure you want to sign out?', [
      { text: 'Cancel', style: 'cancel' },
      {
        text: 'Sign Out', style: 'destructive',
        onPress: async () => {
          await logout();
          router.replace('/(auth)/company-code');
        }
      }
    ]);
  };

  return (
    <ScrollView className="flex-1 bg-gray-50">
      <View className="px-4 pt-14 pb-6 bg-primary">
        <View className="w-16 h-16 rounded-full bg-white/20 items-center justify-center mb-3">
          <Text className="text-white text-2xl font-bold">
            {user?.firstName?.[0]?.toUpperCase() ?? 'U'}
          </Text>
        </View>
        <Text className="text-white text-xl font-bold">{user?.firstName} {user?.lastName}</Text>
        <Text className="text-white/70 text-sm">{user?.role} · {tenantSlug}</Text>
      </View>

      <View className="px-4 py-6">
        <View className="bg-white rounded-2xl border border-gray-100 mb-4">
          {[
            { label: 'Username', value: user?.username },
            { label: 'Email', value: user?.email },
            { label: 'Role', value: user?.role },
            { label: 'Company', value: tenantSlug },
          ].map((item, i) => (
            <View key={item.label} className={`px-4 py-3 ${i > 0 ? 'border-t border-gray-100' : ''}`}>
              <Text className="text-gray-500 text-xs mb-0.5">{item.label}</Text>
              <Text className="text-gray-900 font-medium">{item.value ?? '—'}</Text>
            </View>
          ))}
        </View>

        <TouchableOpacity
          className="bg-red-50 border border-red-200 rounded-2xl py-4 items-center"
          onPress={handleLogout}
        >
          <Text className="text-red-600 font-semibold">Sign Out</Text>
        </TouchableOpacity>
      </View>
    </ScrollView>
  );
}