be-components 7.4.7 → 7.5.1

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

@@ -0,0 +1,253 @@
+import React, { useEffect, useState } from 'react';
+import { View, Text, Button } from "../../../Components/Themed";
+import { ActivityIndicator } from 'react-native';
+import { useColors } from '../../../constants/useColors';
+import { getPartners, getContests, getParticipants } from '../../api';
+import { BetRouterApi } from '../../api';
+import type {
+    RouterLeagueProps,
+    RouterPartnerProps,
+    RouterContestProps,
+    RouterParticipantProps,
+    //PartnerContestProps,
+    PartnerLeagueProps
+} from '../../types';
+
+type LeagueInfoProps = {
+    league: RouterLeagueProps;
+};
+
+const LeagueInfo = ({ league }: LeagueInfoProps) => {
+    const Colors = useColors();
+
+    const [loading, setLoading] = useState(true);
+    const [partners, setPartners] = useState<RouterPartnerProps[]>([]);
+    const [partnerLeagues, setPartnerLeagues] = useState<PartnerLeagueProps[]>([]);
+    const [contests, setContests] = useState<RouterContestProps[]>([]);
+    const [participants, setParticipants] = useState<RouterParticipantProps[]>([]);
+
+    useEffect(() => {
+        loadLeagueData();
+    }, [league.router_league_id]);
+
+    const loadLeagueData = async () => {
+        setLoading(true);
+        try {
+            // Load all necessary data in parallel - only get open/active contests
+            const [partnersRes, leaguesDataRes, contestsRes, participantsRes] = await Promise.all([
+                getPartners(),
+                BetRouterApi.BetRouter.LeagueApi.getOpenLeagues(),
+                getContests('open'),
+                getParticipants(league.router_league_id)
+            ]);
+
+            // All these endpoints return arrays directly according to api-contracts.ts
+            if (Array.isArray(partnersRes)) setPartners(partnersRes);
+
+            // Filter partner leagues for this specific router league
+            if (leaguesDataRes && leaguesDataRes.partner_leagues) {
+                const filteredPartnerLeagues = leaguesDataRes.partner_leagues.filter(pl => pl.router_league_id === league.router_league_id);
+                console.log('All partner_leagues:', leaguesDataRes.partner_leagues);
+                console.log('Filtered for league', league.router_league_id, ':', filteredPartnerLeagues);
+                setPartnerLeagues(filteredPartnerLeagues);
+            }
+
+            if (Array.isArray(contestsRes)) {
+                setContests(contestsRes.filter(c => c.router_league_id === league.router_league_id));
+            }
+            if (Array.isArray(participantsRes)) setParticipants(participantsRes);
+        } catch (error) {
+            console.error('Failed to load league data:', error);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const loadRouterContests = async () => {
+        try {
+            setLoading(true);
+            const result = await BetRouterApi.BetRouter.ContestApi.loadContests(league.router_league_id);
+            alert(`Successfully loaded ${result.count} router contests for ${league.name}`);
+            // Reload the league data to show updated counts
+            await loadLeagueData();
+        } catch (error) {
+            console.error('Failed to load router contests:', error);
+            alert('Error loading router contests: ' + (error as any).message);
+            setLoading(false);
+        }
+    };
+
+    if (loading) {
+        return (
+            <View transparent style={{ padding: 40, alignItems: 'center' }}>
+                <ActivityIndicator size="large" color={Colors.text.h1} />
+            </View>
+        );
+    }
+
+    // Calculate stats
+    const activeParticipants = participants.filter(p => p.status === 'active').length;
+    const teamCount = participants.filter(p => p.participant_type === 'team').length;
+    const athleteCount = participants.filter(p => p.participant_type === 'athlete').length;
+
+    return (
+        <View transparent>
+            {/* Header */}
+            <View transparent style={{ marginBottom: 24, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                <View transparent>
+                    <Text theme='h1' size={24}>{league.name}</Text>
+                    <Text theme='description' size={14} style={{ marginTop: 8 }}>
+                        League Overview
+                    </Text>
+                </View>
+                <Button
+                    type='success'
+                    title='Load Router Contests'
+                    onPress={loadRouterContests}
+                />
+            </View>
+
+            {/* Stats Grid */}
+            <View transparent style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 16, marginBottom: 24 }}>
+                {/* Contests Card */}
+                <View type='body' style={{ flex: 1, minWidth: 200, padding: 16, borderRadius: 8, borderWidth: 1, borderColor: Colors.borders.light }}>
+                    <Text theme='description' size={12}>CONTESTS</Text>
+                    <Text theme='h1' size={32} style={{ marginTop: 8 }}>{contests.length}</Text>
+                    <Text theme='description' size={11} style={{ marginTop: 4 }}>
+                        Total router contests
+                    </Text>
+                </View>
+
+                {/* Participants Card */}
+                <View type='body' style={{ flex: 1, minWidth: 200, padding: 16, borderRadius: 8, borderWidth: 1, borderColor: Colors.borders.light }}>
+                    <Text theme='description' size={12}>PARTICIPANTS</Text>
+                    <Text theme='h1' size={32} style={{ marginTop: 8 }}>{activeParticipants}</Text>
+                    <Text theme='description' size={11} style={{ marginTop: 4 }}>
+                        {teamCount} teams, {athleteCount} athletes
+                    </Text>
+                </View>
+
+                {/* Partners Card */}
+                <View type='body' style={{ flex: 1, minWidth: 200, padding: 16, borderRadius: 8, borderWidth: 1, borderColor: Colors.borders.light }}>
+                    <Text theme='description' size={12}>PARTNERS</Text>
+                    <Text theme='h1' size={32} style={{ marginTop: 8 }}>
+                        {new Set(partnerLeagues.map(pl => pl.partner_id)).size}
+                    </Text>
+                    <Text theme='description' size={11} style={{ marginTop: 4 }}>
+                        Connected to this league
+                    </Text>
+                </View>
+            </View>
+
+            {/* Partner League Connection Status */}
+            <View type='body' style={{ borderRadius: 8, borderWidth: 1, borderColor: Colors.borders.light, overflow: 'hidden' }}>
+                <View type='header' style={{ padding: 16 }}>
+                    <Text theme='h2' size={16}>Partner League Connections</Text>
+                    <Text theme='description' size={12} style={{ marginTop: 4 }}>
+                        Raw league mappings for this router league
+                    </Text>
+                </View>
+
+                <View transparent style={{ padding: 16 }}>
+                    {partners.map(partner => {
+                        const partnerLeaguesForPartner = partnerLeagues.filter(pl => pl.partner_id === partner.partner_id);
+                        const leagueCount = partnerLeaguesForPartner.length;
+                        const isConnected = leagueCount > 0;
+                        console.log(`Partner ${partner.name} (${partner.partner_id}):`, {
+                            partnerLeaguesForPartner,
+                            leagueCount,
+                            isConnected,
+                            allPartnerLeagues: partnerLeagues
+                        });
+
+                        return (
+                            <View
+                                key={partner.partner_id}
+                                transparent
+                                style={{
+                                    flexDirection: 'row',
+                                    alignItems: 'center',
+                                    justifyContent: 'space-between',
+                                    padding: 12,
+                                    backgroundColor: Colors.views.header,
+                                    borderRadius: 6,
+                                    marginBottom: 8,
+                                }}
+                            >
+                                <View transparent style={{ flex: 1 }}>
+                                    <Text theme='h2' size={14}>{partner.name}</Text>
+                                    {isConnected && (
+                                        <Text theme='description' size={11} style={{ marginTop: 2 }}>
+                                            {leagueCount} raw league{leagueCount !== 1 ? 's' : ''} linked
+                                        </Text>
+                                    )}
+                                </View>
+
+                                <View transparent style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+                                    <View
+                                        transparent
+                                        style={{
+                                            paddingHorizontal: 12,
+                                            paddingVertical: 6,
+                                            borderRadius: 12,
+                                            backgroundColor: isConnected ? Colors.text.success : Colors.views.header,
+                                        }}
+                                    >
+                                        <Text
+                                            theme='description'
+                                            size={11}
+                                            style={{ color: isConnected ? '#fff' : Colors.text.descriptionLight }}
+                                        >
+                                            {isConnected ? '✓ Connected' : 'Not Connected'}
+                                        </Text>
+                                    </View>
+                                    <Button
+                                        type='action'
+                                        title='Link'
+                                        onPress={() => alert(`Link raw leagues for ${partner.name} - Coming soon!`)}
+                                        style={{ paddingHorizontal: 12, paddingVertical: 6 }}
+                                    />
+                                </View>
+                            </View>
+                        );
+                    })}
+                </View>
+            </View>
+
+            {/* League Details */}
+            <View type='body' style={{ marginTop: 16, borderRadius: 8, borderWidth: 1, borderColor: Colors.borders.light, overflow: 'hidden' }}>
+                <View type='header' style={{ padding: 16 }}>
+                    <Text theme='h2' size={16}>League Details</Text>
+                </View>
+
+                <View transparent style={{ padding: 16 }}>
+                    <View transparent style={{ flexDirection: 'row', marginBottom: 12 }}>
+                        <Text theme='description' size={13} style={{ width: 140 }}>League ID:</Text>
+                        <Text theme='h2' size={13} style={{ flex: 1 }}>{league.router_league_id}</Text>
+                    </View>
+
+                    <View transparent style={{ flexDirection: 'row', marginBottom: 12 }}>
+                        <Text theme='description' size={13} style={{ width: 140 }}>Name:</Text>
+                        <Text theme='h2' size={13} style={{ flex: 1 }}>{league.name}</Text>
+                    </View>
+
+                    <View transparent style={{ flexDirection: 'row', marginBottom: 12 }}>
+                        <Text theme='description' size={13} style={{ width: 140 }}>Status:</Text>
+                        <Text theme='h2' size={13} style={{ flex: 1 }}>
+                            {league.status.charAt(0).toUpperCase() + league.status.slice(1)}
+                        </Text>
+                    </View>
+
+                    <View transparent style={{ flexDirection: 'row' }}>
+                        <Text theme='description' size={13} style={{ width: 140 }}>Created:</Text>
+                        <Text theme='h2' size={13} style={{ flex: 1 }}>
+                            {new Date(league.create_datetime).toLocaleDateString()}
+                        </Text>
+                    </View>
+                </View>
+            </View>
+        </View>
+    );
+};
+
+export default LeagueInfo;