import { Ionicons } from '@expo/vector-icons';
import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
import * as Haptics from 'expo-haptics';
import { Image } from 'expo-image';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import {
  ActivityIndicator,
  Animated,
  BackHandler,
  Dimensions,
  Modal,
  StyleSheet,
  Text,
  TouchableOpacity,
  View
} from 'react-native';
import ImageViewing from 'react-native-image-viewing';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { useI18n } from '../../hooks/useI18n';
import { triggerLightHaptic } from '../../utils/haptics';

const { height: screenHeight } = Dimensions.get('window');

interface MedicationAiSummaryInfoSheetProps {
  visible: boolean;
  onClose: () => void;
  onConfirm: () => void;
  loading?: boolean;
}

/**
 * AI 用药总结介绍弹窗组件
 * 用于展示 AI 用药总结功能的介绍和说明
 */
export function MedicationAiSummaryInfoSheet({
  visible,
  onClose,
  onConfirm,
  loading = false,
}: MedicationAiSummaryInfoSheetProps) {
  const { t } = useI18n();
  const insets = useSafeAreaInsets();
  const translateY = useRef(new Animated.Value(screenHeight)).current;
  const backdropOpacity = useRef(new Animated.Value(0)).current;
  const [showImagePreview, setShowImagePreview] = useState(false);
  
  // 预览图片 - 直接使用 require 资源
  const imageSource = require('@/assets/images/medicine/medicine-ai-summary.png');

  useEffect(() => {
    if (visible) {
      translateY.setValue(screenHeight);
      backdropOpacity.setValue(0);

      Animated.parallel([
        Animated.timing(backdropOpacity, {
          toValue: 1,
          duration: 200,
          useNativeDriver: true,
        }),
        Animated.spring(translateY, {
          toValue: 0,
          useNativeDriver: true,
          bounciness: 6,
          speed: 12,
        }),
      ]).start();
    } else {
      Animated.parallel([
        Animated.timing(backdropOpacity, {
          toValue: 0,
          duration: 150,
          useNativeDriver: true,
        }),
        Animated.timing(translateY, {
          toValue: screenHeight,
          duration: 240,
          useNativeDriver: true,
        }),
      ]).start(() => {
        translateY.setValue(screenHeight);
        backdropOpacity.setValue(0);
      });
    }
  }, [visible, backdropOpacity, translateY]);

  // 处理Android返回键关闭图片预览
  useEffect(() => {
    const backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
      if (showImagePreview) {
        setShowImagePreview(false);
        return true; // 阻止默认返回行为
      }
      return false;
    });

    return () => backHandler.remove();
  }, [showImagePreview]);

  // 处理图片预览
  const handleImagePreview = useCallback(() => {
    triggerLightHaptic();
    setShowImagePreview(true);
  }, []);

  const handleClose = () => {
    // 安全地执行触觉反馈，避免因触觉反馈失败导致页面卡顿
    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light).catch((error) => {
      console.warn('[AI_SUMMARY] Haptic feedback failed:', error);
    });
    onClose();
  };

  const handleConfirm = () => {
    if (loading) return;
    // 安全地执行触觉反馈，避免因触觉反馈失败导致页面卡顿
    Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success).catch((error) => {
      console.warn('[AI_SUMMARY] Haptic feedback failed:', error);
    });
    onConfirm();
  };

  if (!visible) {
    return null;
  }

  return (
    <Modal
      visible={visible}
      transparent
      animationType="none"
      onRequestClose={handleClose}
      statusBarTranslucent
    >
      <View style={styles.overlay}>
        <Animated.View
          style={[
            styles.backdrop,
            {
              opacity: backdropOpacity,
            },
          ]}
        >
          <TouchableOpacity style={StyleSheet.absoluteFillObject} activeOpacity={1} onPress={handleClose} />
        </Animated.View>

        <Animated.View
          style={[
            styles.sheet,
            {
              transform: [{ translateY }],
              paddingBottom: Math.max(insets.bottom, 20),
            },
          ]}
        >
          <View style={styles.handle} />
          
          {/* 图标和标题 */}
          <View style={styles.header}>
            <View style={styles.iconContainer}>
              <Ionicons name="sparkles" size={24} color="#8B5CF6" />
            </View>
            <Text style={styles.title}>{t('medications.aiSummaryInfo.title')}</Text>
          </View>

          {/* 介绍图片区域 */}
          <View style={styles.imageContainer}>
            <Image
              source={require('@/assets/images/medicine/medicine-ai-summary.png')}
              style={styles.introImage}
              contentFit='contain'
            />
            {/* 右上角查看大图提示按钮 */}
            <TouchableOpacity
              style={styles.viewImageButton}
              onPress={handleImagePreview}
              activeOpacity={0.8}
            >
              {isLiquidGlassAvailable() ? (
                <GlassView
                  style={styles.glassViewButton}
                  glassEffectStyle="clear"
                  tintColor="rgba(255, 255, 255, 0.3)"
                  isInteractive={true}
                >
                  <Ionicons name="expand-outline" size={16} color="#333" />
                </GlassView>
              ) : (
                <View style={[styles.glassViewButton, styles.fallbackViewButton]}>
                  <Ionicons name="expand-outline" size={16} color="#333" />
                </View>
              )}
            </TouchableOpacity>
          </View>

          {/* 功能介绍内容 */}
          <View style={styles.contentContainer}>
            <View style={styles.featureItem}>
              <View style={styles.featureIcon}>
                <Ionicons name="analytics" size={20} color="#8B5CF6" />
              </View>
              <View style={styles.featureContent}>
                <Text style={styles.featureTitle}>{t('medications.aiSummaryInfo.features.intelligent.title')}</Text>
                <Text style={styles.featureDescription}>
                  {t('medications.aiSummaryInfo.features.intelligent.description')}
                </Text>
              </View>
            </View>

            <View style={styles.featureItem}>
              <View style={styles.featureIcon}>
                <Ionicons name="time" size={20} color="#8B5CF6" />
              </View>
              <View style={styles.featureContent}>
                <Text style={styles.featureTitle}>{t('medications.aiSummaryInfo.features.tracking.title')}</Text>
                <Text style={styles.featureDescription}>
                  {t('medications.aiSummaryInfo.features.tracking.description')}
                </Text>
              </View>
            </View>

            <View style={styles.featureItem}>
              <View style={styles.featureIcon}>
                <Ionicons name="shield-checkmark" size={20} color="#8B5CF6" />
              </View>
              <View style={styles.featureContent}>
                <Text style={styles.featureTitle}>{t('medications.aiSummaryInfo.features.professional.title')}</Text>
                <Text style={styles.featureDescription}>
                  {t('medications.aiSummaryInfo.features.professional.description')}
                </Text>
              </View>
            </View>
          </View>

          {/* 确认按钮 - 支持 Liquid Glass */}
          <View style={styles.actions}>
            <TouchableOpacity
              activeOpacity={0.9}
              onPress={handleConfirm}
              disabled={loading}
            >
              {isLiquidGlassAvailable() ? (
                <GlassView
                  style={styles.confirmButton}
                  glassEffectStyle="regular"
                  tintColor="rgba(139, 92, 246, 0.8)"
                  isInteractive={true}
                >
                  {loading ? (
                    <ActivityIndicator size="small" color="#fff" />
                  ) : (
                    <>
                      <Ionicons name="arrow-forward" size={20} color="#fff" />
                      <Text style={styles.confirmText}>{t('medications.aiSummaryInfo.confirmButton')}</Text>
                    </>
                  )}
                </GlassView>
              ) : (
                <View style={[styles.confirmButton, styles.fallbackButton]}>
                  {loading ? (
                    <ActivityIndicator size="small" color="#fff" />
                  ) : (
                    <>
                      <Ionicons name="arrow-forward" size={20} color="#fff" />
                      <Text style={styles.confirmText}>{t('medications.aiSummaryInfo.confirmButton')}</Text>
                    </>
                  )}
                </View>
              )}
            </TouchableOpacity>
          </View>
        </Animated.View>
      </View>
      
      {/* 图片预览 */}
      <ImageViewing
        images={[imageSource]}
        imageIndex={0}
        visible={showImagePreview}
        onRequestClose={() => setShowImagePreview(false)}
        swipeToCloseEnabled={true}
        doubleTapToZoomEnabled={true}
        FooterComponent={() => (
          <View style={styles.imageViewerFooter}>
            <TouchableOpacity
              style={styles.imageViewerFooterButton}
              onPress={() => setShowImagePreview(false)}
            >
              <Text style={styles.imageViewerFooterButtonText}>{t('medications.detail.imageViewer.close')}</Text>
            </TouchableOpacity>
          </View>
        )}
      />
    </Modal>
  );
}

