import React, { useState, useRef, useEffect } from 'react';
import {
  Text,
  SafeAreaView,
  StyleSheet,
  View,
  FlatList,
  TouchableOpacity,
  Dimensions,
  Image,
  NativeSyntheticEvent,
  NativeScrollEvent,
  LayoutChangeEvent
} from "react-native";

const screenWidth = Dimensions.get('window').width;

// 分类列表
const categoryList = [
  { id: '0', title: '捕鱼', icon: '🎣' },
  { id: '1', title: '真人', icon: '👤' },
  { id: '2', title: '区块链', icon: '⛓️' },
  { id: '3', title: '棋牌', icon: '🎴' },
  { id: '4', title: '电子', icon: '🎰' },
  { id: '5', title: '体育', icon: '⚽' },
  { id: '6', title: '彩票', icon: '🎫' },
  { id: '7', title: '电竞', icon: '🎮' },
  { id: '8', title: '赛车', icon: '🏎️' },
  { id: '9', title: '街机', icon: '🕹️' },
  { id: '10', title: '桌游', icon: '🎲' },
  { id: '11', title: '其他', icon: '⭐' },
];

// 随机生成游戏数据
const generateRandomGames = (categoryId: string, baseName: string) => {
  // 调整随机数，使其更容易出现空列表或少量item，以测试优化效果
  const count = Math.floor(Math.random() * 6); // 产生 0 到 5 个
  const gameTypes = ['经典版', '豪华版', '至尊版', '竞技版', '休闲版', '大师版', '传奇版', '极速版', '黄金版', '钻石版', '王者版'];
  const colors = ['4A90E2', 'E94B3C', '50C878', 'F39C12', '9B59B6', 'E74C3C'];

  return Array.from({ length: count }).map((_, i) => {
    const color = colors[Math.floor(Math.random() * colors.length)];
    return {
      id: `${categoryId}-${i}`,
      name: `${baseName}${gameTypes[i % gameTypes.length]}`,
      hot: Math.random() > 0.6,
      image: `https://via.placeholder.com/120x80/${color}/ffffff?text=Game+${i + 1}`,
    };
  });
};

// 模拟数据
const mockData: Record<string, Array<{ id: string, name: string, hot: boolean, image: string }>> = {};
categoryList.forEach(cat => {
  mockData[cat.id] = generateRandomGames(cat.id, cat.title);
});

// 定义左侧Item的固定高度
// 样式中： paddingVertical(18*2) + icon(24) + iconMargin(4) + title(12) 估算
// 我们在样式中直接指定为 76
const LEFT_ITEM_HEIGHT = 76;

