import { ThemedText } from "@/components/themed-text";
import { ThemedView } from "@/components/themed-view";
import { IconSymbol } from "@/components/ui/icon-symbol";
import { LiveScoreMatch } from "@/types/api";
import { LinearGradient } from "expo-linear-gradient";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import {
  Image,
  LayoutChangeEvent,
  Modal,
  Pressable,
  StyleSheet,
  Switch,
  TouchableOpacity,
  View,
} from "react-native";
import Svg, {
  Defs,
  Path,
  Stop,
  LinearGradient as SvgLinearGradient,
} from "react-native-svg";

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

export function StatsCard({ match, isDark }: StatsCardProps) {
  const { t } = useTranslation();
  const [flagSwitch, setFlagSwitch] = useState(true);
  const [cardSwitch, setCardSwitch] = useState(true);
  const [showInfo, setShowInfo] = useState(false);
  const [chartWidth, setChartWidth] = useState(0);

  const onChartLayout = (event: LayoutChangeEvent) => {
    setChartWidth(event.nativeEvent.layout.width);
  };

  // 实时时间与进度计算
  const getInitialMinutes = () => {
    const statusIdx = parseInt(match.event_status) || 0;
    const timeParts = match.event_time?.split(":") || [];
    const tMin = parseInt(timeParts[0]) || 0;
    const tSec = parseInt(timeParts[1]) || 0;

    if (!isNaN(statusIdx) && /^\d+$/.test(match.event_status)) {
      return { min: Math.max(0, statusIdx - tMin), sec: tSec };
    }
    return { min: tMin, sec: tSec };
  };

  const initial = getInitialMinutes();
  const [minutes, setMinutes] = useState(initial.min);
  const [seconds, setSeconds] = useState(initial.sec);

  React.useEffect(() => {
    const updated = getInitialMinutes();
    setMinutes(updated.min);
    setSeconds(updated.sec);
  }, [match.event_time, match.event_status]);

  React.useEffect(() => {
    const statusStr = match.event_status?.toLowerCase() || "";
    const isLive =
      String(match.event_live) === "1" ||
      statusStr.includes("live") ||
      (parseInt(statusStr) > 0 && parseInt(statusStr) < 120);

    if (!isLive || statusStr.includes("ht")) return;

    const interval = setInterval(() => {
      setSeconds((s) => {
        if (s >= 59) {
          setMinutes((m) => m + 1);
          return 0;
        }
        return s + 1;
      });
    }, 1000);
    return () => clearInterval(interval);
  }, [match.event_key, match.event_live, match.event_status]);

  const displayTime = `${minutes}:${seconds.toString().padStart(2, "0")}`;
  const totalSeconds = minutes * 60 + seconds;
  const progressPercent = Math.min(100, (totalSeconds / (90 * 60)) * 100);

  // 从 statistics 中提取数据
  const stats = (match.statistics || []) as any[];
  const getStatValue = (type: string) => {
    const stat = stats.find((s) => s.type === type);
    if (stat && stat.home) {
      return { home: stat.home, away: stat.away };
    }
    return { home: "0", away: "0" };
  };

  const possession = getStatValue("Ball Possession");
  const corners = getStatValue("Corners");
  const yellowCards = getStatValue("Yellow Cards");

  // 解析控球率数值 (例如 "53%" -> 53)
  const homePossession =
    parseInt(possession.home.toString().replace("%", "")) || 50;
  const awayPossession =
    parseInt(possession.away.toString().replace("%", "")) || 50;

  // 用随机数据模拟压力曲线
  const generateData = React.useMemo(() => {
    const data = [];
    let h = 10;
    let a = 10;
    for (let i = 0; i < 90; i++) {
      h = Math.max(0, Math.min(40, h + (Math.random() - 0.5) * 10));
      a = Math.max(0, Math.min(40, a + (Math.random() - 0.5) * 10));
      data.push({
        time: i,
        home: h,
        away: a,
      });
    }
    return data;
  }, [match.event_key]);

  const getWavePath = (
    data: any[],
    type: "home" | "away",
    width: number,
    height: number,
  ) => {
    if (width === 0) return "";
    const baseY = height / 2;
    const points = data.map((d, i) => {
      const x = (i / 89) * width;
      const val = type === "home" ? d.home : d.away;
      const y =
        type === "home"
          ? baseY - (val / 50) * baseY
          : baseY + (val / 50) * baseY;
      return { x, y };
    });

    // 创建平滑曲线 (使用简单指令)
    let d = `M 0 ${baseY}`;
    points.forEach((p) => {
      d += ` L ${p.x} ${p.y}`;
    });
    d += ` L ${width} ${baseY} Z`;
    return d;
  };

  const chartData = generateData;

  const iconTintColor = isDark ? "#888" : "#CCC";
  const switchBg = isDark ? "#2C2C2E" : "#F0F0F0";

  return (
    <ThemedView style={[styles.container, isDark && styles.darkContainer]}>
      {/* Header */}
      <View style={styles.header}>
        <View style={styles.headerLeft}>
          <ThemedText style={styles.title}>
            {t("detail.stats_card.title")}
          </ThemedText>
          <TouchableOpacity onPress={() => setShowInfo(true)}>
            <IconSymbol
              name="information-circle-outline"
              size={16}
              color={iconTintColor}
            />
          </TouchableOpacity>
        </View>
        <View style={styles.switches}>
          <View style={[styles.switchWrapper, { backgroundColor: switchBg }]}>
            <IconSymbol name="flag" size={14} color="#4CAF50" />
            <Switch
              value={flagSwitch}
              onValueChange={setFlagSwitch}
              trackColor={{ false: "#DDD", true: "#3b5998" }}
              thumbColor={flagSwitch ? "#A5D6A7" : "#FFF"}
              style={styles.smallSwitch}
            />
          </View>
          <View style={[styles.switchWrapper, { backgroundColor: switchBg }]}>
            <View style={[styles.miniCard, { backgroundColor: "#FFD700" }]} />
            <Switch
              value={cardSwitch}
              onValueChange={setCardSwitch}
              trackColor={{ false: "#DDD", true: "#3b5998" }}
              thumbColor="#FFF"
              style={styles.smallSwitch}
            />
          </View>
        </View>
      </View>

      {/* Momentum Chart Area */}
      <View style={styles.chartWrapper}>
        <View style={styles.teamLogos}>
          <Image
            source={{ uri: match.home_team_logo }}
            style={styles.chartLogo}
          />
          <Image
            source={{ uri: match.away_team_logo }}
            style={[styles.chartLogo, { marginTop: 12 }]}
          />
        </View>

        <View style={styles.chartArea}>
          {/* 背景色带 */}
          <LinearGradient
            colors={["rgba(59, 89, 152, 0.05)", "rgba(255, 171, 0, 0.05)"]}
            style={styles.bgGradient}
          />

          {/* 网格线和时间刻度 */}
          <View style={styles.gridContainer}>
            {["0'", "15'", "30'", "HT", "60'", "75'", "90'"].map((label, i) => (
              <View key={i} style={styles.gridLine}>
                <View
                  style={[styles.line, isDark && { backgroundColor: "#333" }]}
                />
                <ThemedText
                  style={[styles.gridLabel, isDark && { color: "#888" }]}
                >
                  {label}
                </ThemedText>
              </View>
            ))}
          </View>

          {/* 压力曲线模拟 (Wave Chart) */}
          <View style={styles.waveContainer} onLayout={onChartLayout}>
            {chartWidth > 0 && (
              <Svg
                width={chartWidth}
                height={110}
                style={{ position: "absolute" }}
              >
                <Defs>
                  <SvgLinearGradient
                    id="homeGradient"
                    x1="0"
                    y1="0"
                    x2="0"
                    y2="1"
                  >
                    <Stop offset="0" stopColor="#3b5998" stopOpacity="0.6" />
                    <Stop offset="1" stopColor="#3b5998" stopOpacity="0" />
                  </SvgLinearGradient>
                  <SvgLinearGradient
                    id="awayGradient"
                    x1="0"
                    y1="0"
                    x2="0"
                    y2="1"
                  >
                    <Stop offset="0" stopColor="#FFAB00" stopOpacity="0" />
                    <Stop offset="1" stopColor="#FFAB00" stopOpacity="0.6" />
                  </SvgLinearGradient>
                </Defs>
                {/* Home Wave */}
                <Path
                  d={getWavePath(chartData, "home", chartWidth, 110)}
                  fill="url(#homeGradient)"
                  stroke="#3b5998"
                  strokeWidth="1.5"
                />
                {/* Away Wave */}
                <Path
                  d={getWavePath(chartData, "away", chartWidth, 110)}
                  fill="url(#awayGradient)"
                  stroke="#FFAB00"
                  strokeWidth="1.5"
                />
              </Svg>
            )}
          </View>

          {/* 动态标记：红黄牌 */}
          {chartWidth > 0 &&
            cardSwitch &&
            match.cards?.map((card, idx) => {
              const time = parseInt(card.time) || 0;
              const left = (time / 90) * chartWidth;
              const isHome = card.home_fault !== "";
              const isYellow = (card.card || "")
                .toLowerCase()
                .includes("yellow");
              return (
                <View
                  key={`card-${idx}`}
                  style={[
                    styles.eventMarker,
                    { left, top: isHome ? "5%" : "72%" },
                  ]}
                >
                  <View
                    style={[
                      styles.square,
                      {
                        backgroundColor: isYellow ? "#FFD700" : "#FF3B30",
                        width: 8,
                        height: 12,
                        borderRadius: 1,
                      },
                    ]}
                  />
                </View>
              );
            })}

          {/* 动态标记：进球 */}
          {chartWidth > 0 &&
            flagSwitch &&
            match.goalscorers?.map((goal, idx) => {
              const time = parseInt(goal.time) || 0;
              const left = (time / 90) * chartWidth;
              const isHome = !!goal.home_scorer;
              return (
                <View
                  key={`goal-${idx}`}
                  style={[
                    styles.eventMarker,
                    { left, top: isHome ? "25%" : "55%" },
                  ]}
                >
                  <View style={styles.goalBox}>
                    <IconSymbol name="football" size={10} color="#000" />
                  </View>
                </View>
              );
            })}
        </View>
      </View>

      {/* Time Progress Slider */}
      <View style={styles.sliderContainer}>
        <ThemedText style={styles.currentTime}>{displayTime}</ThemedText>
        <View style={styles.trackContainer}>
          <View style={[styles.track, isDark && { backgroundColor: "#333" }]} />
          <View
            style={[styles.filledTrack, { width: `${progressPercent}%` }]}
          />
          <View style={[styles.thumb, { left: "0%" }]} />
          <View
            style={[
              styles.thumb,
              {
                left: `${progressPercent}%`,
                backgroundColor: "#FFAB00",
                borderColor: "#FFF",
              },
            ]}
          />
          <View
            style={[
              styles.thumb,
              { left: "100%", backgroundColor: isDark ? "#555" : "#333" },
            ]}
          />
        </View>
        <View style={styles.trackLabels}>
          <ThemedText style={styles.trackLabel}>0:00</ThemedText>
          <ThemedText style={styles.trackLabel}>HT</ThemedText>
          <ThemedText style={styles.trackLabel}>FT</ThemedText>
        </View>
      </View>

      {/* Possession & Stats Bar */}
      <View style={styles.possessionSection}>
        <ThemedText style={styles.possessionTitle}>
          {t("detail.stats_card.possession")}
        </ThemedText>
        <View style={styles.possessionBarRow}>
          <View
            style={[
              styles.posBar,
              {
                flex: homePossession,
                backgroundColor: "#3b5998",
                borderTopLeftRadius: 10,
                borderBottomLeftRadius: 10,
              },
            ]}
          >
            <Image
              source={{ uri: match.home_team_logo }}
              style={styles.posLogo}
            />
            <ThemedText style={styles.posValue}>{homePossession}%</ThemedText>
          </View>
          <View style={{ width: 4 }} />
          <View
            style={[
              styles.posBar,
              {
                flex: awayPossession,
                backgroundColor: "#FFAB00",
                borderTopRightRadius: 10,
                borderBottomRightRadius: 10,
                flexDirection: "row-reverse",
              },
            ]}
          >
            <Image
              source={{ uri: match.away_team_logo }}
              style={styles.posLogo}
            />
            <ThemedText style={styles.posValue}>{awayPossession}%</ThemedText>
          </View>
        </View>

        <View style={styles.miniStatsRow}>
          <View style={[styles.miniStatBadge, isDark && styles.darkStatBadge]}>
            <ThemedText style={styles.miniStatText}>{corners.home}</ThemedText>
            <IconSymbol name="flag" size={14} color="#FFAB00" />
            <ThemedText style={styles.miniStatText}>{corners.away}</ThemedText>
          </View>
          <View style={[styles.miniStatBadge, isDark && styles.darkStatBadge]}>
            <ThemedText style={styles.miniStatText}>
              {yellowCards.home}
            </ThemedText>
            <View style={styles.yellowCardIcon} />
            <ThemedText style={styles.miniStatText}>
              {yellowCards.away}
            </ThemedText>
          </View>
        </View>
      </View>

      {/* Momentum Info Modal */}
      <Modal
        visible={showInfo}
        transparent
        animationType="fade"
        onRequestClose={() => setShowInfo(false)}
      >
        <Pressable
          style={styles.modalOverlay}
          onPress={() => setShowInfo(false)}
        >
          <ThemedView
            style={[styles.modalContent, isDark && styles.darkModalContent]}
          >
            <ThemedText style={styles.modalTitle}>
              {t("detail.stats_card.info_title")}
            </ThemedText>

            <ThemedText style={styles.modalDesc}>
              {t("detail.stats_card.info_desc")}
            </ThemedText>

            <View style={styles.bulletPoint}>
              <ThemedText style={styles.bulletText}>
                • {t("detail.stats_card.point1")}
              </ThemedText>
            </View>
            <View style={styles.bulletPoint}>
              <ThemedText style={styles.bulletText}>
                • {t("detail.stats_card.point2")}
              </ThemedText>
            </View>
            <View style={styles.bulletPoint}>
              <ThemedText style={styles.bulletText}>
                • {t("detail.stats_card.point3")}
              </ThemedText>
            </View>

            <View style={styles.teamInfoRow}>
              <Image
                source={{ uri: match.home_team_logo }}
                style={styles.miniLogo}
              />
              <View style={styles.wavePlaceholder}>
                {[...Array(6)].map((_, i) => (
                  <View
                    key={i}
                    style={[
                      styles.waveDot,
                      {
                        backgroundColor: "#3b5998",
                        marginTop: i % 2 === 0 ? 0 : 6,
                      },
                    ]}
                  />
                ))}
              </View>
              <ThemedText style={styles.teamDesc} numberOfLines={1}>
                {match.event_home_team}
              </ThemedText>
            </View>

            <View style={styles.teamInfoRow}>
              <Image
                source={{ uri: match.away_team_logo }}
                style={styles.miniLogo}
              />
              <View style={styles.wavePlaceholder}>
                {[...Array(6)].map((_, i) => (
                  <View
                    key={i}
                    style={[
                      styles.waveDot,
                      {
                        backgroundColor: "#FFAB00",
                        marginTop: i % 2 === 0 ? 6 : 0,
                      },
                    ]}
                  />
                ))}
              </View>
              <ThemedText style={styles.teamDesc} numberOfLines={1}>
                {match.event_away_team}
              </ThemedText>
            </View>

            <TouchableOpacity
              style={styles.closeButton}
              onPress={() => setShowInfo(false)}
            >
              <ThemedText style={styles.closeButtonText}>
                {t("detail.stats_card.close")}
              </ThemedText>
            </TouchableOpacity>
          </ThemedView>
        </Pressable>
      </Modal>
    </ThemedView>
  );
}

