实现直播详情页

app/(tabs)/index.tsx

@@ -7,6 +7,7 @@ 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";
@@ -27,6 +28,9 @@ export default function HomeScreen() {
   const iconColor = isDark ? Colors.dark.icon : Colors.light.icon;
   const filterBg = isDark ? "#2C2C2E" : "#F2F2F7";
 
+  const { state, updateSportId, updateDate, updateLeagueKey, updateTimezone } =
+    useAppState();
+
   const [sports, setSports] = useState<Sport[]>([]);
   const [leagues, setLeagues] = useState<League[]>([]);
   const [matches, setMatches] = useState<Match[]>([]);
@@ -36,18 +40,25 @@ export default function HomeScreen() {
 
   const deviceTimeZone = useMemo(() => {
     try {
-      console.log("deviceTimeZone", Intl.DateTimeFormat().resolvedOptions().timeZone);
+      console.log(
+        "deviceTimeZone",
+        Intl.DateTimeFormat().resolvedOptions().timeZone
+      );
       return Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC";
     } catch {
       return "UTC";
     }
   }, []);
 
-  // Selection States
+  // 初始化时同步设备时区到 Context
-  // 默认足球
+  useEffect(() => {
-  const [selectedSportId, setSelectedSportId] = useState<number | null>(1);
+    updateTimezone(deviceTimeZone);
-  const [selectedDate, setSelectedDate] = useState(new Date());
+  }, [deviceTimeZone]);
-  const [selectedLeagueKey, setSelectedLeagueKey] = useState<string | null>(null);
+
+  // Selection States - 从 Context 读取
+  const selectedSportId = state.selectedSportId;
+  const selectedDate = state.selectedDate;
+  const selectedLeagueKey = state.selectedLeagueKey;
   const [filterMode, setFilterMode] = useState<"time" | "league">("time"); // 时间或联赛模式
 
   // Modal Visibilities
@@ -103,29 +114,93 @@ export default function HomeScreen() {
       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: 1,
-        { id: 3, name: "tennis", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
+          name: "football",
-        { id: 4, name: "cricket", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
+          description: "",
-        { id: 5, name: "baseball", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
+          icon: "",
-        { id: 6, name: "badminton", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
+          isActive: true,
-        { id: 7, name: "snooker", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
+          updatedAt: "",
-        { id: 8, name: "volleyball", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
+          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);
@@ -135,17 +210,80 @@ export default function HomeScreen() {
       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: 1,
-        { id: 3, name: "tennis", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
+          name: "football",
-        { id: 4, name: "cricket", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
+          description: "",
-        { id: 5, name: "baseball", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
+          icon: "",
-        { id: 6, name: "badminton", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
+          isActive: true,
-        { id: 7, name: "snooker", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
+          updatedAt: "",
-        { id: 8, name: "volleyball", description: "", icon: "", isActive: true, updatedAt: "", createdAt: "" },
+          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);
     }
   };
 
@@ -167,7 +305,11 @@ export default function HomeScreen() {
   const loadMatches = async (sportId: number) => {
     setLoading(true);
     try {
-      const list = await fetchTodayMatches(sportId, selectedDate, deviceTimeZone);
+      const list = await fetchTodayMatches(
+        sportId,
+        selectedDate,
+        deviceTimeZone
+      );
       setMatches(list);
     } catch (e) {
       console.error(e);
@@ -177,7 +319,7 @@ export default function HomeScreen() {
   };
 
   const currentSport = sports.find((s) => s.id === selectedSportId);
-  
+
   // 获取当前运动的国际化名称
   const getSportName = (sport: Sport | undefined): string => {
     if (!sport) return t("home.select_sport");
@@ -196,7 +338,7 @@ export default function HomeScreen() {
   };
 
   const handleLeagueSelect = (leagueKey: string) => {
-    setSelectedLeagueKey(leagueKey);
+    updateLeagueKey(leagueKey);
     console.log("Selected league:", leagueKey);
   };
 
@@ -230,10 +372,10 @@ export default function HomeScreen() {
         style={[styles.filterBtn, { backgroundColor: filterBg }]}
         onPress={() => setFilterMode(filterMode === "time" ? "league" : "time")}
       >
-        <IconSymbol 
+        <IconSymbol
-          name={filterMode === "time" ? "time-outline" : "trophy-outline"} 
+          name={filterMode === "time" ? "time-outline" : "trophy-outline"}
-          size={18} 
+          size={18}
-          color={iconColor} 
+          color={iconColor}
         />
         <ThemedText style={styles.filterText}>
           {filterMode === "time" ? t("home.time") : t("home.league")}
@@ -285,8 +427,9 @@ export default function HomeScreen() {
         >
           <IconSymbol name="trophy-outline" size={18} color={iconColor} />
           <ThemedText style={styles.filterText} numberOfLines={1}>
-            {selectedLeagueKey 
+            {selectedLeagueKey
-              ? leagues.find(l => l.key === selectedLeagueKey)?.name || t("home.select_league")
+              ? leagues.find((l) => l.key === selectedLeagueKey)?.name ||
+                t("home.select_league")
               : t("home.select_league")}
           </ThemedText>
         </TouchableOpacity>
@@ -327,7 +470,7 @@ export default function HomeScreen() {
           title={t("home.select_sport")}
           options={sportOptions}
           selectedValue={selectedSportId}
-          onSelect={setSelectedSportId}
+          onSelect={updateSportId}
         />
       )}
 
@@ -336,7 +479,7 @@ export default function HomeScreen() {
           visible={showCalendarModal}
           onClose={() => setShowCalendarModal(false)}
           selectedDate={selectedDate}
-          onSelectDate={setSelectedDate}
+          onSelectDate={updateDate}
         />
       )}
 

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 { fetchLiveScore } from "@/lib/api";
-import { League, Match, Sport } from "@/types/api";
+import { LiveScoreMatch, Match } from "@/types/api";
-import React, { useEffect, useMemo, useState } from "react";
+import { useRouter } from "expo-router";
+import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import {
+import { ActivityIndicator, FlatList, StyleSheet, View } from "react-native";
-  ActivityIndicator,
-  FlatList,
-  StyleSheet,
-  TouchableOpacity,
-  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 { state } = useAppState();
-  const filterBg = isDark ? "#2C2C2E" : "#F2F2F7";
 
-  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();
+    loadLiveMatches();
-    loadLeagues();
+    // 每30秒自动刷新一次实时比分
-  }, []);
+    const interval = setInterval(loadLiveMatches, 30000);
+    return () => clearInterval(interval);
+  }, [state.selectedSportId, state.selectedLeagueKey, state.timezone]);
 
-  // Load Matches when sport or date changes
+  const loadLiveMatches = async () => {
-  useEffect(() => {
+    if (!state.selectedSportId) {
-    if (selectedSportId !== null) {
+      setLoading(false);
-      loadMatches(selectedSportId);
+      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 liveData = await fetchLiveScore(
-      const list = await fetchTodayMatches(sportId, undefined, deviceTimeZone);
+        state.selectedSportId,
-      setMatches(list);
+        state.selectedLeagueKey ? parseInt(state.selectedLeagueKey) : undefined,
-    } catch (e) {
+        state.timezone
-      console.error(e);
+      );
+
+      // 检查返回的数据是否为空或无效
+      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,

app/_layout.tsx

@@ -8,6 +8,7 @@ import { StatusBar } from "expo-status-bar";
 import "react-native-reanimated";
 
 import { Colors } from "@/constants/theme";
+import { AppStateProvider } from "@/context/AppStateContext";
 import { ThemeProvider } from "@/context/ThemeContext";
 import { useColorScheme } from "@/hooks/use-color-scheme";
 import "@/i18n"; // Initialize i18n
@@ -19,7 +20,9 @@ export const unstable_settings = {
 export default function RootLayout() {
   return (
     <ThemeProvider>
-      <RootLayoutNav />
+      <AppStateProvider>
+        <RootLayoutNav />
+      </AppStateProvider>
     </ThemeProvider>
   );
 }
@@ -75,6 +78,13 @@ function RootLayoutNav() {
             headerShown: false,
           }}
         />
+        <Stack.Screen
+          name="live-detail/[id]"
+          options={{
+            animation: "slide_from_right",
+            headerShown: false,
+          }}
+        />
       </Stack>
       <StatusBar style={colorScheme === "dark" ? "light" : "dark"} />
     </NavigationThemeProvider>

app/live-detail/[id].tsx

@@ -0,0 +1,156 @@
+import { EventsTimeline } from "@/components/live-detail/events-timeline";
+import { LiveLeagueInfo } from "@/components/live-detail/live-league-info";
+import { LiveMatchTabs } from "@/components/live-detail/live-match-tabs";
+import { LiveScoreHeader } from "@/components/live-detail/live-score-header";
+import { OddsCard } from "@/components/live-detail/odds-card";
+import { OtherInfoCard } from "@/components/live-detail/other-info-card";
+import { StatsCard } from "@/components/live-detail/stats-card";
+import { ThemedText } from "@/components/themed-text";
+import { ThemedView } from "@/components/themed-view";
+import { Colors } from "@/constants/theme";
+import { useTheme } from "@/context/ThemeContext";
+import { fetchLiveScore } from "@/lib/api";
+import { LiveScoreMatch } from "@/types/api";
+import { useLocalSearchParams } from "expo-router";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  ActivityIndicator,
+  ScrollView,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+export default function LiveDetailScreen() {
+  const { id, league_id, sport_id } = useLocalSearchParams<{
+    id: string;
+    league_id: string;
+    sport_id: string;
+  }>();
+  const { theme } = useTheme();
+  const { t } = useTranslation();
+  const insets = useSafeAreaInsets();
+  const isDark = theme === "dark";
+
+  const [loading, setLoading] = useState(true);
+  const [match, setMatch] = useState<LiveScoreMatch | null>(null);
+  const [activeTab, setActiveTab] = useState("detail"); // Default to detail to show all data
+
+  useEffect(() => {
+    loadLiveDetail();
+  }, [id, league_id]);
+
+  const loadLiveDetail = async () => {
+    try {
+      setLoading(true);
+      // Fetch live scores for the league
+      const sportId = parseInt(sport_id || "1");
+      const leagueId = parseInt(league_id || "0");
+
+      const liveData = await fetchLiveScore(sportId, leagueId);
+
+      if (liveData && Array.isArray(liveData)) {
+        // Find the specific match
+        const found = liveData.find((m) => m.event_key.toString() === id);
+        if (found) {
+          setMatch(found);
+        }
+      }
+    } catch (err) {
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <ThemedView style={styles.center}>
+        <ActivityIndicator size="large" color={Colors[theme].tint} />
+      </ThemedView>
+    );
+  }
+
+  if (!match) {
+    return (
+      <ThemedView style={styles.center}>
+        <ThemedText>{t("detail.not_found")}</ThemedText>
+        <TouchableOpacity style={styles.retryButton} onPress={loadLiveDetail}>
+          <ThemedText style={styles.retryText}>{t("detail.retry")}</ThemedText>
+        </TouchableOpacity>
+      </ThemedView>
+    );
+  }
+
+  const renderTabContent = () => {
+    switch (activeTab) {
+      case "stats":
+        return <StatsCard match={match} isDark={isDark} />;
+      case "odds":
+        return <OddsCard match={match} isDark={isDark} />;
+      case "detail":
+        return (
+          <>
+            <OddsCard match={match} isDark={isDark} />
+            <StatsCard match={match} isDark={isDark} />
+            <EventsTimeline match={match} isDark={isDark} />
+            <OtherInfoCard match={match} isDark={isDark} />
+          </>
+        );
+      default:
+        return (
+          <View style={styles.center}>
+            <ThemedText style={{ opacity: 0.5 }}>
+              {t("detail.empty_stats")}
+            </ThemedText>
+          </View>
+        );
+    }
+  };
+
+  return (
+    <ThemedView style={styles.container}>
+      <ScrollView
+        bounces={false}
+        showsVerticalScrollIndicator={false}
+        contentContainerStyle={{ paddingBottom: insets.bottom + 20 }}
+      >
+        <LiveScoreHeader match={match} topInset={insets.top} />
+        <LiveLeagueInfo match={match} />
+        <LiveMatchTabs
+          activeTab={activeTab}
+          onTabChange={setActiveTab}
+          isDark={isDark}
+        />
+
+        {renderTabContent()}
+      </ScrollView>
+    </ThemedView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  center: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 20,
+    minHeight: 200,
+  },
+  retryButton: {
+    marginTop: 20,
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+    backgroundColor: "#007AFF",
+    borderRadius: 8,
+  },
+  retryText: {
+    color: "#FFF",
+    fontWeight: "600",
+  },
+});

components/live-detail/events-timeline.tsx

@@ -0,0 +1,534 @@
+import { ThemedText } from "@/components/themed-text";
+import { ThemedView } from "@/components/themed-view";
+import { IconSymbol } from "@/components/ui/icon-symbol";
+import { LiveScoreMatch } from "@/types/api";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { StyleSheet, Switch, View } from "react-native";
+
+interface EventItem {
+  time: string;
+  type: "goal" | "card" | "sub" | "status";
+  side: "home" | "away" | "center";
+  player?: string;
+  playerIn?: string;
+  playerOut?: string;
+  detail?: string;
+  score?: string;
+  isPenalty?: boolean;
+}
+
+interface EventsTimelineProps {
+  match: LiveScoreMatch;
+  isDark: boolean;
+}
+
+export function EventsTimeline({ match, isDark }: EventsTimelineProps) {
+  const { t } = useTranslation();
+  const [showSub, setShowSub] = useState(true);
+  const [showCard, setShowCard] = useState(true);
+
+  // Parse and merge events
+  const events: EventItem[] = [];
+
+  // 1. Goals
+  match.goalscorers?.forEach((g) => {
+    const isHome = !!g.home_scorer;
+    events.push({
+      time: g.time,
+      type: "goal",
+      side: isHome ? "home" : "away",
+      player: isHome ? g.home_scorer : g.away_scorer,
+      detail: isHome ? g.home_assist : g.away_assist,
+      score: g.score,
+      isPenalty: g.info?.toLowerCase().includes("penalty"),
+    });
+  });
+
+  // 2. Cards
+  match.cards?.forEach((c) => {
+    const isHome = !!c.home_fault;
+    events.push({
+      time: c.time,
+      type: "card",
+      side: isHome ? "home" : "away",
+      player: isHome ? c.home_fault : c.away_fault,
+      detail: c.card, // "yellow card" or "red card"
+    });
+  });
+
+  // 3. Substitutes
+  match.substitutes?.forEach((s) => {
+    const isHome = Array.isArray(s.home_scorer) ? false : !!s.home_scorer?.in;
+    const isAway = Array.isArray(s.away_scorer) ? false : !!s.away_scorer?.in;
+
+    if (isHome) {
+      const h = s.home_scorer as any;
+      events.push({
+        time: s.time,
+        type: "sub",
+        side: "home",
+        playerIn: h.in,
+        playerOut: h.out,
+      });
+    }
+    if (isAway) {
+      const a = s.away_scorer as any;
+      events.push({
+        time: s.time,
+        type: "sub",
+        side: "away",
+        playerIn: a.in,
+        playerOut: a.out,
+      });
+    }
+  });
+
+  // 4. Status items
+  events.push({
+    time: "0",
+    type: "status",
+    side: "center",
+    detail: t("detail.events.start"),
+  });
+
+  if (match.event_halftime_result) {
+    events.push({
+      time: "45",
+      type: "status",
+      side: "center",
+      detail: `${t("detail.events.ht")} ${match.event_halftime_result}`,
+    });
+  }
+
+  // Sort by time (Descending - Newer at top)
+  const sortedEvents = events.sort((a, b) => {
+    const timeA = parseInt(a.time.replace("'", "")) || 0;
+    const timeB = parseInt(b.time.replace("'", "")) || 0;
+    return timeB - timeA;
+  });
+
+  const filteredEvents = sortedEvents.filter((ev) => {
+    if (ev.type === "sub") return showSub;
+    if (ev.type === "card") return showCard;
+    return true;
+  });
+
+  return (
+    <ThemedView style={[styles.container, isDark && styles.darkContainer]}>
+      <View style={styles.timelineWrapper}>
+        <View style={[styles.centerLine, isDark && styles.darkLine]} />
+
+        {filteredEvents.map((event, index) => (
+          <View key={index} style={styles.eventRow}>
+            {/* Home Side */}
+            <View style={styles.sideContainer}>
+              {event.side === "home" && (
+                <View style={[styles.eventContent, styles.homeContent]}>
+                  {event.type === "goal" && (
+                    <View style={styles.goalBox}>
+                      <ThemedText style={styles.eventLabel}>
+                        {event.isPenalty
+                          ? t("detail.events.penalty_goal")
+                          : t("detail.events.goal")}
+                      </ThemedText>
+                      <View
+                        style={[
+                          styles.playerIconPlaceholder,
+                          isDark && styles.darkItem,
+                          isDark && { borderColor: "#333" },
+                        ]}
+                      >
+                        <IconSymbol
+                          name="person"
+                          size={16}
+                          color={isDark ? "#666" : "#BBB"}
+                        />
+                      </View>
+                      <View
+                        style={[styles.scorePill, isDark && styles.darkItem]}
+                      >
+                        <IconSymbol
+                          name="football"
+                          size={12}
+                          color={isDark ? "#FFF" : "#000"}
+                        />
+                        <ThemedText
+                          style={[styles.scoreLabel, isDark && styles.darkText]}
+                        >
+                          {event.score}
+                        </ThemedText>
+                      </View>
+                    </View>
+                  )}
+                  {event.type === "card" && (
+                    <View
+                      style={[
+                        styles.cardPill,
+                        isDark && styles.darkItem,
+                        { borderColor: isDark ? "#333" : "#EEE" },
+                      ]}
+                    >
+                      <View
+                        style={[
+                          styles.miniCard,
+                          {
+                            backgroundColor: event.detail?.includes("yellow")
+                              ? "#FFD700"
+                              : "#FF3B30",
+                          },
+                        ]}
+                      />
+                    </View>
+                  )}
+                  {event.type === "sub" && (
+                    <View style={styles.subBox}>
+                      <ThemedText
+                        style={[styles.subInText, isDark && styles.darkText]}
+                      >
+                        {event.playerIn}
+                      </ThemedText>
+                      <ThemedText style={styles.subOutText}>
+                        {event.playerOut}
+                      </ThemedText>
+                    </View>
+                  )}
+                </View>
+              )}
+            </View>
+
+            {/* Time Point */}
+            <View style={styles.timePointContainer}>
+              {event.type !== "status" ? (
+                <View style={[styles.timeCircle, isDark && styles.darkItem]}>
+                  <ThemedText
+                    style={[styles.timeText, isDark && styles.darkText]}
+                  >
+                    {`${event.time}'`}
+                  </ThemedText>
+                </View>
+              ) : (
+                <View
+                  style={[
+                    styles.statusPill,
+                    isDark && styles.darkItem,
+                    isDark && { borderColor: "#333" },
+                  ]}
+                >
+                  <ThemedText
+                    style={[styles.statusText, isDark && styles.darkText]}
+                  >
+                    {event.detail}
+                  </ThemedText>
+                </View>
+              )}
+            </View>
+
+            {/* Away Side */}
+            <View style={styles.sideContainer}>
+              {event.side === "away" && (
+                <View style={[styles.eventContent, styles.awayContent]}>
+                  {event.type === "goal" && (
+                    <View style={styles.goalBox}>
+                      <View
+                        style={[styles.scorePill, isDark && styles.darkItem]}
+                      >
+                        <ThemedText
+                          style={[styles.scoreLabel, isDark && styles.darkText]}
+                        >
+                          {event.score}
+                        </ThemedText>
+                        <IconSymbol
+                          name="football"
+                          size={12}
+                          color={isDark ? "#FFF" : "#000"}
+                        />
+                      </View>
+                      <View
+                        style={[
+                          styles.playerIconPlaceholder,
+                          isDark && styles.darkItem,
+                          isDark && { borderColor: "#333" },
+                        ]}
+                      >
+                        <IconSymbol
+                          name="person"
+                          size={16}
+                          color={isDark ? "#666" : "#BBB"}
+                        />
+                      </View>
+                      <ThemedText style={styles.eventLabel}>
+                        {event.isPenalty
+                          ? t("detail.events.penalty_goal")
+                          : t("detail.events.goal")}
+                      </ThemedText>
+                    </View>
+                  )}
+                  {event.type === "card" && (
+                    <View
+                      style={[
+                        styles.cardPill,
+                        isDark && styles.darkItem,
+                        { borderColor: isDark ? "#333" : "#EEE" },
+                      ]}
+                    >
+                      <View
+                        style={[
+                          styles.miniCard,
+                          {
+                            backgroundColor: event.detail?.includes("yellow")
+                              ? "#FFD700"
+                              : "#FF3B30",
+                          },
+                        ]}
+                      />
+                    </View>
+                  )}
+                  {event.type === "sub" && (
+                    <View style={styles.subBox}>
+                      <ThemedText
+                        style={[
+                          styles.subInText,
+                          isDark && styles.darkText,
+                          { textAlign: "left" },
+                        ]}
+                      >
+                        {event.playerIn}
+                      </ThemedText>
+                      <ThemedText
+                        style={[styles.subOutText, { textAlign: "left" }]}
+                      >
+                        {event.playerOut}
+                      </ThemedText>
+                    </View>
+                  )}
+                </View>
+              )}
+            </View>
+          </View>
+        ))}
+      </View>
+
+      {/* Footer Controls */}
+      <View style={[styles.footer, isDark && { borderTopColor: "#333" }]}>
+        <ThemedText style={styles.footerLabel}>
+          {t("detail.events.toggle_visibility")}
+        </ThemedText>
+        <View style={styles.footerSwitches}>
+          <View style={styles.switchItem}>
+            <IconSymbol name="swap-vertical" size={16} color="#4CAF50" />
+            <Switch
+              value={showSub}
+              onValueChange={setShowSub}
+              trackColor={{ false: "#DDD", true: "#3b5998" }}
+              thumbColor="#FFF"
+              style={styles.miniSwitch}
+            />
+          </View>
+          <View style={styles.switchItem}>
+            <View
+              style={[
+                styles.miniCard,
+                { backgroundColor: "#FFD700", width: 8, height: 12 },
+              ]}
+            />
+            <Switch
+              value={showCard}
+              onValueChange={setShowCard}
+              trackColor={{ false: "#DDD", true: "#3b5998" }}
+              thumbColor="#FFF"
+              style={styles.miniSwitch}
+            />
+          </View>
+        </View>
+      </View>
+    </ThemedView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    margin: 16,
+    borderRadius: 20,
+    backgroundColor: "#FFF",
+    padding: 16,
+    paddingBottom: 30,
+    shadowColor: "#000",
+    shadowOpacity: 0.05,
+    shadowRadius: 10,
+    elevation: 2,
+  },
+  darkContainer: {
+    backgroundColor: "#1E1E20",
+    shadowOpacity: 0,
+    elevation: 0,
+  },
+  darkItem: {
+    backgroundColor: "#2C2C2E",
+    borderColor: "#38383a",
+  },
+  darkText: {
+    color: "#FFF",
+  },
+  timelineWrapper: {
+    position: "relative",
+    alignItems: "center",
+  },
+  centerLine: {
+    position: "absolute",
+    width: 1,
+    height: "100%",
+    backgroundColor: "#F0F0F0",
+    top: 0,
+  },
+  darkLine: {
+    backgroundColor: "#333",
+  },
+  eventRow: {
+    flexDirection: "row",
+    width: "100%",
+    alignItems: "center",
+    marginVertical: 12,
+  },
+  sideContainer: {
+    flex: 1,
+  },
+  timePointContainer: {
+    width: 60,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  timeCircle: {
+    width: 30,
+    height: 30,
+    borderRadius: 15,
+    backgroundColor: "#FFF",
+    justifyContent: "center",
+    alignItems: "center",
+    zIndex: 1,
+    borderWidth: 1,
+    borderColor: "#F0F0F0",
+  },
+  timeText: {
+    fontSize: 12,
+    fontWeight: "500",
+    color: "#333",
+  },
+  statusPill: {
+    position: "absolute",
+    backgroundColor: "#FFF",
+    borderWidth: 1,
+    borderColor: "#E0E0E0",
+    paddingHorizontal: 12,
+    paddingVertical: 4,
+    borderRadius: 15,
+    zIndex: 2,
+  },
+  statusText: {
+    fontSize: 14,
+    fontWeight: "bold",
+  },
+  eventContent: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  homeContent: {
+    justifyContent: "flex-end",
+    paddingRight: 10,
+  },
+  awayContent: {
+    justifyContent: "flex-start",
+    paddingLeft: 10,
+  },
+  scorePill: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: "#FFF",
+    borderWidth: 1.5,
+    borderColor: "#FFD700",
+    borderRadius: 12,
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    gap: 4,
+  },
+  scoreLabel: {
+    fontSize: 14,
+    fontWeight: "bold",
+  },
+  eventLabel: {
+    fontSize: 12,
+    color: "#999",
+  },
+  goalBox: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+  },
+  playerIconPlaceholder: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    backgroundColor: "#EEE",
+    borderWidth: 1,
+    borderColor: "#DDD",
+  },
+  cardPill: {
+    width: 30,
+    height: 30,
+    borderRadius: 15,
+    borderWidth: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "#FFF",
+  },
+  miniCard: {
+    width: 10,
+    height: 14,
+    borderRadius: 2,
+  },
+  subBox: {
+    alignItems: "flex-end",
+  },
+  subInText: {
+    fontSize: 12,
+    color: "#333",
+    fontWeight: "500",
+  },
+  subOutText: {
+    fontSize: 10,
+    color: "#999",
+  },
+  penaltyIcon: {
+    width: 12,
+    height: 12,
+    backgroundColor: "#4B77FF",
+    borderRadius: 2,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  footer: {
+    marginTop: 30,
+    borderTopWidth: 1,
+    borderTopColor: "#F0F0F0",
+    paddingTop: 16,
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  footerLabel: {
+    fontSize: 12,
+    color: "#999",
+  },
+  footerSwitches: {
+    flexDirection: "row",
+    gap: 12,
+  },
+  switchItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+  },
+  miniSwitch: {
+    transform: [{ scaleX: 0.7 }, { scaleY: 0.7 }],
+  },
+});

components/live-detail/live-league-info.tsx

@@ -0,0 +1,90 @@
+import { ThemedText } from "@/components/themed-text";
+import { IconSymbol } from "@/components/ui/icon-symbol";
+import { LiveScoreMatch } from "@/types/api";
+import React from "react";
+import { Image, StyleSheet, TouchableOpacity, View } from "react-native";
+
+interface LiveLeagueInfoProps {
+  match: LiveScoreMatch;
+}
+
+export function LiveLeagueInfo({ match }: LiveLeagueInfoProps) {
+  // Force dark style for this component to match the header design language
+  const bgColor = "#121212";
+  const borderColor = "rgba(255,255,255,0.1)";
+  const textColor = "#FFF";
+
+  return (
+    <TouchableOpacity
+      style={[
+        styles.container,
+        { backgroundColor: bgColor, borderBottomColor: borderColor },
+      ]}
+      activeOpacity={0.7}
+    >
+      <View style={styles.left}>
+        {match.league_logo ? (
+          <Image
+            source={{ uri: match.league_logo }}
+            style={styles.leagueLogo}
+          />
+        ) : (
+          <View style={[styles.fallbackLogo, { backgroundColor: "#333" }]}>
+            <IconSymbol name="trophy-outline" size={14} color="#AAA" />
+          </View>
+        )}
+        <ThemedText style={[styles.leagueName, { color: textColor }]}>
+          {match.league_name}
+        </ThemedText>
+      </View>
+      <View style={styles.right}>
+        <ThemedText style={styles.roundText}>
+          {match.league_round || ""}
+        </ThemedText>
+        <IconSymbol name="chevron-forward" size={16} color="#888" />
+      </View>
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    borderBottomWidth: 1,
+  },
+  left: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  leagueLogo: {
+    width: 24,
+    height: 24,
+    resizeMode: "contain",
+    marginRight: 8,
+  },
+  fallbackLogo: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    justifyContent: "center",
+    alignItems: "center",
+    marginRight: 8,
+  },
+  leagueName: {
+    fontSize: 14,
+    fontWeight: "500",
+  },
+  right: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  roundText: {
+    fontSize: 12,
+    color: "#888",
+    marginRight: 8,
+  },
+});

components/live-detail/live-match-tabs.tsx

@@ -0,0 +1,113 @@
+import { ThemedText } from "@/components/themed-text";
+import { IconSymbol } from "@/components/ui/icon-symbol";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { ScrollView, StyleSheet, TouchableOpacity, View } from "react-native";
+
+interface LiveMatchTabsProps {
+  activeTab: string;
+  onTabChange: (tab: string) => void;
+  isDark: boolean;
+}
+
+export function LiveMatchTabs({
+  activeTab,
+  onTabChange,
+  isDark,
+}: LiveMatchTabsProps) {
+  const { t } = useTranslation();
+  const containerBg = isDark ? "#121212" : "#F5F5F5";
+
+  const tabs = [
+    {
+      id: "detail",
+      label: t("detail.tabs.info"),
+      icon: "document-text-outline",
+    },
+    { id: "stats", label: t("detail.tabs.stats"), icon: "stats-chart-outline" },
+    { id: "odds", label: t("detail.tabs.odds"), icon: "cash-outline" },
+    { id: "lineup", label: t("detail.tabs.lineup"), icon: "shirt-outline" },
+    {
+      id: "analysis",
+      label: t("detail.tabs.analysis"),
+      icon: "pie-chart-outline",
+    },
+  ];
+
+  return (
+    <View style={[styles.container, { backgroundColor: containerBg }]}>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={styles.scrollContent}
+      >
+        {tabs.map((tab) => {
+          const isActive = activeTab === tab.id;
+          const activeColor = "#FF9800"; // 橙色
+          const inactiveColor = isDark ? "#AAA" : "#666";
+          const inactiveBg = isDark
+            ? "rgba(255,255,255,0.05)"
+            : "rgba(0,0,0,0.03)";
+
+          return (
+            <TouchableOpacity
+              key={tab.id}
+              onPress={() => onTabChange(tab.id)}
+              style={[
+                styles.tabBtn,
+                {
+                  backgroundColor: isActive
+                    ? isDark
+                      ? "#2C2C2E"
+                      : "#FFF"
+                    : inactiveBg,
+                },
+              ]}
+            >
+              <IconSymbol
+                name={tab.icon as any}
+                size={16}
+                color={isActive ? activeColor : inactiveColor}
+                style={{ marginRight: 6 }}
+              />
+              <ThemedText
+                style={[
+                  styles.tabLabel,
+                  {
+                    color: isActive ? activeColor : inactiveColor,
+                    fontWeight: isActive ? "700" : "500",
+                  },
+                ]}
+              >
+                {tab.label}
+              </ThemedText>
+            </TouchableOpacity>
+          );
+        })}
+      </ScrollView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: 8,
+  },
+  scrollContent: {
+    paddingHorizontal: 16,
+    gap: 10,
+    alignItems: "center",
+  },
+  tabBtn: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: 15,
+    paddingVertical: 6,
+    borderRadius: 20,
+  },
+  tabLabel: {
+    fontSize: 14,
+    includeFontPadding: false,
+  },
+});

components/live-detail/live-score-header.tsx

@@ -0,0 +1,201 @@
+import { ThemedText } from "@/components/themed-text";
+import { IconSymbol } from "@/components/ui/icon-symbol";
+import { LiveScoreMatch } from "@/types/api";
+import { LinearGradient } from "expo-linear-gradient";
+import { useRouter } from "expo-router";
+import React from "react";
+import { Image, StyleSheet, TouchableOpacity, View } from "react-native";
+
+interface LiveScoreHeaderProps {
+  match: LiveScoreMatch;
+  topInset: number;
+}
+
+export function LiveScoreHeader({ match, topInset }: LiveScoreHeaderProps) {
+  const router = useRouter();
+
+  return (
+    <LinearGradient
+      colors={["#521e10", "#0e0e10"]}
+      start={{ x: 0, y: 0 }}
+      end={{ x: 1, y: 1 }}
+      style={[styles.container, { paddingTop: Math.max(topInset, 10) }]}
+    >
+      {/* Top Bar */}
+      <View style={styles.topBar}>
+        <View style={styles.leftContainer}>
+          <TouchableOpacity
+            onPress={() => router.back()}
+            style={styles.iconBtn}
+          >
+            <IconSymbol name="chevron-back" size={28} color="#FFF" />
+          </TouchableOpacity>
+        </View>
+
+        <View style={styles.statusContainer}>
+          <ThemedText style={styles.statusText}>
+            {match.event_status || "Live"}
+          </ThemedText>
+        </View>
+
+        <View style={styles.rightActions}>
+          <TouchableOpacity style={styles.iconBtn}>
+            <IconSymbol name="notifications-outline" size={24} color="#FFF" />
+          </TouchableOpacity>
+          <TouchableOpacity style={styles.iconBtn}>
+            <IconSymbol name="star-outline" size={24} color="#FFF" />
+          </TouchableOpacity>
+        </View>
+      </View>
+
+      {/* Score Section */}
+      <View style={styles.scoreRow}>
+        <View style={styles.teamInfo}>
+          <View style={styles.logoContainer}>
+            <Image
+              source={{ uri: match.home_team_logo }}
+              style={styles.teamLogo}
+            />
+          </View>
+          <ThemedText style={styles.teamName} numberOfLines={2}>
+            {match.event_home_team}
+          </ThemedText>
+        </View>
+
+        <View style={styles.centerScore}>
+          <View style={styles.scoreBox}>
+            <ThemedText style={styles.scoreValue}>
+              {match.event_final_result?.replace(" - ", "-") || "0-0"}
+            </ThemedText>
+          </View>
+          <ThemedText style={styles.timeText}>{match.event_time}</ThemedText>
+          {match.goalscorers && match.goalscorers.length > 0 && (
+            <View style={styles.lastGoalContainer}>
+              <IconSymbol name="football-outline" size={12} color="#FFF" />
+              <ThemedText style={styles.lastGoalText}>
+                {match.goalscorers[match.goalscorers.length - 1].home_scorer ||
+                  match.goalscorers[match.goalscorers.length - 1].away_scorer}
+              </ThemedText>
+            </View>
+          )}
+        </View>
+
+        <View style={styles.teamInfo}>
+          <View style={styles.logoContainer}>
+            <Image
+              source={{ uri: match.away_team_logo }}
+              style={styles.teamLogo}
+            />
+          </View>
+          <ThemedText style={styles.teamName} numberOfLines={2}>
+            {match.event_away_team}
+          </ThemedText>
+        </View>
+      </View>
+    </LinearGradient>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    paddingBottom: 24,
+  },
+  topBar: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: 16,
+    marginBottom: 20,
+  },
+  leftContainer: {
+    width: 60,
+  },
+  rightActions: {
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    width: 80,
+  },
+  iconBtn: {
+    padding: 6,
+    marginLeft: 4,
+  },
+  statusContainer: {
+    backgroundColor: "rgba(255,255,255,0.1)",
+    paddingHorizontal: 12,
+    paddingVertical: 4,
+    borderRadius: 12,
+  },
+  statusText: {
+    color: "#FFF",
+    fontWeight: "600",
+    fontSize: 14,
+  },
+  scoreRow: {
+    flexDirection: "row",
+    alignItems: "flex-start",
+    justifyContent: "space-between",
+    paddingHorizontal: 24,
+  },
+  teamInfo: {
+    alignItems: "center",
+    width: "30%",
+  },
+  logoContainer: {
+    width: 70,
+    height: 70,
+    marginBottom: 10,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  teamLogo: {
+    width: 60,
+    height: 60,
+    resizeMode: "contain",
+  },
+  teamName: {
+    color: "#FFF",
+    fontSize: 14,
+    fontWeight: "700",
+    textAlign: "center",
+    lineHeight: 18,
+  },
+  centerScore: {
+    alignItems: "center",
+    justifyContent: "center",
+    width: "40%",
+    paddingTop: 10,
+  },
+  scoreBox: {
+    backgroundColor: "#FFF",
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+    borderRadius: 14,
+    marginBottom: 8,
+    minWidth: 100,
+    alignItems: "center",
+  },
+  scoreValue: {
+    color: "#000",
+    fontSize: 30,
+    fontWeight: "700",
+    lineHeight: 30,
+    letterSpacing: 1,
+  },
+  timeText: {
+    color: "#FF4444",
+    fontWeight: "700",
+    fontSize: 14,
+    marginBottom: 4,
+  },
+  lastGoalContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginTop: 4,
+    opacity: 0.9,
+  },
+  lastGoalText: {
+    color: "#FFF",
+    fontSize: 10,
+    marginLeft: 4,
+  },
+});

components/live-detail/odds-card.tsx

@@ -0,0 +1,122 @@
+import { ThemedText } from "@/components/themed-text";
+import { ThemedView } from "@/components/themed-view";
+import { LiveScoreMatch } from "@/types/api";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { StyleSheet, View } from "react-native";
+
+interface OddsCardProps {
+  match: LiveScoreMatch;
+  isDark: boolean;
+}
+
+export function OddsCard({ match, isDark }: OddsCardProps) {
+  const { t } = useTranslation();
+  // 提取队名缩写或前3个字母
+  const homeAbbr =
+    match.event_home_team?.substring(0, 3).toUpperCase() || "HOME";
+  const awayAbbr =
+    match.event_away_team?.substring(0, 3).toUpperCase() || "AWAY";
+
+  return (
+    <ThemedView style={[styles.container, isDark && styles.darkContainer]}>
+      <View style={styles.header}>
+        <ThemedText style={styles.title}>
+          {t("detail.odds_card.title")}
+        </ThemedText>
+        <View style={styles.badge}>
+          <ThemedText style={styles.badgeText}>bet365</ThemedText>
+        </View>
+      </View>
+
+      <View style={styles.row}>
+        <View style={[styles.item, isDark && styles.darkItem]}>
+          <ThemedText style={styles.team}>{homeAbbr}</ThemedText>
+          <ThemedText style={styles.odds}>-0.93</ThemedText>
+        </View>
+        <View style={[styles.item, isDark && styles.darkItem]}>
+          <ThemedText style={styles.team}>HDP</ThemedText>
+          <ThemedText style={styles.odds}>0/0.5</ThemedText>
+        </View>
+        <View style={[styles.item, isDark && styles.darkItem]}>
+          <ThemedText style={styles.team}>{awayAbbr}</ThemedText>
+          <ThemedText style={styles.odds}>0.72</ThemedText>
+        </View>
+      </View>
+
+      <ThemedText style={styles.disclaimer}>
+        {t("detail.odds_card.disclaimer")}
+      </ThemedText>
+    </ThemedView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    margin: 16,
+    borderRadius: 20,
+    padding: 20,
+    backgroundColor: "#FFF",
+    marginBottom: 16,
+    shadowColor: "#000",
+    shadowOpacity: 0.05,
+    shadowRadius: 10,
+    elevation: 2,
+  },
+  darkContainer: {
+    backgroundColor: "#1E1E20",
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: 20,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: "500",
+  },
+  badge: {
+    backgroundColor: "#1E4D40",
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 8,
+  },
+  badgeText: {
+    color: "#FFF",
+    fontSize: 14,
+    fontWeight: "bold",
+  },
+  row: {
+    flexDirection: "row",
+    gap: 10,
+  },
+  item: {
+    flex: 1,
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    backgroundColor: "#F8F8F8",
+    borderRadius: 10,
+    paddingHorizontal: 12,
+    paddingVertical: 14,
+  },
+  darkItem: {
+    backgroundColor: "rgba(255,255,255,0.05)",
+  },
+  team: {
+    fontSize: 16,
+    fontWeight: "500",
+  },
+  odds: {
+    fontSize: 16,
+    fontWeight: "600",
+    color: "#FF9800",
+  },
+  disclaimer: {
+    fontSize: 12,
+    color: "#BBB",
+    marginTop: 20,
+    textAlign: "center",
+  },
+});

components/live-detail/other-info-card.tsx

@@ -0,0 +1,81 @@
+import { ThemedText } from "@/components/themed-text";
+import { ThemedView } from "@/components/themed-view";
+import { IconSymbol } from "@/components/ui/icon-symbol";
+import { LiveScoreMatch } from "@/types/api";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { StyleSheet, View } from "react-native";
+
+interface OtherInfoCardProps {
+  match: LiveScoreMatch;
+  isDark: boolean;
+}
+
+export function OtherInfoCard({ match, isDark }: OtherInfoCardProps) {
+  const { t } = useTranslation();
+  const iconColor = isDark ? "#888" : "#999";
+
+  // 模拟气象数据，因为当前 API 响应中未直接包含这些字段
+  const weather = {
+    temp: "25°C",
+    wind: "3.4m/s",
+    humidity: "31%",
+  };
+
+  return (
+    <ThemedView style={[styles.container, isDark && styles.darkContainer]}>
+      <ThemedText style={styles.title}>
+        {t("detail.other_info.title")}
+      </ThemedText>
+
+      <View style={styles.infoRow}>
+        <IconSymbol name="thermometer-outline" size={24} color={iconColor} />
+        <ThemedText style={styles.infoText}>{weather.temp}</ThemedText>
+      </View>
+
+      <View style={styles.infoRow}>
+        <IconSymbol name="leaf-outline" size={24} color={iconColor} />
+        <ThemedText style={styles.infoText}>{weather.wind}</ThemedText>
+      </View>
+
+      <View style={styles.infoRow}>
+        <IconSymbol name="water-outline" size={24} color={iconColor} />
+        <ThemedText style={styles.infoText}>{weather.humidity}</ThemedText>
+      </View>
+    </ThemedView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    margin: 16,
+    borderRadius: 20,
+    backgroundColor: "#FFF",
+    padding: 20,
+    marginBottom: 20,
+    shadowColor: "#000",
+    shadowOpacity: 0.05,
+    shadowRadius: 10,
+    elevation: 2,
+  },
+  darkContainer: {
+    backgroundColor: "#1E1E20",
+    shadowOpacity: 0,
+    elevation: 0,
+  },
+  title: {
+    fontSize: 16,
+    color: "#666",
+    marginBottom: 20,
+  },
+  infoRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 15,
+    marginBottom: 16,
+  },
+  infoText: {
+    fontSize: 18,
+    fontWeight: "500",
+  },
+});

components/live-detail/stats-card.tsx

@@ -0,0 +1,704 @@
+import { ThemedText } from "@/components/themed-text";
+import { ThemedView } from "@/components/themed-view";
+import { IconSymbol } from "@/components/ui/icon-symbol";
+import { LiveScoreMatch } from "@/types/api";
+import { LinearGradient } from "expo-linear-gradient";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  Image,
+  Modal,
+  Pressable,
+  StyleSheet,
+  Switch,
+  TouchableOpacity,
+  View,
+} from "react-native";
+
+interface StatsCardProps {
+  match: LiveScoreMatch;
+  isDark: boolean;
+}
+
+export function StatsCard({ match, isDark }: StatsCardProps) {
+  const { t } = useTranslation();
+  const [flagSwitch, setFlagSwitch] = useState(true);
+  const [cardSwitch, setCardSwitch] = useState(true);
+  const [showInfo, setShowInfo] = useState(false);
+
+  // 从 statistics 中提取数据
+  const stats = match.statistics || [];
+  const getStatValue = (type: string) => {
+    const stat = stats.find((s) => s.type === type);
+    return stat
+      ? { home: stat.home, away: stat.away }
+      : { home: "0", away: "0" };
+  };
+
+  const possession = getStatValue("Ball Possession");
+  const corners = getStatValue("Corners");
+  const yellowCards = getStatValue("Yellow Cards");
+
+  // 解析控球率数值 (例如 "53%" -> 53)
+  const homePossession =
+    parseInt(possession.home.toString().replace("%", "")) || 50;
+  const awayPossession =
+    parseInt(possession.away.toString().replace("%", "")) || 50;
+
+  // 用随机数据模拟压力曲线
+  const generateData = () => {
+    return Array.from({ length: 90 }, (_, i) => ({
+      time: i,
+      home: Math.sin(i / 5) * 20 + Math.random() * 10,
+      away: Math.cos(i / 4) * 15 + Math.random() * 12,
+    }));
+  };
+
+  const chartData = generateData();
+
+  const iconTintColor = isDark ? "#888" : "#CCC";
+  const switchBg = isDark ? "#2C2C2E" : "#F0F0F0";
+
+  return (
+    <ThemedView style={[styles.container, isDark && styles.darkContainer]}>
+      {/* Header */}
+      <View style={styles.header}>
+        <View style={styles.headerLeft}>
+          <ThemedText style={styles.title}>
+            {t("detail.stats_card.title")}
+          </ThemedText>
+          <TouchableOpacity onPress={() => setShowInfo(true)}>
+            <IconSymbol
+              name="information-circle-outline"
+              size={16}
+              color={iconTintColor}
+            />
+          </TouchableOpacity>
+        </View>
+        <View style={styles.switches}>
+          <View style={[styles.switchWrapper, { backgroundColor: switchBg }]}>
+            <IconSymbol name="flag" size={14} color="#4CAF50" />
+            <Switch
+              value={flagSwitch}
+              onValueChange={setFlagSwitch}
+              trackColor={{ false: "#DDD", true: "#EEE" }}
+              thumbColor={flagSwitch ? "#A5D6A7" : "#FFF"}
+              style={styles.smallSwitch}
+            />
+          </View>
+          <View style={[styles.switchWrapper, { backgroundColor: switchBg }]}>
+            <View style={[styles.miniCard, { backgroundColor: "#FFD700" }]} />
+            <Switch
+              value={cardSwitch}
+              onValueChange={setCardSwitch}
+              trackColor={{ false: "#DDD", true: "#3b5998" }}
+              thumbColor="#FFF"
+              style={styles.smallSwitch}
+            />
+          </View>
+        </View>
+      </View>
+
+      {/* Momentum Chart Area */}
+      <View style={styles.chartWrapper}>
+        <View style={styles.teamLogos}>
+          <Image
+            source={{ uri: match.home_team_logo }}
+            style={styles.chartLogo}
+          />
+          <Image
+            source={{ uri: match.away_team_logo }}
+            style={[styles.chartLogo, { marginTop: 12 }]}
+          />
+        </View>
+
+        <View style={styles.chartArea}>
+          {/* 背景色带 */}
+          <LinearGradient
+            colors={["rgba(59, 89, 152, 0.05)", "rgba(255, 171, 0, 0.05)"]}
+            style={styles.bgGradient}
+          />
+
+          {/* 网格线和时间刻度 */}
+          <View style={styles.gridContainer}>
+            {["0'", "15'", "30'", "HT", "60'", "75'", "90'"].map((label, i) => (
+              <View key={i} style={styles.gridLine}>
+                <View style={styles.line} />
+                <ThemedText style={styles.gridLabel}>{label}</ThemedText>
+              </View>
+            ))}
+          </View>
+
+          {/* 压力曲线模拟 (使用密集的小条形模拟波形) */}
+          <View style={styles.waveContainer}>
+            {chartData.map((d, i) => (
+              <React.Fragment key={i}>
+                <View
+                  style={[
+                    styles.waveBar,
+                    {
+                      left: `${(i / 90) * 100}%`,
+                      height: Math.abs(d.home),
+                      bottom: "50%",
+                      backgroundColor: "rgba(59, 89, 152, 0.8)",
+                      borderTopLeftRadius: 1,
+                      borderTopRightRadius: 1,
+                    },
+                  ]}
+                />
+                <View
+                  style={[
+                    styles.waveBar,
+                    {
+                      left: `${(i / 90) * 100}%`,
+                      height: Math.abs(d.away),
+                      top: "50%",
+                      backgroundColor: "rgba(255, 171, 0, 0.8)",
+                      borderBottomLeftRadius: 1,
+                      borderBottomRightRadius: 1,
+                    },
+                  ]}
+                />
+              </React.Fragment>
+            ))}
+          </View>
+
+          {/* 比赛事件标记 (假点位) */}
+          <View style={[styles.eventMarker, { left: "12%", top: "10%" }]}>
+            <View style={[styles.square, { backgroundColor: "#FFD700" }]} />
+          </View>
+          <View style={[styles.eventMarker, { left: "55%", top: "10%" }]}>
+            <View style={[styles.square, { backgroundColor: "#FFD700" }]} />
+          </View>
+          <View style={[styles.eventMarker, { left: "65%", top: "10%" }]}>
+            <View style={[styles.square, { backgroundColor: "#FF4444" }]} />
+          </View>
+          <View style={[styles.eventMarker, { left: "52%", bottom: "25%" }]}>
+            <View style={styles.goalBox}>
+              <IconSymbol name="football-outline" size={10} color="#000" />
+              <View
+                style={[
+                  styles.square,
+                  {
+                    backgroundColor: "#FFD700",
+                    width: 8,
+                    height: 10,
+                    borderRadius: 1,
+                  },
+                ]}
+              />
+            </View>
+          </View>
+        </View>
+      </View>
+
+      {/* Time Progress Slider */}
+      <View style={styles.sliderContainer}>
+        <ThemedText style={styles.currentTime}>46:53</ThemedText>
+        <View style={styles.trackContainer}>
+          <View style={[styles.track, isDark && { backgroundColor: "#333" }]} />
+          <View style={[styles.filledTrack, { width: "55%" }]} />
+          <View style={[styles.thumb, { left: "0%" }]} />
+          <View style={[styles.thumb, { left: "55%" }]} />
+          <View
+            style={[
+              styles.thumb,
+              { left: "100%", backgroundColor: isDark ? "#555" : "#333" },
+            ]}
+          />
+        </View>
+        <View style={styles.trackLabels}>
+          <ThemedText style={styles.trackLabel}>0:00</ThemedText>
+          <ThemedText style={styles.trackLabel}>HT</ThemedText>
+          <ThemedText style={styles.trackLabel}>FT</ThemedText>
+        </View>
+      </View>
+
+      {/* Possession & Stats Bar */}
+      <View style={styles.possessionSection}>
+        <ThemedText style={styles.possessionTitle}>
+          {t("detail.stats_card.possession")}
+        </ThemedText>
+        <View style={styles.possessionBarRow}>
+          <View
+            style={[
+              styles.posBar,
+              {
+                flex: homePossession,
+                backgroundColor: "#3b5998",
+                borderTopLeftRadius: 10,
+                borderBottomLeftRadius: 10,
+              },
+            ]}
+          >
+            <Image
+              source={{ uri: match.home_team_logo }}
+              style={styles.posLogo}
+            />
+            <ThemedText style={styles.posValue}>{homePossession}%</ThemedText>
+          </View>
+          <View style={{ width: 4 }} />
+          <View
+            style={[
+              styles.posBar,
+              {
+                flex: awayPossession,
+                backgroundColor: "#FFAB00",
+                borderTopRightRadius: 10,
+                borderBottomRightRadius: 10,
+                flexDirection: "row-reverse",
+              },
+            ]}
+          >
+            <Image
+              source={{ uri: match.away_team_logo }}
+              style={styles.posLogo}
+            />
+            <ThemedText style={styles.posValue}>{awayPossession}%</ThemedText>
+          </View>
+        </View>
+
+        <View style={styles.miniStatsRow}>
+          <View style={[styles.miniStatBadge, isDark && styles.darkStatBadge]}>
+            <ThemedText style={styles.miniStatText}>{corners.home}</ThemedText>
+            <IconSymbol name="flag" size={14} color="#FFAB00" />
+            <ThemedText style={styles.miniStatText}>{corners.away}</ThemedText>
+          </View>
+          <View style={[styles.miniStatBadge, isDark && styles.darkStatBadge]}>
+            <ThemedText style={styles.miniStatText}>
+              {yellowCards.home}
+            </ThemedText>
+            <View style={styles.yellowCardIcon} />
+            <ThemedText style={styles.miniStatText}>
+              {yellowCards.away}
+            </ThemedText>
+          </View>
+        </View>
+      </View>
+
+      {/* Momentum Info Modal */}
+      <Modal
+        visible={showInfo}
+        transparent
+        animationType="fade"
+        onRequestClose={() => setShowInfo(false)}
+      >
+        <Pressable
+          style={styles.modalOverlay}
+          onPress={() => setShowInfo(false)}
+        >
+          <ThemedView
+            style={[styles.modalContent, isDark && styles.darkModalContent]}
+          >
+            <ThemedText style={styles.modalTitle}>
+              {t("detail.stats_card.info_title")}
+            </ThemedText>
+
+            <ThemedText style={styles.modalDesc}>
+              {t("detail.stats_card.info_desc")}
+            </ThemedText>
+
+            <View style={styles.bulletPoint}>
+              <ThemedText style={styles.bulletText}>
+                • {t("detail.stats_card.point1")}
+              </ThemedText>
+            </View>
+            <View style={styles.bulletPoint}>
+              <ThemedText style={styles.bulletText}>
+                • {t("detail.stats_card.point2")}
+              </ThemedText>
+            </View>
+            <View style={styles.bulletPoint}>
+              <ThemedText style={styles.bulletText}>
+                • {t("detail.stats_card.point3")}
+              </ThemedText>
+            </View>
+
+            <View style={styles.teamInfoRow}>
+              <Image
+                source={{ uri: match.home_team_logo }}
+                style={styles.miniLogo}
+              />
+              <View style={styles.wavePlaceholder}>
+                {[...Array(6)].map((_, i) => (
+                  <View
+                    key={i}
+                    style={[
+                      styles.waveDot,
+                      {
+                        backgroundColor: "#3b5998",
+                        marginTop: i % 2 === 0 ? 0 : 6,
+                      },
+                    ]}
+                  />
+                ))}
+              </View>
+              <ThemedText style={styles.teamDesc} numberOfLines={1}>
+                {match.event_home_team}
+              </ThemedText>
+            </View>
+
+            <View style={styles.teamInfoRow}>
+              <Image
+                source={{ uri: match.away_team_logo }}
+                style={styles.miniLogo}
+              />
+              <View style={styles.wavePlaceholder}>
+                {[...Array(6)].map((_, i) => (
+                  <View
+                    key={i}
+                    style={[
+                      styles.waveDot,
+                      {
+                        backgroundColor: "#FFAB00",
+                        marginTop: i % 2 === 0 ? 6 : 0,
+                      },
+                    ]}
+                  />
+                ))}
+              </View>
+              <ThemedText style={styles.teamDesc} numberOfLines={1}>
+                {match.event_away_team}
+              </ThemedText>
+            </View>
+
+            <TouchableOpacity
+              style={styles.closeButton}
+              onPress={() => setShowInfo(false)}
+            >
+              <ThemedText style={styles.closeButtonText}>
+                {t("detail.stats_card.close")}
+              </ThemedText>
+            </TouchableOpacity>
+          </ThemedView>
+        </Pressable>
+      </Modal>
+    </ThemedView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    margin: 16,
+    borderRadius: 20,
+    padding: 16,
+    backgroundColor: "#FFF",
+    marginBottom: 20,
+    shadowColor: "#000",
+    shadowOpacity: 0.05,
+    shadowRadius: 10,
+    elevation: 2,
+  },
+  darkContainer: {
+    backgroundColor: "#1E1E20",
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: 24,
+  },
+  headerLeft: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: "500",
+    color: "#666",
+  },
+  switches: {
+    flexDirection: "row",
+    gap: 12,
+  },
+  switchWrapper: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: "#F0F0F0",
+    borderRadius: 15,
+    paddingLeft: 8,
+    paddingRight: 2,
+    height: 30,
+  },
+  smallSwitch: {
+    transform: [{ scaleX: 0.6 }, { scaleY: 0.6 }],
+  },
+  miniCard: {
+    width: 10,
+    height: 14,
+    borderRadius: 2,
+  },
+  chartWrapper: {
+    flexDirection: "row",
+    height: 140,
+    marginBottom: 10,
+  },
+  teamLogos: {
+    width: 40,
+    justifyContent: "center",
+    alignItems: "center",
+    paddingBottom: 20,
+  },
+  chartLogo: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+  },
+  chartArea: {
+    flex: 1,
+    position: "relative",
+    marginLeft: 8,
+  },
+  bgGradient: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 30,
+    borderRadius: 4,
+  },
+  gridContainer: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    flexDirection: "row",
+    justifyContent: "space-between",
+  },
+  gridLine: {
+    height: "100%",
+    alignItems: "center",
+  },
+  line: {
+    width: 1,
+    height: "100%",
+    backgroundColor: "#F0F0F0",
+    marginBottom: 4,
+  },
+  gridLabel: {
+    fontSize: 12,
+    color: "#000",
+    fontWeight: "500",
+  },
+  waveContainer: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 30,
+  },
+  waveBar: {
+    position: "absolute",
+    width: 1.5,
+  },
+  eventMarker: {
+    position: "absolute",
+    alignItems: "center",
+  },
+  square: {
+    width: 12,
+    height: 16,
+    borderRadius: 2,
+  },
+  goalBox: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 2,
+    backgroundColor: "#FFF",
+    padding: 2,
+    borderRadius: 4,
+    borderWidth: 1,
+    borderColor: "#E0E0E0",
+  },
+  sliderContainer: {
+    marginTop: 20,
+    paddingHorizontal: 10,
+  },
+  currentTime: {
+    fontSize: 14,
+    color: "#4CAF50",
+    fontWeight: "700",
+    textAlign: "center",
+    marginBottom: 4,
+    marginLeft: "10%", // Offset roughly
+  },
+  trackContainer: {
+    height: 20,
+    justifyContent: "center",
+    position: "relative",
+  },
+  track: {
+    height: 3,
+    backgroundColor: "#EEE",
+    borderRadius: 2,
+  },
+  filledTrack: {
+    position: "absolute",
+    height: 3,
+    backgroundColor: "#3b5998",
+    borderRadius: 2,
+  },
+  thumb: {
+    position: "absolute",
+    width: 10,
+    height: 10,
+    borderRadius: 5,
+    backgroundColor: "#3b5998",
+    borderWidth: 2,
+    borderColor: "#FFF",
+    marginLeft: -5,
+  },
+  trackLabels: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginTop: 8,
+  },
+  trackLabel: {
+    fontSize: 12,
+    color: "#666",
+    fontWeight: "500",
+  },
+  possessionSection: {
+    marginTop: 24,
+    alignItems: "center",
+  },
+  possessionTitle: {
+    fontSize: 16,
+    color: "#666",
+    marginBottom: 12,
+  },
+  possessionBarRow: {
+    flexDirection: "row",
+    height: 36,
+    width: "100%",
+    paddingHorizontal: 4,
+  },
+  posBar: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 12,
+    gap: 8,
+  },
+  posLogo: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    backgroundColor: "#FFF",
+  },
+  posValue: {
+    color: "#FFF",
+    fontSize: 14,
+    fontWeight: "700",
+  },
+  miniStatsRow: {
+    flexDirection: "row",
+    justifyContent: "center",
+    gap: 12,
+    marginTop: 16,
+  },
+  miniStatBadge: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: "#F5F5F5",
+    paddingHorizontal: 16,
+    paddingVertical: 6,
+    borderRadius: 20,
+    gap: 8,
+    minWidth: 80,
+    justifyContent: "center",
+  },
+  darkStatBadge: {
+    backgroundColor: "#2C2C2E",
+  },
+  miniStatText: {
+    fontSize: 14,
+    fontWeight: "600",
+  },
+  yellowCardIcon: {
+    width: 10,
+    height: 14,
+    backgroundColor: "#FFD700",
+    borderRadius: 2,
+  },
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: "rgba(0,0,0,0.5)",
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 20,
+  },
+  modalContent: {
+    width: "100%",
+    backgroundColor: "#FFF",
+    borderRadius: 24,
+    padding: 24,
+    shadowColor: "#000",
+    shadowOpacity: 0.1,
+    shadowRadius: 20,
+    elevation: 10,
+  },
+  darkModalContent: {
+    backgroundColor: "#1E1E20",
+  },
+  modalTitle: {
+    fontSize: 20,
+    fontWeight: "700",
+    marginBottom: 16,
+  },
+  modalDesc: {
+    fontSize: 15,
+    lineHeight: 22,
+    marginBottom: 16,
+  },
+  bulletPoint: {
+    marginBottom: 8,
+  },
+  bulletText: {
+    fontSize: 15,
+    lineHeight: 22,
+  },
+  teamInfoRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginTop: 16,
+    gap: 12,
+  },
+  miniLogo: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+  },
+  wavePlaceholder: {
+    flexDirection: "row",
+    alignItems: "center",
+    width: 40,
+    height: 20,
+    gap: 2,
+  },
+  waveDot: {
+    width: 4,
+    height: 4,
+    borderRadius: 2,
+  },
+  teamDesc: {
+    flex: 1,
+    fontSize: 14,
+    color: "#666",
+  },
+  closeButton: {
+    backgroundColor: "#4B77FF",
+    borderRadius: 12,
+    paddingVertical: 12,
+    alignItems: "center",
+    marginTop: 24,
+    alignSelf: "flex-end",
+    paddingHorizontal: 24,
+  },
+  closeButtonText: {
+    color: "#FFF",
+    fontSize: 16,
+    fontWeight: "600",
+  },
+});

