/**
 * ImageGallery 图片画廊组件
 * 支持手势滑动切换图片、双指放大、点击关闭
 * 使用 expo-image，原生支持 GIF/WebP 动图
 */

import React, { useState, useCallback, useEffect, useMemo } from 'react';
import {
  Modal,
  View,
  StyleSheet,
  Dimensions,
  TouchableOpacity,
  Text,
  StatusBar,
  ActivityIndicator,
  Alert,
} from 'react-native';
import { Image as ExpoImage } from 'expo-image';
import {
  Gesture,
  GestureDetector,
  GestureHandlerRootView,
} from 'react-native-gesture-handler';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  useDerivedValue,
  runOnJS,
  withTiming,
  withSpring,
} from 'react-native-reanimated';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import * as MediaLibrary from 'expo-media-library';
import { File, Paths } from 'expo-file-system';
import { colors, spacing, borderRadius, fontSizes } from '../../theme';

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

// 图片项类型
export interface GalleryImageItem {
  id: string;
  url: string;
  thumbnailUrl?: string;
  width?: number;
  height?: number;
  description?: string;
}

// 组件 Props
export interface ImageGalleryProps {
  /** 是否可见 */
  visible: boolean;
  /** 图片列表 */
  images: GalleryImageItem[];
  /** 初始索引 */
  initialIndex: number;
  /** 关闭回调 */
  onClose: () => void;
  /** 索引变化回调 */
  onIndexChange?: (index: number) => void;
  /** 是否显示指示器 */
  showIndicator?: boolean;
  /** 是否允许保存图片 */
  enableSave?: boolean;
  /** 保存图片成功回调 */
  onSave?: (url: string) => void;
  /** 背景透明度 */
  backgroundOpacity?: number;
}

/**
 * 图片画廊主组件
 */