const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    justifyContent: 'flex-end',
    backgroundColor: 'transparent',
  },
  backdrop: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(15, 23, 42, 0.45)',
  },
  sheet: {
    backgroundColor: '#fff',
    borderTopLeftRadius: 28,
    borderTopRightRadius: 28,
    paddingHorizontal: 24,
    paddingTop: 16,
    shadowColor: '#000',
    shadowOpacity: 0.12,
    shadowRadius: 16,
    shadowOffset: { width: 0, height: -4 },
    elevation: 16,
    gap: 20,
  },
  handle: {
    width: 50,
    height: 4,
    borderRadius: 2,
    backgroundColor: '#E5E7EB',
    alignSelf: 'center',
    marginBottom: 8,
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12,
  },
  iconContainer: {
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: '#F3E8FF',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 20,
    fontWeight: '700',
    color: '#111827',
  },
  imageContainer: {
    width: '100%',
    height: 380,
    borderRadius: 16,
    overflow: 'hidden',
    backgroundColor: '#F9FAFB',
  },
  introImage: {
    width: '100%',
    height: '100%',
    borderRadius: 16,
  },
  contentContainer: {
    gap: 16,
    paddingVertical: 8,
  },
  featureItem: {
    flexDirection: 'row',
    gap: 12,
    alignItems: 'flex-start',
  },
  featureIcon: {
    width: 36,
    height: 36,
    borderRadius: 18,
    backgroundColor: '#F3E8FF',
    alignItems: 'center',
    justifyContent: 'center',
  },
  featureContent: {
    flex: 1,
  },
  featureTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: '#111827',
    marginBottom: 4,
  },
  featureDescription: {
    fontSize: 14,
    lineHeight: 20,
    color: '#6B7280',
  },
  actions: {
    marginTop: 8,
  },
  confirmButton: {
    height: 56,
    borderRadius: 18,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 8,
    overflow: 'hidden', // 保证玻璃边界圆角效果
  },
  fallbackButton: {
    backgroundColor: '#8B5CF6',
    shadowColor: 'rgba(139, 92, 246, 0.45)',
    shadowOffset: { width: 0, height: 10 },
    shadowOpacity: 1,
    shadowRadius: 20,
    elevation: 6,
  },
  confirmText: {
    fontSize: 16,
    fontWeight: '700',
    color: '#fff',
  },
  // 图片预览相关样式
  viewImageButton: {
    position: 'absolute',
    top: 12,
    right: 12,
    zIndex: 1,
  },
  glassViewButton: {
    width: 32,
    height: 32,
    borderRadius: 16,
    alignItems: 'center',
    justifyContent: 'center',
    overflow: 'hidden',
  },
  fallbackViewButton: {
    borderWidth: 1,
    borderColor: 'rgba(0, 0, 0, 0.1)',
    backgroundColor: 'rgba(255, 255, 255, 0.8)',
  },
  imageViewerFooter: {
    position: 'absolute',
    bottom: 60,
    left: 20,
    right: 20,
    alignItems: 'center',
    zIndex: 1,
  },
  imageViewerFooterButton: {
    backgroundColor: 'rgba(0, 0, 0, 0.7)',
    paddingHorizontal: 24,
    paddingVertical: 12,
    borderRadius: 20,
  },
  imageViewerFooterButtonText: {
    color: '#FFF',
    fontSize: 16,
    fontWeight: '500',
  },
});