import { Image } from 'expo-image';
import { useRouter } from 'expo-router';
import React, { useCallback, useEffect, useState } from 'react';
import {
    Dimensions,
    ImageBackground,
    ScrollView,
    StatusBar,
    StyleSheet,
    Text,
    TouchableOpacity,
    View,
} from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

import { Images } from '@/constants/images';
import { getUserInfo, UserInfo } from '@/services/user';

export default function WelfareScreen() {
  const router = useRouter();
  const insets = useSafeAreaInsets();
  const [showSection, setShowSection] = useState(true);
  const [user, setUser] = useState<UserInfo | null>(null);

  const loadUserInfo = useCallback(async () => {
    try {
      const info = await getUserInfo();
      setUser(info);
    } catch (error) {
      console.error('获取用户信息失败:', error);
    }
  }, []);

  useEffect(() => {
    loadUserInfo();
  }, [loadUserInfo]);

  const handleRoomPress = (type: number) => {
    if (type === 0) {
      // 福利房间
      router.push('/weal/room' as any);
    } else if (type === 1) {
      // 扭蛋机
      router.push('/weal/catchDoll' as any);
    } else {
      // 祈愿
      router.push('/weal/wish' as any);
    }
  };

  return (
    <View style={styles.container}>
      <StatusBar barStyle="light-content" />
      <ImageBackground
        source={{ uri: Images.mine.kaixinMineBg }}
        style={styles.background}
        resizeMode="cover"
      >
        {/* 顶部导航 */}
        <View style={[styles.header, { paddingTop: insets.top + 50 }]}>
          <Text style={styles.title}>福利</Text>
        </View>

        {/* 标题区域 */}
        <ImageBackground
          source={{ uri: Images.welfare.wealTitle }}
          style={styles.headSection}
          resizeMode="cover"
        >
          <Text style={styles.headTitle}>限时福利活动</Text>
          <Text style={styles.headText}>限时活动，不定时开放</Text>
        </ImageBackground>

        {/* 房间列表 */}
        {showSection && (
          <ScrollView 
            style={styles.scrollView}
            showsVerticalScrollIndicator={false}
            contentContainerStyle={styles.scrollContent}
          >
            <TouchableOpacity
              style={styles.roomItem}
              onPress={() => handleRoomPress(0)}
              activeOpacity={0.8}
            >
              <Image
                source={{ uri: Images.welfare.indexItem1  }}
                style={styles.roomImage}
                contentFit="fill"
              />
            </TouchableOpacity>

            <TouchableOpacity
              style={styles.roomItem}
              onPress={() => handleRoomPress(1)}
              activeOpacity={0.8}
            >
              <Image
                source={{ uri: Images.welfare.indexItem2  }}
                style={styles.roomImage}
                contentFit="fill"
              />
            </TouchableOpacity>

            <TouchableOpacity
              style={styles.roomItem}
              onPress={() => handleRoomPress(2)}
              activeOpacity={0.8}
            >
              <Image
                source={{ uri: Images.welfare.indexItem3  }}
                style={styles.roomImage}
                contentFit="fill"
              />
            </TouchableOpacity>
          </ScrollView>
        )}

        {/* 底部占位 */}
        <View style={{ height: 120 }} />
      </ImageBackground>
    </View>
  );
}

const { width: SCREEN_WIDTH } = Dimensions.get('window');

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#52504e',
  },
  background: {
    flex: 1,
  },
  header: {
    alignItems: 'center',
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    zIndex: 100,
  },
  title: {
    color: '#fff',
    fontSize: 16,
    fontWeight: 'bold',
    height: 40,
    lineHeight: 40,
  },
  headSection: {
    width: '100%',
    height: 192,
    alignItems: 'center',
    paddingTop: 90,
  },
  headTitle: {
    fontWeight: 'bold',
    fontSize: 40,
    color: '#FDF685',
    textShadowColor: '#E85801',
    textShadowOffset: { width: 1, height: 2 },
    textShadowRadius: 0,
  },
  headText: {
    fontSize: 15,
    color: '#E85801',
    marginTop: 5,
    textShadowColor: '#fff',
    textShadowOffset: { width: 1, height: 2 },
    textShadowRadius: 1,
  },
  scrollView: {
    flex: 1,
    marginTop: 15,
  },
  scrollContent: {
    paddingHorizontal: 0,
    alignItems: 'center',
  },
  roomItem: {
    marginBottom: 6,
    width: SCREEN_WIDTH - 12, // Minimal margins (6px each side)
    alignSelf: 'center',
  },
  roomImage: {
    width: '100%',
    height: undefined,
    aspectRatio: 3, // Taller (345/115) to reduce horizontal stretch
  },
});