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

const CTA_GRADIENT: [string, string] = ['#5E8BFF', '#6B6CFF'];
const CTA_DISABLED_GRADIENT: [string, string] = ['#d3d7e8', '#c1c6da'];

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 { t } = useI18n();
  const [foodName, setFoodName] = useState('');
  const [defaultAmount, setDefaultAmount] = useState('100');
  const [caloriesUnit, setCaloriesUnit] = useState(t('createCustomFood.units.kcal'));
  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(t('createCustomFood.units.kcal'));
      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(
          t('createCustomFood.alerts.permissionDenied.title'),
          t('createCustomFood.alerts.permissionDenied.message')
        );
        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(
            t('createCustomFood.alerts.uploadFailed.title'),
            t('createCustomFood.alerts.uploadFailed.message')
          );
        }
      }
    } catch (e) {
      Alert.alert(
        t('createCustomFood.alerts.error.title'),
        t('createCustomFood.alerts.error.message')
      );
    }
  };

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

  // 保存自定义食物
  const handleSave = () => {
    if (!foodName.trim()) {
      Alert.alert(
        t('createCustomFood.alerts.validation.title'),
        t('createCustomFood.alerts.validation.nameRequired')
      );
      return;
    }

    if (!calories.trim() || parseFloat(calories) <= 0) {
      Alert.alert(
        t('createCustomFood.alerts.validation.title'),
        t('createCustomFood.alerts.validation.caloriesRequired')
      );
      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();
  };

  const isSaveDisabled = !foodName.trim() || !calories.trim();

  return (
    <Modal
      visible={visible}
      animationType="slide"
      transparent={true}
      onRequestClose={onClose}
      presentationStyle="overFullScreen"
    >
      <BlurView intensity={20} tint="dark" style={styles.overlay}>
        <KeyboardAvoidingView
          behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
          style={styles.keyboardAvoidingView}
        >
          <TouchableOpacity activeOpacity={1} onPress={onClose} style={styles.dismissArea} />
          <View
            style={[
              styles.modalContainer,
              keyboardHeight > 0 && {
                height: screenHeight - keyboardHeight - 60,
                maxHeight: screenHeight - keyboardHeight - 60,
              },
            ]}
          >
            <View style={styles.modalHeaderBar}>
              <View style={styles.dragIndicator} />
            </View>
            <ScrollView
              style={styles.scrollView}
              showsVerticalScrollIndicator={false}
              keyboardShouldPersistTaps="handled"
              contentContainerStyle={{
                flexGrow: 1,
                paddingBottom: keyboardHeight > 0 ? 20 : 40,
              }}
            >
              {/* 头部 */}
              <View style={styles.header}>
                <TouchableOpacity onPress={onClose} style={styles.backButton} activeOpacity={0.7}>
                  <Ionicons name="close-circle" size={32} color="#E2E8F0" />
                </TouchableOpacity>
                <Text style={styles.headerTitle}>{t('createCustomFood.title')}</Text>
                <TouchableOpacity
                  style={[styles.saveButton, isSaveDisabled && styles.saveButtonDisabled]}
                  onPress={handleSave}
                  disabled={isSaveDisabled}
                  activeOpacity={0.8}
                >
                  <LinearGradient
                    colors={isSaveDisabled ? CTA_DISABLED_GRADIENT : CTA_GRADIENT}
                    start={{ x: 0, y: 0 }}
                    end={{ x: 1, y: 1 }}
                    style={styles.saveButtonGradient}
                  >
                    <Text style={styles.saveButtonText}>{t('createCustomFood.save')}</Text>
                  </LinearGradient>
                </TouchableOpacity>
              </View>

              {/* 效果预览区域 */}
              <View style={styles.previewSection}>
                <View style={styles.previewCard}>
                  <LinearGradient
                    colors={['#ffffff', '#F8F9FF']}
                    start={{ x: 0, y: 0 }}
                    end={{ x: 0, y: 1 }}
                    style={StyleSheet.absoluteFill}
                  />
                  <View style={styles.previewHeader}>
                    <Text style={styles.sectionTitle}>{t('createCustomFood.preview.title')}</Text>
                  </View>
                  <View style={styles.previewContent}>
                    <View style={styles.imageWrapper}>
                      {imageUrl ? (
                        <Image style={styles.previewImage} source={{ uri: imageUrl }} />
                      ) : (
                        <View style={styles.previewImagePlaceholder}>
                          <Ionicons name="restaurant" size={24} color="#94A3B8" />
                        </View>
                      )}
                    </View>
                    <View style={styles.previewInfo}>
                      <Text style={styles.previewName} numberOfLines={1}>
                        {foodName || t('createCustomFood.preview.defaultName')}
                      </Text>
                      <View style={styles.previewBadge}>
                        <Ionicons name="flame" size={14} color="#F59E0B" />
                        <Text style={styles.previewCalories}>
                          {actualCalories} {caloriesUnit} / {defaultAmount}
                          {t('createCustomFood.units.g')}
                        </Text>
                      </View>
                    </View>
                  </View>
                </View>
              </View>

              {/* 基本信息 */}
              <View style={styles.section}>
                <View style={styles.sectionHeader}>
                  <Text style={styles.sectionTitle}>{t('createCustomFood.basicInfo.title')}</Text>
                  <Text style={styles.requiredIndicator}>*</Text>
                </View>
                <View style={styles.sectionCard}>
                  {/* 食物名称 */}
                  <View style={styles.inputRowContainer}>
                    <Text style={styles.inputRowLabel}>{t('createCustomFood.basicInfo.name')}</Text>
                    <View style={styles.inputRowContent}>
                      <View style={styles.modernInputContainer}>
                        <TextInput
                          style={styles.modernNumberInput}
                          value={foodName}
                          onChangeText={setFoodName}
                          placeholder={t('createCustomFood.basicInfo.namePlaceholder')}
                          placeholderTextColor="#94A3B8"
                        />
                      </View>
                    </View>
                  </View>

                  {/* 默认数量 */}
                  <View style={styles.inputRowContainer}>
                    <Text style={styles.inputRowLabel}>{t('createCustomFood.basicInfo.defaultAmount')}</Text>
                    <View style={styles.inputRowContent}>
                      <View style={styles.modernInputContainer}>
                        <TextInput
                          style={styles.modernNumberInput}
                          value={defaultAmount}
                          onChangeText={setDefaultAmount}
                          keyboardType="numeric"
                          placeholder="100"
                          placeholderTextColor="#94A3B8"
                        />
                        <Text style={styles.unitText}>{t('createCustomFood.units.g')}</Text>
                      </View>
                    </View>
                  </View>

                  {/* 食物热量 */}
                  <View style={[styles.inputRowContainer, { marginBottom: 0 }]}>
                    <Text style={styles.inputRowLabel}>{t('createCustomFood.basicInfo.calories')}</Text>
                    <View style={styles.inputRowContent}>
                      <View style={styles.modernInputContainer}>
                        <TextInput
                          style={styles.modernNumberInput}
                          value={calories}
                          onChangeText={setCalories}
                          keyboardType="numeric"
                          placeholder="0"
                          placeholderTextColor="#94A3B8"
                        />
                        <Text style={styles.unitText}>{t('createCustomFood.units.kcal')}</Text>
                      </View>
                    </View>
                  </View>
                </View>
              </View>

              {/* 可选信息 */}
              <View style={styles.section}>
                <Text style={styles.sectionTitle}>{t('createCustomFood.optionalInfo.title')}</Text>
                <View style={styles.sectionCard}>
                  {/* 照片 */}
                  <View style={styles.inputRowContainer}>
                    <Text style={styles.inputRowLabel}>{t('createCustomFood.optionalInfo.photo')}</Text>
                    <View style={styles.inputRowContent}>
                      <TouchableOpacity
                        style={styles.modernImageSelector}
                        onPress={handleSelectImage}
                        disabled={uploading}
                        activeOpacity={0.8}
                      >
                        {imageUrl ? (
                          <Image style={styles.selectedImage} source={{ uri: imageUrl }} />
                        ) : (
                          <View style={styles.modernImagePlaceholder}>
                            <Ionicons name="camera-outline" size={28} color="#94A3B8" />
                            <Text style={styles.imagePlaceholderText}>
                              {t('createCustomFood.optionalInfo.addPhoto')}
                            </Text>
                          </View>
                        )}
                        {uploading && (
                          <View style={styles.imageLoadingOverlay}>
                            <ActivityIndicator size="large" color="#FFFFFF" />
                          </View>
                        )}
                      </TouchableOpacity>
                    </View>
                  </View>

                  {/* 蛋白质 */}
                  <View style={styles.inputRowContainer}>
                    <Text style={styles.inputRowLabel}>{t('createCustomFood.optionalInfo.protein')}</Text>
                    <View style={styles.inputRowContent}>
                      <View style={styles.modernInputContainer}>
                        <TextInput
                          style={styles.modernNumberInput}
                          value={protein}
                          onChangeText={setProtein}
                          keyboardType="numeric"
                          placeholder="0"
                          placeholderTextColor="#94A3B8"
                        />
                        <Text style={styles.unitText}>{t('createCustomFood.units.gram')}</Text>
                      </View>
                    </View>
                  </View>

                  {/* 脂肪 */}
                  <View style={styles.inputRowContainer}>
                    <Text style={styles.inputRowLabel}>{t('createCustomFood.optionalInfo.fat')}</Text>
                    <View style={styles.inputRowContent}>
                      <View style={styles.modernInputContainer}>
                        <TextInput
                          style={styles.modernNumberInput}
                          value={fat}
                          onChangeText={setFat}
                          keyboardType="numeric"
                          placeholder="0"
                          placeholderTextColor="#94A3B8"
                        />
                        <Text style={styles.unitText}>{t('createCustomFood.units.gram')}</Text>
                      </View>
                    </View>
                  </View>

                  {/* 碳水化合物 */}
                  <View style={[styles.inputRowContainer, { marginBottom: 0 }]}>
                    <Text style={styles.inputRowLabel}>
                      {t('createCustomFood.optionalInfo.carbohydrate')}
                    </Text>
                    <View style={styles.inputRowContent}>
                      <View style={styles.modernInputContainer}>
                        <TextInput
                          style={styles.modernNumberInput}
                          value={carbohydrate}
                          onChangeText={setCarbohydrate}
                          keyboardType="numeric"
                          placeholder="0"
                          placeholderTextColor="#94A3B8"
                        />
                        <Text style={styles.unitText}>{t('createCustomFood.units.gram')}</Text>
                      </View>
                    </View>
                  </View>
                </View>
              </View>
            </ScrollView>
          </View>
        </KeyboardAvoidingView>
      </BlurView>
    </Modal>
  );
}

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

