import React, { useState, useMemo } from 'react';
import { View, ScrollView, TouchableOpacity, Modal, TextInput, Alert, Image } from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import { useTheme } from '@/hooks/useTheme';
import { Screen } from '@/components/Screen';
import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
import { FontAwesome6 } from '@expo/vector-icons';
import { createFormDataFile } from '@/utils';
import { createStyles } from './styles';

const MOCK_USER_ID = 'mock-user-001';

type MealType = 'breakfast' | 'lunch' | 'dinner' | 'snack';

interface RecognizedFood {
  foodName: string;
  weight: number;
  calories: number;
  imageUrl: string;
  imageKey: string;
}

export default function RecordScreen() {
  const { theme, isDark } = useTheme();
  const styles = useMemo(() => createStyles(theme), [theme]);

  const [modalVisible, setModalVisible] = useState(false);
  const [recognizedFood, setRecognizedFood] = useState<RecognizedFood | null>(null);
  const [manualFood, setManualFood] = useState({
    name: '',
    calories: '',
    weight: '',
    mealType: 'breakfast' as MealType,
  });
  const [recognizing, setRecognizing] = useState(false);
  const [saving, setSaving] = useState(false);
  const [imageUri, setImageUri] = useState<string | null>(null);

  // 请求相机权限
  const requestCameraPermission = async () => {
    const { status } = await ImagePicker.requestCameraPermissionsAsync();
    if (status !== 'granted') {
      Alert.alert('权限提示', '需要相机权限才能拍照识别食物');
      return false;
    }
    return true;
  };

  // 拍照
  const takePicture = async () => {
    const hasPermission = await requestCameraPermission();
    if (!hasPermission) return;

    try {
      const result = await ImagePicker.launchCameraAsync({
        mediaTypes: ['images'],
        allowsEditing: false,
        quality: 0.8,
      });

      if (!result.canceled && result.assets[0]) {
        setImageUri(result.assets[0].uri);
        await recognizeFood(result.assets[0].uri);
      }
    } catch (error) {
      console.error('Camera error:', error);
      Alert.alert('错误', '拍照失败，请重试');
    }
  };

  // 从相册选择
  const pickImage = async () => {
    try {
      const result = await ImagePicker.launchImageLibraryAsync({
        mediaTypes: ['images'],
        allowsEditing: false,
        quality: 0.8,
      });

      if (!result.canceled && result.assets[0]) {
        setImageUri(result.assets[0].uri);
        await recognizeFood(result.assets[0].uri);
      }
    } catch (error) {
      console.error('Image picker error:', error);
      Alert.alert('错误', '选择图片失败，请重试');
    }
  };

  // 识别食物
  const recognizeFood = async (uri: string) => {
    setRecognizing(true);
    try {
      const formData = new FormData();
      const file = await createFormDataFile(uri, 'food_photo.jpg', 'image/jpeg');
      formData.append('image', file as any);

      /**
       * 服务端文件：server/src/routes/food-records.ts
       * 接口：POST /api/v1/food-records/recognize
       * Body 参数：image: File (FormData)
       */
      const response = await fetch(
        `${process.env.EXPO_PUBLIC_BACKEND_BASE_URL}/api/v1/food-records/recognize`,
        {
          method: 'POST',
          body: formData,
        }
      );

      const data = await response.json();

      if (data.success) {
        setRecognizedFood(data.data);
        setManualFood({
          name: data.data.foodName,
          calories: data.data.calories.toString(),
          weight: data.data.weight.toString(),
          mealType: 'breakfast',
        });
        setModalVisible(true);
      } else {
        Alert.alert('识别失败', data.error || '无法识别食物，请重试');
      }
    } catch (error) {
      console.error('Recognition error:', error);
      Alert.alert('错误', '识别失败，请检查网络连接');
    } finally {
      setRecognizing(false);
    }
  };

  // 保存记录
  const saveRecord = async () => {
    if (!manualFood.name || !manualFood.calories || !manualFood.weight) {
      Alert.alert('提示', '请填写完整的食物信息');
      return;
    }

    setSaving(true);
    try {
      const recordData = {
        userId: MOCK_USER_ID,
        foodName: manualFood.name,
        calories: parseInt(manualFood.calories),
        weight: parseFloat(manualFood.weight),
        mealType: manualFood.mealType,
        recordedAt: new Date().toISOString(),
        imageUrl: recognizedFood?.imageUrl,
      };

      /**
       * 服务端文件：server/src/routes/food-records.ts
       * 接口：POST /api/v1/food-records
       * Body 参数：userId: string, foodName: string, calories: number, weight: number, mealType: string, recordedAt: string, imageUrl?: string
       */
      const response = await fetch(
        `${process.env.EXPO_PUBLIC_BACKEND_BASE_URL}/api/v1/food-records`,
        {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(recordData),
        }
      );

      const data = await response.json();

      if (data.success) {
        Alert.alert('成功', '记录已保存', [
          { text: '确定', onPress: () => resetForm() },
        ]);
      } else {
        Alert.alert('失败', data.error || '保存失败，请重试');
      }
    } catch (error) {
      console.error('Save error:', error);
      Alert.alert('错误', '保存失败，请检查网络连接');
    } finally {
      setSaving(false);
    }
  };

  const resetForm = () => {
    setModalVisible(false);
    setRecognizedFood(null);
    setImageUri(null);
    setManualFood({
      name: '',
      calories: '',
      weight: '',
      mealType: 'breakfast',
    });
  };

  const mealTypes: { key: MealType; label: string }[] = [
    { key: 'breakfast', label: '早餐' },
    { key: 'lunch', label: '午餐' },
    { key: 'dinner', label: '晚餐' },
    { key: 'snack', label: '加餐' },
  ];

  return (
    <Screen backgroundColor={theme.backgroundRoot} statusBarStyle={isDark ? 'light' : 'dark'}>
      <ScrollView contentContainerStyle={styles.scrollContent}>
        <ThemedText variant="h2" color={theme.textPrimary} style={styles.title}>
          记录食物
        </ThemedText>

        {/* 识别方式 */}
        <View style={styles.methodButtons}>
          <TouchableOpacity
            style={[styles.methodButton, styles.cameraButton]}
            onPress={takePicture}
            disabled={recognizing}
          >
            <FontAwesome6 name="camera" size={32} color={theme.buttonPrimaryText} />
            <ThemedText variant="smallMedium" color={theme.buttonPrimaryText} style={styles.buttonText}>
              {recognizing ? '识别中...' : '拍照识别'}
            </ThemedText>
          </TouchableOpacity>

          <TouchableOpacity
            style={[styles.methodButton, styles.galleryButton]}
            onPress={pickImage}
            disabled={recognizing}
          >
            <FontAwesome6 name="image" size={32} color={theme.buttonPrimaryText} />
            <ThemedText variant="smallMedium" color={theme.buttonPrimaryText} style={styles.buttonText}>
              {recognizing ? '识别中...' : '相册选择'}
            </ThemedText>
          </TouchableOpacity>
        </View>

        {/* 手动添加 */}
        <ThemedView level="root" style={styles.manualSection}>
          <ThemedText variant="h4" color={theme.textPrimary} style={styles.sectionTitle}>
            手动添加
          </ThemedText>

          <View style={styles.inputGroup}>
            <ThemedText variant="small" color={theme.textSecondary} style={styles.label}>
              食物名称
            </ThemedText>
            <TextInput
              style={styles.input}
              placeholder="输入食物名称"
              placeholderTextColor={theme.textMuted}
              value={manualFood.name}
              onChangeText={(text) => setManualFood({ ...manualFood, name: text })}
            />
          </View>

          <View style={styles.inputRow}>
            <View style={[styles.inputGroup, styles.halfInput]}>
              <ThemedText variant="small" color={theme.textSecondary} style={styles.label}>
                热量 (kcal)
              </ThemedText>
              <TextInput
                style={styles.input}
                placeholder="0"
                placeholderTextColor={theme.textMuted}
                value={manualFood.calories}
                onChangeText={(text) => setManualFood({ ...manualFood, calories: text })}
                keyboardType="numeric"
              />
            </View>

            <View style={[styles.inputGroup, styles.halfInput]}>
              <ThemedText variant="small" color={theme.textSecondary} style={styles.label}>
                重量 (g)
              </ThemedText>
              <TextInput
                style={styles.input}
                placeholder="0"
                placeholderTextColor={theme.textMuted}
                value={manualFood.weight}
                onChangeText={(text) => setManualFood({ ...manualFood, weight: text })}
                keyboardType="numeric"
              />
            </View>
          </View>

          <View style={styles.inputGroup}>
            <ThemedText variant="small" color={theme.textSecondary} style={styles.label}>
              餐次
            </ThemedText>
            <View style={styles.mealTypes}>
              {mealTypes.map((type) => (
                <TouchableOpacity
                  key={type.key}
                  style={[
                    styles.mealTypeButton,
                    manualFood.mealType === type.key && styles.mealTypeButtonActive,
                  ]}
                  onPress={() => setManualFood({ ...manualFood, mealType: type.key })}
                >
                  <ThemedText
                    variant="smallMedium"
                    color={manualFood.mealType === type.key ? theme.buttonPrimaryText : theme.textPrimary}
                  >
                    {type.label}
                  </ThemedText>
                </TouchableOpacity>
              ))}
            </View>
          </View>

          <TouchableOpacity
            style={[styles.saveButton, { opacity: saving ? 0.6 : 1 }]}
            onPress={saveRecord}
            disabled={saving}
          >
            <ThemedText variant="smallMedium" color={theme.buttonPrimaryText}>
              {saving ? '保存中...' : '保存记录'}
            </ThemedText>
          </TouchableOpacity>
        </ThemedView>
      </ScrollView>

      {/* 识别结果 Modal */}
      <Modal visible={modalVisible} transparent animationType="slide">
        <View style={styles.modalContainer}>
          <ThemedView level="default" style={styles.modalContent}>
            <View style={styles.modalHeader}>
              <ThemedText variant="h4" color={theme.textPrimary}>
                {recognizedFood ? '识别结果' : '确认信息'}
              </ThemedText>
              <TouchableOpacity onPress={resetForm}>
                <FontAwesome6 name="xmark" size={24} color={theme.textSecondary} />
              </TouchableOpacity>
            </View>

            <ScrollView style={styles.modalBody}>
              {imageUri && (
                <Image source={{ uri: imageUri }} style={styles.previewImage} />
              )}

              <View style={styles.resultItem}>
                <ThemedText variant="small" color={theme.textMuted}>
                  食物名称
                </ThemedText>
                <TextInput
                  style={styles.resultInput}
                  value={manualFood.name}
                  onChangeText={(text) => setManualFood({ ...manualFood, name: text })}
                />
              </View>

              <View style={styles.inputRow}>
                <View style={[styles.resultItem, styles.halfInput]}>
                  <ThemedText variant="small" color={theme.textMuted}>
                    热量
                  </ThemedText>
                  <TextInput
                    style={styles.resultInput}
                    value={manualFood.calories}
                    onChangeText={(text) => setManualFood({ ...manualFood, calories: text })}
                    keyboardType="numeric"
                  />
                </View>

                <View style={[styles.resultItem, styles.halfInput]}>
                  <ThemedText variant="small" color={theme.textMuted}>
                    重量 (g)
                  </ThemedText>
                  <TextInput
                    style={styles.resultInput}
                    value={manualFood.weight}
                    onChangeText={(text) => setManualFood({ ...manualFood, weight: text })}
                    keyboardType="numeric"
                  />
                </View>
              </View>
            </ScrollView>

            <View style={styles.modalFooter}>
              <TouchableOpacity
                style={[styles.modalButton, styles.cancelButton]}
                onPress={resetForm}
              >
                <ThemedText variant="smallMedium" color={theme.textSecondary}>
                  取消
                </ThemedText>
              </TouchableOpacity>

              <TouchableOpacity
                style={[styles.modalButton, styles.confirmButton]}
                onPress={saveRecord}
              >
                <ThemedText variant="smallMedium" color={theme.buttonPrimaryText}>
                  {saving ? '保存中...' : '确认保存'}
                </ThemedText>
              </TouchableOpacity>
            </View>
          </ThemedView>
        </View>
      </Modal>
    </Screen>
  );
}