components/match-card.tsx

@@ -9,9 +9,10 @@ import { Pressable, StyleSheet, View } from "react-native";
 
 interface MatchCardProps {
   match: Match;
+  onPress?: (match: Match) => void;
 }
 
-export function MatchCard({ match }: MatchCardProps) {
+export function MatchCard({ match, onPress }: MatchCardProps) {
   const router = useRouter();
   const { theme } = useTheme();
   const isDark = theme === "dark";
@@ -20,7 +21,11 @@ export function MatchCard({ match }: MatchCardProps) {
   const borderColor = isDark ? "#38383A" : "#E5E5EA";
 
   const handlePress = () => {
-    router.push(`/match-detail/${match.id}`);
+    if (onPress) {
+      onPress(match);
+    } else {
+      router.push(`/match-detail/${match.id}`);
+    }
   };
 
   return (

constants/api.ts

@@ -8,6 +8,7 @@ export const API_ENDPOINTS = {
   COUNTRIES: "/v1/api/countries",
   LEAGUES: "/v1/api/leagues",
   MATCHES_TODAY: "/v1/api/matches/today",
+  LIVESCORE: "/v1/api/livescore",
   UPCOMING_MATCHES: "/v1/api/matches/upcoming",
   MATCH_DETAIL: (id: string) => `/v1/api/matches/${id}`,
   ODDS: "/v1/api/odds",

context/AppStateContext.tsx

@@ -0,0 +1,67 @@
+import React, { createContext, ReactNode, useContext, useState } from "react";
+
+interface AppState {
+  selectedSportId: number | null;
+  selectedDate: Date;
+  selectedLeagueKey: string | null;
+  timezone: string;
+}
+
+interface AppStateContextType {
+  state: AppState;
+  updateSportId: (sportId: number | null) => void;
+  updateDate: (date: Date) => void;
+  updateLeagueKey: (leagueKey: string | null) => void;
+  updateTimezone: (timezone: string) => void;
+}
+
+const AppStateContext = createContext<AppStateContextType | undefined>(
+  undefined
+);
+
+export function AppStateProvider({ children }: { children: ReactNode }) {
+  const [state, setState] = useState<AppState>({
+    selectedSportId: 1, // 默认足球
+    selectedDate: new Date(),
+    selectedLeagueKey: null,
+    timezone: "UTC",
+  });
+
+  const updateSportId = (sportId: number | null) => {
+    setState((prev) => ({ ...prev, selectedSportId: sportId }));
+  };
+
+  const updateDate = (date: Date) => {
+    setState((prev) => ({ ...prev, selectedDate: date }));
+  };
+
+  const updateLeagueKey = (leagueKey: string | null) => {
+    setState((prev) => ({ ...prev, selectedLeagueKey: leagueKey }));
+  };
+
+  const updateTimezone = (timezone: string) => {
+    setState((prev) => ({ ...prev, timezone }));
+  };
+
+  return (
+    <AppStateContext.Provider
+      value={{
+        state,
+        updateSportId,
+        updateDate,
+        updateLeagueKey,
+        updateTimezone,
+      }}
+    >
+      {children}
+    </AppStateContext.Provider>
+  );
+}
+
+export function useAppState() {
+  const context = useContext(AppStateContext);
+  if (!context) {
+    throw new Error("useAppState must be used within AppStateProvider");
+  }
+  return context;
+}

i18n/locales/en.json

@@ -43,6 +43,8 @@
             "info": "Details",
             "stats": "Statistics",
             "odds": "Odds",
+            "lineup": "Lineup",
+            "analysis": "Analysis",
             "h2h": "H2H",
             "chat": "Chat"
         },
@@ -68,13 +70,35 @@
         "empty_odds": "No odds data",
         "empty_h2h": "No H2H data",
         "empty_chat": "Chat is not available",
+        "odds_card": {
+            "title": "Match Odds",
+            "disclaimer": "18+. Please gamble responsibly. Odds are subject to change."
+        },
+        "stats_card": {
+            "title": "Statistics",
+            "possession": "Possession",
+            "info_title": "Momentum Explanation",
+            "info_desc": "The momentum chart reflects the attacking pressure and threat level of the two teams during different periods of the match.",
+            "point1": "The upper waves represent the home team, and the lower waves represent the away team.",
+            "point2": "The height of the waves depends on attacking intensity, possession time, and shot threat.",
+            "point3": "The more intense the solid line fluctuates, the higher the attacking frequency in that period.",
+            "close": "Close"
+        },
+        "other_info": {
+            "title": "Other Info"
+        },
         "events": {
             "goals": "Goals",
             "cards": "Cards",
             "substitutes": "Substitutes",
             "lineups": "Lineups",
             "red_card": "RED",
-            "yellow_card": "YELLOW"
+            "yellow_card": "YELLOW",
+            "start": "Match Started",
+            "ht": "HT",
+            "goal": "Goal",
+            "penalty_goal": "Penalty Goal",
+            "toggle_visibility": "Toggle timeline events"
         }
     },
     "selection": {

i18n/locales/zh.json

@@ -43,6 +43,8 @@
             "info": "详情",
             "stats": "统计数据",
             "odds": "赔率",
+            "lineup": "阵容",
+            "analysis": "数据分析",
             "h2h": "交锋往绩",
             "chat": "聊天"
         },
@@ -68,13 +70,35 @@
         "empty_odds": "暂无赔率数据",
         "empty_h2h": "暂无交锋数据",
         "empty_chat": "聊天功能暂未开启",
+        "odds_card": {
+            "title": "比赛赔率",
+            "disclaimer": "18+. 请负责任地赌博。赔率可能会变动。"
+        },
+        "stats_card": {
+            "title": "统计数据",
+            "possession": "控球率",
+            "info_title": "势头说明",
+            "info_desc": "势头图反映了两支球队在比赛不同时间段的进攻压力和威胁度。",
+            "point1": "上方波浪代表主队，下方代表客队。",
+            "point2": "波浪的高度取决于进攻强度、控球时间和射门威胁。",
+            "point3": "实线波动越剧烈，代表该时段进攻频率越高。",
+            "close": "关闭"
+        },
+        "other_info": {
+            "title": "其他信息"
+        },
         "events": {
             "goals": "进球",
             "cards": "红黄牌",
             "substitutes": "换人",
             "lineups": "首发阵容",
             "red_card": "红牌",
-            "yellow_card": "黄牌"
+            "yellow_card": "黄牌",
+            "start": "比赛开始",
+            "ht": "半场",
+            "goal": "进球",
+            "penalty_goal": "点球进球",
+            "toggle_visibility": "显示/隐藏时间线事件"
         }
     },
     "selection": {

lib/api.ts

@@ -4,6 +4,7 @@ import {
   ApiResponse,
   Country,
   League,
+  LiveScoreMatch,
   Match,
   MatchDetailData,
   OddsData,
@@ -138,23 +139,56 @@ export const fetchMatchDetail = async (
   }
 };
 
+export const fetchLiveScore = async (
+  sportId: number,
+  leagueId?: number,
+  timezone?: string
+): Promise<LiveScoreMatch[]> => {
+  try {
+    const params: { sport_id: number; league_id?: number; timezone?: string } =
+      {
+        sport_id: sportId,
+      };
+
+    if (leagueId) {
+      params.league_id = leagueId;
+    }
+
+    if (timezone) {
+      params.timezone = timezone;
+    }
+
+    const response = await apiClient.get<ApiResponse<LiveScoreMatch[]>>(
+      API_ENDPOINTS.LIVESCORE,
+      { params }
+    );
+
+    if (response.data.code === 0) {
+      return response.data.data;
+    }
+
+    throw new Error(response.data.message);
+  } catch (error) {
+    console.error("Fetch livescore error:", error);
+    throw error;
+  }
+};
+
 export const fetchUpcomingMatches = async (
   sportId: number,
   leagueKey: string,
   limit: number = 50
 ): Promise<UpcomingMatch[]> => {
   try {
-    const response =
+    const response = await apiClient.get<
-      await apiClient.get<ApiResponse<ApiListResponse<UpcomingMatch>>>(
+      ApiResponse<ApiListResponse<UpcomingMatch>>
-        API_ENDPOINTS.UPCOMING_MATCHES,
+    >(API_ENDPOINTS.UPCOMING_MATCHES, {
-        {
+      params: {
-          params: {
+        sport_id: sportId,
-            sport_id: sportId,
+        leagueKey,
-            leagueKey,
+        limit,
-            limit,
+      },
-          },
+    });
-        }
-      );
 
     if (response.data.code === 0) {
       return response.data.data.list;

types/api.ts

@@ -17,6 +17,75 @@ export interface Match {
   meta?: string;
   scoreText: string;
   fav: boolean;
+  leagueId?: number;
+  sportId?: number;
+  isLive?: boolean;
+}
+
+export interface LiveScoreMatch {
+  event_key: number;
+  event_date: string;
+  event_time: string;
+  event_home_team: string;
+  home_team_key: number;
+  home_team_logo: string;
+  event_away_team: string;
+  away_team_key: number;
+  away_team_logo: string;
+  event_final_result: string;
+  event_halftime_result: string;
+  event_status: string;
+  event_live: string;
+  league_key: number;
+  league_name: string;
+  league_logo: string;
+  league_round: string;
+  league_season: string;
+  country_name: string;
+  country_logo: string;
+  event_country_key: number;
+  goalscorers?: {
+    time: string;
+    home_scorer: string;
+    home_scorer_id: string;
+    home_assist: string;
+    home_assist_id: string;
+    score: string;
+    away_scorer: string;
+    away_scorer_id: string;
+    away_assist: string;
+    away_assist_id: string;
+    info: string;
+    info_time: string;
+  }[];
+  cards?: {
+    time: string;
+    home_fault: string;
+    card: string;
+    away_fault: string;
+    info: string;
+    home_player_id: string;
+    away_player_id: string;
+    info_time: string;
+  }[];
+  substitutes?: {
+    time: string;
+    home_scorer:
+      | { in: string; out: string; in_id: number; out_id: number }
+      | any[];
+    away_scorer:
+      | { in: string; out: string; in_id: number; out_id: number }
+      | any[];
+    info: string;
+    info_time: string;
+    score: string;
+  }[];
+  lineups?: unknown;
+  statistics?: {
+    type: string;
+    home: string;
+    away: string;
+  }[];
 }
 
 export interface ApiResponse<T> {