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 BasketballScoreTableProps {
  data: MatchDetailData;
  isDark: boolean;
}

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

  // 解析比分 - 篮球通常是 4 节
  const parseScore = (scoreString: string) => {
    if (!scoreString || scoreString === "-") return [0, 0, 0, 0, 0];
    // 假设格式可能是 "25-20,30-28,22-25,28-26" 或类似
    // 这里简化处理，实际需要根据 API 返回格式解析
    return [0, 0, 0, 0, 0]; // total, q1, q2, q3, q4
  };

  const homeScores = parseScore(match.eventFinalResult || "-");
  const awayScores = parseScore(match.eventFinalResult || "-");

  const headers = [
    t("detail.score_table.team"),
    t("detail.score_table.total"),
    "1",
    "2",
    "3",
    "4",
  ];

  const rows = [
    {
      logo: match.homeTeamLogo,
      name: match.eventHomeTeam,
      total: homeScores[0],
      q1: homeScores[1],
      q2: homeScores[2],
      q3: homeScores[3],
      q4: homeScores[4],
    },
    {
      logo: match.awayTeamLogo,
      name: match.eventAwayTeam,
      total: awayScores[0],
      q1: awayScores[1],
      q2: awayScores[2],
      q3: awayScores[3],
      q4: awayScores[4],
    },
  ];

  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, styles.totalText]}>
            {row.total}
          </ThemedText>
          <ThemedText style={styles.cellText}>{row.q1}</ThemedText>
          <ThemedText style={styles.cellText}>{row.q2}</ThemedText>
          <ThemedText style={styles.cellText}>{row.q3}</ThemedText>
          <ThemedText style={styles.cellText}>{row.q4}</ThemedText>
        </View>
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    marginHorizontal: 16,
    marginBottom: 16,
    borderRadius: 16,
    padding: 20,
    elevation: 2,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.05,
    shadowRadius: 8,
  },
  header: {
    flexDirection: "row",
    paddingBottom: 16,
    borderBottomWidth: 1,
    borderBottomColor: "rgba(150,150,150,0.1)",
  },
  headerText: {
    fontSize: 12,
    fontWeight: "600",
    opacity: 0.8,
  },
  row: {
    flexDirection: "row",
    alignItems: "center",
    paddingVertical: 14,
  },
  rowBorder: {
    borderBottomWidth: 1,
    borderBottomColor: "rgba(150,150,150,0.1)",
  },
  teamCell: {
    flex: 3,
    flexDirection: "row",
    alignItems: "center",
    gap: 10,
  },
  teamLogo: {
    width: 28,
    height: 28,
    resizeMode: "contain",
  },
  teamName: {
    flex: 1,
    fontSize: 14,
    fontWeight: "700",
  },
  cellText: {
    flex: 1,
    textAlign: "center",
    fontSize: 14,
    fontWeight: "500",
    opacity: 0.8,
  },
  totalText: {
    fontWeight: "700",
    opacity: 1,
  },
});