import { EmptyPlaceholder } from "@/components/empty-placeholder";
import { ThemedText } from "@/components/themed-text";
import { IconSymbol } from "@/components/ui/icon-symbol";
import { addFavorite, checkFavorite, removeFavorite } from "@/lib/api";
import { storage } from "@/lib/storage";
import { MatchDetailData } from "@/types/api";
import { LinearGradient } from "expo-linear-gradient";
import { useRouter } from "expo-router";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { Image, StyleSheet, TouchableOpacity, View } from "react-native";

interface ScoreHeaderProps {
  data: MatchDetailData;
  isDark: boolean;
  topInset: number;
}

export function ScoreHeader({ data, isDark, topInset }: ScoreHeaderProps) {
  const router = useRouter();
  const { t } = useTranslation();
  const { match } = data;
  const isTennis = match.sportId === 3;

  const [isFav, setIsFav] = useState(false);
  const [favLoading, setFavLoading] = useState(false);

  const [isHomeFav, setIsHomeFav] = useState(false);
  const [isAwayFav, setIsAwayFav] = useState(false);
  const [homeFavLoading, setHomeFavLoading] = useState(false);
  const [awayFavLoading, setAwayFavLoading] = useState(false);

  // 检查比赛收藏状态
  React.useEffect(() => {
    const loadFavStatus = async () => {
      const token = await storage.getAccessToken();
      if (!token) return;
      try {
        const res = await checkFavorite("match", match.eventKey.toString());
        setIsFav(res.isFavorite);
      } catch (error) {
        console.error("Check match favorite status error:", error);
      }
    };
    if (match.eventKey) {
      loadFavStatus();
    }
  }, [match.eventKey]);

  // 检查主队/第一球员收藏状态
  React.useEffect(() => {
    const loadHomeFav = async () => {
      const token = await storage.getAccessToken();
      if (!token) return;
      try {
        const teamKey = isTennis ? match.firstPlayerKey : match.homeTeamKey;
        if (teamKey) {
          const res = await checkFavorite("team", teamKey.toString());
          setIsHomeFav(res.isFavorite);
        }
      } catch (error) {
        console.error("Check home team favorite status error:", error);
      }
    };
    if (isTennis ? match.firstPlayerKey : match.homeTeamKey) {
      loadHomeFav();
    }
  }, [match.homeTeamKey, match.firstPlayerKey, isTennis]);

  // 检查客队/第二球员收藏状态
  React.useEffect(() => {
    const loadAwayFav = async () => {
      const token = await storage.getAccessToken();
      if (!token) return;
      try {
        const teamKey = isTennis ? match.secondPlayerKey : match.awayTeamKey;
        if (teamKey) {
          const res = await checkFavorite("team", teamKey.toString());
          setIsAwayFav(res.isFavorite);
        }
      } catch (error) {
        console.error("Check away team favorite status error:", error);
      }
    };
    if (isTennis ? match.secondPlayerKey : match.awayTeamKey) {
      loadAwayFav();
    }
  }, [match.awayTeamKey, match.secondPlayerKey, isTennis]);

  const toggleFavorite = async () => {
    if (favLoading) return;
    setFavLoading(true);
    const newFavState = !isFav;
    try {
      if (newFavState) {
        await addFavorite({
          matchId: Number(match.eventKey),
          type: "match",
          typeId: match.eventKey.toString(),
          notify: true,
        });
      } else {
        await removeFavorite({
          type: "match",
          typeId: match.eventKey.toString(),
        });
      }
      setIsFav(newFavState);
    } catch (error) {
      console.error("Toggle favorite error:", error);
    } finally {
      setFavLoading(false);
    }
  };

  const toggleTeamFavorite = async (teamKey: string, isHome: boolean) => {
    const isTeamFav = isHome ? isHomeFav : isAwayFav;
    const setLoading = isHome ? setHomeFavLoading : setAwayFavLoading;
    const setFav = isHome ? setIsHomeFav : setIsAwayFav;
    const loading = isHome ? homeFavLoading : awayFavLoading;

    if (loading || !teamKey) return;
    setLoading(true);

    const newFavState = !isTeamFav;
    try {
      if (newFavState) {
        await addFavorite({
          teamId: Number(teamKey),
          type: "team",
          typeId: teamKey.toString(),
          notify: true,
        });
      } else {
        await removeFavorite({
          type: "team",
          typeId: teamKey.toString(),
        });
      }
      setFav(newFavState);
    } catch (error) {
      console.error("Toggle team favorite error:", error);
    } finally {
      setLoading(false);
    }
  };

  const getScoreDisplay = () => {
    if (isTennis) {
      const scores = (match.scores as any) || [];
      if (scores.length > 0) {
        const lastSet = scores[scores.length - 1];
        return `${lastSet.score_first || "0"}-${lastSet.score_second || "0"}`;
      }
      return match.eventGameResult && match.eventGameResult !== "-"
        ? match.eventGameResult
        : "0-0";
    }
    return match.eventFinalResult && match.eventFinalResult !== "-"
      ? match.eventFinalResult
      : "0-0";
  };

  const firstPlayerName = isTennis ? match.eventFirstPlayer : match.eventHomeTeam;
  const secondPlayerName = isTennis ? match.eventSecondPlayer : match.eventAwayTeam;
  const firstPlayerLogo = isTennis ? match.eventFirstPlayerLogo : match.homeTeamLogo;
  const secondPlayerLogo = isTennis ? match.eventSecondPlayerLogo : match.awayTeamLogo;
  const firstPlayerKey = isTennis ? match.firstPlayerKey : match.homeTeamKey;
  const secondPlayerKey = isTennis ? match.secondPlayerKey : match.awayTeamKey;

  const hasFirstLogo = firstPlayerLogo && firstPlayerLogo.trim() !== "" && !firstPlayerLogo.includes("placehold");
  const hasSecondLogo = secondPlayerLogo && secondPlayerLogo.trim() !== "" && !secondPlayerLogo.includes("placehold");

  return (
    <LinearGradient
      colors={["#521e10", "#0e0e10"]}
      start={{ x: 0, y: 0 }}
      end={{ x: 1, y: 1 }}
      style={[styles.container, { paddingTop: Math.max(topInset, 10) }]}
    >
      {/* Top Bar */}
      <View style={styles.topBar}>
        <View style={styles.leftContainer}>
          <TouchableOpacity
            onPress={() => router.back()}
            style={styles.iconBtn}
          >
            <IconSymbol name="chevron-back" size={28} color="#FFF" />
          </TouchableOpacity>
        </View>

        <View style={styles.statusContainer}>
          <ThemedText style={styles.statusText}>
            {match.eventStatus || t("detail.pending")}
          </ThemedText>
        </View>

        <View style={styles.rightContainer}>
          <TouchableOpacity style={styles.iconBtn}>
            <IconSymbol name="notifications-outline" size={24} color="#FFF" />
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.iconBtn}
            onPress={toggleFavorite}
            disabled={favLoading}
          >
            <IconSymbol
              name={isFav ? "star" : "star-outline"}
              size={24}
              color={isFav ? "#FFD700" : "#FFF"}
            />
          </TouchableOpacity>
        </View>
      </View>

      {/* Score Section */}
      <View style={styles.scoreRow}>
        <View style={styles.teamInfo}>
          <View style={styles.teamLogoRow}>
            <TouchableOpacity
              onPress={() => {
                if (firstPlayerKey) {
                  toggleTeamFavorite(firstPlayerKey, true);
                }
              }}
              disabled={homeFavLoading || !firstPlayerKey}
              style={styles.starBtnLeft}
            >
              <IconSymbol
                name={isHomeFav ? "star" : "star-outline"}
                size={20}
                color={isHomeFav ? "#FFD700" : "rgba(255,255,255,0.5)"}
              />
            </TouchableOpacity>
            <View style={styles.logoContainer}>
              {hasFirstLogo ? (
                <Image
                  source={{ uri: firstPlayerLogo }}
                  style={styles.teamLogo}
                />
              ) : (
                <EmptyPlaceholder type={isTennis ? "player" : "team"} size={60} />
              )}
            </View>
          </View>
          <ThemedText style={styles.teamName} numberOfLines={2}>
            {firstPlayerName}
          </ThemedText>
        </View>

        <View style={styles.centerScore}>
          <View style={styles.scoreBox}>
            <ThemedText style={styles.scoreValue}>
              {getScoreDisplay()}
            </ThemedText>
          </View>
          <TouchableOpacity style={styles.fieldBtn}>
            <IconSymbol
              name={isTennis ? "tennisball-outline" : "football-outline"}
              size={16}
              color="#FFF"
            />
          </TouchableOpacity>
        </View>

        <View style={styles.teamInfo}>
          <View style={styles.teamLogoRow}>
            <View style={styles.logoContainer}>
              {hasSecondLogo ? (
                <Image
                  source={{ uri: secondPlayerLogo }}
                  style={styles.teamLogo}
                />
              ) : (
                <EmptyPlaceholder type={isTennis ? "player" : "team"} size={60} />
              )}
            </View>
            <TouchableOpacity
              onPress={() => {
                if (secondPlayerKey) {
                  toggleTeamFavorite(secondPlayerKey, false);
                }
              }}
              disabled={awayFavLoading || !secondPlayerKey}
              style={styles.starBtnRight}
            >
              <IconSymbol
                name={isAwayFav ? "star" : "star-outline"}
                size={20}
                color={isAwayFav ? "#FFD700" : "rgba(255,255,255,0.5)"}
              />
            </TouchableOpacity>
          </View>
          <ThemedText style={styles.teamName} numberOfLines={2}>
            {secondPlayerName}
          </ThemedText>
        </View>
      </View>
    </LinearGradient>
  );
}