const styles = StyleSheet.create({
  overlay: {
    flex: 1,
  },
  keyboardAvoidingView: {
    flex: 1,
    justifyContent: 'flex-end',
  },
  dismissArea: {
    flex: 1,
  },
  modalContainer: {
    backgroundColor: '#F1F5F9', // Slate 100
    borderTopLeftRadius: 32,
    borderTopRightRadius: 32,
    height: '90%',
    maxHeight: '90%',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: -4,
    },
    shadowOpacity: 0.1,
    shadowRadius: 12,
    elevation: 20,
    overflow: 'hidden',
  },
  modalHeaderBar: {
    width: '100%',
    height: 24,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#F1F5F9',
  },
  dragIndicator: {
    width: 40,
    height: 4,
    backgroundColor: '#CBD5E1',
    borderRadius: 2,
  },
  scrollView: {
    flex: 1,
    backgroundColor: '#F1F5F9',
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 20,
    paddingBottom: 20,
  },
  backButton: {
    padding: 4,
    marginLeft: -8,
  },
  headerTitle: {
    fontSize: 20,
    fontWeight: '800',
    color: '#1E293B',
    textAlign: 'center',
    fontFamily: 'AliBold',
  },
  saveButton: {
    borderRadius: 20,
    overflow: 'hidden',
  },
  saveButtonDisabled: {
    opacity: 0.6,
  },
  saveButtonGradient: {
    paddingHorizontal: 16,
    paddingVertical: 8,
    borderRadius: 20,
  },
  saveButtonText: {
    fontSize: 14,
    color: '#FFFFFF',
    fontWeight: '700',
    fontFamily: 'AliBold',
  },
  previewSection: {
    paddingHorizontal: 20,
    marginBottom: 24,
  },
  previewCard: {
    borderRadius: 24,
    padding: 20,
    overflow: 'hidden',
    backgroundColor: '#FFFFFF',
    shadowColor: 'rgba(30, 41, 59, 0.08)',
    shadowOffset: { width: 0, height: 8 },
    shadowOpacity: 0.4,
    shadowRadius: 12,
    elevation: 4,
    borderWidth: 1,
    borderColor: 'rgba(255,255,255,0.6)',
  },
  previewHeader: {
    marginBottom: 16,
  },
  previewContent: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  imageWrapper: {
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.1,
    shadowRadius: 8,
    elevation: 4,
  },
  previewImage: {
    width: 56,
    height: 56,
    borderRadius: 16,
    backgroundColor: '#F8FAFC',
  },
  previewImagePlaceholder: {
    width: 56,
    height: 56,
    borderRadius: 16,
    backgroundColor: '#F1F5F9',
    alignItems: 'center',
    justifyContent: 'center',
    borderWidth: 1,
    borderColor: '#E2E8F0',
  },
  previewInfo: {
    flex: 1,
    marginLeft: 16,
    justifyContent: 'center',
  },
  previewName: {
    fontSize: 18,
    fontWeight: '700',
    color: '#1E293B',
    marginBottom: 6,
    fontFamily: 'AliBold',
  },
  previewBadge: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#FFFBEB',
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: 8,
    alignSelf: 'flex-start',
    gap: 4,
  },
  previewCalories: {
    fontSize: 13,
    color: '#D97706',
    fontWeight: '600',
    fontFamily: 'AliRegular',
  },
  section: {
    paddingHorizontal: 20,
    marginBottom: 24,
  },
  sectionHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 12,
    paddingHorizontal: 4,
  },
  sectionTitle: {
    fontSize: 14,
    fontWeight: '700',
    color: '#64748B',
    fontFamily: 'AliBold',
    textTransform: 'uppercase',
    letterSpacing: 0.5,
  },
  requiredIndicator: {
    fontSize: 14,
    color: '#EF4444',
    marginLeft: 4,
    fontWeight: '700',
  },
  sectionCard: {
    backgroundColor: '#FFFFFF',
    borderRadius: 24,
    padding: 20,
    shadowColor: 'rgba(30, 41, 59, 0.05)',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.5,
    shadowRadius: 10,
    elevation: 2,
  },
  inputRowContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 16,
  },
  inputRowLabel: {
    fontSize: 15,
    color: '#475569',
    fontWeight: '600',
    width: 90,
    marginRight: 12,
    fontFamily: 'AliRegular',
  },
  inputRowContent: {
    flex: 1,
  },
  modernInputContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    borderRadius: 16,
    backgroundColor: '#F8FAFC',
    borderWidth: 1,
    borderColor: '#E2E8F0',
    overflow: 'hidden',
  },
  modernNumberInput: {
    flex: 1,
    paddingHorizontal: 16,
    paddingVertical: 12,
    fontSize: 16,
    color: '#1E293B',
    textAlign: 'right',
    fontFamily: 'AliRegular',
  },
  unitText: {
    fontSize: 14,
    color: '#94A3B8',
    paddingRight: 16,
    minWidth: 40,
    textAlign: 'center',
    fontWeight: '500',
  },
  modernImageSelector: {
    alignSelf: 'flex-end',
    borderRadius: 20,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.05,
    shadowRadius: 4,
    elevation: 2,
  },
  selectedImage: {
    width: 72,
    height: 72,
    borderRadius: 20,
  },
  modernImagePlaceholder: {
    width: 72,
    height: 72,
    borderRadius: 20,
    backgroundColor: '#F8FAFC',
    alignItems: 'center',
    justifyContent: 'center',
    borderWidth: 1,
    borderColor: '#E2E8F0',
    borderStyle: 'dashed',
  },
  imagePlaceholderText: {
    fontSize: 11,
    color: '#94A3B8',
    marginTop: 4,
    fontWeight: '600',
    textAlign: 'center',
  },
  imageLoadingOverlay: {
    ...StyleSheet.absoluteFillObject,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(0,0,0,0.3)',
    borderRadius: 20,
  },
});