import React from 'react';
import { View, StyleSheet, Platform } from 'react-native';
import CustomText from '@/components/common/CustomText.jsx';
// 引入 Reanimated，用于过渡动画
import Animated, { FadeIn, FadeOut, ZoomIn, ZoomOut, Easing } from 'react-native-reanimated';
import LoadingSpinner from '@/components/ui/LoadingSpinner';
import { IconSymbol } from '@/components/ui/IconSymbol';
import { wp } from '@/utils/ui/screenUtils';

// 全局 Loading：支持可配置是否拦截触摸（blocking）
const CustomLoading = ({ visible = false, text = '正在加载', blocking = true, status = 'loading' }) => {
  if (!visible) return null;

  return (
    // 透明遮罩层淡入淡出
    <Animated.View
      pointerEvents={blocking ? 'auto' : 'none'}
      style={styles.overlay}
      entering={FadeIn.duration(180)}
      exiting={FadeOut.duration(180)}
      collapsable={false}
    >
      <View style={styles.shadowWrap} pointerEvents={blocking ? 'auto' : 'none'}>
        {/* 保留整体缩放过渡：在非裁剪父层进行缩放，避免裁剪容器缩放带来的偏移问题 */}
        <View
          style={styles.contentWrap}
          pointerEvents={blocking ? 'auto' : 'none'}
          collapsable={false}
        >
          {/* 裁剪圆角容器不再执行缩放，仅做淡入淡出 */}
          <Animated.View
            style={styles.box}
            pointerEvents={blocking ? 'auto' : 'none'}
            entering={FadeIn.duration(180).easing(Easing.out(Easing.cubic))}
            exiting={FadeOut.duration(160).easing(Easing.in(Easing.cubic))}
          >
            {/* 加载态：淡入淡出，保持居中 */}
            {status === 'loading' && (
              <Animated.View entering={FadeIn.duration(160)} exiting={FadeOut.duration(160)}>
                <Animated.View
                  entering={ZoomIn.duration(150).easing(Easing.out(Easing.cubic))}
                  exiting={ZoomOut.duration(140).easing(Easing.in(Easing.cubic))}
                >
                  <LoadingSpinner size={wp(33)} color="#FFFFFF" speed={1.2} animating />
                </Animated.View>
              </Animated.View>
            )}
            {/* 结果态：仅淡入淡出 */}
            {status !== 'loading' && (
              <Animated.View entering={FadeIn.duration(180)} exiting={FadeOut.duration(160)}>
                <Animated.View
                  entering={ZoomIn.duration(150).easing(Easing.out(Easing.cubic))}
                  exiting={ZoomOut.duration(140).easing(Easing.in(Easing.cubic))}
                >
                  <IconSymbol
                    name={status === 'success' ? 'checkmark.circle.fill' : 'xmark.circle.fill'}
                    size={wp(40)}
                    color="#FFFFFF"
                  />
                </Animated.View>
              </Animated.View>
            )}
            {!!text && <CustomText style={styles.text}>{text}</CustomText>}
          </Animated.View>
        </View>
      </View>
    </Animated.View>
  );
};

const styles = StyleSheet.create({
  overlay: {
    ...StyleSheet.absoluteFillObject,
    alignItems: 'center',
    justifyContent: 'center',
    // 使用透明遮罩，保持与原设计一致；是否拦截由 pointerEvents 控制
    backgroundColor: 'transparent',
    zIndex: 9999,
  },
  // 专门用于承载阴影/海拔，避免与圆角+半透明背景叠加引起的渲染问题
  shadowWrap: {
    alignSelf: 'center',
    borderRadius: wp(12),
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOpacity: 0.2,
        shadowRadius: wp(10),
        shadowOffset: { width: wp(0), height: wp(4) },
        backgroundColor: 'transparent',
      },
      android: {
        // 移除 elevation，避免 HarmonyOS 圆角叠加绘制缺陷
        backgroundColor: 'transparent',
      },
    }),
  },
  contentWrap: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    height: wp(120),
    width: wp(120),
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: wp(12),
    backgroundColor: 'rgba(0,0,0,0.5)',
    // 在部分华为机型上，带 elevation 的圆角 View 会出现内部矩形的渲染瑕疵
    // 通过 overflow: 'hidden' 强制裁剪可以规避该问题
    overflow: 'hidden',
  },
  text: {
    marginTop: wp(10),
    color: '#FFFFFF',
    fontSize: wp(14),
  },
});

export default CustomLoading;