import { View, StyleSheet, ScrollView, InteractionManager } from 'react-native';
import { Image } from 'expo-image';
import Animated, { LinearTransition, Easing } from 'react-native-reanimated';
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { useTabBarHeight } from '@/hooks/useTabBarHeight';
import { useMemo, useEffect, useState } from 'react';
import { CustomHeader } from '@/components/common/CustomHeader';

// UI组件
import UserHeader from '@/components/personal/userHeader';
import UserTools from '@/components/personal/userTools';
import BasicInfo from '@/components/personal/basicInfo';
import ModuleList from '@/components/personal/moduleList';

// 引入屏幕适配
import { wp } from '@/utils/ui/screenUtils';

// 模块列表配置
const modules = [
  {
      nameKey: 'modules.settingsAndPrivacy',
      iconPath: require('@/assets/images/personal/settingsAndPrivacy.png'),
      hasPointer: true,
      path: '/personal/settingsAndPrivacy'
  },
  {
      nameKey: 'modules.helpCenter',
      iconPath: require('@/assets/images/personal/helpCenter.png'),
      hasPointer: false,
      path: '/personal/helpCenter'
  }
]

const PersonalScreen = () => {
  const insets = useSafeAreaInsets();
  const tabBarInset = useTabBarHeight();
  const contentContainerStyle = useMemo(() => ({ paddingBottom: tabBarInset+wp(30) }), [tabBarInset]);
  const [heavyReady, setHeavyReady] = useState(false);
  useEffect(() => {
    const task = InteractionManager.runAfterInteractions(() => {
      setHeavyReady(true);
    });
    return () => {
      // @ts-ignore
      task?.cancel?.();
    };
  }, []);
  return (
    <View style={{ flex: 1}}>
      <Image
        source={require('@/assets/images/backgrounds/personal-bg.jpeg')}
        style={StyleSheet.absoluteFill}
        contentFit="cover"
        transition={0}
        pointerEvents="none"
        cachePolicy="memory-disk"
      />
      <CustomHeader headerShown={false} />
        <ScrollView
          style={{ flex: 1, backgroundColor: 'transparent' }}
          // 隐藏滚动条
          showsVerticalScrollIndicator={false}
          // 解决滚动冲突
          nestedScrollEnabled={true}
          // 内容容器样式
          contentContainerStyle={contentContainerStyle}
        >
          <View style={[styles.container, { paddingTop: insets.top+wp(70) }]}>
            <View style={styles.userHeader}>
              <UserHeader />
            </View>
            <View style={styles.userToolCard}>
              <UserTools />
            </View>
            {heavyReady ? (
              <Animated.View style={styles.basicInfoCard} layout={LinearTransition.duration(220).easing(Easing.out(Easing.cubic))}>
                <BasicInfo />
              </Animated.View>
            ) : null}
            {heavyReady ? (
              <Animated.View style={styles.moduleListCard} layout={LinearTransition.duration(220).easing(Easing.out(Easing.cubic))}>
                <ModuleList modules={modules} />
              </Animated.View>
            ) : null}
          </View>
        </ScrollView>
    </View>
  );
}

export default PersonalScreen;

const styles = StyleSheet.create({
  container: {

    paddingHorizontal: wp(16),
    gap: wp(10),
  },
  userHeader: {
    paddingHorizontal: wp(16),
    paddingVertical: wp(10),
    backgroundColor: '#fff',
  },
  userToolCard: {
    paddingVertical: wp(8),
    backgroundColor: '#fff',
  },
  basicInfoCard: {
    paddingHorizontal: wp(8),
    backgroundColor: '#fff',
  },
  moduleListCard: {
    paddingHorizontal: wp(8),
    backgroundColor: '#fff',
  }
});