export default function ActivityScreen() {
  const [selectedId, setSelectedId] = useState('0');
  const [isSwitching, setIsSwitching] = useState(false);
  const rightListRef = useRef<FlatList>(null);

  // 创建左侧列表的ref
  const leftListRef = useRef<FlatList>(null);

  // State，用于存储右侧列表容器的实际高度
  const [rightListHeight, setRightListHeight] = useState(0);

  // Slogan：当selectedId变化时，自动滚动左侧列表
  useEffect(() => {
    // 1. 找到当前 selectedId 对应的索引
    const newIndex = categoryList.findIndex(item => item.id === selectedId);

    // 2. 如果找到了 (index > -1) 并且 ref 已经准备好
    if (leftListRef.current && newIndex > -1) {
      // 3. 命令 FlatList 滚动到该索引
      leftListRef.current.scrollToIndex({
        index: newIndex,
        animated: true,
        // viewPosition: 0.5 会将item滚动到列表的中间位置，体验更好
        viewPosition: 0.5
      });
    }
  }, [selectedId]); // 依赖项是 selectedId，它变化时此Slogan执行


  // 支持循环切换分类
  const handleCategorySwitch = (direction: 'prev' | 'next') => {
    const currentIndex = categoryList.findIndex(item => item.id === selectedId);
    const total = categoryList.length;
    let newIndex = direction === 'next' ? (currentIndex + 1) % total : (currentIndex - 1 + total) % total;

    // 切换分类
    setSelectedId(categoryList[newIndex].id);
    // 切换时重置滚动
    rightListRef.current?.scrollToOffset({ offset: 0, animated: false });
  };

  // 实时检测滚动边界 + 循环切换
  const handleScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
    const { contentOffset, contentSize, layoutMeasurement } = e.nativeEvent;
    const y = contentOffset.y;
    const layoutHeight = layoutMeasurement.height;
    const contentHeight = contentSize.height;

    if (isSwitching) return;

    // 滑到顶部并继续下拉
    if (y < -40) {
      setIsSwitching(true);
      handleCategorySwitch('prev');
      setTimeout(() => setIsSwitching(false), 600);
    }

    // 滑到底部并继续上推
    // contentHeight <= layoutHeight 检查内容是否填满
    if (contentHeight <= layoutHeight ? y > 40 : y + layoutHeight - contentHeight > 40) {
      setIsSwitching(true);
      handleCategorySwitch('next');
      setTimeout(() => setIsSwitching(false), 600);
    }
  };

  // onLayout 事件处理函数
  const onRightListLayout = (event: LayoutChangeEvent) => {
    const { height } = event.nativeEvent.layout;
    setRightListHeight(height);
  };


  // 左侧Item组件
  const LeftItem = ({ id, title, icon, isSelected, onPress }: any) => (
    // 包裹在 View 中，并精确设置高度，确保 getItemLayout 的计算正确
    <View style={styles.leftItemContainer}>
      <TouchableOpacity
        style={[styles.leftItem, isSelected && styles.leftItemActive]}
        onPress={onPress}
      >
        <Text style={styles.leftIcon}>{icon}</Text>
        <Text style={[styles.leftTitle, isSelected && styles.leftTitleActive]}>{title}</Text>
        {isSelected && <View style={styles.activeIndicator} />}
      </TouchableOpacity>
    </View>
  );

  // 右侧Item组件
  const RightItem = ({ name, hot, image }: any) => (
    <View style={styles.rightItem}>
      <Image source={{ uri: image }} style={styles.gameImage} resizeMode="cover" />
      <View style={styles.rightItemInfo}>
        <View style={styles.rightItemContent}>
          <Text style={styles.rightItemTitle} numberOfLines={1}>{name}</Text>
          {hot && <View style={styles.hotBadge}><Text style={styles.hotText}>HOT</Text></View>}
        </View>
        <Text style={styles.rightItemDesc}>精彩游戏，等你来玩</Text>
      </View>
    </View>
  );

  // 为 leftListRef 的 scrollToIndex 提供性能保证
  const getItemLayout = (data: any, index: number) => ({
    length: LEFT_ITEM_HEIGHT,
    offset: LEFT_ITEM_HEIGHT * index,
    index
  });

  return (
    <SafeAreaView style={styles.safeAreaContainer}>
      <View style={styles.container}>
        <View style={styles.content}>
          {/* 左侧分类 */}
          <View style={styles.leftWrapper}>
            <FlatList
              ref={leftListRef}
              data={categoryList}
              renderItem={({ item }) => (
                <LeftItem
                  id={item.id}
                  title={item.title}
                  icon={item.icon}
                  isSelected={selectedId === item.id}
                  onPress={() => setSelectedId(item.id)}
                />
              )}
              keyExtractor={item => item.id}
              showsVerticalScrollIndicator={false}
              getItemLayout={getItemLayout} // 提高滚动性能
            />
          </View>

          {/* 右侧内容 */}
          <View style={styles.contentRight} onLayout={onRightListLayout}>
            {/* 只有在获取到高度后才渲染 FlatList，确保 minHeight 初始值正确 */}
            {rightListHeight > 0 && (
              <FlatList
                ref={rightListRef}
                data={mockData[selectedId] || []}
                renderItem={({ item }) => (
                  <RightItem name={item.name} hot={item.hot} image={item.image} />
                )}
                keyExtractor={item => item.id}
                showsVerticalScrollIndicator={false}
                bounces={true}
                scrollEventThrottle={16}
                onScroll={handleScroll}
                
                // 为 iOS 添加，使其在内容不足时也能反弹
                alwaysBounceVertical={true}

                // 设置 contentContainerStyle
                contentContainerStyle={[
                  styles.rightListContent,
                  {
                    // 确保内容容器的最小高度
                    // 始终比 FlatList 视图本身高 1 像素
                    minHeight: rightListHeight + 1
                  }
                ]}
              />
            )}
          </View>
        </View>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safeAreaContainer: { flex: 1, backgroundColor: '#f5f5f5' },
  container: { flex: 1 },
  content: { flex: 1, flexDirection: 'row' },
  leftWrapper: {
    width: 90,
    backgroundColor: '#fff',
    borderRightWidth: 1,
    borderRightColor: '#e0e0e0',
  },
  // 一个容器，严格控制Item高度
  leftItemContainer: {
    height: LEFT_ITEM_HEIGHT, // 严格高度
    width: '100%',
  },
  leftItem: {
    flex: 1, // 填满父容器
    paddingHorizontal: 8,
    alignItems: 'center',
    justifyContent: 'center',
    position: 'relative',
  },
  leftItemActive: { backgroundColor: '#f0f0f0' },
  leftIcon: { fontSize: 24, marginBottom: 4 },
  leftTitle: { fontSize: 12, color: '#666', textAlign: 'center' },
  leftTitleActive: { color: '#1890ff', fontWeight: '600' },
  activeIndicator: {
    position: 'absolute',
    left: 0,
    top: '50%',
    marginTop: -12, // (24 / 2)
    width: 3,
    height: 24,
    backgroundColor: '#1890ff',
    borderTopRightRadius: 2,
    borderBottomRightRadius: 2,
  },
  contentRight: { flex: 1, backgroundColor: '#f5f5f5' },
  rightListContent: {
    padding: 12,
    paddingBottom: 20
  },
  rightItem: {
    backgroundColor: '#fff',
    borderRadius: 8,
    padding: 12,
    marginBottom: 12,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.05,
    shadowRadius: 2,
    elevation: 2,
    flexDirection: 'row',
    alignItems: 'center',
  },
  gameImage: {
    width: 120,
    height: 80,
    borderRadius: 6,
    marginRight: 12,
    backgroundColor: '#f0f0f0',
  },
  rightItemInfo: { flex: 1, justifyContent: 'center' },
  rightItemContent: { flexDirection: 'row', alignItems: 'center', marginBottom: 6 },
  rightItemTitle: { fontSize: 15, fontWeight: '600', color: '#333', marginRight: 8, flex: 1 },
  hotBadge: { backgroundColor: '#ff4d4f', paddingHorizontal: 6, paddingVertical: 2, borderRadius: 4 },
  hotText: { color: '#fff', fontSize: 10, fontWeight: '600' },
  rightItemDesc: { fontSize: 13, color: '#999' },
});