即将到来页面

app/(tabs)/upcoming.tsx

@@ -1,11 +1,285 @@
+import { HomeHeader } from "@/components/home-header";
+import { LeagueModal } from "@/components/league-modal";
+import { SelectionModal } from "@/components/selection-modal";
 import { ThemedText } from "@/components/themed-text";
 import { ThemedView } from "@/components/themed-view";
-import { StyleSheet } from "react-native";
+import { IconSymbol } from "@/components/ui/icon-symbol";
+import { UpcomingMatchCard } from "@/components/upcoming-match-card";
+import { Colors } from "@/constants/theme";
+import { useTheme } from "@/context/ThemeContext";
+import { fetchLeagues, fetchSports, fetchUpcomingMatches } from "@/lib/api";
+import { League, Sport, UpcomingMatch } from "@/types/api";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  ActivityIndicator,
+  FlatList,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from "react-native";
+
+export default function HomeScreen() {
+  const { theme } = useTheme();
+  const { t } = useTranslation();
+  const isDark = theme === "dark";
+  const iconColor = isDark ? Colors.dark.icon : Colors.light.icon;
+  const filterBg = isDark ? "#2C2C2E" : "#F2F2F7";
+
+  const [sports, setSports] = useState<Sport[]>([]);
+  const [leagues, setLeagues] = useState<League[]>([]);
+  const [matches, setMatches] = useState<UpcomingMatch[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [loadingLeagues, setLoadingLeagues] = useState(false);
+
+  // Selection States
+  // 默认足球
+  const [selectedSportId, setSelectedSportId] = useState<number | null>(1);
+  const [selectedLeagueKey, setSelectedLeagueKey] = useState<string>(""); // 默认空字符串
+
+  // Modal Visibilities
+  const [showSportModal, setShowSportModal] = useState(false);
+  const [showLeagueModal, setShowLeagueModal] = useState(false);
+
+  // Load Sports and Leagues
+  useEffect(() => {
+    loadSports();
+    loadLeagues();
+  }, []);
+
+  // Load Matches when sport or league changes
+  useEffect(() => {
+    if (selectedSportId !== null) {
+      loadMatches();
+    }
+  }, [selectedSportId, selectedLeagueKey]);
+
+  // Load Leagues when sport changes
+  useEffect(() => {
+    if (selectedSportId !== null) {
+      loadLeagues();
+    }
+  }, [selectedSportId]);
+
+  const loadSports = async () => {
+    try {
+      const apiList = await fetchSports();
+      // 创建8个运动的完整列表
+      const defaultSports: Sport[] = [
+        { id: 1, name: "football", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
+        { id: 2, name: "basketball", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
+        { id: 3, name: "tennis", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
+        { id: 4, name: "cricket", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
+        { id: 5, name: "baseball", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
+        { id: 6, name: "badminton", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
+        { id: 7, name: "snooker", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
+        { id: 8, name: "volleyball", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
+      ];
+      
+      // 合并API返回的运动和默认列表
+      const sportsMap = new Map<number, Sport>();
+      apiList.forEach((sport) => {
+        sportsMap.set(sport.id, sport);
+      });
+      
+      // 补充默认运动到8个
+      defaultSports.forEach((sport) => {
+        if (!sportsMap.has(sport.id)) {
+          sportsMap.set(sport.id, sport);
+        }
+      });
+      
+      const allSports = Array.from(sportsMap.values())
+        .sort((a, b) => a.id - b.id)
+        .slice(0, 8);
+
+      setSports(allSports);
+    } catch (e) {
+      console.error(e);
+      // API失败时使用默认8个运动
+      const defaultSports: Sport[] = [
+        { id: 1, name: "football", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
+        { id: 2, name: "basketball", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
+        { id: 3, name: "tennis", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
+        { id: 4, name: "cricket", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
+        { id: 5, name: "baseball", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
+        { id: 6, name: "badminton", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
+        { id: 7, name: "snooker", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
+        { id: 8, name: "volleyball", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
+      ];
+      setSports(defaultSports);
+      setSelectedSportId(1);
+    }
+  };
+
+  // 加载联赛
+  const loadLeagues = async () => {
+    try {
+      if (selectedSportId !== null) {
+        setLoadingLeagues(true);
+        const list = await fetchLeagues(selectedSportId, "");
+        setLeagues(list);
+      }
+    } catch (e) {
+      console.error(e);
+    } finally {
+      setLoadingLeagues(false);
+    }
+  };
+
+  const loadMatches = async () => {
+    if (selectedSportId === null) return;
+    
+    setLoading(true);
+    try {
+      // 使用 fetchUpcomingMatches，默认 leagueKey 为空字符串
+      const list = await fetchUpcomingMatches(selectedSportId, selectedLeagueKey || "");
+      setMatches(list);
+    } catch (e) {
+      console.error(e);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const currentSport = sports.find((s) => s.id === selectedSportId);
+  
+  // 获取当前运动的国际化名称
+  const getSportName = (sport: Sport | undefined): string => {
+    if (!sport) return t("home.select_sport");
+    const sportKeyMap: { [key: number]: string } = {
+      1: "football",
+      2: "basketball",
+      3: "tennis",
+      4: "cricket",
+      5: "baseball",
+      6: "badminton",
+      7: "snooker",
+      8: "volleyball",
+    };
+    const sportKey = sportKeyMap[sport.id] || sport.name.toLowerCase();
+    return t(`sports.${sportKey}`, { defaultValue: sport.name });
+  };
+
+  const handleLeagueSelect = (leagueKey: string) => {
+    setSelectedLeagueKey(leagueKey);
+    console.log("Selected league:", leagueKey);
+  };
+
+  const renderHeader = () => (
+    <View style={styles.filterContainer}>
+      {/* League Filter (Fixed) */}
+      <TouchableOpacity
+        style={[styles.filterBtn, { backgroundColor: filterBg }]}
+        disabled
+      >
+        <IconSymbol name="trophy-outline" size={18} color={iconColor} />
+        <ThemedText style={styles.filterText}>
+          {t("home.league")}
+        </ThemedText>
+      </TouchableOpacity>
+
+      {/* Sport Selector */}
+      <TouchableOpacity
+        style={[
+          styles.filterBtn,
+          styles.mainFilterBtn,
+          { backgroundColor: filterBg },
+        ]}
+        onPress={() => setShowSportModal(true)}
+      >
+        <IconSymbol name="football-outline" size={18} color={iconColor} />
+        <ThemedText style={styles.filterText}>
+          {getSportName(currentSport)}
+        </ThemedText>
+      </TouchableOpacity>
+
+      {/* League Selector */}
+      <TouchableOpacity
+        style={[styles.filterBtn, { backgroundColor: filterBg }]}
+        onPress={() => {
+          // 立即显示弹窗
+          setShowLeagueModal(true);
+          // 如果联赛列表为空，立即设置loading状态并加载
+          if (selectedSportId !== null) {
+            if (leagues.length === 0) {
+              setLoadingLeagues(true);
+            }
+            loadLeagues();
+          }
+        }}
+      >
+        <IconSymbol name="trophy-outline" size={18} color={iconColor} />
+        <ThemedText style={styles.filterText} numberOfLines={1}>
+          {selectedLeagueKey 
+            ? leagues.find(l => l.key === selectedLeagueKey)?.name || t("home.select_league")
+            : t("home.all_leagues")}
+        </ThemedText>
+      </TouchableOpacity>
+    </View>
+  );
 
-export default function UpcomingScreen() {
   return (
     <ThemedView style={styles.container}>
-      <ThemedText type="title">Upcoming Events</ThemedText>
+      <HomeHeader />
+
+      {renderHeader()}
+
+      {loading ? (
+        <View style={styles.center}>
+          <ActivityIndicator size="large" color={Colors[theme].tint} />
+          <ThemedText style={{ marginTop: 10 }}>{t("home.loading")}</ThemedText>
+        </View>
+      ) : (
+        <FlatList
+          data={matches}
+          keyExtractor={(item) => item.id.toString()}
+          renderItem={({ item }) => <UpcomingMatchCard match={item} />}
+          contentContainerStyle={styles.listContent}
+          ListEmptyComponent={
+            <View style={styles.center}>
+              <ThemedText>{t("home.no_matches")}</ThemedText>
+            </View>
+          }
+        />
+      )}
+
+      {/* Modals */}
+      <SelectionModal
+        visible={showSportModal}
+        onClose={() => setShowSportModal(false)}
+        title={t("home.select_sport")}
+        options={sports.map((s) => {
+          const sportKeyMap: { [key: number]: string } = {
+            1: "football",
+            2: "basketball",
+            3: "tennis",
+            4: "cricket",
+            5: "baseball",
+            6: "badminton",
+            7: "snooker",
+            8: "volleyball",
+          };
+          const sportKey = sportKeyMap[s.id] || s.name.toLowerCase();
+          return {
+            id: s.id,
+            label: s.name, // 保留原始名称用于图标识别
+            value: s.id,
+            icon: s.icon,
+          };
+        })}
+        selectedValue={selectedSportId}
+        onSelect={setSelectedSportId}
+      />
+
+      <LeagueModal
+        visible={showLeagueModal}
+        onClose={() => setShowLeagueModal(false)}
+        leagues={leagues}
+        selectedLeagueKey={selectedLeagueKey}
+        loading={loadingLeagues}
+        onSelect={handleLeagueSelect}
+      />
     </ThemedView>
   );
 }
@@ -13,7 +287,53 @@ export default function UpcomingScreen() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    alignItems: "center",
+  },
+  center: {
+    flex: 1,
     justifyContent: "center",
+    alignItems: "center",
+    paddingTop: 50,
+  },
+  filterContainer: {
+    flexDirection: "row",
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    gap: 12,
+  },
+  filterBtn: {
+    flex: 1,
+    height: 44, // Increased from 36
+    flexDirection: "column", // Stacked logic for Date, or Row for others
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: 8, // Rounded corners
+    // iOS shadow
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.1,
+    shadowRadius: 2,
+    // Android elevation
+    elevation: 2,
+  },
+  mainFilterBtn: {
+    flex: 2, // Wider for sport
+    flexDirection: "row",
+    gap: 8,
+  },
+  filterText: {
+    fontSize: 14,
+    fontWeight: "500",
+  },
+  dateDayText: {
+    fontSize: 16,
+    fontWeight: "bold",
+  },
+  dateMonthText: {
+    fontSize: 10,
+    opacity: 0.6,
+  },
+  listContent: {
+    padding: 16,
+    paddingTop: 8,
   },
 });