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,
  Modal,
  Pressable,
  StyleSheet,
  Switch,
  TouchableOpacity,
  View,
} from "react-native";

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);

  // 从 statistics 中提取数据
  const stats = match.statistics || [];
  const getStatValue = (type: string) => {
    const stat = stats.find((s) => s.type === type);
    return stat
      ? { home: stat.home, away: stat.away }
      : { 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 = () => {
    return Array.from({ length: 90 }, (_, i) => ({
      time: i,
      home: Math.sin(i / 5) * 20 + Math.random() * 10,
      away: Math.cos(i / 4) * 15 + Math.random() * 12,
    }));
  };

  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: "#EEE" }}
              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} />
                <ThemedText style={styles.gridLabel}>{label}</ThemedText>
              </View>
            ))}
          </View>

          {/* 压力曲线模拟 (使用密集的小条形模拟波形) */}
          <View style={styles.waveContainer}>
            {chartData.map((d, i) => (
              <React.Fragment key={i}>
                <View
                  style={[
                    styles.waveBar,
                    {
                      left: `${(i / 90) * 100}%`,
                      height: Math.abs(d.home),
                      bottom: "50%",
                      backgroundColor: "rgba(59, 89, 152, 0.8)",
                      borderTopLeftRadius: 1,
                      borderTopRightRadius: 1,
                    },
                  ]}
                />
                <View
                  style={[
                    styles.waveBar,
                    {
                      left: `${(i / 90) * 100}%`,
                      height: Math.abs(d.away),
                      top: "50%",
                      backgroundColor: "rgba(255, 171, 0, 0.8)",
                      borderBottomLeftRadius: 1,
                      borderBottomRightRadius: 1,
                    },
                  ]}
                />
              </React.Fragment>
            ))}
          </View>

          {/* 比赛事件标记 (假点位) */}
          <View style={[styles.eventMarker, { left: "12%", top: "10%" }]}>
            <View style={[styles.square, { backgroundColor: "#FFD700" }]} />
          </View>
          <View style={[styles.eventMarker, { left: "55%", top: "10%" }]}>
            <View style={[styles.square, { backgroundColor: "#FFD700" }]} />
          </View>
          <View style={[styles.eventMarker, { left: "65%", top: "10%" }]}>
            <View style={[styles.square, { backgroundColor: "#FF4444" }]} />
          </View>
          <View style={[styles.eventMarker, { left: "52%", bottom: "25%" }]}>
            <View style={styles.goalBox}>
              <IconSymbol name="football-outline" size={10} color="#000" />
              <View
                style={[
                  styles.square,
                  {
                    backgroundColor: "#FFD700",
                    width: 8,
                    height: 10,
                    borderRadius: 1,
                  },
                ]}
              />
            </View>
          </View>
        </View>
      </View>

      {/* Time Progress Slider */}
      <View style={styles.sliderContainer}>
        <ThemedText style={styles.currentTime}>46:53</ThemedText>
        <View style={styles.trackContainer}>
          <View style={[styles.track, isDark && { backgroundColor: "#333" }]} />
          <View style={[styles.filledTrack, { width: "55%" }]} />
          <View style={[styles.thumb, { left: "0%" }]} />
          <View style={[styles.thumb, { left: "55%" }]} />
          <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",
  },
});