be-components 7.4.8 → 7.5.1

package/src/BetRouter/components/admin/LeagueParticipants.tsx

@@ -0,0 +1,662 @@
+import React, { useEffect, useState } from 'react';
+import { View, Text, Button } from "../../../Components/Themed";
+import { ActivityIndicator, TouchableOpacity, FlatList, ScrollView } from 'react-native';
+import { useColors } from '../../../constants/useColors';
+import { BetRouterApi } from '../../api';
+import { Icons, SearchBox } from '../../../Components';
+import Pagination from '../../../Components/Pagination';
+import type {
+    RouterLeagueProps,
+    RouterParticipantProps,
+    PartnerParticipantProps,
+    RawParticipantProps,
+    RouterPartnerProps
+} from '../../types';
+
+type LeagueParticipantsProps = {
+    league: RouterLeagueProps;
+};
+
+type ParticipantData = {
+    routerParticipants: RouterParticipantProps[];
+    partnerParticipants: PartnerParticipantProps[];
+    partners: RouterPartnerProps[];
+    loading: boolean;
+    searchValue: string;
+    page: number;
+    expandedParticipantId: string | null;
+    // Link modal state
+    showLinkModal: boolean;
+    selectedParticipant: RouterParticipantProps | null;
+    selectedPartner: RouterPartnerProps | null;
+    availableRawParticipants: RawParticipantProps[];
+    alreadyLinkedRawParticipants: RawParticipantProps[];
+    selectedRawIds: string[];
+    rawSearchValue: string;
+    // Auto-link modal state
+    showAutoLinkModal: boolean;
+    autoLinkResults: any;
+    showAutoLinkResults: boolean;
+};
+
+const PARTICIPANTS_PER_PAGE = 10;
+
+const LeagueParticipants = ({ league }: LeagueParticipantsProps) => {
+    const Colors = useColors();
+
+    const [participantData, setParticipantData] = useState<ParticipantData>({
+        routerParticipants: [],
+        partnerParticipants: [],
+        partners: [],
+        loading: true,
+        searchValue: '',
+        page: 0,
+        expandedParticipantId: null,
+        showLinkModal: false,
+        selectedParticipant: null,
+        selectedPartner: null,
+        availableRawParticipants: [],
+        alreadyLinkedRawParticipants: [],
+        selectedRawIds: [],
+        rawSearchValue: '',
+        showAutoLinkModal: false,
+        autoLinkResults: null,
+        showAutoLinkResults: false
+    });
+
+    useEffect(() => {
+        loadParticipantData();
+    }, [league.router_league_id]);
+
+    const loadParticipantData = async () => {
+        setParticipantData(prev => ({ ...prev, loading: true }));
+        try {
+            const [participantsRes, partnerParticipantsRes, partnersRes] = await Promise.all([
+                BetRouterApi.BetRouter.ParticipantApi.getRouterParticipants(league.router_league_id),
+                BetRouterApi.BetRouter.ParticipantApi.getPartnerParticipants(),
+                BetRouterApi.BetRouter.PartnerApi.getPartners()
+            ]);
+
+            setParticipantData(prev => ({
+                ...prev,
+                routerParticipants: Array.isArray(participantsRes) ? participantsRes : [],
+                partnerParticipants: Array.isArray(partnerParticipantsRes) ? partnerParticipantsRes : [],
+                partners: Array.isArray(partnersRes) ? partnersRes : [],
+                loading: false
+            }));
+        } catch (error) {
+            console.error('Failed to load participant data:', error);
+            setParticipantData(prev => ({ ...prev, loading: false }));
+        }
+    };
+
+    const loadRawParticipants = async (partner: RouterPartnerProps) => {
+        try {
+            setParticipantData(prev => ({ ...prev, loading: true }));
+            const result = await BetRouterApi.BetRouter.ParticipantApi.loadRawParticipants(
+                partner.partner_id,
+                league.router_league_id
+            );
+            alert(`Loaded ${result.count} raw participants for ${partner.name}`);
+            await loadParticipantData(); // Reload to get updated data
+        } catch (error) {
+            console.error('Error loading raw participants:', error);
+            alert('Error loading raw participants: ' + (error as any).message);
+        } finally {
+            setParticipantData(prev => ({ ...prev, loading: false }));
+        }
+    };
+
+    const openLinkModal = async (participant: RouterParticipantProps, partner: RouterPartnerProps) => {
+        try {
+            setParticipantData(prev => ({ ...prev, loading: true }));
+            const data = await BetRouterApi.BetRouter.ParticipantApi.getAvailableRawParticipants(
+                participant.participant_id,
+                partner.partner_id,
+                league.router_league_id
+            );
+
+            setParticipantData(prev => ({
+                ...prev,
+                availableRawParticipants: data.raw_participants || [],
+                alreadyLinkedRawParticipants: data.already_linked || [],
+                showLinkModal: true,
+                selectedParticipant: participant,
+                selectedPartner: partner,
+                selectedRawIds: [],
+                rawSearchValue: '',
+                loading: false
+            }));
+        } catch (error) {
+            console.error('Error loading raw participants:', error);
+            setParticipantData(prev => ({ ...prev, loading: false }));
+        }
+    };
+
+    const linkSelectedParticipants = async () => {
+        if (!participantData.selectedParticipant || participantData.selectedRawIds.length === 0) return;
+
+        try {
+            setParticipantData(prev => ({ ...prev, loading: true }));
+            await BetRouterApi.BetRouter.ParticipantApi.linkParticipant(
+                participantData.selectedRawIds,
+                participantData.selectedParticipant.participant_id
+            );
+            alert(`Linked ${participantData.selectedRawIds.length} raw participants`);
+            setParticipantData(prev => ({ ...prev, showLinkModal: false }));
+            await loadParticipantData(); // Reload to get updated data
+        } catch (error) {
+            console.error('Error linking participants:', error);
+            alert('Error linking participants: ' + (error as any).message);
+        } finally {
+            setParticipantData(prev => ({ ...prev, loading: false }));
+        }
+    };
+
+    const toggleRawParticipantSelection = (rawParticipantId: string) => {
+        setParticipantData(prev => ({
+            ...prev,
+            selectedRawIds: prev.selectedRawIds.includes(rawParticipantId)
+                ? prev.selectedRawIds.filter(id => id !== rawParticipantId)
+                : [...prev.selectedRawIds, rawParticipantId]
+        }));
+    };
+
+    const isPartnerLinked = (participantId: string, partnerId: string) => {
+        return participantData.partnerParticipants.some(
+            pp => pp.router_participant_id === participantId && pp.partner_id === partnerId
+        );
+    };
+
+    const getLinkedCount = (participantId: string) => {
+        const uniquePartners = new Set(
+            participantData.partnerParticipants
+                .filter(pp => pp.router_participant_id === participantId)
+                .map(pp => pp.partner_id)
+        );
+        return uniquePartners.size;
+    };
+
+    const filteredParticipants = participantData.routerParticipants.filter(p =>
+        p.name.toLowerCase().includes(participantData.searchValue.toLowerCase())
+    );
+
+    const totalPages = Math.ceil(filteredParticipants.length / PARTICIPANTS_PER_PAGE);
+    const paginatedParticipants = filteredParticipants.slice(
+        participantData.page * PARTICIPANTS_PER_PAGE,
+        (participantData.page + 1) * PARTICIPANTS_PER_PAGE
+    );
+
+    const filteredRawParticipants = participantData.availableRawParticipants.filter(p =>
+        p.name.toLowerCase().includes(participantData.rawSearchValue.toLowerCase())
+    );
+
+    if (participantData.loading) {
+        return (
+            <View transparent style={{ padding: 40, alignItems: 'center' }}>
+                <ActivityIndicator size="large" color={Colors.text.h1} />
+            </View>
+        );
+    }
+
+    return (
+        <>
+            <View transparent style={{ flex: 1 }}>
+                {/* Header */}
+                <View transparent style={{ marginBottom: 24 }}>
+                    <Text theme='h1' size={24}>Participants</Text>
+                    <Text theme='description' size={14} style={{ marginTop: 8 }}>
+                        {league.name} - Manage teams and athletes
+                    </Text>
+                </View>
+
+            {/* Load Raw Participants Section */}
+            <View type='body' style={{ padding: 16, marginBottom: 16, borderRadius: 8, borderWidth: 1, borderColor: Colors.borders.light }}>
+                <View type='header' style={{ padding: 16, marginBottom: 12 }}>
+                    <Text theme='h2' size={16}>Load Raw Participants from Partners</Text>
+                    <Text theme='description' size={12} style={{ marginTop: 4 }}>
+                        Fetch participants from each partner's API
+                    </Text>
+                </View>
+
+                <View transparent style={{ paddingHorizontal: 16, paddingBottom: 16 }}>
+                    {participantData.partners.map(partner => (
+                        <View
+                            key={partner.partner_id}
+                            transparent
+                            style={{
+                                flexDirection: 'row',
+                                alignItems: 'center',
+                                marginBottom: 8,
+                                padding: 12,
+                                backgroundColor: Colors.views.header,
+                                borderRadius: 6
+                            }}
+                        >
+                            <Text theme='h2' size={13} style={{ flex: 1 }}>{partner.name}</Text>
+                            <Button
+                                type='action'
+                                title="Load Participants"
+                                onPress={() => loadRawParticipants(partner)}
+                                style={{ paddingHorizontal: 15, paddingVertical: 8 }}
+                            />
+                        </View>
+                    ))}
+                </View>
+            </View>
+
+            {/* Participants List */}
+            <View type='body' style={{ flex: 1, borderRadius: 8, borderWidth: 1, borderColor: Colors.borders.light, overflow: 'hidden' }}>
+                <View type='header' style={{ padding: 16 }}>
+                    <View transparent style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                        <View transparent>
+                            <Text theme='h2' size={16}>Router Participants</Text>
+                            <Text theme='description' size={12} style={{ marginTop: 4 }}>
+                                {filteredParticipants.length} participant{filteredParticipants.length !== 1 ? 's' : ''}
+                            </Text>
+                        </View>
+                        <Button
+                            type='action'
+                            title="🔗 Auto-Link Participants"
+                            onPress={() => setParticipantData(prev => ({ ...prev, showAutoLinkModal: true }))}
+                            style={{ paddingHorizontal: 15, paddingVertical: 8 }}
+                        />
+                    </View>
+
+                    <View transparent style={{ marginTop: 12 }}>
+                        <SearchBox
+                            placeholder="Search participants..."
+                            onChange={(text) => setParticipantData(prev => ({ ...prev, searchValue: text, page: 0 }))}
+                            hide_search_button={true}
+                        />
+                    </View>
+                </View>
+
+                <View transparent style={{ flex: 1 }}>
+                    {paginatedParticipants.map(participant => {
+                        const linkedCount = getLinkedCount(participant.participant_id);
+                        const isExpanded = participantData.expandedParticipantId === participant.participant_id;
+
+                        return (
+                            <View key={participant.participant_id} transparent style={{ borderBottomWidth: 1, borderBottomColor: Colors.borders.light }}>
+                                {/* Participant Header */}
+                                <TouchableOpacity
+                                    onPress={() => setParticipantData(prev => ({
+                                        ...prev,
+                                        expandedParticipantId: isExpanded ? null : participant.participant_id
+                                    }))}
+                                    style={{
+                                        padding: 16,
+                                        backgroundColor: isExpanded ? Colors.views.header : 'transparent',
+                                        flexDirection: 'row',
+                                        alignItems: 'center'
+                                    }}
+                                >
+                                    <Icons.ChevronIcon
+                                        direction={isExpanded ? 'down' : 'right'}
+                                        size={8}
+                                        color={Colors.text.h1}
+                                    />
+                                    <View transparent style={{ flex: 1, marginLeft: 12 }}>
+                                        <Text theme='h2' size={14}>{participant.name}</Text>
+                                        <Text theme='description' size={11} style={{ marginTop: 2 }}>
+                                            {participant.participant_type} • {linkedCount} partner{linkedCount !== 1 ? 's' : ''}
+                                        </Text>
+                                    </View>
+                                </TouchableOpacity>
+
+                                {/* Expanded Partner Details */}
+                                {isExpanded && (
+                                    <View transparent style={{ padding: 16, paddingTop: 0 }}>
+                                        {participantData.partners.map(partner => {
+                                            const linked = isPartnerLinked(participant.participant_id, partner.partner_id);
+
+                                            return (
+                                                <View
+                                                    key={partner.partner_id}
+                                                    transparent
+                                                    style={{
+                                                        padding: 12,
+                                                        marginBottom: 8,
+                                                        backgroundColor: Colors.views.header,
+                                                        borderRadius: 6,
+                                                        flexDirection: 'row',
+                                                        alignItems: 'center'
+                                                    }}
+                                                >
+                                                    <View transparent style={{ flex: 1 }}>
+                                                        <View transparent style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+                                                            <Text theme='h2' size={13}>{partner.name}</Text>
+                                                            {linked ? (
+                                                                <Icons.CheckCirlceIcon color={Colors.text.success} size={14} />
+                                                            ) : (
+                                                                <Text theme='description' size={11}>Not Linked</Text>
+                                                            )}
+                                                        </View>
+                                                    </View>
+                                                    <Button
+                                                        type='action'
+                                                        title={linked ? 'Manage Links' : 'Link'}
+                                                        onPress={() => openLinkModal(participant, partner)}
+                                                        style={{ paddingHorizontal: 12, paddingVertical: 6 }}
+                                                    />
+                                                </View>
+                                            );
+                                        })}
+                                    </View>
+                                )}
+                            </View>
+                        );
+                    })}
+                </View>
+
+                {/* Pagination */}
+                {totalPages > 1 && (
+                    <View type='footer' style={{ padding: 16 }}>
+                        <Pagination
+                            offset={participantData.page}
+                            pages={totalPages}
+                            onNext={() => setParticipantData(prev => ({ ...prev, page: prev.page + 1 }))}
+                            onPrevious={() => setParticipantData(prev => ({ ...prev, page: prev.page - 1 }))}
+                        />
+                    </View>
+                )}
+            </View>
+
+            {/* Link Modal */}
+            {participantData.showLinkModal && (
+                <View
+                    style={{
+                        position: 'absolute',
+                        top: 0,
+                        left: 0,
+                        right: 0,
+                        bottom: 0,
+                        backgroundColor: 'rgba(0,0,0,0.5)',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        padding: 20
+                    }}
+                >
+                    <View float style={{ width: '90%', maxWidth: 600, maxHeight: '80%', borderRadius: 8, overflow: 'hidden' }}>
+                        <View type='header' style={{ padding: 16, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                            <View transparent>
+                                <Text theme='h1' size={18}>Link Raw Participants</Text>
+                                <Text theme='description' size={12} style={{ marginTop: 4 }}>
+                                    {participantData.selectedPartner?.name} → {participantData.selectedParticipant?.name}
+                                </Text>
+                            </View>
+                            <TouchableOpacity onPress={() => setParticipantData(prev => ({ ...prev, showLinkModal: false }))}>
+                                <Icons.CloseIcon size={24} color={Colors.text.h1} />
+                            </TouchableOpacity>
+                        </View>
+
+                        {/* Search in modal */}
+                        <View transparent style={{ padding: 16, paddingTop: 0 }}>
+                            <SearchBox
+                                placeholder="Search raw participants..."
+                                onChange={(text) => setParticipantData(prev => ({ ...prev, rawSearchValue: text }))}
+                                hide_search_button={true}
+                            />
+                        </View>
+
+                        {/* Already Linked Section */}
+                        {participantData.alreadyLinkedRawParticipants.length > 0 && (
+                            <View transparent style={{ padding: 16, paddingTop: 0 }}>
+                                <Text theme='h2' size={13} style={{ marginBottom: 8 }}>Already Linked:</Text>
+                                {participantData.alreadyLinkedRawParticipants.map(raw => (
+                                    <View
+                                        key={raw.raw_participant_id}
+                                        transparent
+                                        style={{
+                                            padding: 8,
+                                            marginBottom: 4,
+                                            backgroundColor: Colors.views.header,
+                                            borderRadius: 4
+                                        }}
+                                    >
+                                        <Text theme='description' size={12}>{raw.name} ({raw.external_id})</Text>
+                                    </View>
+                                ))}
+                            </View>
+                        )}
+
+                        <FlatList
+                            data={filteredRawParticipants}
+                            keyExtractor={(item) => item.raw_participant_id}
+                            renderItem={({ item: rawParticipant }) => {
+                                const isSelected = participantData.selectedRawIds.includes(rawParticipant.raw_participant_id);
+                                return (
+                                    <TouchableOpacity
+                                        onPress={() => toggleRawParticipantSelection(rawParticipant.raw_participant_id)}
+                                        style={{
+                                            padding: 12,
+                                            backgroundColor: isSelected ? Colors.views.header : Colors.views.body,
+                                            borderBottomWidth: 1,
+                                            borderBottomColor: Colors.borders.light,
+                                            flexDirection: 'row',
+                                            alignItems: 'center'
+                                        }}
+                                    >
+                                        <View transparent style={{ width: 24, height: 24, marginRight: 12 }}>
+                                            {isSelected && <Icons.CheckIcon color={Colors.text.success} size={20} />}
+                                        </View>
+                                        <View transparent style={{ flex: 1 }}>
+                                            <Text theme='h2' size={13}>{rawParticipant.name}</Text>
+                                            <Text theme='description' size={11} style={{ marginTop: 2 }}>
+                                                {rawParticipant.participant_type} • {rawParticipant.external_id}
+                                            </Text>
+                                        </View>
+                                    </TouchableOpacity>
+                                );
+                            }}
+                        />
+
+                        <View type='footer' style={{ padding: 16, flexDirection: 'row', justifyContent: 'flex-end', gap: 10 }}>
+                            <Button
+                                type='close'
+                                title="Cancel"
+                                onPress={() => setParticipantData(prev => ({ ...prev, showLinkModal: false }))}
+                            />
+                            <Button
+                                type='action'
+                                title={`Link ${participantData.selectedRawIds.length} Participant${participantData.selectedRawIds.length !== 1 ? 's' : ''}`}
+                                onPress={linkSelectedParticipants}
+                                disabled={participantData.selectedRawIds.length === 0}
+                            />
+                        </View>
+                    </View>
+                </View>
+            )}
+            </View>
+
+            {/* Auto-Link Modal */}
+            {participantData.showAutoLinkModal && (
+                <View
+                    style={{
+                        position: 'fixed' as any,
+                        top: 0,
+                        left: 0,
+                        right: 0,
+                        bottom: 0,
+                        backgroundColor: Colors.views.blur,
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        padding: 20,
+                        zIndex: 1000
+                    }}
+                >
+                    <View float style={{ maxWidth: 500, width: '100%', borderRadius: 8, overflow: 'hidden' }}>
+                        <View type='header' style={{ padding: 20 }}>
+                            <Text theme='h1' size={18}>Auto-Link Participants</Text>
+                            <Text theme='description' size={14} style={{ marginTop: 5 }}>
+                                Select partner to automatically match and link participants
+                            </Text>
+                        </View>
+
+                        <View type='body' style={{ padding: 20 }}>
+                            <Text theme='description' size={12} style={{ marginBottom: 15 }}>
+                                This will attempt to automatically match participants based on name and tags.
+                            </Text>
+
+                            {participantData.partners.map(partner => {
+                                const partnerParticipantsForThisPartner = participantData.partnerParticipants.filter(pp => pp.partner_id === partner.partner_id);
+                                const uniqueRouterParticipantIds = new Set(
+                                    partnerParticipantsForThisPartner
+                                        .map(pp => pp.router_participant_id)
+                                        .filter(id => participantData.routerParticipants.some(rp => rp.participant_id === id))
+                                );
+                                const linkedCount = uniqueRouterParticipantIds.size;
+                                const totalCount = participantData.routerParticipants.length;
+
+                                return (
+                                    <View
+                                        key={partner.partner_id}
+                                        transparent
+                                        style={{
+                                            flexDirection: 'row',
+                                            alignItems: 'center',
+                                            padding: 15,
+                                            marginBottom: 10,
+                                            backgroundColor: Colors.views.header,
+                                            borderRadius: 8
+                                        }}
+                                    >
+                                        <View transparent style={{ flex: 1 }}>
+                                            <Text theme='h2' size={14}>{partner.name}</Text>
+                                            <Text theme='description' size={11} style={{ marginTop: 3 }}>
+                                                {linkedCount}/{totalCount} participants linked
+                                            </Text>
+                                        </View>
+                                        <Button
+                                            type='action'
+                                            title='Auto-Link'
+                                            onPress={async () => {
+                                                try {
+                                                    setParticipantData(prev => ({ ...prev, loading: true }));
+                                                    const result = await BetRouterApi.BetRouter.AutoLinkingApi.autoLinkParticipants(
+                                                        league.router_league_id,
+                                                        partner.partner_id
+                                                    );
+                                                    setParticipantData(prev => ({
+                                                        ...prev,
+                                                        autoLinkResults: result,
+                                                        showAutoLinkModal: false,
+                                                        showAutoLinkResults: true
+                                                    }));
+
+                                                    // Reload partner participants
+                                                    const allPartnerParticipants = await BetRouterApi.BetRouter.ParticipantApi.getPartnerParticipants();
+                                                    setParticipantData(prev => ({
+                                                        ...prev,
+                                                        partnerParticipants: Array.isArray(allPartnerParticipants) ? allPartnerParticipants : [],
+                                                        loading: false
+                                                    }));
+                                                } catch (error) {
+                                                    console.error('Error auto-linking participants:', error);
+                                                    alert('Error auto-linking participants: ' + (error as any).message);
+                                                    setParticipantData(prev => ({ ...prev, loading: false }));
+                                                }
+                                            }}
+                                            style={{ paddingHorizontal: 15, paddingVertical: 8 }}
+                                        />
+                                    </View>
+                                );
+                            })}
+                        </View>
+
+                        <View type='footer' style={{ padding: 15 }}>
+                            <Button
+                                type='close'
+                                title='Cancel'
+                                onPress={() => setParticipantData(prev => ({ ...prev, showAutoLinkModal: false }))}
+                            />
+                        </View>
+                    </View>
+                </View>
+            )}
+
+            {/* Auto-Link Results Modal */}
+            {participantData.showAutoLinkResults && participantData.autoLinkResults && (
+                <View
+                    style={{
+                        position: 'fixed' as any,
+                        top: 0,
+                        left: 0,
+                        right: 0,
+                        bottom: 0,
+                        backgroundColor: Colors.views.blur,
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        padding: 20,
+                        zIndex: 1000
+                    }}
+                >
+                    <View float style={{ maxWidth: 600, width: '100%', maxHeight: '90%', borderRadius: 8, overflow: 'hidden' }}>
+                        <View type='header' style={{ padding: 20 }}>
+                            <Text theme='h1' size={18}>Auto-Link Results</Text>
+                            <Text theme='description' size={14} style={{ marginTop: 5 }}>
+                                {participantData.autoLinkResults.partner_name} • {league.name}
+                            </Text>
+                        </View>
+
+                        <ScrollView style={{ flex: 1 }}>
+                            <View transparent style={{ padding: 20 }}>
+                                {/* Summary */}
+                                <View type='body' style={{ padding: 16, borderRadius: 8, marginBottom: 16 }}>
+                                    <Text theme='h2' size={16} style={{ marginBottom: 12 }}>Summary</Text>
+                                    <Text theme='description' size={13} style={{ marginBottom: 6 }}>
+                                        Successfully linked: {participantData.autoLinkResults.matched_count}/{participantData.autoLinkResults.total_router_entities} participants
+                                    </Text>
+                                    {participantData.autoLinkResults.failed_count > 0 && (
+                                        <Text theme='description' size={13} style={{ color: Colors.text.warning }}>
+                                            Failed: {participantData.autoLinkResults.failed_count} participants
+                                        </Text>
+                                    )}
+                                </View>
+
+                                {/* Failed Results */}
+                                {participantData.autoLinkResults.results.filter((r: any) => !r.success).length > 0 && (
+                                    <View type='body' style={{ padding: 16, borderRadius: 8 }}>
+                                        <Text theme='h2' size={16} style={{ marginBottom: 12 }}>Failed Matches</Text>
+                                        {participantData.autoLinkResults.results.filter((r: any) => !r.success).map((result: any, index: number) => (
+                                            <View
+                                                key={index}
+                                                transparent
+                                                style={{
+                                                    padding: 12,
+                                                    marginBottom: 8,
+                                                    backgroundColor: Colors.views.header,
+                                                    borderRadius: 6
+                                                }}
+                                            >
+                                                <Text theme='h2' size={13}>{result.router_entity_label}</Text>
+                                                <Text theme='description' size={11} style={{ marginTop: 4, color: Colors.text.warning }}>
+                                                    {result.error || 'No matches found'}
+                                                </Text>
+                                            </View>
+                                        ))}
+                                    </View>
+                                )}
+                            </View>
+                        </ScrollView>
+
+                        <View type='footer' style={{ padding: 15 }}>
+                            <Button
+                                type='action'
+                                title='Done'
+                                onPress={() => setParticipantData(prev => ({
+                                    ...prev,
+                                    showAutoLinkResults: false,
+                                    autoLinkResults: null
+                                }))}
+                            />
+                        </View>
+                    </View>
+                </View>
+            )}
+        </>
+    );
+};
+
+export default LeagueParticipants;