managarten/memoro/apps/mobile/features/spaces/components/UserInvites.tsx

import React, { useEffect, useState } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, ActivityIndicator, FlatList } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { Ionicons } from '@expo/vector-icons';
import spaceService, { SpaceInvite } from '../services/spaceService';
import { tokenManager } from '@/features/auth/services/tokenManager';
import { formatDistanceToNow } from 'date-fns';

// Extend the SpaceInvite interface to match what we receive from the API
interface Invite extends SpaceInvite {
  space_id: string;
  spaces: {
    name: string;
    owner_id: string;
  };
}

const UserInvites = () => {
  const [invites, setInvites] = useState<Invite[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [processingInvites, setProcessingInvites] = useState<Record<string, boolean>>({});
  
  const navigation = useNavigation();

  useEffect(() => {
    fetchInvites();
  }, []);

  const fetchInvites = async () => {
    try {
      setLoading(true);
      setError(null);
      
      // Use the spaceService to get user invites
      try {
        // Call the backend API to get user invites
        const response = await fetch(`${process.env.EXPO_PUBLIC_MEMORO_MIDDLEWARE_URL}/memoro/invites/pending`, {
          method: 'GET',
          headers: {
            'Authorization': `Bearer ${await tokenManager.getValidToken()}`,
            'Content-Type': 'application/json'
          }
        });
        
        if (!response.ok) {
          throw new Error(`Failed to fetch invites: ${response.statusText}`);
        }
        
        const data = await response.json();
        setInvites(data.invites || []);
      } catch (apiError) {
        console.error('API error fetching invites:', apiError);
        // Fallback to spaceService method
        const invites = await spaceService.getUserInvites();
        setInvites(invites as Invite[]);
      }
    } catch (error) {
      console.error('Error fetching invites:', error);
      setError('Failed to load invitations. Please try again later.');
    } finally {
      setLoading(false);
    }
  };

  const handleAcceptInvite = async (inviteId: string) => {
    try {
      setProcessingInvites(prev => ({ ...prev, [inviteId]: true }));
      
      // Use the spaceService to accept the invite
      await spaceService.acceptInvite(inviteId);
      
      // Remove the invite from the list
      setInvites(invites.filter(invite => invite.id !== inviteId));
      
      // Refresh the spaces list
      navigation.navigate('Spaces' as never);
    } catch (error) {
      console.error('Error accepting invite:', error);
      setError('Failed to accept invitation. Please try again later.');
    } finally {
      setProcessingInvites(prev => ({ ...prev, [inviteId]: false }));
    }
  };

  const handleDeclineInvite = async (inviteId: string) => {
    try {
      setProcessingInvites(prev => ({ ...prev, [inviteId]: true }));
      
      // Use the spaceService to decline the invite
      await spaceService.declineInvite(inviteId);
      
      // Remove the invite from the list
      setInvites(invites.filter(invite => invite.id !== inviteId));
    } catch (error) {
      console.error('Error declining invite:', error);
      setError('Failed to decline invitation. Please try again later.');
    } finally {
      setProcessingInvites(prev => ({ ...prev, [inviteId]: false }));
    }
  };

  const renderInviteItem = ({ item }: { item: Invite }) => {
    const isProcessing = processingInvites[item.id] || false;
    
    return (
      <View style={styles.inviteItem}>
        <View style={styles.inviteInfo}>
          <Text style={styles.spaceName}>{item.spaces.name}</Text>
          <Text style={styles.inviteDetails}>Role: {item.role}</Text>
          <Text style={styles.inviteDetails}>
            Invited {formatDistanceToNow(new Date(item.created_at))} ago
          </Text>
        </View>
        <View style={styles.inviteActions}>
          {isProcessing ? (
            <ActivityIndicator size="small" color="#4CAF50" />
          ) : (
            <>
              <TouchableOpacity
                style={[styles.actionButton, styles.acceptButton]}
                onPress={() => handleAcceptInvite(item.id)}
              >
                <Ionicons name="checkmark-outline" size={18} color="white" />
                <Text style={styles.buttonText}>Accept</Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={[styles.actionButton, styles.declineButton]}
                onPress={() => handleDeclineInvite(item.id)}
              >
                <Ionicons name="close-outline" size={18} color="white" />
                <Text style={styles.buttonText}>Decline</Text>
              </TouchableOpacity>
            </>
          )}
        </View>
      </View>
    );
  };

  if (loading) {
    return (
      <View style={styles.loadingContainer}>
        <ActivityIndicator size="large" color="#4CAF50" />
        <Text style={styles.loadingText}>Loading invitations...</Text>
      </View>
    );
  }

  if (error) {
    return (
      <View style={styles.errorContainer}>
        <Ionicons name="alert-circle-outline" size={48} color="#FF5252" />
        <Text style={styles.errorText}>{error}</Text>
        <TouchableOpacity style={styles.retryButton} onPress={fetchInvites}>
          <Text style={styles.retryButtonText}>Retry</Text>
        </TouchableOpacity>
      </View>
    );
  }

  if (invites.length === 0) {
    return (
      <View style={styles.emptyContainer}>
        <Ionicons name="mail-outline" size={48} color="#757575" />
        <Text style={styles.emptyText}>No pending invitations</Text>
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Space Invitations</Text>
      <FlatList
        data={invites}
        renderItem={renderInviteItem}
        keyExtractor={(item) => item.id}
        contentContainerStyle={styles.listContent}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: '#F5F5F5',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 16,
    color: '#333',
  },
  listContent: {
    paddingBottom: 16,
  },
  inviteItem: {
    backgroundColor: 'white',
    borderRadius: 8,
    padding: 16,
    marginBottom: 12,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 2,
    elevation: 2,
  },
  inviteInfo: {
    flex: 1,
  },
  spaceName: {
    fontSize: 16,
    fontWeight: 'bold',
    marginBottom: 4,
    color: '#333',
  },
  inviteDetails: {
    fontSize: 14,
    color: '#757575',
    marginBottom: 2,
  },
  inviteActions: {
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'flex-end',
    gap: 8,
  },
  actionButton: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingVertical: 6,
    paddingHorizontal: 12,
    borderRadius: 4,
    justifyContent: 'center',
  },
  acceptButton: {
    backgroundColor: '#4CAF50',
  },
  declineButton: {
    backgroundColor: '#FF5252',
  },
  buttonText: {
    color: 'white',
    fontSize: 12,
    fontWeight: 'bold',
    marginLeft: 4,
  },
  loadingContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5F5F5',
  },
  loadingText: {
    marginTop: 12,
    fontSize: 16,
    color: '#757575',
  },
  errorContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5F5F5',
    padding: 16,
  },
  errorText: {
    marginTop: 12,
    fontSize: 16,
    color: '#FF5252',
    textAlign: 'center',
    marginBottom: 16,
  },
  retryButton: {
    backgroundColor: '#4CAF50',
    paddingVertical: 8,
    paddingHorizontal: 16,
    borderRadius: 4,
  },
  retryButtonText: {
    color: 'white',
    fontSize: 14,
    fontWeight: 'bold',
  },
  emptyContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5F5F5',
  },
  emptyText: {
    marginTop: 12,
    fontSize: 16,
    color: '#757575',
  },
});

export default UserInvites;