const styles = StyleSheet.create({
  container: {
    margin: 16,
    borderRadius: 20,
    padding: 16,
    backgroundColor: "#FFF",
    marginBottom: 20,
    shadowColor: "#000",
    shadowOpacity: 0.05,
    shadowRadius: 10,
    elevation: 2,
  },
  darkContainer: {
    backgroundColor: "#1E1E20",
  },
  header: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    marginBottom: 24,
  },
  headerLeft: {
    flexDirection: "row",
    alignItems: "center",
    gap: 8,
  },
  title: {
    fontSize: 18,
    fontWeight: "500",
    color: "#666",
  },
  switches: {
    flexDirection: "row",
    gap: 12,
  },
  switchWrapper: {
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: "#F0F0F0",
    borderRadius: 15,
    paddingLeft: 8,
    paddingRight: 2,
    height: 30,
  },
  smallSwitch: {
    transform: [{ scaleX: 0.6 }, { scaleY: 0.6 }],
  },
  miniCard: {
    width: 10,
    height: 14,
    borderRadius: 2,
  },
  chartWrapper: {
    flexDirection: "row",
    height: 140,
    marginBottom: 10,
  },
  teamLogos: {
    width: 40,
    justifyContent: "center",
    alignItems: "center",
    paddingBottom: 20,
  },
  chartLogo: {
    width: 24,
    height: 24,
    borderRadius: 12,
  },
  chartArea: {
    flex: 1,
    position: "relative",
    marginLeft: 8,
  },
  bgGradient: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 30,
    borderRadius: 4,
  },
  gridContainer: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    flexDirection: "row",
    justifyContent: "space-between",
  },
  gridLine: {
    height: "100%",
    alignItems: "center",
  },
  line: {
    width: 1,
    height: "100%",
    backgroundColor: "#F0F0F0",
    marginBottom: 4,
  },
  gridLabel: {
    fontSize: 12,
    color: "#000",
    fontWeight: "500",
  },
  waveContainer: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 30,
  },
  waveBar: {
    position: "absolute",
    width: 1.5,
  },
  eventMarker: {
    position: "absolute",
    alignItems: "center",
  },
  square: {
    width: 12,
    height: 16,
    borderRadius: 2,
  },
  goalBox: {
    flexDirection: "row",
    alignItems: "center",
    gap: 2,
    backgroundColor: "#FFF",
    padding: 2,
    borderRadius: 4,
    borderWidth: 1,
    borderColor: "#E0E0E0",
  },
  sliderContainer: {
    marginTop: 20,
    paddingHorizontal: 10,
  },
  currentTime: {
    fontSize: 14,
    color: "#4CAF50",
    fontWeight: "700",
    textAlign: "center",
    marginBottom: 4,
    marginLeft: "10%", // Offset roughly
  },
  trackContainer: {
    height: 20,
    justifyContent: "center",
    position: "relative",
  },
  track: {
    height: 3,
    backgroundColor: "#EEE",
    borderRadius: 2,
  },
  filledTrack: {
    position: "absolute",
    height: 3,
    backgroundColor: "#3b5998",
    borderRadius: 2,
  },
  thumb: {
    position: "absolute",
    width: 10,
    height: 10,
    borderRadius: 5,
    backgroundColor: "#3b5998",
    borderWidth: 2,
    borderColor: "#FFF",
    marginLeft: -5,
  },
  trackLabels: {
    flexDirection: "row",
    justifyContent: "space-between",
    marginTop: 8,
  },
  trackLabel: {
    fontSize: 12,
    color: "#666",
    fontWeight: "500",
  },
  possessionSection: {
    marginTop: 24,
    alignItems: "center",
  },
  possessionTitle: {
    fontSize: 16,
    color: "#666",
    marginBottom: 12,
  },
  possessionBarRow: {
    flexDirection: "row",
    height: 36,
    width: "100%",
    paddingHorizontal: 4,
  },
  posBar: {
    flexDirection: "row",
    alignItems: "center",
    paddingHorizontal: 12,
    gap: 8,
  },
  posLogo: {
    width: 20,
    height: 20,
    borderRadius: 10,
    backgroundColor: "#FFF",
  },
  posValue: {
    color: "#FFF",
    fontSize: 14,
    fontWeight: "700",
  },
  miniStatsRow: {
    flexDirection: "row",
    justifyContent: "center",
    gap: 12,
    marginTop: 16,
  },
  miniStatBadge: {
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: "#F5F5F5",
    paddingHorizontal: 16,
    paddingVertical: 6,
    borderRadius: 20,
    gap: 8,
    minWidth: 80,
    justifyContent: "center",
  },
  darkStatBadge: {
    backgroundColor: "#2C2C2E",
  },
  miniStatText: {
    fontSize: 14,
    fontWeight: "600",
  },
  yellowCardIcon: {
    width: 10,
    height: 14,
    backgroundColor: "#FFD700",
    borderRadius: 2,
  },
  modalOverlay: {
    flex: 1,
    backgroundColor: "rgba(0,0,0,0.5)",
    justifyContent: "center",
    alignItems: "center",
    padding: 20,
  },
  modalContent: {
    width: "100%",
    backgroundColor: "#FFF",
    borderRadius: 24,
    padding: 24,
    shadowColor: "#000",
    shadowOpacity: 0.1,
    shadowRadius: 20,
    elevation: 10,
  },
  darkModalContent: {
    backgroundColor: "#1E1E20",
  },
  modalTitle: {
    fontSize: 20,
    fontWeight: "700",
    marginBottom: 16,
  },
  modalDesc: {
    fontSize: 15,
    lineHeight: 22,
    marginBottom: 16,
  },
  bulletPoint: {
    marginBottom: 8,
  },
  bulletText: {
    fontSize: 15,
    lineHeight: 22,
  },
  teamInfoRow: {
    flexDirection: "row",
    alignItems: "center",
    marginTop: 16,
    gap: 12,
  },
  miniLogo: {
    width: 24,
    height: 24,
    borderRadius: 12,
  },
  wavePlaceholder: {
    flexDirection: "row",
    alignItems: "center",
    width: 40,
    height: 20,
    gap: 2,
  },
  waveDot: {
    width: 4,
    height: 4,
    borderRadius: 2,
  },
  teamDesc: {
    flex: 1,
    fontSize: 14,
    color: "#666",
  },
  closeButton: {
    backgroundColor: "#4B77FF",
    borderRadius: 12,
    paddingVertical: 12,
    alignItems: "center",
    marginTop: 24,
    alignSelf: "flex-end",
    paddingHorizontal: 24,
  },
  closeButtonText: {
    color: "#FFF",
    fontSize: 16,
    fontWeight: "600",
  },
});