import { ThemedText } from "@/components/themed-text";
import { IconSymbol, IconSymbolName } from "@/components/ui/icon-symbol";
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" : "#F5F5F5";

  // 根据 sportId 动态生成标签
  const getTabs = () => {
    // 使用 Ionicons 名称
    const commonTabs = [
      {
        id: "info",
        label: t("detail.tabs.info"),
        icon: "document-text-outline",
      },
      {
        id: "h2h",
        label: t("detail.tabs.h2h"),
        icon: "swap-horizontal-outline",
      },
      { id: "chat", label: t("detail.tabs.chat"), icon: "chatbubbles-outline" },
    ];

    if (sportId === 1) {
      // 足球: 详情、统计数据、赔率、交锋往绩、聊天
      return [
        {
          id: "info",
          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: "h2h",
          label: t("detail.tabs.h2h"),
          icon: "swap-horizontal-outline",
        },
        {
          id: "chat",
          label: t("detail.tabs.chat"),
          icon: "chatbubbles-outline",
        },
      ];
    } else if (sportId === 2) {
      // 篮球
      return commonTabs;
    }
    return commonTabs;
  };

  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;
          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 IconSymbolName}
                size={16}
                color={isActive ? activeColor : inactiveColor}
                style={{ marginRight: 6 }}
              />
              <ThemedText
                style={[
                  styles.tabText,
                  {
                    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 垂直对齐
  },
  tabBtn: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    paddingHorizontal: 15,
    paddingVertical: 6,
    borderRadius: 20,
  },
  tabText: {
    fontSize: 14,
    includeFontPadding: false, // 移除 Android 字体默认内边距
  },
});