import { ThemedText } from "@/components/themed-text";
import { IconSymbol } from "@/components/ui/icon-symbol";
import { getInitials, getLogoGradient } from "@/lib/avatar-utils";
import { MatchDetailData } from "@/types/api";
import { Image } from "expo-image";
import { LinearGradient } from "expo-linear-gradient";
import React, { useMemo, useState } from "react";
import {
  ScrollView,
  StyleSheet,
  Switch,
  TouchableOpacity,
  View
} from "react-native";

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

// 定义固定高度以保证左右对齐
const HEADER_HEIGHT = 40;
const ROW_HEIGHT = 60;
const LEFT_COLUMN_WIDTH = 150;

const COLUMNS_BASIC = [
  { key: "pts", label: "PTS", width: 50 },
  { key: "reb", label: "REB", width: 50 },
  { key: "ast", label: "AST", width: 50 },
];

const COLUMNS_DETAILED = [
  { key: "min", label: "MIN", width: 50 },
  { key: "pts", label: "PTS", width: 50 },
  { key: "reb", label: "REB", width: 50 },
  { key: "ast", label: "AST", width: 50 },
  { key: "blk", label: "BLK", width: 50 },
  { key: "stl", label: "STL", width: 50 },
  { key: "to", label: "TO", width: 50 },
  { key: "pf", label: "PF", width: 50 },
];

