import { Ionicons } from '@expo/vector-icons';
import { Image } from 'expo-image';
import * as ImagePicker from 'expo-image-picker';
import React, { useEffect, useMemo, useState } from 'react';
import {
  ActivityIndicator,
  Alert,
  Dimensions,
  Keyboard,
  KeyboardAvoidingView,
  Modal,
  Platform,
  ScrollView,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View
} from 'react-native';
import { useAppSelector } from '@/hooks/redux';
import { useCosUpload } from '@/hooks/useCosUpload';
import { Colors } from '@/constants/Colors';

export interface CreateCustomFoodModalProps {
  visible: boolean;
  onClose: () => void;
  onSave: (foodData: CustomFoodData) => void;
}

export interface CustomFoodData {
  name: string;
  defaultAmount: number;
  caloriesUnit: string;
  calories: number;
  imageUrl?: string;
  protein?: number;
  fat?: number;
  carbohydrate?: number;
}

export function CreateCustomFoodModal({
  visible,
  onClose,
  onSave
}: CreateCustomFoodModalProps) {
  const [foodName, setFoodName] = useState('');
  const [defaultAmount, setDefaultAmount] = useState('100');
  const [caloriesUnit, setCaloriesUnit] = useState('千卡');
  const [calories, setCalories] = useState('100');
  const [imageUrl, setImageUrl] = useState<string>('');
  const [protein, setProtein] = useState('0');
  const [fat, setFat] = useState('0');
  const [carbohydrate, setCarbohydrate] = useState('0');
  const [keyboardHeight, setKeyboardHeight] = useState(0);

  // 获取用户ID和上传功能
  const accountProfile = useAppSelector((s) => (s as any)?.user?.profile as any);
  const userId: string | undefined = useMemo(() => {
    return (
      accountProfile?.userId ||
      accountProfile?.id ||
      accountProfile?._id ||
      accountProfile?.uid ||
      undefined
    ) as string | undefined;
  }, [accountProfile]);

  const { upload, uploading } = useCosUpload();

  // 键盘监听
  useEffect(() => {
    const keyboardDidShowListener = Keyboard.addListener(
      Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow',
      (e) => {
        setKeyboardHeight(e.endCoordinates.height);
      }
    );
    const keyboardDidHideListener = Keyboard.addListener(
      Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide',
      () => {
        setKeyboardHeight(0);
      }
    );

    return () => {
      keyboardDidShowListener?.remove();
      keyboardDidHideListener?.remove();
    };
  }, []);

  // 重置表单
  useEffect(() => {
    if (visible) {
      setFoodName('');
      setDefaultAmount('100');
      setCaloriesUnit('千卡');
      setCalories('100');
      setImageUrl('');
      setProtein('0');
      setFat('0');
      setCarbohydrate('0');
    }
  }, [visible]);

  // 选择热量单位


  // 选择图片
  const handleSelectImage = async () => {
    try {
      const resp = await ImagePicker.requestMediaLibraryPermissionsAsync();
      const libGranted = resp.status === 'granted' || (resp as any).accessPrivileges === 'limited';
      if (!libGranted) {
        Alert.alert('权限不足', '需要相册权限以选择照片');
        return;
      }
      
      const result = await ImagePicker.launchImageLibraryAsync({
        allowsEditing: true,
        quality: 0.9,
        aspect: [1, 1],
        mediaTypes: ['images'],
        base64: false,
      });
      
      if (!result.canceled) {
        const asset = result.assets?.[0];
        if (!asset?.uri) return;
        
        // 直接上传到 COS，成功后写入 URL
        try {
          const { url } = await upload(
            { uri: asset.uri, name: asset.fileName || 'food.jpg', type: asset.mimeType || 'image/jpeg' },
            { prefix: 'foods/', userId }
          );
          
          setImageUrl(url);
        } catch (e) {
          console.warn('上传照片失败', e);
          Alert.alert('上传失败', '照片上传失败，请重试');
        }
      }
    } catch (e) {
      Alert.alert('发生错误', '选择照片失败，请重试');
    }
  };

  // 计算实际热量预览
  const actualCalories = Math.round((parseFloat(calories) || 0) * (parseFloat(defaultAmount) || 0) / 100);

  // 保存自定义食物
  const handleSave = () => {
    if (!foodName.trim()) {
      Alert.alert('提示', '请输入食物名称');
      return;
    }

    if (!calories.trim() || parseFloat(calories) <= 0) {
      Alert.alert('提示', '请输入有效的热量值');
      return;
    }

    const foodData: CustomFoodData = {
      name: foodName.trim(),
      defaultAmount: parseFloat(defaultAmount) || 100,
      caloriesUnit,
      calories: parseFloat(calories) || 0,
      imageUrl: imageUrl || undefined,
      protein: parseFloat(protein) || undefined,
      fat: parseFloat(fat) || undefined,
      carbohydrate: parseFloat(carbohydrate) || undefined,
    };

    onSave(foodData);
    onClose();
  };

  return (
    <Modal
      visible={visible}
      animationType="fade"
      transparent={true}
      onRequestClose={onClose}
      presentationStyle="overFullScreen"
    >
      <View style={styles.overlay}>
        <KeyboardAvoidingView
          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
          style={styles.keyboardAvoidingView}
        >
          <View style={[
            styles.modalContainer,
            keyboardHeight > 0 && {
              height: screenHeight - keyboardHeight,
              maxHeight: screenHeight - keyboardHeight,
            }
          ]}>
            <ScrollView
              style={styles.scrollView}
              showsVerticalScrollIndicator={false}
              keyboardShouldPersistTaps="handled"
              contentContainerStyle={{
                flexGrow: 1,
                paddingBottom: keyboardHeight > 0 ? 20 : 0
              }}
            >
              {/* 头部 */}
              <View style={styles.header}>
                <TouchableOpacity onPress={onClose} style={styles.backButton}>
                  <Ionicons name="chevron-back" size={24} color="#333" />
                </TouchableOpacity>
                <Text style={styles.headerTitle}>创建自定义食物</Text>
                <TouchableOpacity
                  style={[
                    styles.saveButton,
                    (!foodName.trim() || !calories.trim()) && styles.saveButtonDisabled
                  ]}
                  onPress={handleSave}
                  disabled={!foodName.trim() || !calories.trim()}
                >
                  <Text style={[
                    styles.saveButtonText,
                    (!foodName.trim() || !calories.trim()) && styles.saveButtonTextDisabled
                  ]}>保存</Text>
                </TouchableOpacity>
              </View>

              {/* 效果预览区域 */}
              <View style={styles.previewSection}>
                <Text style={styles.sectionTitle}>效果预览</Text>
                <View style={styles.previewCard}>
                  <View style={styles.previewContent}>
                    {imageUrl ? (
                      <Image style={styles.previewImage} source={{ uri: imageUrl }} />
                    ) : (
                      <View style={styles.previewImagePlaceholder}>
                        <Ionicons name="restaurant" size={20} color="#999" />
                      </View>
                    )}
                    <View style={styles.previewInfo}>
                      <Text style={styles.previewName}>
                        {foodName || '食物名称'}
                      </Text>
                      <Text style={styles.previewCalories}>
                        {actualCalories}{caloriesUnit}/{defaultAmount}g
                      </Text>
                    </View>
                  </View>
                </View>
              </View>

              {/* 基本信息 */}
              <View style={styles.section}>
                <View style={styles.sectionHeader}>
                  <Text style={styles.sectionTitle}>基本信息</Text>
                  <Text style={styles.requiredIndicator}>*</Text>
                </View>
                <View style={styles.sectionCard}>
                  {/* 食物名称和单位 */}
                  <View style={styles.inputRowContainer}>
                    <Text style={styles.inputRowLabel}>食物名称</Text>
                    <View style={styles.inputRowContent}>
                      <View style={styles.numberInputContainer}>
                        <TextInput
                          style={styles.modernNumberInput}
                          value={foodName}
                          onChangeText={setFoodName}
                          placeholder="例如，汉堡"
                          placeholderTextColor="#A0A0A0"
                        />
                      </View>
                    </View>
                  </View>

                  {/* 默认数量 */}
                  <View style={styles.inputRowContainer}>
                    <Text style={styles.inputRowLabel}>默认数量</Text>
                    <View style={styles.inputRowContent}>
                      <View style={styles.numberInputContainer}>
                        <TextInput
                          style={styles.modernNumberInput}
                          value={defaultAmount}
                          onChangeText={setDefaultAmount}
                          keyboardType="numeric"
                          placeholder="100"
                          placeholderTextColor="#A0A0A0"
                        />
                        <Text style={styles.unitText}>g</Text>
                      </View>
                    </View>
                  </View>

                  {/* 食物热量 */}
                  <View style={[styles.inputRowContainer, { marginBottom: 0 }]}>
                    <Text style={styles.inputRowLabel}>食物热量</Text>
                    <View style={styles.inputRowContent}>
                      <View style={styles.numberInputContainer}>
                        <TextInput
                          style={styles.modernNumberInput}
                          value={calories}
                          onChangeText={setCalories}
                          keyboardType="numeric"
                          placeholder="100"
                          placeholderTextColor="#A0A0A0"
                        />
                        <Text style={styles.unitText}>千卡</Text>
                      </View>
                    </View>
                  </View>
                </View>
              </View>

              {/* 可选信息 */}
              <View style={styles.section}>
                <Text style={styles.sectionTitle}>可选信息</Text>
                <View style={styles.sectionCard}>
                  {/* 照片 */}
                  <View style={styles.inputRowContainer}>
                    <Text style={styles.inputRowLabel}>照片</Text>
                    <View style={styles.inputRowContent}>
                      <TouchableOpacity 
                        style={styles.modernImageSelector} 
                        onPress={handleSelectImage}
                        disabled={uploading}
                      >
                        {imageUrl ? (
                          <Image style={styles.selectedImage} source={{ uri: imageUrl }} />
                        ) : (
                          <View style={styles.modernImagePlaceholder}>
                            <Ionicons name="camera" size={28} color="#A0A0A0" />
                            <Text style={styles.imagePlaceholderText}>添加照片</Text>
                          </View>
                        )}
                        {uploading && (
                          <View style={styles.imageLoadingOverlay}>
                            <ActivityIndicator size="large" color="#FFFFFF" />
                          </View>
                        )}
                      </TouchableOpacity>
                    </View>
                  </View>

                  {/* 蛋白质 */}
                  <View style={styles.inputRowContainer}>
                    <Text style={styles.inputRowLabel}>蛋白质</Text>
                    <View style={styles.inputRowContent}>
                      <View style={styles.numberInputContainer}>
                        <TextInput
                          style={styles.modernNumberInput}
                          value={protein}
                          onChangeText={setProtein}
                          keyboardType="numeric"
                          placeholder="0"
                          placeholderTextColor="#A0A0A0"
                        />
                        <Text style={styles.unitText}>克</Text>
                      </View>
                    </View>
                  </View>

                  {/* 脂肪 */}
                  <View style={styles.inputRowContainer}>
                    <Text style={styles.inputRowLabel}>脂肪</Text>
                    <View style={styles.inputRowContent}>
                      <View style={styles.numberInputContainer}>
                        <TextInput
                          style={styles.modernNumberInput}
                          value={fat}
                          onChangeText={setFat}
                          keyboardType="numeric"
                          placeholder="0"
                          placeholderTextColor="#A0A0A0"
                        />
                        <Text style={styles.unitText}>克</Text>
                      </View>
                    </View>
                  </View>

                  {/* 碳水化合物 */}
                  <View style={[styles.inputRowContainer, { marginBottom: 0 }]}>
                    <Text style={styles.inputRowLabel}>碳水化合物</Text>
                    <View style={styles.inputRowContent}>
                      <View style={styles.numberInputContainer}>
                        <TextInput
                          style={styles.modernNumberInput}
                          value={carbohydrate}
                          onChangeText={setCarbohydrate}
                          keyboardType="numeric"
                          placeholder="0"
                          placeholderTextColor="#A0A0A0"
                        />
                        <Text style={styles.unitText}>克</Text>
                      </View>
                    </View>
                  </View>
                </View>
              </View>
            </ScrollView>
          </View>
        </KeyboardAvoidingView>
      </View>
    </Modal>
  );
}

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

