physical-expo/app/match-detail/[id].tsx

import { BasketballScoreTable } from "@/components/match-detail/basketball/basketball-score-table";
import { FootballEvents } from "@/components/match-detail/football/football-events";
import { FootballScoreTable } from "@/components/match-detail/football/football-score-table";
import { LeagueInfo } from "@/components/match-detail/league-info";
import { MatchInfoCard } from "@/components/match-detail/match-info-card";
import { MatchTabs } from "@/components/match-detail/match-tabs";
import { ScoreHeader } from "@/components/match-detail/score-header";
import { ThemedText } from "@/components/themed-text";
import { ThemedView } from "@/components/themed-view";
import { Colors } from "@/constants/theme";
import { useTheme } from "@/context/ThemeContext";
import { fetchMatchDetail } from "@/lib/api";
import { MatchDetailData } from "@/types/api";
import { useLocalSearchParams, useRouter } 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 MatchDetailScreen() {
  const { id } = useLocalSearchParams<{ id: string }>();
  const router = useRouter();
  const { theme } = useTheme();
  const { t } = useTranslation();
  const insets = useSafeAreaInsets();
  const isDark = theme === "dark";

  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [data, setData] = useState<MatchDetailData | null>(null);
  const [activeTab, setActiveTab] = useState("info");

  useEffect(() => {
    if (id) {
      loadMatchDetail();
    }
  }, [id]);

  // 当数据加载完成且 sportId 变化时，检查并重置 activeTab
  useEffect(() => {
    if (data?.match?.sportId) {
      const sportId = data.match.sportId;
      let validTabs: string[] = [];
      
      if (sportId === 1) {
        // 足球
        validTabs = ["info", "stats", "odds", "h2h", "chat"];
      } else if (sportId === 2) {
        // 篮球
        validTabs = ["info", "h2h", "chat"];
      } else {
        // 默认
        validTabs = ["info", "h2h", "chat"];
      }
      
      // 如果当前 activeTab 不在有效标签列表中，重置为第一个
      if (!validTabs.includes(activeTab)) {
        setActiveTab(validTabs[0]);
      }
    }
  }, [data?.match?.sportId]);

  const loadMatchDetail = async () => {
    try {
      setLoading(true);
      setError(null);
      const result = await fetchMatchDetail(id as string);
      setData(result);
      console.log("首发阵容" , result.match.players?.away_team);
      
    } catch (err: any) {
      setError(err.message || t("detail.fetch_failed"));
    } finally {
      setLoading(false);
    }
  };

  if (loading) {
    return (
      <ThemedView style={styles.center}>
        <ActivityIndicator size="large" color={Colors[theme].tint} />
      </ThemedView>
    );
  }

  if (error || !data) {
    return (
      <ThemedView style={styles.center}>
        <ThemedText>{error || t("detail.not_found")}</ThemedText>
        <TouchableOpacity style={styles.retryButton} onPress={loadMatchDetail}>
          <ThemedText style={styles.retryText}>{t("detail.retry")}</ThemedText>
        </TouchableOpacity>
      </ThemedView>
    );
  }

  const renderTabContent = () => {
    const sportId = data?.match?.sportId || 1;

    switch (activeTab) {
      case "info":
        // 根据 sportId 显示不同的详情组件
        if (sportId === 1) {
          // 足球：显示 FootballScoreTable (半场/全场)、MatchInfoCard 和 FootballEvents
          return (
            <>
              <FootballScoreTable data={data} isDark={isDark} />
              <MatchInfoCard data={data} isDark={isDark} />
              <FootballEvents data={data} isDark={isDark} />
            </>
          );
        } else if (sportId === 2) {
          // 篮球：显示 BasketballScoreTable (4节) 和 MatchInfoCard
          return (
            <>
              <BasketballScoreTable data={data} isDark={isDark} />
              <MatchInfoCard data={data} isDark={isDark} />
            </>
          );
        } else {
          // 默认使用足球组件
          return (
            <>
              <FootballScoreTable data={data} isDark={isDark} />
              <MatchInfoCard data={data} isDark={isDark} />
              <FootballEvents data={data} isDark={isDark} />
            </>
          );
        }
      case "stats":
        return (
          <View style={styles.emptyContent}>
            <ThemedText style={styles.emptyText}>
              {t("detail.empty_stats")}
            </ThemedText>
          </View>
        );
      case "odds":
        return (
          <View style={styles.emptyContent}>
            <ThemedText style={styles.emptyText}>
              {t("detail.empty_odds")}
            </ThemedText>
          </View>
        );
      case "h2h":
        return (
          <View style={styles.emptyContent}>
            <ThemedText style={styles.emptyText}>
              {t("detail.empty_h2h")}
            </ThemedText>
          </View>
        );
      case "chat":
        return (
          <View style={styles.emptyContent}>
            <ThemedText style={styles.emptyText}>
              {t("detail.empty_chat")}
            </ThemedText>
          </View>
        );
      default:
        return null;
    }
  };

  return (
    <ThemedView style={styles.container}>
      <ScrollView
        bounces={false}
        showsVerticalScrollIndicator={false}
        contentContainerStyle={{ paddingBottom: insets.bottom + 20 }}
      >
        <ScoreHeader data={data} isDark={isDark} topInset={insets.top} />
        <LeagueInfo data={data} isDark={isDark} />
        <MatchTabs
          activeTab={activeTab}
          onTabChange={setActiveTab}
          isDark={isDark}
          sportId={data.match.sportId}
        />

        {renderTabContent()}
      </ScrollView>
    </ThemedView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  center: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    padding: 20,
  },
  errorText: {
    fontSize: 16,
    marginBottom: 20,
    textAlign: "center",
  },
  retryButton: {
    paddingHorizontal: 20,
    paddingVertical: 10,
    backgroundColor: "#007AFF",
    borderRadius: 8,
  },
  retryText: {
    color: "#FFF",
    fontWeight: "600",
  },
  emptyContent: {
    padding: 50,
    alignItems: "center",
  },
  emptyText: {
    opacity: 0.5,
  },
});