import { ThemedText } from "@/components/themed-text";
import React from "react";
import { useTranslation } from "react-i18next";
import { ScrollView, StyleSheet, TouchableOpacity, View } from "react-native";

interface MatchTabsProps {
  activeTab: string;
  onTabChange: (tab: string) => void;
  isDark: boolean;
  sportId: number;
}

export function MatchTabs({ activeTab, onTabChange, isDark, sportId }: MatchTabsProps) {
  const { t } = useTranslation();
  const containerBg = isDark ? "#121212" : "#F8F8F8";

  // 根据 sportId 动态生成标签
  const getTabs = () => {
    if (sportId === 1) {
      // 足球: 详情、统计数据、赔率、交锋往绩、聊天
      return [
        { id: "info", label: t("detail.tabs.info") },
        { id: "stats", label: t("detail.tabs.stats") },
        { id: "odds", label: t("detail.tabs.odds") },
        { id: "h2h", label: t("detail.tabs.h2h") },
        { id: "chat", label: t("detail.tabs.chat") },
      ];
    } else if (sportId === 2) {
      // 篮球: 详情、交锋往绩、聊天
      return [
        { id: "info", label: t("detail.tabs.info") },
        { id: "h2h", label: t("detail.tabs.h2h") },
        { id: "chat", label: t("detail.tabs.chat") },
      ];
    }
    // 默认: 详情、交锋往绩、聊天
    return [
      { id: "info", label: t("detail.tabs.info") },
      { id: "h2h", label: t("detail.tabs.h2h") },
      { id: "chat", label: t("detail.tabs.chat") },
    ];
  };

  const tabs = getTabs();

  return (
    <View style={[styles.container, { backgroundColor: containerBg }]}>
      <ScrollView
        horizontal
        showsHorizontalScrollIndicator={false}
        contentContainerStyle={styles.scrollContent}
      >
        {tabs.map((tab) => {
          const isActive = activeTab === tab.id;
          return (
            <TouchableOpacity
              key={tab.id}
              onPress={() => onTabChange(tab.id)}
              style={[
                styles.tabBtn,
                isActive && styles.activeTabBtn,
                isActive && {
                  backgroundColor: isDark ? "rgba(255,255,255,0.05)" : "#FFF",
                },
              ]}
            >
              <ThemedText
                style={[
                  styles.tabText,
                  isActive && styles.activeTabText,
                  isActive && { color: "#FF9800" },
                ]}
              >
                {tab.label}
              </ThemedText>
            </TouchableOpacity>
          );
        })}
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    paddingVertical: 12,
  },
  scrollContent: {
    paddingHorizontal: 16,
    gap: 12,
  },
  tabBtn: {
    paddingHorizontal: 20,
    paddingVertical: 8,
    borderRadius: 20,
    borderWidth: 1,
    borderColor: "transparent",
  },
  activeTabBtn: {
    borderColor: "rgba(255,152,0,0.3)",
    // Shadow for iOS/Android if needed
    elevation: 2,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 2,
  },
  tabText: {
    fontSize: 14,
    fontWeight: "500",
    opacity: 0.6,
  },
  activeTabText: {
    opacity: 1,
  },
});