export function BasketballStats({ data, isDark }: BasketballStatsProps) {
  const { match } = data;
  const [activeTab, setActiveTab] = useState<"home" | "away">("home");
  const [isDetailed, setIsDetailed] = useState(false);

  // 获取当前展示的球员列表
  const currentPlayers = useMemo(() => {
    if (!match.players) return [];
    return activeTab === "home"
      ? match.players.home_team
      : match.players.away_team;
  }, [match.players, activeTab]);

  const columns = isDetailed ? COLUMNS_DETAILED : COLUMNS_BASIC;

  const getPlayerStat = (player: any, statKey: string): string => {
    const statMap: Record<string, string> = {
      pts: player.player_points || "0",
      reb: player.player_total_rebounds || "0",
      ast: player.player_assists || "0",
      min: player.player_minutes || "0",
      blk: player.player_blocks || "0",
      stl: player.player_steals || "0",
      to: player.player_turnovers || "0",
      pf: player.player_personal_fouls || "0",
    };
    const value = statMap[statKey] || "0";
    return value === "-" || value === "" ? "0" : value;
  };

  const bgColor = isDark ? "#1C1C1E" : "#FFF";
  const borderColor = isDark ? "#2C2C2E" : "rgba(0,0,0,0.06)";
  const textColor = isDark ? "#FFF" : "#000";
  const secondaryText = isDark ? "#8E8E93" : "#6B7280";

  // --- 渲染组件 ---

  // 1. 左上角：Player 表头
  const renderLeftHeader = () => (
    <View style={[styles.headerCell, { height: HEADER_HEIGHT, borderBottomColor: borderColor }]}>
      <ThemedText style={[styles.headerText, { color: secondaryText }]}>
        Player
      </ThemedText>
      <IconSymbol
        name="information-circle-outline"
        size={14}
        color={secondaryText}
        style={{ marginLeft: 4 }}
      />
    </View>
  );

  // 2. 左侧列：球员信息行
  const renderLeftPlayerRow = (player: any) => {
    const playerName = player.player || "";
    const playerPosition = player.player_position || "";
    const gradient = getLogoGradient(playerName);
    const initials = getInitials(playerName);

    return (
      <View style={[styles.playerRow, { height: ROW_HEIGHT, borderBottomColor: borderColor }]}>
        <View style={styles.avatarContainer}>
          <LinearGradient
            colors={[gradient.color1, gradient.color2]}
            start={{ x: 0, y: 0 }}
            end={{ x: 1, y: 1 }}
            style={styles.avatarGradient}
          >
            <ThemedText style={styles.avatarText}>{initials}</ThemedText>
          </LinearGradient>
        </View>
        <View style={styles.playerInfo}>
          <ThemedText
            style={[styles.playerName, { color: textColor }]}
            numberOfLines={1}
          >
            {playerName}
          </ThemedText>
          {playerPosition && (
            <ThemedText style={[styles.playerNumPos, { color: secondaryText }]}>
              {playerPosition}
            </ThemedText>
          )}
        </View>
      </View>
    );
  };

  // 3. 右上角：数据表头
  const renderRightHeader = () => (
    <View style={[styles.dataHeaderRow, { height: HEADER_HEIGHT, borderBottomColor: borderColor }]}>
      {columns.map((col) => (
        <View key={col.key} style={{ width: col.width, alignItems: "center" }}>
          <ThemedText style={[styles.headerText, { color: secondaryText }]}>
            {col.label}
          </ThemedText>
        </View>
      ))}
    </View>
  );

  // 4. 右侧列：数据行
  const renderRightDataRow = (player: any) => (
    <View style={[styles.dataRow, { height: ROW_HEIGHT, borderBottomColor: borderColor }]}>
      {columns.map((col) => (
        <View key={col.key} style={{ width: col.width, alignItems: "center" }}>
          <ThemedText style={[styles.statText, { color: textColor }]}>
            {getPlayerStat(player, col.key)}
          </ThemedText>
        </View>
      ))}
    </View>
  );

  // 队名/Logo逻辑
  const homeTeamName = match.eventHomeTeam || "";
  const awayTeamName = match.eventAwayTeam || "";
  const homeTeamLogo = match.homeTeamLogo || "";
  const awayTeamLogo = match.awayTeamLogo || "";
  const hasHomeLogo = homeTeamLogo && homeTeamLogo.trim() !== "" && !homeTeamLogo.includes("placehold");
  const hasAwayLogo = awayTeamLogo && awayTeamLogo.trim() !== "" && !awayTeamLogo.includes("placehold");
  const homeGradient = getLogoGradient(homeTeamName);
  const awayGradient = getLogoGradient(awayTeamName);
  const homeInitials = getInitials(homeTeamName);
  const awayInitials = getInitials(awayTeamName);

  return (
    <View style={[styles.container, { backgroundColor: bgColor }]}>
      {/* 顶部控制栏 */}
      <View style={styles.controlsHeader}>
        <View>
          <ThemedText style={[styles.controlTitle, { color: textColor }]}>
            统计外观
          </ThemedText>
          <ThemedText style={[styles.controlSubtitle, { color: secondaryText }]}>
            详细视图
          </ThemedText>
        </View>
        <Switch
          value={isDetailed}
          onValueChange={setIsDetailed}
          trackColor={{ false: isDark ? "#3e3e3e" : "#E5E5E5", true: "#FF9500" }}
          thumbColor={"#fff"}
        />
      </View>

      {/* 队伍切换 Tab */}
      <View style={[styles.teamTabsContainer, { backgroundColor: isDark ? "#2C2C2E" : "#F5F5F5" }]}>
        <TouchableOpacity
          style={[
            styles.teamTab,
            activeTab === "home" && { backgroundColor: isDark ? "#1C1C1E" : "#FFF" },
            { borderTopLeftRadius: 8, borderBottomLeftRadius: 8 },
          ]}
          onPress={() => setActiveTab("home")}
        >
          {hasHomeLogo ? (
            <Image source={{ uri: homeTeamLogo }} style={styles.teamTabLogo} contentFit="contain" />
          ) : (
            <LinearGradient
              colors={[homeGradient.color1, homeGradient.color2]}
              style={styles.teamTabLogoGradient}
            >
              <ThemedText style={styles.teamTabLogoText}>{homeInitials}</ThemedText>
            </LinearGradient>
          )}
        </TouchableOpacity>
        <TouchableOpacity
          style={[
            styles.teamTab,
            activeTab === "away" && { backgroundColor: isDark ? "#1C1C1E" : "#FFF" },
            { borderTopRightRadius: 8, borderBottomRightRadius: 8 },
          ]}
          onPress={() => setActiveTab("away")}
        >
          {hasAwayLogo ? (
            <Image source={{ uri: awayTeamLogo }} style={styles.teamTabLogo} contentFit="contain" />
          ) : (
            <LinearGradient
              colors={[awayGradient.color1, awayGradient.color2]}
              style={styles.teamTabLogoGradient}
            >
              <ThemedText style={styles.teamTabLogoText}>{awayInitials}</ThemedText>
            </LinearGradient>
          )}
        </TouchableOpacity>
      </View>

      {/* 核心表格区域：Vertical ScrollView 包裹整个表格 */}
      <ScrollView
        style={[styles.tableContainer, { borderColor }]}
        showsVerticalScrollIndicator={false}
      >
        <View style={{ flexDirection: "row" }}>

          {/* 左侧区域：固定不横向滚动 */}
          <View style={{ width: LEFT_COLUMN_WIDTH, borderRightWidth: StyleSheet.hairlineWidth, borderColor }}>
            {/* Header */}
            {renderLeftHeader()}
            {/* Players List */}
            <View>
              {currentPlayers?.map((player, index) => (
                <View key={`left-${player.player_id || index}`}>
                  {renderLeftPlayerRow(player)}
                </View>
              ))}
            </View>
          </View>

          {/* 右侧区域：整体横向滚动 */}
          <ScrollView horizontal showsHorizontalScrollIndicator={false}>
            <View>
              {/* Header */}
              {renderRightHeader()}
              {/* Data List */}
              <View>
                {currentPlayers?.map((player, index) => (
                  <View key={`right-${player.player_id || index}`}>
                    {renderRightDataRow(player)}
                  </View>
                ))}
              </View>
            </View>
          </ScrollView>

        </View>

        {/* Empty State */}
        {(!currentPlayers || currentPlayers.length === 0) && (
          <View style={styles.emptyState}>
            <ThemedText style={{ color: secondaryText }}>暂无球员数据</ThemedText>
          </View>
        )}
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 12,
  },
  controlsHeader: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    paddingHorizontal: 16,
    marginBottom: 12,
  },
  controlTitle: {
    fontSize: 14,
    fontWeight: "600",
  },
  controlSubtitle: {
    fontSize: 12,
    marginTop: 2,
  },
  teamTabsContainer: {
    flexDirection: "row",
    marginHorizontal: 16,
    marginBottom: 12,
    borderRadius: 12,
    height: 44,
    borderWidth: 1,
    overflow: "hidden",
  },
  teamTab: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  teamTabLogo: {
    width: 24,
    height: 24,
  },
  teamTabLogoGradient: {
    width: 24,
    height: 24,
    borderRadius: 12,
    alignItems: "center",
    justifyContent: "center",
  },
  teamTabLogoText: {
    fontSize: 10,
    fontWeight: "700",
    color: "rgba(255, 255, 255, 0.92)",
  },
  tableContainer: {
    marginHorizontal: 16,
    marginBottom: 20,
    borderRadius: 16,
    borderWidth: 1,
    overflow: "hidden", // 确保圆角生效
  },
  // 左侧样式
  headerCell: {
    flexDirection: "row",
    alignItems: "center",
    borderBottomWidth: StyleSheet.hairlineWidth,
    paddingHorizontal: 12,
    width: "100%",
  },
  playerRow: {
    flexDirection: "row",
    alignItems: "center",
    borderBottomWidth: StyleSheet.hairlineWidth,
    paddingHorizontal: 8,
    width: "100%",
  },
  // 右侧样式
  dataHeaderRow: {
    flexDirection: "row",
    alignItems: "center",
    borderBottomWidth: StyleSheet.hairlineWidth,
    paddingHorizontal: 16, // 给右侧表头一些左右padding，美观
  },
  dataRow: {
    flexDirection: "row",
    alignItems: "center",
    borderBottomWidth: StyleSheet.hairlineWidth,
    paddingHorizontal: 16,
  },
  // 通用文本
  headerText: {
    fontSize: 12,
    fontWeight: "700",
  },
  statText: {
    fontSize: 14,
    fontWeight: "500",
  },
  // 球员头像与信息
  avatarContainer: {
    marginRight: 8,
  },
  avatarGradient: {
    width: 32,
    height: 32,
    borderRadius: 16,
    alignItems: "center",
    justifyContent: "center",
  },
  avatarText: {
    fontSize: 12,
    fontWeight: "700",
    color: "rgba(255, 255, 255, 0.92)",
  },
  playerInfo: {
    flex: 1,
    justifyContent: "center",
  },
  playerName: {
    fontSize: 13,
    fontWeight: "600",
    marginBottom: 2,
  },
  playerNumPos: {
    fontSize: 11,
  },
  emptyState: {
    padding: 40,
    alignItems: "center",
  },
});