const styles = StyleSheet.create({
  container: {
    paddingBottom: 24,
    paddingHorizontal: 16,
  },
  topBar: {
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 16,
    minHeight: 44,
  },
  leftContainer: {
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
  },
  statusContainer: {
    flex: 2,
    justifyContent: "center",
    alignItems: "center",
  },
  rightContainer: {
    flex: 1,
    flexDirection: "row",
    justifyContent: "flex-end",
    alignItems: "center",
    gap: 4,
  },
  statusText: {
    color: "#FFF",
    fontSize: 17,
    fontWeight: "600",
    opacity: 0.9,
  },
  iconBtn: {
    width: 40,
    height: 40,
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 20,
    backgroundColor: "rgba(255,255,255,0.1)",
    marginHorizontal: 4,
  },
  scoreRow: {
    flexDirection: "row",
    alignItems: "flex-start",
    justifyContent: "space-between",
    paddingHorizontal: 0,
    marginTop: 10,
  },
  teamInfo: {
    flex: 1,
    alignItems: "center",
  },
  teamLogoRow: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    marginBottom: 10,
  },
  logoContainer: {
    width: 70,
    height: 70,
    justifyContent: "center",
    alignItems: "center",
  },
  starBtnLeft: {
    padding: 8,
    marginRight: -4,
  },
  starBtnRight: {
    padding: 8,
    marginLeft: -4,
  },
  teamLogo: {
    width: 60,
    height: 60,
    resizeMode: "contain",
    borderRadius: 30,
  },
  teamLogoGradient: {
    width: 60,
    height: 60,
    borderRadius: 30,
    alignItems: "center",
    justifyContent: "center",
  },
  teamLogoText: {
    fontSize: 20,
    fontWeight: "700",
    color: "rgba(255, 255, 255, 0.92)",
  },
  teamName: {
    color: "#FFF",
    fontSize: 14,
    fontWeight: "700",
    textAlign: "center",
    lineHeight: 18,
  },
  centerScore: {
    flex: 1.4,
    alignItems: "center",
    paddingTop: 8,
  },
  scoreBox: {
    backgroundColor: "#FFF",
    borderRadius: 16,
    paddingHorizontal: 24,
    paddingVertical: 12,
    marginBottom: 16,
    minWidth: 100,
    alignItems: "center",
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.2,
    shadowRadius: 4,
    elevation: 4,
  },
  scoreValue: {
    color: "#000",
    fontSize: 25,
    fontWeight: "700",
    lineHeight: 30,
    letterSpacing: 1,
  },
  fieldBtn: {
    backgroundColor: "#0044FF",
    width: 60,
    height: 32,
    borderRadius: 16,
    justifyContent: "center",
    alignItems: "center",
    borderWidth: 1,
    borderColor: "rgba(255,255,255,0.2)",
  },
});