实现直播详情页

app/(tabs)/live.tsx

@@ -1,245 +1,84 @@
 import { HomeHeader } from "@/components/home-header";
-import { LeagueModal } from "@/components/league-modal";
 import { MatchCard } from "@/components/match-card";
-import { SelectionModal } from "@/components/selection-modal";
-import { CalendarModal } from "@/components/simple-calendar";
 import { ThemedText } from "@/components/themed-text";
 import { ThemedView } from "@/components/themed-view";
-import { IconSymbol } from "@/components/ui/icon-symbol";
 import { Colors } from "@/constants/theme";
+import { useAppState } from "@/context/AppStateContext";
 import { useTheme } from "@/context/ThemeContext";
-import { fetchLeagues, fetchSports, fetchTodayMatches } from "@/lib/api";
-import { League, Match, Sport } from "@/types/api";
-import React, { useEffect, useMemo, useState } from "react";
+import { fetchLiveScore } from "@/lib/api";
+import { LiveScoreMatch, Match } from "@/types/api";
+import { useRouter } from "expo-router";
+import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import {
-  ActivityIndicator,
-  FlatList,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-} from "react-native";
+import { ActivityIndicator, FlatList, StyleSheet, View } from "react-native";
 
-export default function HomeScreen() {
+export default function LiveScreen() {
+  const router = useRouter();
   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 { state } = useAppState();
 
-  const [sports, setSports] = useState<Sport[]>([]);
-  const [leagues, setLeagues] = useState<League[]>([]);
   const [matches, setMatches] = useState<Match[]>([]);
   const [loading, setLoading] = useState(true);
 
-  const deviceTimeZone = useMemo(() => {
-    try {
-      return Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC";
-    } catch {
-      return "UTC";
-    }
-  }, []);
-
-  // Selection States
-  // 默认足球
-  const [selectedSportId, setSelectedSportId] = useState<number | null>(1);
-  const [selectedDate, setSelectedDate] = useState(new Date());
-  const [selectedLeagueKey, setSelectedLeagueKey] = useState<string | null>(null);
-  const [filterMode, setFilterMode] = useState<"time" | "league">("time"); // 时间或联赛模式
-
-  // Modal Visibilities
-  const [showSportModal, setShowSportModal] = useState(false);
-  const [showCalendarModal, setShowCalendarModal] = useState(false);
-  const [showLeagueModal, setShowLeagueModal] = useState(false);
-
-  // Load Sports and Leagues
   useEffect(() => {
-    loadSports();
-    loadLeagues();
-  }, []);
+    loadLiveMatches();
+    // 每30秒自动刷新一次实时比分
+    const interval = setInterval(loadLiveMatches, 30000);
+    return () => clearInterval(interval);
+  }, [state.selectedSportId, state.selectedLeagueKey, state.timezone]);
 
-  // Load Matches when sport or date changes
-  useEffect(() => {
-    if (selectedSportId !== null) {
-      loadMatches(selectedSportId);
+  const loadLiveMatches = async () => {
+    if (!state.selectedSportId) {
+      setLoading(false);
+      return;
     }
-  }, [selectedSportId, selectedDate]);
 
-  // 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) {
-        const list = await fetchLeagues(selectedSportId, "");
-        setLeagues(list);
-      }
-    } catch (e) {
-      console.error(e);
-    }
-  };
-
-  const loadMatches = async (sportId: number) => {
     setLoading(true);
     try {
-      // Pass selectedDate if API supported it
-      const list = await fetchTodayMatches(sportId, undefined, deviceTimeZone);
-      setMatches(list);
-    } catch (e) {
-      console.error(e);
+      const liveData = await fetchLiveScore(
+        state.selectedSportId,
+        state.selectedLeagueKey ? parseInt(state.selectedLeagueKey) : undefined,
+        state.timezone
+      );
+
+      // 检查返回的数据是否为空或无效
+      if (!liveData || !Array.isArray(liveData)) {
+        console.warn("LiveScore returned invalid data:", liveData);
+        setMatches([]);
+        return;
+      }
+
+      // 将 LiveScoreMatch 转换为 Match 格式
+      const converted: Match[] = liveData.map((item: LiveScoreMatch) => ({
+        id: item.event_key.toString(),
+        league: item.league_name,
+        time: item.event_time,
+        home: item.event_home_team,
+        away: item.event_away_team,
+        meta: item.event_status,
+        scoreText: item.event_final_result || "0 - 0",
+        fav: false,
+        leagueId: item.league_key,
+        sportId: state.selectedSportId ?? undefined,
+        isLive: true,
+      }));
+
+      setMatches(converted);
+    } catch (error) {
+      console.error("Load live matches error:", error);
+      setMatches([]);
     } 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}>
