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

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

export function CardsCard({ data, isDark }: CardsCardProps) {
  const { t } = useTranslation();
  const bgColor = isDark ? "#1C1C1E" : "#FFF";
  const borderColor = isDark ? "#2C2C2E" : "#EEE";

  // events 可能在 data.events 或 match.events 中
  const events = (data as any).events || (data.match as any).events;
  if (!events || typeof events !== "object") {
    return null;
  }

  // 处理数组格式的 events
  let eventsObj = events;
  if (Array.isArray(events) && events.length > 0) {
    eventsObj = events[0];
  }

  const cards = eventsObj?.cards || [];
  const filteredCards = cards.filter((card: CardEvent) => card.home_fault || card.away_fault);

  if (filteredCards.length === 0) {
    return null;
  }

  const renderCardEvent = (card: CardEvent, index: number) => {
    const isHome = !!card.home_fault;
    const cardType = card.card?.toLowerCase() || "";
    const isRed = cardType.includes("red");
    const isYellow = cardType.includes("yellow");
    const cardColor = isRed ? "#F44336" : isYellow ? "#FFC107" : "#9E9E9E";
    const playerName = card.home_fault || card.away_fault || "";
    
    return (
      <View key={`card-${index}`} style={[styles.eventRow, { borderBottomColor: borderColor }]}>
        <View style={styles.eventTime}>
          <ThemedText style={styles.timeText}>
            {card.time ? `${card.time}'` : ""}
          </ThemedText>
        </View>
        <View style={[styles.eventContent, isHome ? styles.homeEvent : styles.awayEvent]}>
          <View style={[styles.cardIcon, { backgroundColor: cardColor }]} />
          <ThemedText style={styles.eventText} numberOfLines={1}>
            {playerName}
          </ThemedText>
          {card.card && (
            <View style={[styles.cardBadge, { backgroundColor: cardColor + "20" }]}>
              <ThemedText style={[styles.cardTypeText, { color: cardColor }]}>
                {isRed ? t("detail.events.red_card") : isYellow ? t("detail.events.yellow_card") : card.card}
              </ThemedText>
            </View>
          )}
        </View>
      </View>
    );
  };

  return (
    <View style={[styles.container, { backgroundColor: bgColor, borderColor }]}>
      <ThemedText style={styles.title}>
        {t("detail.events.cards")}
      </ThemedText>
      <View style={styles.content}>
        {filteredCards.map((card: CardEvent, index: number) => renderCardEvent(card, index))}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    margin: 16,
    marginTop: 0,
    borderRadius: 12,
    padding: 16,
    borderWidth: 1,
    elevation: 2,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
  },
  title: {
    fontSize: 14,
    fontWeight: "600",
    marginBottom: 12,
    opacity: 0.7,
  },
  content: {
    gap: 0,
  },
  eventRow: {
    flexDirection: "row",
    alignItems: "center",
    paddingVertical: 8,
    borderBottomWidth: StyleSheet.hairlineWidth,
  },
  eventTime: {
    width: 40,
    alignItems: "center",
  },
  timeText: {
    fontSize: 12,
    fontWeight: "500",
    opacity: 0.6,
  },
  eventContent: {
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
    gap: 8,
    paddingLeft: 12,
  },
  homeEvent: {
    justifyContent: "flex-start",
  },
  awayEvent: {
    justifyContent: "flex-end",
    flexDirection: "row-reverse",
  },
  eventText: {
    fontSize: 13,
    fontWeight: "500",
    flex: 1,
  },
  cardIcon: {
    width: 12,
    height: 16,
    borderRadius: 2,
  },
  cardTypeText: {
    fontSize: 10,
    fontWeight: "600",
    textTransform: "uppercase",
  },
  cardBadge: {
    paddingHorizontal: 6,
    paddingVertical: 2,
    borderRadius: 4,
  },
});