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