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

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

export function GoalsCard({ data, isDark }: GoalsCardProps) {
  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 goalscorers = eventsObj?.goalscorers || [];
  const filteredGoals = goalscorers.filter((goal: GoalEvent) => goal.home_scorer || goal.away_scorer);

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

  const renderGoalEvent = (goal: GoalEvent, index: number) => {
    const isHome = !!goal.home_scorer;
    const scorerRaw = goal.home_scorer || goal.away_scorer || "";
    const isPenalty = scorerRaw.includes("(pen.)");
    const playerName = scorerRaw.replace("(pen.)", "").trim();

    return (
      <View key={index} style={[styles.eventRow, { borderBottomColor: borderColor }]}>
        <View style={styles.eventTime}>
          <ThemedText style={styles.timeText}>
            {goal.time ? `${goal.time}'` : ""}
          </ThemedText>
        </View>
        <View style={[styles.eventContent, isHome ? styles.homeEvent : styles.awayEvent]}>
          <IconSymbol name="football" size={16} color={isDark ? "#4CAF50" : "#2E7D32"} />
          <View style={styles.goalContent}>
            {playerName && (
              <ThemedText style={styles.eventText} numberOfLines={1}>
                {playerName}
              </ThemedText>
            )}
            {isPenalty && (
              <View style={styles.penaltyBadge}>
                <ThemedText style={styles.penaltyText}>P</ThemedText>
              </View>
            )}
          </View>
          {goal.score && (
            <ThemedText style={styles.scoreText}>{goal.score}</ThemedText>
          )}
        </View>
      </View>
    );
  };

  return (
    <View style={[styles.container, { backgroundColor: bgColor, borderColor }]}>
      <ThemedText style={styles.title}>
        {t("detail.events.goals")}
      </ThemedText>
      <View style={styles.content}>
        {filteredGoals.map((goal: GoalEvent, index: number) => renderGoalEvent(goal, index))}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    margin: 16,
    marginTop: 16,
    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,
  },
  scoreText: {
    fontSize: 12,
    fontWeight: "600",
    opacity: 0.7,
  },
  goalContent: {
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
    gap: 6,
  },
  penaltyBadge: {
    width: 18,
    height: 18,
    borderRadius: 9,
    backgroundColor: "#FF9800",
    alignItems: "center",
    justifyContent: "center",
  },
  penaltyText: {
    fontSize: 10,
    fontWeight: "700",
    color: "#FFF",
  },
});