import { MedicalRecordCard } from '@/components/health/MedicalRecordCard';
import { palette } from '@/constants/Colors';
import { useAppDispatch, useAppSelector } from '@/hooks/redux';
import { useCosUpload } from '@/hooks/useCosUpload';
import { MedicalRecordItem, MedicalRecordType } from '@/services/healthProfile';
import {
  addNewMedicalRecord,
  deleteMedicalRecordItem,
  fetchMedicalRecords,
  selectHealthLoading,
  selectMedicalRecords,
} from '@/store/healthSlice';
import { Ionicons } from '@expo/vector-icons';
import dayjs from 'dayjs';
import * as DocumentPicker from 'expo-document-picker';
import { Image } from 'expo-image';
import * as ImagePicker from 'expo-image-picker';
import { LinearGradient } from 'expo-linear-gradient';
import React, { useEffect, useState } from 'react';
import {
  ActivityIndicator,
  Alert,
  FlatList,
  Modal,
  Platform,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from 'react-native';
import ImageViewing from 'react-native-image-viewing';
import DateTimePickerModal from 'react-native-modal-datetime-picker';

export function MedicalRecordsTab() {
  const dispatch = useAppDispatch();
  const medicalRecords = useAppSelector(selectMedicalRecords);
  const records = medicalRecords?.records || [];
  const prescriptions = medicalRecords?.prescriptions || [];
  const isLoading = useAppSelector(selectHealthLoading);
  
  // COS 上传
  const { upload: uploadToCos, uploading: isUploading } = useCosUpload({ 
    prefix: 'images/health/medical-records' 
  });
  
  const [activeTab, setActiveTab] = useState<MedicalRecordType>('medical_record');
  const [isModalVisible, setModalVisible] = useState(false);
  const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
  
  // Form State
  const [title, setTitle] = useState('');
  const [date, setDate] = useState(new Date());
  const [images, setImages] = useState<string[]>([]);
  const [note, setNote] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);

  // Image Viewer State
  const [viewerVisible, setViewerVisible] = useState(false);
  const [currentViewerImages, setCurrentViewerImages] = useState<{ uri: string }[]>([]);

  useEffect(() => {
    dispatch(fetchMedicalRecords());
  }, [dispatch]);

  const currentList = activeTab === 'medical_record' ? records : prescriptions;

  const handleTabPress = (tab: MedicalRecordType) => {
    setActiveTab(tab);
  };

  const resetForm = () => {
    setTitle('');
    setDate(new Date());
    setImages([]);
    setNote('');
  };

  const openAddModal = () => {
    resetForm();
    setModalVisible(true);
  };

  const handlePickImage = async () => {
    const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
    if (status !== 'granted') {
      Alert.alert('需要权限', '请允许访问相册以上传图片');
      return;
    }

    const result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: true,
      quality: 0.8,
    });

    if (!result.canceled && result.assets && result.assets.length > 0) {
      setImages([...images, result.assets[0].uri]);
    }
  };

  const handleTakePhoto = async () => {
    const { status } = await ImagePicker.requestCameraPermissionsAsync();
    if (status !== 'granted') {
      Alert.alert('需要权限', '请允许访问相机以拍摄照片');
      return;
    }

    const result = await ImagePicker.launchCameraAsync({
      allowsEditing: true,
      quality: 0.8,
    });

    if (!result.canceled && result.assets && result.assets.length > 0) {
      setImages([...images, result.assets[0].uri]);
    }
  };

  const handlePickDocument = async () => {
    try {
      const result = await DocumentPicker.getDocumentAsync({
        type: ['application/pdf', 'image/*'],
        copyToCacheDirectory: true,
        multiple: false,
      });

      if (!result.canceled && result.assets && result.assets.length > 0) {
        setImages([...images, result.assets[0].uri]);
      }
    } catch (error) {
      console.error('Error picking document:', error);
      Alert.alert('错误', '选择文件失败');
    }
  };

  const handleSubmit = async () => {
    if (!title.trim()) {
      Alert.alert('提示', '请输入标题');
      return;
    }
    if (images.length === 0) {
      Alert.alert('提示', '请至少上传一张图片');
      return;
    }

    setIsSubmitting(true);
    try {
      // 1. 上传所有图片到 COS
      const uploadPromises = images.map(async (uri) => {
        const result = await uploadToCos({ uri });
        return result.url;
      });
      
      const uploadedUrls = await Promise.all(uploadPromises);
      
      // 2. 创建就医资料记录
      await dispatch(addNewMedicalRecord({
        type: activeTab,
        title: title.trim(),
        date: dayjs(date).format('YYYY-MM-DD'),
        images: uploadedUrls,
        note: note.trim() || undefined,
      })).unwrap();
      
      setModalVisible(false);
      resetForm();
    } catch (error: any) {
      console.error('保存失败:', error);
      const errorMessage = error?.message || '保存失败，请重试';
      Alert.alert('错误', errorMessage);
    } finally {
      setIsSubmitting(false);
    }
  };

  const handleDelete = (item: MedicalRecordItem) => {
    Alert.alert(
      '确认删除',
      '确定要删除这条记录吗？',
      [
        { text: '取消', style: 'cancel' },
        {
          text: '删除',
          style: 'destructive',
          onPress: () => dispatch(deleteMedicalRecordItem({ id: item.id, type: item.type })),
        },
      ]
    );
  };

  const handleViewImages = (item: MedicalRecordItem) => {
    if (item.images && item.images.length > 0) {
      setCurrentViewerImages(item.images.map(uri => ({ uri })));
      setViewerVisible(true);
    }
  };

  const renderItem = ({ item }: { item: MedicalRecordItem }) => (
    <MedicalRecordCard 
      item={item} 
      onPress={handleViewImages} 
      onDelete={handleDelete} 
    />
  );

  return (
    <View style={styles.container}>
      {/* Segmented Control */}
      <View style={styles.segmentContainer}>
        <TouchableOpacity
          style={[styles.segmentButton, activeTab === 'medical_record' && styles.segmentButtonActive]}
          onPress={() => handleTabPress('medical_record')}
          activeOpacity={0.8}
        >
          <Text style={[styles.segmentText, activeTab === 'medical_record' && styles.segmentTextActive]}>
            病历资料
          </Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={[styles.segmentButton, activeTab === 'prescription' && styles.segmentButtonActive]}
          onPress={() => handleTabPress('prescription')}
          activeOpacity={0.8}
        >
          <Text style={[styles.segmentText, activeTab === 'prescription' && styles.segmentTextActive]}>
            处方单据
          </Text>
        </TouchableOpacity>
      </View>

      {/* Content List */}
      <View style={styles.contentContainer}>
        {isLoading && records.length === 0 && prescriptions.length === 0 ? (
          <View style={styles.loadingContainer}>
            <ActivityIndicator size="large" color={palette.purple[500]} />
          </View>
        ) : currentList.length > 0 ? (
          <FlatList
            data={currentList}
            renderItem={renderItem}
            keyExtractor={(item) => item.id}
            showsVerticalScrollIndicator={false}
            contentContainerStyle={styles.listContent}
            scrollEnabled={false} // Since it's inside a parent ScrollView
          />
        ) : (
          <View style={styles.emptyState}>
            <View style={styles.emptyIconContainer}>
              <Ionicons 
                name={activeTab === 'medical_record' ? "folder-open-outline" : "receipt-outline"} 
                size={48} 
                color={palette.gray[300]} 
              />
            </View>
            <Text style={styles.emptyText}>
              {activeTab === 'medical_record' ? '暂无病历资料' : '暂无处方单据'}
            </Text>
            <Text style={styles.emptySubtext}>
              {activeTab === 'medical_record' ? '上传您的检查报告、诊断证明等' : '上传您的处方单、用药清单等'}
            </Text>
          </View>
        )}
      </View>

      {/* Add Button */}
      <TouchableOpacity 
        style={styles.fab} 
        onPress={openAddModal}
        activeOpacity={0.9}
      >
        <LinearGradient
          colors={[palette.purple[500], palette.purple[700]]}
          style={styles.fabGradient}
          start={{ x: 0, y: 0 }}
          end={{ x: 1, y: 1 }}
        >
          <Ionicons name="add" size={28} color="#FFFFFF" />
        </LinearGradient>
      </TouchableOpacity>

      {/* Add/Edit Modal */}
      <Modal
        visible={isModalVisible}
        animationType="slide"
        presentationStyle="pageSheet"
        onRequestClose={() => setModalVisible(false)}
      >
        <View style={styles.modalContainer}>
          <View style={styles.modalHeader}>
            <TouchableOpacity onPress={() => setModalVisible(false)} style={styles.modalCloseButton}>
              <Text style={styles.modalCloseText}>取消</Text>
            </TouchableOpacity>
            <Text style={styles.modalTitle}>
              {activeTab === 'medical_record' ? '添加病历' : '添加处方'}
            </Text>
            <TouchableOpacity 
              onPress={handleSubmit} 
              style={[styles.modalSaveButton, (isSubmitting || isUploading) && styles.modalSaveButtonDisabled]}
              disabled={isSubmitting || isUploading}
            >
              {(isSubmitting || isUploading) ? (
                <ActivityIndicator size="small" color="#FFFFFF" />
              ) : (
                <Text style={styles.modalSaveText}>保存</Text>
              )}
            </TouchableOpacity>
          </View>

          <View style={styles.formContainer}>
            {/* Title Input */}
            <View style={styles.inputGroup}>
              <Text style={styles.label}>标题 <Text style={styles.required}>*</Text></Text>
              <TextInput
                style={styles.input}
                placeholder={activeTab === 'medical_record' ? "例如：血常规检查" : "例如：感冒药处方"}
                value={title}
                onChangeText={setTitle}
                placeholderTextColor={palette.gray[400]}
              />
            </View>

            {/* Date Picker */}
            <View style={styles.inputGroup}>
              <Text style={styles.label}>日期</Text>
              <TouchableOpacity 
                style={styles.dateInput} 
                onPress={() => setDatePickerVisibility(true)}
              >
                <Text style={styles.dateText}>{dayjs(date).format('YYYY年MM月DD日')}</Text>
                <Ionicons name="calendar-outline" size={20} color={palette.gray[500]} />
              </TouchableOpacity>
            </View>

            {/* Images */}
            <View style={styles.inputGroup}>
              <Text style={styles.label}>图片资料 <Text style={styles.required}>*</Text></Text>
              <View style={styles.imageGrid}>
                {images.map((uri, index) => {
                  const isPdf = uri.toLowerCase().endsWith('.pdf');
                  return (
                    <View key={index} style={styles.imagePreviewContainer}>
                      {isPdf ? (
                        <View style={[styles.imagePreview, styles.pdfPreview]}>
                          <Ionicons name="document-text" size={32} color="#EF4444" />
                          <Text style={styles.pdfText} numberOfLines={1}>PDF</Text>
                        </View>
                      ) : (
                        <Image 
                          source={{ uri }} 
                          style={styles.imagePreview} 
                          contentFit="cover"
                        />
                      )}
                      <TouchableOpacity 
                        style={styles.removeImageButton}
                        onPress={() => setImages(images.filter((_, i) => i !== index))}
                      >
                        <Ionicons name="close-circle" size={20} color={palette.error[500]} />
                      </TouchableOpacity>
                    </View>
                  );
                })}
                
                {images.length < 9 && (
                  <TouchableOpacity style={styles.addImageButton} onPress={() => {
                    Alert.alert(
                      '上传文件',
                      '请选择上传方式',
                      [
                        { text: '拍照', onPress: handleTakePhoto },
                        { text: '从相册选择', onPress: handlePickImage },
                        { text: '选择文档 (PDF)', onPress: handlePickDocument },
                        { text: '取消', style: 'cancel' },
                      ]
                    );
                  }}>
                    <Ionicons name="add" size={32} color={palette.purple[500]} />
                    <Text style={styles.addImageText}>上传</Text>
                  </TouchableOpacity>
                )}
              </View>
            </View>
            
            {/* Note */}
            <View style={styles.inputGroup}>
              <Text style={styles.label}>备注</Text>
              <TextInput
                style={[styles.input, styles.textArea]}
                placeholder="添加备注信息..."
                value={note}
                onChangeText={setNote}
                multiline
                numberOfLines={4}
                placeholderTextColor={palette.gray[400]}
                textAlignVertical="top"
              />
            </View>

          </View>
        </View>

        <DateTimePickerModal
          isVisible={isDatePickerVisible}
          mode="date"
          onConfirm={(d) => {
            setDate(d);
            setDatePickerVisibility(false);
          }}
          onCancel={() => setDatePickerVisibility(false)}
          maximumDate={new Date()}
          locale="zh_CN"
          confirmTextIOS="确定"
          cancelTextIOS="取消"
        />
      </Modal>

      <ImageViewing
        images={currentViewerImages}
        imageIndex={0}
        visible={viewerVisible}
        onRequestClose={() => setViewerVisible(false)}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  segmentContainer: {
    flexDirection: 'row',
    backgroundColor: '#F3F4F6',
    borderRadius: 12,
    padding: 4,
    marginBottom: 16,
  },
  segmentButton: {
    flex: 1,
    paddingVertical: 10,
    alignItems: 'center',
    borderRadius: 10,
  },
  segmentButtonActive: {
    backgroundColor: '#FFFFFF',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.05,
    shadowRadius: 2,
    elevation: 1,
  },
  segmentText: {
    fontSize: 14,
    fontWeight: '500',
    color: '#6B7280',
    fontFamily: 'AliRegular',
  },
  segmentTextActive: {
    color: palette.purple[600],
    fontWeight: '600',
    fontFamily: 'AliBold',
  },
  contentContainer: {
    minHeight: 300,
  },
  loadingContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingVertical: 40,
  },
  listContent: {
    paddingBottom: 80,
  },
  emptyState: {
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 40,
    paddingHorizontal: 40,
  },
  emptyIconContainer: {
    width: 80,
    height: 80,
    borderRadius: 40,
    backgroundColor: '#F9FAFB',
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 16,
  },
  emptyText: {
    fontSize: 16,
    fontWeight: '600',
    color: '#374151',
    marginBottom: 8,
    fontFamily: 'AliBold',
  },
  emptySubtext: {
    fontSize: 13,
    color: '#9CA3AF',
    textAlign: 'center',
    lineHeight: 20,
    fontFamily: 'AliRegular',
  },
  fab: {
    position: 'absolute',
    right: 16,
    bottom: 16,
    width: 56,
    height: 56,
    borderRadius: 28,
    shadowColor: palette.purple[500],
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.3,
    shadowRadius: 8,
    elevation: 6,
  },
  fabGradient: {
    width: '100%',
    height: '100%',
    borderRadius: 28,
    alignItems: 'center',
    justifyContent: 'center',
  },
  // Modal Styles
  modalContainer: {
    flex: 1,
    backgroundColor: '#F9FAFB',
  },
  modalHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: 16,
    paddingVertical: 12,
    backgroundColor: '#FFFFFF',
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: '#E5E7EB',
    paddingTop: Platform.OS === 'ios' ? 12 : 12,
  },
  modalCloseButton: {
    padding: 8,
  },
  modalCloseText: {
    fontSize: 16,
    color: '#6B7280',
    fontFamily: 'AliRegular',
  },
  modalTitle: {
    fontSize: 17,
    fontWeight: '600',
    color: '#111827',
    fontFamily: 'AliBold',
  },
  modalSaveButton: {
    paddingHorizontal: 12,
    paddingVertical: 6,
    backgroundColor: palette.purple[600],
    borderRadius: 6,
  },
  modalSaveButtonDisabled: {
    opacity: 0.6,
  },
  modalSaveText: {
    fontSize: 14,
    fontWeight: '600',
    color: '#FFFFFF',
    fontFamily: 'AliBold',
  },
  formContainer: {
    padding: 16,
  },
  inputGroup: {
    marginBottom: 20,
  },
  label: {
    fontSize: 14,
    fontWeight: '500',
    color: '#374151',
    marginBottom: 8,
    fontFamily: 'AliRegular',
  },
  required: {
    color: palette.error[500],
  },
  input: {
    backgroundColor: '#FFFFFF',
    borderRadius: 12,
    paddingHorizontal: 12,
    paddingVertical: 12,
    fontSize: 16,
    color: '#111827',
    borderWidth: 1,
    borderColor: '#E5E7EB',
    fontFamily: 'AliRegular',
  },
  textArea: {
    height: 100,
    textAlignVertical: 'top',
  },
  dateInput: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
    borderRadius: 12,
    paddingHorizontal: 12,
    paddingVertical: 12,
    borderWidth: 1,
    borderColor: '#E5E7EB',
  },
  dateText: {
    fontSize: 16,
    color: '#111827',
    fontFamily: 'AliRegular',
  },
  imageGrid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 12,
  },
  imagePreviewContainer: {
    width: 80,
    height: 80,
    borderRadius: 8,
    overflow: 'hidden',
    position: 'relative',
  },
  imagePreview: {
    width: '100%',
    height: '100%',
  },
  pdfPreview: {
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#F3F4F6',
  },
  pdfText: {
    fontSize: 10,
    marginTop: 4,
    color: '#EF4444',
    fontWeight: '600',
  },
  removeImageButton: {
    position: 'absolute',
    top: 2,
    right: 2,
    backgroundColor: 'rgba(255,255,255,0.8)',
    borderRadius: 10,
  },
  addImageButton: {
    width: 80,
    height: 80,
    borderRadius: 8,
    borderWidth: 1,
    borderColor: palette.purple[200],
    borderStyle: 'dashed',
    backgroundColor: palette.purple[50],
    alignItems: 'center',
    justifyContent: 'center',
  },
  addImageText: {
    fontSize: 12,
    color: palette.purple[600],
    marginTop: 4,
    fontFamily: 'AliRegular',
  },
});