export const ImageGallery: React.FC<ImageGalleryProps> = ({
  visible,
  images,
  initialIndex,
  onClose,
  onIndexChange,
  showIndicator = true,
  enableSave = false,
  onSave,
  backgroundOpacity = 1,
}) => {
  const [currentIndex, setCurrentIndex] = useState(initialIndex);
  const [showControls, setShowControls] = useState(true);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);
  const [saving, setSaving] = useState(false);
  const [saveToast, setSaveToast] = useState<'success' | 'error' | null>(null);

  const insets = useSafeAreaInsets();

  // 缩放相关状态
  const scale = useSharedValue(1);
  const savedScale = useSharedValue(1);
  const translateX = useSharedValue(0);
  const translateY = useSharedValue(0);
  const savedTranslateX = useSharedValue(0);
  const savedTranslateY = useSharedValue(0);

  const validImages = useMemo(() => {
    return images.filter(img => img.url);
  }, [images]);

  const currentImage = useMemo(() => {
    if (currentIndex < 0 || currentIndex >= validImages.length) {
      return null;
    }
    return validImages[currentIndex];
  }, [validImages, currentIndex]);

  // 重置缩放状态
  const resetZoom = useCallback(() => {
    scale.value = withTiming(1, { duration: 200 });
    savedScale.value = 1;
    translateX.value = withTiming(0, { duration: 200 });
    translateY.value = withTiming(0, { duration: 200 });
    savedTranslateX.value = 0;
    savedTranslateY.value = 0;
  }, [scale, savedScale, translateX, translateY, savedTranslateX, savedTranslateY]);

  // 打开/关闭时重置状态
  useEffect(() => {
    if (visible) {
      setCurrentIndex(initialIndex);
      setShowControls(true);
      setLoading(true);
      setError(false);
      resetZoom();
      StatusBar.setHidden(true, 'fade');
    } else {
      StatusBar.setHidden(false, 'fade');
    }
  }, [visible, initialIndex, resetZoom]);

  // 图片变化时重置加载状态和缩放
  useEffect(() => {
    setLoading(true);
    setError(false);
    resetZoom();
  }, [currentImage?.id, resetZoom]);

  const updateIndex = useCallback(
    (newIndex: number) => {
      const clampedIndex = Math.max(0, Math.min(validImages.length - 1, newIndex));
      setCurrentIndex(clampedIndex);
      onIndexChange?.(clampedIndex);
    },
    [validImages.length, onIndexChange]
  );

  const toggleControls = useCallback(() => {
    setShowControls(prev => !prev);
  }, []);

  const goToPrev = useCallback(() => {
    if (currentIndex > 0) {
      updateIndex(currentIndex - 1);
    }
  }, [currentIndex, updateIndex]);

  const goToNext = useCallback(() => {
    if (currentIndex < validImages.length - 1) {
      updateIndex(currentIndex + 1);
    }
  }, [currentIndex, validImages.length, updateIndex]);

  // 显示短暂提示
  const showToast = useCallback((type: 'success' | 'error') => {
    setSaveToast(type);
    setTimeout(() => setSaveToast(null), 2500);
  }, []);

  // 保存图片到本地相册
  const handleSaveImage = useCallback(async () => {
    if (!currentImage || saving) return;

    const { status } = await MediaLibrary.requestPermissionsAsync();
    if (status !== 'granted') {
      Alert.alert('无法保存', '请在系统设置中允许访问相册权限后重试。');
      return;
    }

    setSaving(true);
    try {
      const urlPath = currentImage.url.split('?')[0];
      const ext = urlPath.split('.').pop()?.toLowerCase() ?? 'jpg';
      const allowedExts = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
      const fileExt = allowedExts.includes(ext) ? ext : 'jpg';

      const fileName = `carrot_${Date.now()}.${fileExt}`;
      const destination = new File(Paths.cache, fileName);

      // File.downloadFileAsync 是新版 expo-file-system/next 的静态方法
      const downloaded = await File.downloadFileAsync(currentImage.url, destination);

      await MediaLibrary.saveToLibraryAsync(downloaded.uri);

      // 清理缓存文件
      downloaded.delete();

      onSave?.(currentImage.url);
      showToast('success');
    } catch (err) {
      console.error('[ImageGallery] 保存图片失败:', err);
      showToast('error');
    } finally {
      setSaving(false);
    }
  }, [currentImage, saving, onSave, showToast]);

  // 双指缩放手势
  const pinchGesture = Gesture.Pinch()
    .onUpdate((e) => {
      const newScale = savedScale.value * e.scale;
      // 限制缩放范围
      scale.value = Math.max(0.5, Math.min(newScale, 4));
    })
    .onEnd(() => {
      // 如果缩放小于1，回弹到1
      if (scale.value < 1) {
        scale.value = withTiming(1, { duration: 200 });
        savedScale.value = 1;
        translateX.value = withTiming(0, { duration: 200 });
        translateY.value = withTiming(0, { duration: 200 });
        savedTranslateX.value = 0;
        savedTranslateY.value = 0;
      } else {
        savedScale.value = scale.value;
      }
    });

  // 滑动切换图片相关状态
  const swipeTranslateX = useSharedValue(0);

  // 统一的滑动手势：放大时拖动，未放大时切换图片
  const panGesture = Gesture.Pan()
    .activeOffsetX([-10, 10])  // 水平方向需要移动10pt才激活，避免与点击冲突
    .activeOffsetY([-10, 10])  // 垂直方向也需要一定偏移才激活
    .onBegin(() => {
      swipeTranslateX.value = 0;
    })
    .onUpdate((e) => {
      if (scale.value > 1) {
        // 放大状态下：拖动图片
        translateX.value = savedTranslateX.value + e.translationX;
        translateY.value = savedTranslateY.value + e.translationY;
      } else if (validImages.length > 1) {
        // 未放大且有多张图片：切换图片的跟随效果
        const isFirst = currentIndex === 0 && e.translationX > 0;
        const isLast = currentIndex === validImages.length - 1 && e.translationX < 0;
        if (isFirst || isLast) {
          // 边界阻力效果
          swipeTranslateX.value = e.translationX * 0.3;
        } else {
          swipeTranslateX.value = e.translationX;
        }
      }
    })
    .onEnd((e) => {
      if (scale.value > 1) {
        // 放大状态下：保存拖动位置
        savedTranslateX.value = translateX.value;
        savedTranslateY.value = translateY.value;
      } else if (validImages.length > 1) {
        // 未放大状态下：判断是否切换图片
        const threshold = SCREEN_WIDTH * 0.2;
        const velocity = e.velocityX;

        const shouldGoNext = e.translationX < -threshold || velocity < -500;
        const shouldGoPrev = e.translationX > threshold || velocity > 500;

        if (shouldGoNext && currentIndex < validImages.length - 1) {
          // 向左滑动，显示下一张
          swipeTranslateX.value = withTiming(-SCREEN_WIDTH, { duration: 200 }, () => {
            runOnJS(updateIndex)(currentIndex + 1);
            swipeTranslateX.value = 0;
          });
        } else if (shouldGoPrev && currentIndex > 0) {
          // 向右滑动，显示上一张
          swipeTranslateX.value = withTiming(SCREEN_WIDTH, { duration: 200 }, () => {
            runOnJS(updateIndex)(currentIndex - 1);
            swipeTranslateX.value = 0;
          });
        } else {
          // 回弹到原位
          swipeTranslateX.value = withTiming(0, { duration: 200 });
        }
      }
    });

  // 点击手势（关闭 gallery）
  const tapGesture = Gesture.Tap()
    .numberOfTaps(1)
    .maxDistance(10)
    .onEnd(() => {
      runOnJS(onClose)();
    });

  // 组合手势：
  // - pinchGesture 和 (panGesture / tapGesture) 可以同时识别
  // - panGesture 和 tapGesture 互斥（Race）：短按是点击，长按/滑动是拖动
  const composedGesture = Gesture.Simultaneous(
    pinchGesture,
    Gesture.Race(panGesture, tapGesture)
  );

  // 动画样式
  const animatedStyle = useAnimatedStyle(() => ({
    transform: [
      { translateX: translateX.value + swipeTranslateX.value },
      { translateY: translateY.value },
      { scale: scale.value },
    ] as const,
  }));

  if (!visible || validImages.length === 0) {
    return null;
  }

  return (
    <Modal
      visible={visible}
      transparent
      animationType="fade"
      onRequestClose={onClose}
      statusBarTranslucent
    >
      <GestureHandlerRootView style={styles.root}>
        <View style={[styles.container, { backgroundColor: `rgba(0, 0, 0, ${backgroundOpacity})` }]}>
          {/* 顶部控制栏 */}
          {showControls && (
            <View style={[styles.header, { paddingTop: insets.top + spacing.md }]}>
              <TouchableOpacity style={styles.closeButton} onPress={onClose}>
                <MaterialCommunityIcons name="close" size={24} color="#FFF" />
              </TouchableOpacity>

              <View style={styles.headerCenter}>
                <Text style={styles.pageIndicator}>
                  {currentIndex + 1} / {validImages.length}
                </Text>
              </View>

              {enableSave && (
                <TouchableOpacity
                  style={styles.saveButton}
                  onPress={handleSaveImage}
                  disabled={saving}
                >
                  {saving ? (
                    <ActivityIndicator size="small" color="#FFF" />
                  ) : (
                    <MaterialCommunityIcons name="download" size={24} color="#FFF" />
                  )}
                </TouchableOpacity>
              )}
            </View>
          )}

          {/* 图片显示区域 */}
          <GestureDetector gesture={composedGesture}>
            <View style={styles.imageContainer}>
              {loading && (
                <View style={styles.loadingContainer}>
                  <ActivityIndicator size="large" color="#FFF" />
                </View>
              )}

              {error && (
                <View style={styles.errorContainer}>
                  <MaterialCommunityIcons name="image-off" size={48} color="#999" />
                  <Text style={styles.errorText}>加载失败</Text>
                </View>
              )}

              {currentImage && (
                <Animated.View style={[styles.imageWrapper, animatedStyle]}>
                  <ExpoImage
                    source={{ uri: currentImage.url }}
                    style={styles.image}
                    contentFit="contain"
                    cachePolicy="disk"
                    priority="high"
                    recyclingKey={currentImage.id}
                    allowDownscaling
                    onLoadStart={() => setLoading(true)}
                    onLoad={() => {
                      setLoading(false);
                      setError(false);
                    }}
                    onError={() => {
                      setLoading(false);
                      setError(true);
                    }}
                  />
                </Animated.View>
              )}
            </View>
          </GestureDetector>

          {/* 左右切换按钮 */}
          {showControls && validImages.length > 1 && (
            <>
              {currentIndex > 0 && (
                <TouchableOpacity
                  style={[styles.navButton, styles.navButtonLeft]}
                  onPress={goToPrev}
                  activeOpacity={0.7}
                >
                  <MaterialCommunityIcons name="chevron-left" size={36} color="#FFF" />
                </TouchableOpacity>
              )}

              {currentIndex < validImages.length - 1 && (
                <TouchableOpacity
                  style={[styles.navButton, styles.navButtonRight]}
                  onPress={goToNext}
                  activeOpacity={0.7}
                >
                  <MaterialCommunityIcons name="chevron-right" size={36} color="#FFF" />
                </TouchableOpacity>
              )}
            </>
          )}

          {/* 底部指示器 */}
          {showControls && showIndicator && validImages.length > 1 && (
            <View style={[styles.footer, { paddingBottom: insets.bottom + spacing.lg }]}>
              <View style={styles.dotsContainer}>
                {validImages.map((_, index) => (
                  <View
                    key={index}
                    style={[
                      styles.dot,
                      index === currentIndex && styles.activeDot,
                    ]}
                  />
                ))}
              </View>
            </View>
          )}

          {/* 保存结果 Toast */}
          {saveToast !== null && (
            <View style={[styles.toast, saveToast === 'success' ? styles.toastSuccess : styles.toastError]}>
              <MaterialCommunityIcons
                name={saveToast === 'success' ? 'check-circle-outline' : 'alert-circle-outline'}
                size={18}
                color="#FFF"
              />
              <Text style={styles.toastText}>
                {saveToast === 'success' ? '已保存到相册' : '保存失败，请重试'}
              </Text>
            </View>
          )}
        </View>
      </GestureHandlerRootView>
    </Modal>
  );
};

