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

interface FootballScoreTableProps {
  data: MatchDetailData;
  isDark: boolean;
}

// 解析足球比分字符串，例如 "2-1" 或 "1-0"
function parseFootballScore(scoreString: string): number[] {
  if (!scoreString || scoreString === "-") return [0, 0];
  const parts = scoreString.split("-");
  if (parts.length === 2) {
    return [parseInt(parts[0]) || 0, parseInt(parts[1]) || 0];
  }
  return [0, 0];
}

export function FootballScoreTable({ data, isDark }: FootballScoreTableProps) {
  const { t } = useTranslation();
  const { match } = data;
  const bgColor = isDark ? "#1C1C1E" : "#FFF";
  const headerTextColor = isDark ? "#666" : "#999";

  // 解析足球比分
  const finalScore = parseFootballScore(match.eventFinalResult || "-");
  const halftimeScore = parseFootballScore(match.eventHalftimeResult || "-");

  const headers = [
    t("detail.score_table.team"),
    t("detail.score_table.total"),
    t("detail.score_table.halftime"),
  ];

  const rows = [
    {
      logo: match.homeTeamLogo,
      name: match.eventHomeTeam,
      total: finalScore[0],
      halftime: halftimeScore[0],
    },
    {
      logo: match.awayTeamLogo,
      name: match.eventAwayTeam,
      total: finalScore[1],
      halftime: halftimeScore[1],
    },
  ];

  return (
    <View style={[styles.container, { backgroundColor: bgColor }]}>
      <View style={styles.header}>
        {headers.map((h, i) => (
          <ThemedText
            key={h}
            style={[
              styles.headerText,
              {
                color: headerTextColor,
                flex: i === 0 ? 3 : 1,
                textAlign: i === 0 ? "left" : "center",
              },
            ]}
          >
            {h}
          </ThemedText>
        ))}
      </View>

      {rows.map((row, idx) => (
        <View key={idx} style={[styles.row, idx === 0 && styles.rowBorder]}>
          <View style={styles.teamCell}>
            <Image source={{ uri: row.logo }} style={styles.teamLogo} />
            <ThemedText style={styles.teamName} numberOfLines={1}>
              {row.name}
            </ThemedText>
          </View>
          <ThemedText style={styles.cellText}>{row.total}</ThemedText>
          <ThemedText style={styles.cellText}>{row.halftime}</ThemedText>
        </View>
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    margin: 16,
    borderRadius: 12,
    padding: 16,
    elevation: 2,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
  },
  header: {
    flexDirection: "row",
    paddingBottom: 12,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: "rgba(150,150,150,0.2)",
  },
  headerText: {
    fontSize: 12,
    fontWeight: "500",
  },
  row: {
    flexDirection: "row",
    alignItems: "center",
    paddingVertical: 12,
  },
  rowBorder: {
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: "rgba(150,150,150,0.1)",
  },
  teamCell: {
    flex: 3,
    flexDirection: "row",
    alignItems: "center",
    gap: 8,
  },
  teamLogo: {
    width: 24,
    height: 24,
    resizeMode: "contain",
  },
  teamName: {
    flex: 1,
    fontSize: 14,
    fontWeight: "500",
  },
  cellText: {
    flex: 1,
    textAlign: "center",
    fontSize: 14,
    fontWeight: "500",
  },
});