const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
  },
  keyboardAvoidingView: {
    flex: 1,
  },
  modalContainer: {
    flex: 1,
    backgroundColor: '#FFFFFF',
    marginTop: 50,
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
  },
  scrollView: {
    flex: 1,
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 16,
    paddingVertical: 16,
  },
  backButton: {
    padding: 4,
  },
  headerTitle: {
    fontSize: 18,
    fontWeight: '600',
    color: '#333',
    flex: 1,
    textAlign: 'center',
    marginHorizontal: 20,
  },
  saveButton: {
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderRadius: 16,
  },
  saveButtonDisabled: {
    opacity: 0.5,
  },
  saveButtonText: {
    fontSize: 16,
    color: Colors.light.primary,
    fontWeight: '500',
  },
  saveButtonTextDisabled: {
    color: Colors.light.textMuted,
  },
  previewSection: {
    paddingHorizontal: 16,
    paddingBottom: 16,
  },
  previewCard: {
    backgroundColor: '#F8F9FA',
    borderRadius: 12,
    padding: 16,
    marginTop: 8,
  },
  previewContent: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  previewImage: {
    width: 32,
    height: 32,
    borderRadius: 4,
  },
  previewImagePlaceholder: {
    width: 32,
    height: 32,
    borderRadius: 4,
    backgroundColor: '#E5E5E5',
    alignItems: 'center',
    justifyContent: 'center',
  },
  previewInfo: {
    flex: 1,
    marginLeft: 12,
  },
  previewName: {
    fontSize: 16,
    fontWeight: '500',
    color: '#333',
    marginBottom: 2,
  },
  previewCalories: {
    fontSize: 14,
    color: '#666',
  },
  section: {
    paddingHorizontal: 16,
    paddingVertical: 12,
  },
  sectionHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 4,

  },
  sectionTitle: {
    fontSize: 14,
    color: '#333',
    marginLeft: 8
  },
  requiredIndicator: {
    fontSize: 16,
    color: '#FF4444',
    marginLeft: 4,
  },
  inputGroup: {
    marginBottom: 20,
  },
  inputRowGroup: {
    flexDirection: 'row',
    gap: 12,
    marginBottom: 20,
  },
  inputRowItem: {
    flex: 1,
  },
  inputLabel: {
    fontSize: 14,
    color: '#666',
    fontWeight: '500',
  },
  modernTextInput: {
    flex: 1,
    borderRadius: 12,
    paddingHorizontal: 12,
    paddingVertical: 8,
    fontSize: 16,
    marginLeft: 20,
    color: '#333',
    backgroundColor: '#FFFFFF',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.05,
    shadowRadius: 2,
    elevation: 1,
  },
  numberInputContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    borderRadius: 12,

    backgroundColor: '#FFFFFF',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.05,
    shadowRadius: 2,
    elevation: 1,
  },
  modernNumberInput: {
    flex: 1,
    paddingHorizontal: 12,
    paddingVertical: 8,
    fontSize: 16,
    color: '#333',
    textAlign: 'right',
  },
  unitText: {
    fontSize: 14,
    color: '#666',
    paddingRight: 16,
    minWidth: 40,
    textAlign: 'center',
  },
  modernSelectButton: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    borderWidth: 1.5,
    borderColor: '#E8E8E8',
    borderRadius: 12,
    paddingHorizontal: 16,
    paddingVertical: 14,
    backgroundColor: '#FFFFFF',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.05,
    shadowRadius: 2,
    elevation: 1,
  },
  selectButtonText: {
    fontSize: 14,
    color: 'gray',
    fontWeight: '500',
  },
  modernImageSelector: {
    alignSelf: 'flex-end',
    borderRadius: 16,
    overflow: 'hidden',
  },
  selectedImage: {
    width: 80,
    height: 80,
    borderRadius: 16,
  },
  modernImagePlaceholder: {
    width: 80,
    height: 80,
    borderRadius: 16,
    backgroundColor: '#F8F8F8',
    alignItems: 'center',
    justifyContent: 'center',
    borderWidth: 1.5,
    borderColor: '#E8E8E8',
    borderStyle: 'dashed',
  },
  imagePlaceholderText: {
    fontSize: 12,
    color: '#A0A0A0',
    marginTop: 4,
    fontWeight: '500',
  },
  nutritionRow: {
    flexDirection: 'row',
    gap: 12,
    marginBottom: 20,
  },
  nutritionItem: {
    flex: 1,
  },
  // 保留旧样式以防兼容性问题
  textInput: {
    borderWidth: 1,
    borderColor: '#E5E5E5',
    borderRadius: 8,
    paddingHorizontal: 12,
    paddingVertical: 12,
    fontSize: 16,
    color: '#333',
    backgroundColor: '#FFFFFF',
  },
  numberInput: {
    flex: 1,
    borderWidth: 1,
    borderColor: '#E5E5E5',
    borderRadius: 8,
    paddingHorizontal: 12,
    paddingVertical: 12,
    fontSize: 16,
    color: '#333',
    backgroundColor: '#FFFFFF',
    textAlign: 'right',
  },
  inputWithUnit: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  inputUnit: {
    fontSize: 16,
    color: '#666',
    minWidth: 30,
  },
  selectButton: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    borderWidth: 1,
    borderColor: '#E5E5E5',
    borderRadius: 8,
    paddingHorizontal: 12,
    paddingVertical: 12,
    backgroundColor: '#FFFFFF',
  },
  imageSelector: {
    alignSelf: 'flex-end',
    borderRadius: 12,
    overflow: 'hidden',
  },
  imagePlaceholder: {
    width: 60,
    height: 60,
    borderRadius: 12,
    backgroundColor: '#F0F0F0',
    alignItems: 'center',
    justifyContent: 'center',
    borderWidth: 1,
    borderColor: '#E5E5E5',
  },
  disclaimer: {
    paddingHorizontal: 16,
    paddingVertical: 20,
    paddingBottom: 40,
  },
  disclaimerText: {
    fontSize: 12,
    color: '#999',
    lineHeight: 18,
  },
  sectionCard: {
    backgroundColor: '#F8F9FA',
    borderRadius: 12,
    padding: 16,
    marginTop: 8,
  },
  // 新增行布局样式
  inputRowContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 20,
  },
  inputRowLabel: {
    fontSize: 14,
    color: '#666',
    fontWeight: '500',
    width: 80,
    marginRight: 12,
  },
  inputRowContent: {
    flex: 1,
  },
  imageLoadingOverlay: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(0,0,0,0.5)',
    borderRadius: 16,
  },
});