const styles = StyleSheet.create({
  root: {
    flex: 1,
  },
  container: {
    flex: 1,
    backgroundColor: '#000',
  },
  header: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: spacing.md,
    paddingBottom: spacing.md,
    backgroundColor: 'rgba(0, 0, 0, 0.3)',
    zIndex: 10,
  },
  closeButton: {
    width: 40,
    height: 40,
    borderRadius: borderRadius.full,
    backgroundColor: 'rgba(255, 255, 255, 0.2)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  headerCenter: {
    flex: 1,
    alignItems: 'center',
  },
  pageIndicator: {
    color: '#FFF',
    fontSize: fontSizes.md,
    fontWeight: '500',
  },
  saveButton: {
    width: 40,
    height: 40,
    borderRadius: borderRadius.full,
    backgroundColor: 'rgba(255, 255, 255, 0.2)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  imageContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  imageWrapper: {
    width: SCREEN_WIDTH,
    height: SCREEN_HEIGHT,
    justifyContent: 'center',
    alignItems: 'center',
  },
  image: {
    width: SCREEN_WIDTH,
    height: SCREEN_HEIGHT * 0.8,
  },
  loadingContainer: {
    ...StyleSheet.absoluteFillObject,
    justifyContent: 'center',
    alignItems: 'center',
    zIndex: 5,
  },
  errorContainer: {
    ...StyleSheet.absoluteFillObject,
    justifyContent: 'center',
    alignItems: 'center',
  },
  errorText: {
    color: '#999',
    fontSize: fontSizes.md,
    marginTop: spacing.sm,
  },
  navButton: {
    position: 'absolute',
    top: '50%',
    marginTop: -25,
    width: 50,
    height: 50,
    borderRadius: 25,
    backgroundColor: 'rgba(0, 0, 0, 0.4)',
    justifyContent: 'center',
    alignItems: 'center',
    zIndex: 10,
  },
  navButtonLeft: {
    left: spacing.sm,
  },
  navButtonRight: {
    right: spacing.sm,
  },
  footer: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    paddingVertical: spacing.lg,
    backgroundColor: 'rgba(0, 0, 0, 0.3)',
  },
  dotsContainer: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    gap: 8,
  },
  dot: {
    width: 8,
    height: 8,
    borderRadius: 4,
    backgroundColor: 'rgba(255, 255, 255, 0.4)',
  },
  activeDot: {
    width: 20,
    borderRadius: 4,
    backgroundColor: '#FFF',
  },
  toast: {
    position: 'absolute',
    bottom: 100,
    alignSelf: 'center',
    flexDirection: 'row',
    alignItems: 'center',
    gap: 6,
    paddingHorizontal: spacing.lg,
    paddingVertical: spacing.sm,
    borderRadius: borderRadius.full,
  },
  toastSuccess: {
    backgroundColor: 'rgba(34, 197, 94, 0.9)',
  },
  toastError: {
    backgroundColor: 'rgba(239, 68, 68, 0.9)',
  },
  toastText: {
    color: '#FFF',
    fontSize: fontSizes.sm,
    fontWeight: '500',
  },
});

export default ImageGallery;