-      {/* Time/League Filter Toggle */}
-      <TouchableOpacity
-        style={[styles.filterBtn, { backgroundColor: filterBg }]}
-        onPress={() => setFilterMode(filterMode === "time" ? "league" : "time")}
-      >
-        <IconSymbol 
-          name={filterMode === "time" ? "time-outline" : "trophy-outline"} 
-          size={18} 
-          color={iconColor} 
-        />
-        <ThemedText style={styles.filterText}>
-          {filterMode === "time" ? t("home.time") : 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>
-
-      {/* Date/League Selector */}
-      {filterMode === "time" ? (
-        <TouchableOpacity
-          style={[styles.filterBtn, { backgroundColor: filterBg }]}
-          onPress={() => setShowCalendarModal(true)}
-        >
-          <ThemedText style={styles.dateDayText}>
-            {selectedDate.getDate()}
-          </ThemedText>
-          <ThemedText style={styles.dateMonthText}>
-            {selectedDate.getHours()}:
-            {selectedDate.getMinutes().toString().padStart(2, "0")}
-          </ThemedText>
-        </TouchableOpacity>
-      ) : (
-        <TouchableOpacity
-          style={[styles.filterBtn, { backgroundColor: filterBg }]}
-          onPress={() => setShowLeagueModal(true)}
-        >
-          <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.select_league")}
-          </ThemedText>
-        </TouchableOpacity>
-      )}
-    </View>
-  );
-
   return (
     <ThemedView style={styles.container}>
       <HomeHeader />
 
-      {renderHeader()}
-
       {loading ? (
         <View style={styles.center}>
           <ActivityIndicator size="large" color={Colors[theme].tint} />
@@ -249,7 +88,21 @@ export default function HomeScreen() {
         <FlatList
           data={matches}
           keyExtractor={(item) => item.id}
-          renderItem={({ item }) => <MatchCard match={item} />}
+          renderItem={({ item }) => (
+            <MatchCard
+              match={item}
+              onPress={(m) => {
+                router.push({
+                  pathname: "/live-detail/[id]",
+                  params: {
+                    id: m.id,
+                    league_id: m.leagueId?.toString() || "",
+                    sport_id: m.sportId?.toString() || "",
+                  },
+                });
+              }}
+            />
+          )}
           contentContainerStyle={styles.listContent}
           ListEmptyComponent={
             <View style={styles.center}>
@@ -258,49 +111,6 @@ export default function HomeScreen() {
           }
         />
       )}
-
-      {/* 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}
-      />
-
-      <CalendarModal
-        visible={showCalendarModal}
-        onClose={() => setShowCalendarModal(false)}
-        selectedDate={selectedDate}
-        onSelectDate={setSelectedDate}
-      />
-
-      <LeagueModal
-        visible={showLeagueModal}
-        onClose={() => setShowLeagueModal(false)}
-        leagues={leagues}
-        selectedLeagueKey={selectedLeagueKey}
-        onSelect={handleLeagueSelect}
-      />
     </ThemedView>
   );
 }
@@ -315,44 +125,6 @@ const styles = StyleSheet.create({
     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,