import { MatchCardLeague } from "@/components/match-card-league";
import { ThemedText } from "@/components/themed-text";
import { useTheme } from "@/context/ThemeContext";
import { fetchLeagues, fetchTodayMatches } from "@/lib/api";
import { League, Match } from "@/types/api";
import React, { useState } from "react";
import {
  Image,
  LayoutAnimation,
  Platform,
  ScrollView,
  StyleSheet,
  TouchableOpacity,
  UIManager,
  View,
} from "react-native";

// 开启 Android 上的 LayoutAnimation
if (
  Platform.OS === "android" &&
  UIManager.setLayoutAnimationEnabledExperimental
) {
  UIManager.setLayoutAnimationEnabledExperimental(true);
}

interface MatchesByLeagueProps {
  sportId: number;
  date: Date;
  timezone: string;
  onFavoriteToggle?: (matchId: string, isFav: boolean) => void;
  enableCollapsible?: boolean;
}

export function MatchesByLeague({
  sportId,
  date,
  timezone,
  onFavoriteToggle,
  enableCollapsible = true,
}: MatchesByLeagueProps) {
  const { theme } = useTheme();
  const isDark = theme === "dark";

  const [leagues, setLeagues] = useState<League[]>([]);
  const [collapsed, setCollapsed] = useState<Record<string, boolean>>({});
  const [matchesByLeagueKey, setMatchesByLeagueKey] = useState<
    Record<string, Match[]>
  >({});
  const [loadingLeagueKey, setLoadingLeagueKey] = useState<
    Record<string, boolean>
  >({});

  const dateStr = React.useMemo(() => {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, "0");
    const day = String(date.getDate()).padStart(2, "0");
    return `${year}-${month}-${day}`;
  }, [date]);

  React.useEffect(() => {
    let mounted = true;
    fetchLeagues({
      sportId,
      date: dateStr,
      page: 1,
      pageSize: 200,
      sortBy: "matchCount",
      sortOrder: "desc",
    })
      .then((res) => {
        if (!mounted) return;
        setLeagues(res.list);
        setCollapsed((prev) => {
          const next: Record<string, boolean> = {};
          res.list.forEach((l) => {
            next[l.key] = prev[l.key] !== undefined ? prev[l.key] : true;
          });
          return next;
        });
        setMatchesByLeagueKey({});
        setLoadingLeagueKey({});
      })
      .catch(() => { });
    return () => {
      mounted = false;
    };
  }, [sportId, dateStr]);

  const toggleCollapse = async (leagueKey: string) => {
    if (!enableCollapsible) return;
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
    setCollapsed((prev) => ({ ...prev, [leagueKey]: !prev[leagueKey] }));

    const nextCollapsed = !collapsed[leagueKey];
    if (nextCollapsed) return;
    if (matchesByLeagueKey[leagueKey]) return;

    setLoadingLeagueKey((prev) => ({ ...prev, [leagueKey]: true }));
    try {
      const res = await fetchTodayMatches({
        sportId,
        date: dateStr,
        timezone,
        leagueKey,
        page: 1,
        pageSize: 50,
      });
      setMatchesByLeagueKey((prev) => ({ ...prev, [leagueKey]: res.list }));
    } finally {
      setLoadingLeagueKey((prev) => ({ ...prev, [leagueKey]: false }));
    }
  };

  if (leagues.length === 0) {
    return (
      <View style={styles.emptyContainer}>
        <ThemedText>暂无联赛</ThemedText>
      </View>
    );
  }

  return (
    <ScrollView
      style={[
        styles.container,
        { backgroundColor: isDark ? "#000000" : "#F2F2F7" }
      ]}
      contentContainerStyle={{ paddingBottom: 40 }}
    >
      {leagues.map((league) => {
        const isCollapsed = collapsed[league.key] !== false;
        const leagueMatches = matchesByLeagueKey[league.key] || [];
        const isLoading = !!loadingLeagueKey[league.key];

        return (
          <View key={league.key} style={styles.leagueSection}>
            <TouchableOpacity
              activeOpacity={enableCollapsible && league.matchCount > 0 ? 0.7 : 1}
              onPress={() => {
                if (enableCollapsible && league.matchCount > 0) {
                  toggleCollapse(league.key);
                }
              }}
              style={styles.leagueHeaderWrapper}
            >
              <View style={styles.leagueHeaderLeft}>
                <Image
                  source={{
                    uri: league.logo || "https://placehold.co/40x40/png",
                  }}
                  style={styles.leagueLogo}
                />

                <View style={styles.leagueInfoText}>
                  <ThemedText style={styles.leagueTitle}>{league.name}</ThemedText>

                  <View style={styles.countryRow}>
                    <Image
                      source={{ uri: league.countryLogo || "https://placehold.co/20x20/png" }}
                      style={styles.countryFlag}
                    />
                    <ThemedText style={styles.countryName}>
                      {league.countryName || "International"}
                    </ThemedText>
                  </View>
                </View>
              </View>

              <View style={styles.leagueHeaderRight}>
                <ThemedText style={styles.matchCount}>
                  {league.matchCount}
                </ThemedText>

                {enableCollapsible && league.matchCount > 0 && (
                  <ThemedText style={styles.chevron}>
                    {isCollapsed ? "⌄" : "⌃"}
                  </ThemedText>
                )}
              </View>
            </TouchableOpacity>

            {!isCollapsed && (
              <View style={styles.matchListContainer}>
                {isLoading ? (
                  <>
                    {[0, 1, 2].map((i) => (
                      <View
                        key={i}
                        style={[
                          styles.matchCardWrapper,
                          i < 2 && styles.matchCardDivider,
                        ]}
                      >
                        <View style={styles.skeletonRow}>
                          <View style={styles.leftColumn}>
                            <View
                              style={[styles.skeletonLine, { width: 30, marginBottom: 6 }]}
                            />
                            <View
                              style={[styles.skeletonLine, { width: 24 }]}
                            />
                          </View>
                          <View style={styles.teamsColumn}>
                            <View style={styles.skeletonTeamRow}>
                              <View style={styles.skeletonAvatar} />
                              <View
                                style={[
                                  styles.skeletonLine,
                                  { flex: 1 },
                                ]}
                              />
                            </View>
                            <View style={[styles.skeletonTeamRow, { marginTop: 8 }]}>
                              <View style={styles.skeletonAvatar} />
                              <View
                                style={[
                                  styles.skeletonLine,
                                  { flex: 1 },
                                ]}
                              />
                            </View>
                          </View>
                          <View style={styles.rightWrapper}>
                            <View style={styles.skeletonScoreBox} />
                            <View style={styles.favoriteButton}>
                              <View style={styles.skeletonCircle} />
                            </View>
                          </View>
                        </View>
                      </View>
                    ))}
                  </>
                ) : (
                  leagueMatches.map((match, index) => (
                    <View
                      key={match.id}
                      style={[
                        styles.matchCardWrapper,
                        index < leagueMatches.length - 1 &&
                        styles.matchCardDivider,
                      ]}
                    >
                      <MatchCardLeague
                        match={match}
                        onFavoriteToggle={onFavoriteToggle}
                      />
                    </View>
                  ))
                )}
              </View>
            )}
          </View>
        );
      })}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  leagueSection: {
    marginBottom: 16,
  },
  leagueHeaderWrapper: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    paddingHorizontal: 16,
    paddingVertical: 12,
    backgroundColor: "transparent",
  },
  leagueHeaderLeft: {
    flexDirection: "row",
    alignItems: "center",
    flex: 1,
  },
  leagueLogo: {
    width: 36,
    height: 36,
    borderRadius: 6,
    marginRight: 12,
    backgroundColor: "#3A3A3C",
  },
  leagueInfoText: {
    justifyContent: "center",
  },
  leagueTitle: {
    fontSize: 17,
    fontWeight: "600",
    color: "#FFFFFF",
    marginBottom: 3,
  },
  countryRow: {
    flexDirection: "row",
    alignItems: "center",
  },
  countryFlag: {
    width: 16,
    height: 12,
    marginRight: 5,
    borderRadius: 2,
  },
  countryName: {
    fontSize: 13,
    color: "#8E8E93",
    fontWeight: "500",
  },
  leagueHeaderRight: {
    flexDirection: "row",
    alignItems: "center",
    gap: 8,
  },
  matchCount: {
    fontSize: 15,
    color: "#8E8E93",
    fontWeight: "600",
  },
  chevron: {
    fontSize: 16,
    color: "#8E8E93",
    fontWeight: '600',
  },
  matchListContainer: {
    backgroundColor: "#1C1C1E",
    borderRadius: 12,
    marginHorizontal: 16,
    overflow: "hidden",
  },
  // 布局与 MatchCardLeague 保持一致，便于骨架对齐
  leftColumn: {
    width: 50,
    justifyContent: "center",
    alignItems: "flex-start",
    marginRight: 8,
  },
  teamsColumn: {
    flex: 1,
    justifyContent: "center",
    paddingRight: 8,
  },
  rightWrapper: {
    flexDirection: "row",
    alignItems: "center",
  },
  matchCardWrapper: {
  },
  matchCardDivider: {
    borderBottomWidth: 0.5,
    borderBottomColor: "#3A3A3C",
  },
  favoriteButton: {
    paddingLeft: 12,
    justifyContent: "center",
    alignItems: "center",
  },
  skeletonRow: {
    flexDirection: "row",
    alignItems: "center",
    paddingHorizontal: 16,
    paddingVertical: 14,
  },
  skeletonLine: {
    height: 8,
    borderRadius: 4,
    backgroundColor: "#2C2C2E",
  },
  skeletonAvatar: {
    width: 20,
    height: 20,
    borderRadius: 10,
    backgroundColor: "#2C2C2E",
    marginRight: 10,
  },
  skeletonTeamRow: {
    flexDirection: "row",
    alignItems: "center",
  },
  skeletonScoreBox: {
    width: 24,
    height: 32,
    borderRadius: 8,
    backgroundColor: "#2C2C2E",
  },
  skeletonCircle: {
    width: 16,
    height: 16,
    borderRadius: 8,
    backgroundColor: "#2C2C2E",
  },
  emptyContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    paddingTop: 100,
  },
});