import { ThemedText } from "@/components/themed-text";
import { ThemedView } from "@/components/themed-view";
import { LiveScoreMatch } from "@/types/api";
import React from "react";
import { useTranslation } from "react-i18next";
import { StyleSheet, View } from "react-native";

interface OddsCardProps {
  match: LiveScoreMatch;
  isDark: boolean;
}

export function OddsCard({ match, isDark }: OddsCardProps) {
  const { t } = useTranslation();
  // 提取队名缩写或前3个字母
  const homeAbbr =
    match.event_home_team?.substring(0, 3).toUpperCase() || "HOME";
  const awayAbbr =
    match.event_away_team?.substring(0, 3).toUpperCase() || "AWAY";

  return (
    <ThemedView style={[styles.container, isDark && styles.darkContainer]}>
      <View style={styles.header}>
        <ThemedText style={styles.title}>
          {t("detail.odds_card.title")}
        </ThemedText>
        <View style={styles.badge}>
          <ThemedText style={styles.badgeText}>bet365</ThemedText>
        </View>
      </View>

      <View style={styles.row}>
        <View style={[styles.item, isDark && styles.darkItem]}>
          <ThemedText style={styles.team}>{homeAbbr}</ThemedText>
          <ThemedText style={styles.odds}>-0.93</ThemedText>
        </View>
        <View style={[styles.item, isDark && styles.darkItem]}>
          <ThemedText style={styles.team}>HDP</ThemedText>
          <ThemedText style={styles.odds}>0/0.5</ThemedText>
        </View>
        <View style={[styles.item, isDark && styles.darkItem]}>
          <ThemedText style={styles.team}>{awayAbbr}</ThemedText>
          <ThemedText style={styles.odds}>0.72</ThemedText>
        </View>
      </View>

      <ThemedText style={styles.disclaimer}>
        {t("detail.odds_card.disclaimer")}
      </ThemedText>
    </ThemedView>
  );
}

const styles = StyleSheet.create({
  container: {
    margin: 16,
    borderRadius: 20,
    padding: 20,
    backgroundColor: "#FFF",
    marginBottom: 16,
    shadowColor: "#000",
    shadowOpacity: 0.05,
    shadowRadius: 10,
    elevation: 2,
  },
  darkContainer: {
    backgroundColor: "#1E1E20",
  },
  header: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    marginBottom: 20,
  },
  title: {
    fontSize: 18,
    fontWeight: "500",
  },
  badge: {
    backgroundColor: "#1E4D40",
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderRadius: 8,
  },
  badgeText: {
    color: "#FFF",
    fontSize: 14,
    fontWeight: "bold",
  },
  row: {
    flexDirection: "row",
    gap: 10,
  },
  item: {
    flex: 1,
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    backgroundColor: "#F8F8F8",
    borderRadius: 10,
    paddingHorizontal: 12,
    paddingVertical: 14,
  },
  darkItem: {
    backgroundColor: "rgba(255,255,255,0.05)",
  },
  team: {
    fontSize: 16,
    fontWeight: "500",
  },
  odds: {
    fontSize: 16,
    fontWeight: "600",
    color: "#FF9800",
  },
  disclaimer: {
    fontSize: 12,
    color: "#BBB",
    marginTop: 20,
    textAlign: "center",
  },
});