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;
  sportId?: number;
}

export function LiveMatchTabs({
  activeTab,
  onTabChange,
  isDark,
  sportId = 1,
}: LiveMatchTabsProps) {
  const { t } = useTranslation();
  const containerBg = isDark ? "#121212" : "#F5F5F5";

  const getTabs = () => {
    if (sportId === 2) {
      return [
        {
          id: "detail",
          label: t("detail.tabs.info"),
          icon: "document-text-outline",
        },
        {
          id: "stats",
          label: t("detail.tabs.stats"),
          icon: "stats-chart-outline",
        },
        {
          id: "overall",
          label: t("detail.tabs.overall"),
          icon: "bar-chart-outline",
        },
        { id: "odds", label: t("detail.tabs.odds"), icon: "cash-outline" },
      ];
    }
    if (sportId === 4) {
      return [
        {
          id: "detail",
          label: t("detail.tabs.info"),
          icon: "document-text-outline",
        },
        { id: "h2h", label: t("detail.tabs.h2h"), icon: "timer-outline" },
        {
          id: "stats",
          label: t("detail.tabs.stats"),
          icon: "stats-chart-outline",
        },
        { id: "odds", label: t("detail.tabs.odds"), icon: "cash-outline" },
      ];
    }
    return [
      {
        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",
      },
    ];
  };

  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 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,
  },
});