import { HeaderBar } from '@/components/ui/HeaderBar';
import { Colors } from '@/constants/Colors';
import { useAuthGuard } from '@/hooks/useAuthGuard';
import { useColorScheme } from '@/hooks/useColorScheme';
import { useI18n } from '@/hooks/useI18n';
import { Ionicons } from '@expo/vector-icons';
import { CameraType, CameraView, useCameraPermissions } from 'expo-camera';
import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
import { Image } from 'expo-image';
import * as ImagePicker from 'expo-image-picker';
import { LinearGradient } from 'expo-linear-gradient';
import { useLocalSearchParams, useRouter } from 'expo-router';
import React, { useMemo, useRef, useState } from 'react';
import {
  ActivityIndicator,
  Alert,
  Dimensions,
  Modal,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

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

export default function FoodCameraScreen() {
  const { t } = useI18n();
  const insets = useSafeAreaInsets();
  const router = useRouter();
  const params = useLocalSearchParams<{ mealType?: string }>();
  const cameraRef = useRef<CameraView>(null);
  const { ensureLoggedIn } = useAuthGuard();
  const scheme = (useColorScheme() ?? 'light') as keyof typeof Colors;
  const colors = Colors[scheme];

  const [currentMealType, setCurrentMealType] = useState<MealType>(
    (params.mealType as MealType) || 'dinner'
  );
  const [facing, setFacing] = useState<CameraType>('back');
  const [permission, requestPermission] = useCameraPermissions();
  const [showInstructionModal, setShowInstructionModal] = useState(false);
  const [isCapturing, setIsCapturing] = useState(false);

  // 餐次选择选项
  const mealOptions = [
    { key: 'breakfast' as const, label: t('nutritionRecords.mealTypes.breakfast'), icon: '☀️' },
    { key: 'lunch' as const, label: t('nutritionRecords.mealTypes.lunch'), icon: '🌤️' },
    { key: 'dinner' as const, label: t('nutritionRecords.mealTypes.dinner'), icon: '🌙' },
    { key: 'snack' as const, label: t('nutritionRecords.mealTypes.snack'), icon: '🍎' },
  ];

  // 计算固定的相机高度
  const cameraHeight = useMemo(() => {
    const { height: screenHeight } = Dimensions.get('window');
    
    // 计算固定占用的高度
    const headerHeight = insets.top + 40; // HeaderBar 高度
    const topMetaHeight = 12 + 28 + 26 + 16 + 6; // topMeta 区域
    const shotsRowHeight = 12 + 88; // MealType 区域
    const bottomBarHeight = 12 + 86 + 10 + Math.max(insets.bottom, 20); // bottomBar 区域
    const margins = 12 + 12; // cameraCard 的上下边距
    
    // 可用于相机的高度
    const availableHeight = screenHeight - headerHeight - topMetaHeight - shotsRowHeight - bottomBarHeight - margins;
    
    // 确保最小高度为 300，最大不超过屏幕的 55%
    return Math.max(300, Math.min(availableHeight, screenHeight * 0.55));
  }, [insets.top, insets.bottom]);

  if (!permission) {
    return (
      <View style={styles.container}>
        <LinearGradient colors={['#fefefe', '#f4f7fb']} style={StyleSheet.absoluteFill} />
        <HeaderBar
          title={t('foodCamera.title')}
          onBack={() => router.back()}
          transparent={true}
        />
        <View style={[styles.loadingContainer, { paddingTop: insets.top + 40 }]}>
          <ActivityIndicator size="large" color={colors.primary} />
        </View>
      </View>
    );
  }

  if (!permission.granted) {
    return (
      <View style={[styles.container, { backgroundColor: '#f8fafc' }]}>
        <HeaderBar
          title={t('foodCamera.title')}
          onBack={() => router.back()}
          transparent
        />
        <View style={[styles.permissionCard, { marginTop: insets.top + 60 }]}>
          <Ionicons name="camera-outline" size={64} color="#94a3b8" style={{ marginBottom: 20 }} />
          <Text style={styles.permissionTitle}>
            {t('foodCamera.permission.title')}
          </Text>
          <Text style={styles.permissionTip}>
            {t('foodCamera.permission.description')}
          </Text>
          <TouchableOpacity
            style={[styles.permissionBtn, { backgroundColor: colors.primary }]}
            onPress={requestPermission}
          >
            <Text style={styles.permissionBtnText}>
              {t('foodCamera.permission.button')}
            </Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }

  // 切换相机前后摄像头
  function toggleCameraFacing() {
    setFacing(current => (current === 'back' ? 'front' : 'back'));
  }

  // 拍摄照片
  const takePicture = async () => {
    if (cameraRef.current && !isCapturing) {
      setIsCapturing(true);
      try {
        const photo = await cameraRef.current.takePictureAsync({
          quality: 0.8,
          base64: false,
        });

        if (photo) {
          console.log('照片拍摄成功:', photo.uri);
          const isLoggedIn = await ensureLoggedIn();
          if (isLoggedIn) {
            router.replace(`/food/food-recognition?imageUri=${encodeURIComponent(photo.uri)}&mealType=${currentMealType}`);
          }
        }
      } catch (error) {
        console.error('拍照失败:', error);
        Alert.alert(t('foodCamera.alerts.captureFailed.title'), t('foodCamera.alerts.captureFailed.message'));
      } finally {
        setIsCapturing(false);
      }
    }
  };

  // 从相册选择照片
  const pickImageFromGallery = async () => {
    try {
      const result = await ImagePicker.launchImageLibraryAsync({
        mediaTypes: ['images'],
        allowsEditing: true,
        aspect: [4, 3],
        quality: 0.8,
      });

      if (!result.canceled && result.assets[0]) {
        const imageUri = result.assets[0].uri;
        console.log('从相册选择的照片:', imageUri);
        const isLoggedIn = await ensureLoggedIn();
        if (isLoggedIn) {
          router.push(`/food/food-recognition?imageUri=${encodeURIComponent(imageUri)}&mealType=${currentMealType}`);
        }
      }
    } catch (error) {
      console.error('选择照片失败:', error);
      Alert.alert(t('foodCamera.alerts.pickFailed.title'), t('foodCamera.alerts.pickFailed.message'));
    }
  };

  // 餐次选择
  const handleMealTypeChange = (mealType: MealType) => {
    setCurrentMealType(mealType);
  };

  return (
    <View style={styles.container}>
      <LinearGradient colors={['#fefefe', '#f4f7fb']} style={StyleSheet.absoluteFill} />
      
      <HeaderBar
        title={t('foodCamera.title')}
        onBack={() => router.back()}
        transparent={true}
        right={
          <TouchableOpacity
            onPress={() => setShowInstructionModal(true)}
            activeOpacity={0.7}
          >
            {isLiquidGlassAvailable() ? (
              <GlassView
                style={styles.infoButton}
                glassEffectStyle="clear"
                tintColor="rgba(255, 255, 255, 0.3)"
                isInteractive={true}
              >
                <Ionicons name="help-circle-outline" size={24} color="#333" />
              </GlassView>
            ) : (
              <View style={[styles.infoButton, styles.fallbackInfoButton]}>
                <Ionicons name="help-circle-outline" size={24} color="#333" />
              </View>
            )}
          </TouchableOpacity>
        }
      />
      
      <View style={{ height: insets.top + 40 }} />

      {/* Top Meta Info */}
      <View style={styles.topMeta}>
        <View style={styles.metaBadge}>
          <Text style={styles.metaBadgeText}>{t('foodCamera.hint')}</Text>
        </View>
        <Text style={styles.metaTitle}>
          {t('nutritionRecords.listTitle')}
        </Text>
        <Text style={styles.metaSubtitle}>
          {t('foodCamera.guide.description')}
        </Text>
      </View>

      {/* Camera Card */}
      <View style={styles.cameraCard}>
        <View style={[styles.cameraFrame, { height: cameraHeight }]}>
          <CameraView
            ref={cameraRef}
            style={styles.cameraView}
            facing={facing}
          />
          <LinearGradient
            colors={['transparent', 'rgba(0,0,0,0.1)']}
            style={styles.cameraOverlay}
          />
          {/* Viewfinder Overlay */}
          <View style={styles.viewfinderOverlay}>
            <View style={[styles.corner, styles.topLeft]} />
            <View style={[styles.corner, styles.topRight]} />
            <View style={[styles.corner, styles.bottomLeft]} />
            <View style={[styles.corner, styles.bottomRight]} />
          </View>
        </View>
      </View>

      {/* Meal Type Selector (Replacing Shots Row) */}
      <View style={styles.shotsRow}>
        {mealOptions.map((option) => {
          const active = currentMealType === option.key;
          return (
            <TouchableOpacity
              key={option.key}
              onPress={() => handleMealTypeChange(option.key)}
              activeOpacity={0.7}
              style={[styles.shotCard, active && styles.shotCardActive]}
            >
              <Text style={styles.mealTypeIcon}>{option.icon}</Text>
              <Text style={[styles.shotLabel, active && styles.shotLabelActive]}>
                {option.label}
              </Text>
            </TouchableOpacity>
          );
        })}
      </View>

      {/* Bottom Actions */}
      <View style={[styles.bottomBar, { paddingBottom: Math.max(insets.bottom, 20) }]}>
        <View style={styles.bottomActions}>
          {/* Album Button */}
          <TouchableOpacity
            onPress={pickImageFromGallery}
            disabled={isCapturing}
            activeOpacity={0.7}
          >
            {isLiquidGlassAvailable() ? (
              <GlassView
                style={styles.secondaryBtn}
                glassEffectStyle="clear"
                tintColor="rgba(255, 255, 255, 0.6)"
                isInteractive={true}
              >
                <Ionicons name="images-outline" size={20} color="#0f172a" />
                <Text style={styles.secondaryBtnText}>
                  {t('foodCamera.buttons.album')}
                </Text>
              </GlassView>
            ) : (
              <View style={[styles.secondaryBtn, styles.fallbackSecondaryBtn]}>
                <Ionicons name="images-outline" size={20} color="#0f172a" />
                <Text style={styles.secondaryBtnText}>
                  {t('foodCamera.buttons.album')}
                </Text>
              </View>
            )}
          </TouchableOpacity>

          {/* Capture Button */}
          <TouchableOpacity
            onPress={takePicture}
            disabled={isCapturing}
            activeOpacity={0.8}
          >
            {isLiquidGlassAvailable() ? (
              <GlassView
                style={styles.captureBtn}
                glassEffectStyle="clear"
                tintColor="rgba(255, 255, 255, 0.8)"
                isInteractive={true}
              >
                <View style={styles.captureOuterRing}>
                  {isCapturing ? (
                    <ActivityIndicator color={colors.primary} />
                  ) : (
                    <View style={styles.captureInner} />
                  )}
                </View>
              </GlassView>
            ) : (
              <View style={[styles.captureBtn, styles.fallbackCaptureBtn]}>
                <View style={styles.captureOuterRing}>
                  {isCapturing ? (
                    <ActivityIndicator color={colors.primary} />
                  ) : (
                    <View style={styles.captureInner} />
                  )}
                </View>
              </View>
            )}
          </TouchableOpacity>

          {/* Flip Button */}
          <TouchableOpacity
            onPress={toggleCameraFacing}
            disabled={isCapturing}
            activeOpacity={0.7}
          >
             {isLiquidGlassAvailable() ? (
              <GlassView
                style={styles.secondaryBtn}
                glassEffectStyle="clear"
                tintColor="rgba(255, 255, 255, 0.6)"
                isInteractive={true}
              >
                <Ionicons name="camera-reverse-outline" size={20} color="#0f172a" />
                <Text style={styles.secondaryBtnText}>
                  {t('foodCamera.buttons.capture')}
                </Text>
              </GlassView>
            ) : (
              <View style={[styles.secondaryBtn, styles.fallbackSecondaryBtn]}>
                <Ionicons name="camera-reverse-outline" size={20} color="#0f172a" />
                <Text style={styles.secondaryBtnText}>
                  {t('foodCamera.buttons.capture')}
                </Text>
              </View>
            )}
          </TouchableOpacity>
        </View>
      </View>

      {/* Instruction Modal */}
      <Modal
        visible={showInstructionModal}
        animationType="fade"
        transparent={true}
        onRequestClose={() => setShowInstructionModal(false)}
      >
        <View style={styles.modalOverlay}>
          <View style={styles.instructionModal}>
            <Text style={styles.instructionTitle}>{t('foodCamera.guide.title')}</Text>

            <View style={styles.exampleContainer}>
              {/* Good Example */}
              <View style={styles.exampleItem}>
                <View style={styles.exampleImagePlaceholder}>
                  <View style={styles.checkmarkContainer}>
                    <Ionicons name="checkmark" size={20} color="#FFF" />
                  </View>
                  <Image
                    style={styles.exampleImage}
                    source={{ uri: 'https://plates-1251306435.cos.ap-guangzhou.myqcloud.com/images/function/food-right.jpeg' }}
                    contentFit="cover"
                    cachePolicy={'memory-disk'}
                  />
                </View>
                <Text style={styles.exampleText}>{t('foodCamera.guide.good')}</Text>
              </View>

              {/* Bad Example */}
              <View style={styles.exampleItem}>
                <View style={styles.exampleImagePlaceholder}>
                  <View style={styles.crossContainer}>
                    <Ionicons name="close" size={20} color="#FFF" />
                  </View>
                  <Image
                    style={styles.exampleImage}
                    source={{ uri: 'https://plates-1251306435.cos.ap-guangzhou.myqcloud.com/images/function/food-wrong.jpeg' }}
                    contentFit="cover"
                    cachePolicy={'memory-disk'}
                  />
                </View>
                <Text style={styles.exampleText}>{t('foodCamera.guide.bad')}</Text>
              </View>
            </View>

            <Text style={styles.instructionDescription}>
              {t('foodCamera.guide.description')}
            </Text>

            <TouchableOpacity
              style={styles.knowButton}
              onPress={() => setShowInstructionModal(false)}
            >
              <Text style={styles.knowButtonText}>{t('foodCamera.guide.button')}</Text>
            </TouchableOpacity>
          </View>
        </View>
      </Modal>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  loadingContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  topMeta: {
    paddingHorizontal: 20,
    paddingTop: 12,
    gap: 6,
  },
  metaBadge: {
    alignSelf: 'flex-start',
    backgroundColor: '#e0f2fe',
    paddingHorizontal: 10,
    paddingVertical: 6,
    borderRadius: 14,
  },
  metaBadgeText: {
    color: '#0369a1',
    fontWeight: '700',
    fontSize: 12,
  },
  metaTitle: {
    fontSize: 22,
    fontWeight: '700',
    color: '#0f172a',
  },
  metaSubtitle: {
    fontSize: 14,
    color: '#475569',
  },
  cameraCard: {
    marginHorizontal: 20,
    marginTop: 12,
    borderRadius: 24,
    overflow: 'hidden',
    shadowColor: '#0f172a',
    shadowOpacity: 0.12,
    shadowRadius: 18,
    shadowOffset: { width: 0, height: 10 },
  },
  cameraFrame: {
    borderRadius: 24,
    overflow: 'hidden',
    backgroundColor: '#0b172a',
    position: 'relative',
  },
  cameraView: {
    flex: 1,
  },
  cameraOverlay: {
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    height: 80,
  },
  viewfinderOverlay: {
    ...StyleSheet.absoluteFillObject,
    justifyContent: 'center',
    alignItems: 'center',
    margin: 20,
  },
  corner: {
    position: 'absolute',
    width: 30,
    height: 30,
    borderColor: 'rgba(255, 255, 255, 0.6)',
    borderWidth: 4,
    borderRadius: 2,
  },
  topLeft: {
    top: 0,
    left: 0,
    borderRightWidth: 0,
    borderBottomWidth: 0,
  },
  topRight: {
    top: 0,
    right: 0,
    borderLeftWidth: 0,
    borderBottomWidth: 0,
  },
  bottomLeft: {
    bottom: 0,
    left: 0,
    borderRightWidth: 0,
    borderTopWidth: 0,
  },
  bottomRight: {
    bottom: 0,
    right: 0,
    borderLeftWidth: 0,
    borderTopWidth: 0,
  },
  shotsRow: {
    flexDirection: 'row',
    paddingHorizontal: 20,
    paddingTop: 12,
    gap: 8,
    justifyContent: 'space-between',
  },
  shotCard: {
    flex: 1,
    borderRadius: 14,
    backgroundColor: '#f8fafc',
    paddingVertical: 12,
    gap: 6,
    borderWidth: 1,
    borderColor: '#e2e8f0',
    alignItems: 'center',
    justifyContent: 'center',
  },
  shotCardActive: {
    borderColor: '#38bdf8',
    backgroundColor: '#ecfeff',
  },
  mealTypeIcon: {
    fontSize: 20,
  },
  shotLabel: {
    fontSize: 12,
    color: '#475569',
    fontWeight: '600',
  },
  shotLabelActive: {
    color: '#0ea5e9',
  },
  bottomBar: {
    paddingHorizontal: 20,
    paddingTop: 12,
    gap: 10,
  },
  bottomActions: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  captureBtn: {
    width: 72,
    height: 72,
    borderRadius: 36,
    justifyContent: 'center',
    alignItems: 'center',
    overflow: 'hidden',
    shadowColor: '#0ea5e9',
    shadowOpacity: 0.25,
    shadowRadius: 12,
    shadowOffset: { width: 0, height: 6 },
  },
  fallbackCaptureBtn: {
    backgroundColor: 'rgba(255, 255, 255, 0.95)',
    borderWidth: 2,
    borderColor: 'rgba(14, 165, 233, 0.2)',
  },
  captureOuterRing: {
    width: 60,
    height: 60,
    borderRadius: 30,
    backgroundColor: 'rgba(255, 255, 255, 0.15)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  captureInner: {
    width: 48,
    height: 48,
    borderRadius: 24,
    backgroundColor: '#fff',
    shadowColor: '#0ea5e9',
    shadowOpacity: 0.4,
    shadowRadius: 6,
    shadowOffset: { width: 0, height: 2 },
  },
  secondaryBtn: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 6,
    paddingHorizontal: 16,
    paddingVertical: 12,
    borderRadius: 16,
    overflow: 'hidden',
    shadowColor: '#0f172a',
    shadowOpacity: 0.08,
    shadowRadius: 8,
    shadowOffset: { width: 0, height: 4 },
    minWidth: 88,
    justifyContent: 'center',
  },
  fallbackSecondaryBtn: {
    backgroundColor: 'rgba(255, 255, 255, 0.9)',
    borderWidth: 1,
    borderColor: 'rgba(15, 23, 42, 0.1)',
  },
  secondaryBtnText: {
    color: '#0f172a',
    fontWeight: '600',
    fontSize: 14,
  },
  infoButton: {
    width: 40,
    height: 40,
    borderRadius: 20,
    alignItems: 'center',
    justifyContent: 'center',
    overflow: 'hidden',
  },
  fallbackInfoButton: {
    backgroundColor: 'rgba(255, 255, 255, 0.9)',
    borderWidth: 1,
    borderColor: 'rgba(255, 255, 255, 0.3)',
  },
  permissionCard: {
    marginHorizontal: 24,
    borderRadius: 18,
    padding: 24,
    backgroundColor: '#fff',
    shadowColor: '#0f172a',
    shadowOpacity: 0.08,
    shadowRadius: 12,
    shadowOffset: { width: 0, height: 10 },
    alignItems: 'center',
    gap: 10,
  },
  permissionTitle: {
    fontSize: 18,
    fontWeight: '700',
    color: '#0f172a',
    marginBottom: 4,
  },
  permissionTip: {
    fontSize: 14,
    color: '#475569',
    textAlign: 'center',
    lineHeight: 20,
    marginBottom: 16,
  },
  permissionBtn: {
    borderRadius: 14,
    paddingHorizontal: 24,
    paddingVertical: 14,
    width: '100%',
    alignItems: 'center',
  },
  permissionBtnText: {
    color: '#fff',
    fontWeight: '700',
    fontSize: 16,
  },
  modalOverlay: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.7)',
    justifyContent: 'center',
    paddingHorizontal: 20,
  },
  instructionModal: {
    backgroundColor: '#FFF',
    borderRadius: 24,
    padding: 24,
    alignItems: 'center',
  },
  instructionTitle: {
    fontSize: 20,
    fontWeight: '700',
    color: '#0f172a',
    marginBottom: 24,
  },
  exampleContainer: {
    flexDirection: 'row',
    gap: 16,
    marginBottom: 24,
  },
  exampleItem: {
    flex: 1,
    alignItems: 'center',
    gap: 8,
  },
  exampleImagePlaceholder: {
    width: '100%',
    aspectRatio: 1,
    backgroundColor: '#F1F5F9',
    borderRadius: 16,
    overflow: 'hidden',
    position: 'relative',
  },
  exampleImage: {
    width: '100%',
    height: '100%',
  },
  exampleText: {
    fontSize: 13,
    color: '#64748b',
    fontWeight: '500',
  },
  checkmarkContainer: {
    position: 'absolute',
    top: 8,
    right: 8,
    width: 24,
    height: 24,
    borderRadius: 12,
    backgroundColor: '#22c55e',
    justifyContent: 'center',
    alignItems: 'center',
    zIndex: 10,
  },
  crossContainer: {
    position: 'absolute',
    top: 8,
    right: 8,
    width: 24,
    height: 24,
    borderRadius: 12,
    backgroundColor: '#ef4444',
    justifyContent: 'center',
    alignItems: 'center',
    zIndex: 10,
  },
  instructionDescription: {
    fontSize: 15,
    textAlign: 'center',
    color: '#334155',
    marginBottom: 24,
    lineHeight: 22,
  },
  knowButton: {
    backgroundColor: '#0f172a',
    borderRadius: 16,
    paddingVertical: 14,
    paddingHorizontal: 32,
    width: '100%',
  },
  knowButtonText: {
    color: '#FFF',
    fontSize: 16,
    fontWeight: '600',
    textAlign: 'center',
  },
});