import type { FoodItem } from '@/components/model/food/FoodDetailModal';
import { FoodDetailModal } from '@/components/model/food/FoodDetailModal';
import { Ionicons } from '@expo/vector-icons';
import { useLocalSearchParams, useRouter } from 'expo-router';
import React, { useState } from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from 'react-native';

// 食物分类类型
export interface FoodCategory {
  id: string;
  name: string;
  foods: FoodItem[];
}

// 模拟食物数据
const FOOD_DATA: FoodCategory[] = [
  {
    id: 'common',
    name: '常见',
    foods: [
      { id: '1', name: '无糖美式咖啡', emoji: '☕', calories: 1, unit: '100克' },
      { id: '2', name: '荷包蛋(油煎)', emoji: '🍳', calories: 195, unit: '100克' },
      { id: '3', name: '鸡蛋', emoji: '🥚', calories: 139, unit: '100克' },
      { id: '4', name: '香蕉', emoji: '🍌', calories: 93, unit: '100克' },
      { id: '5', name: '猕猴桃', emoji: '🥝', calories: 61, unit: '100克' },
      { id: '6', name: '苹果', emoji: '🍎', calories: 53, unit: '100克' },
      { id: '7', name: '草莓', emoji: '🍓', calories: 32, unit: '100克' },
      { id: '8', name: '蛋烧麦', emoji: '🥟', calories: 157, unit: '100克' },
      { id: '9', name: '米饭', emoji: '🍚', calories: 116, unit: '100克' },
      { id: '10', name: '鲜玉米', emoji: '🌽', calories: 112, unit: '100克' },
    ]
  },
  {
    id: 'custom',
    name: '自定义',
    foods: []
  },
  {
    id: 'favorite',
    name: '收藏',
    foods: []
  },
  {
    id: 'fruits',
    name: '水果蔬菜',
    foods: [
      { id: '11', name: '苹果', emoji: '🍎', calories: 53, unit: '100克' },
      { id: '12', name: '香蕉', emoji: '🍌', calories: 93, unit: '100克' },
      { id: '13', name: '草莓', emoji: '🍓', calories: 32, unit: '100克' },
      { id: '14', name: '猕猴桃', emoji: '🥝', calories: 61, unit: '100克' },
    ]
  },
  {
    id: 'meat',
    name: '肉蛋奶',
    foods: [
      { id: '15', name: '鸡蛋', emoji: '🥚', calories: 139, unit: '100克' },
      { id: '16', name: '荷包蛋(油煎)', emoji: '🍳', calories: 195, unit: '100克' },
    ]
  },
  {
    id: 'beans',
    name: '豆类坚果',
    foods: []
  },
  {
    id: 'drinks',
    name: '零食饮料',
    foods: [
      { id: '17', name: '无糖美式咖啡', emoji: '☕', calories: 1, unit: '100克' },
    ]
  },
  {
    id: 'staple',
    name: '主食',
    foods: [
      { id: '18', name: '米饭', emoji: '🍚', calories: 116, unit: '100克' },
      { id: '19', name: '鲜玉米', emoji: '🌽', calories: 112, unit: '100克' },
      { id: '20', name: '蛋烧麦', emoji: '🥟', calories: 157, unit: '100克' },
    ]
  },
  {
    id: 'vegetables',
    name: '菜肴',
    foods: []
  }
];

// 餐次映射
const MEAL_TYPE_MAP = {
  breakfast: '早餐',
  lunch: '午餐',
  dinner: '晚餐',
  snack: '加餐'
};

export default function FoodLibraryScreen() {
  const router = useRouter();
  const params = useLocalSearchParams<{ mealType?: string }>();
  const mealType = (params.mealType as 'breakfast' | 'lunch' | 'dinner' | 'snack') || 'breakfast';

  const [selectedCategoryId, setSelectedCategoryId] = useState('common');
  const [searchText, setSearchText] = useState('');
  const [selectedFood, setSelectedFood] = useState<FoodItem | null>(null);
  const [showFoodDetail, setShowFoodDetail] = useState(false);

  // 获取当前选中的分类
  const selectedCategory = FOOD_DATA.find(cat => cat.id === selectedCategoryId);

  // 过滤食物列表
  const filteredFoods = selectedCategory?.foods.filter(food =>
    food.name.toLowerCase().includes(searchText.toLowerCase())
  ) || [];

  // 处理食物选择 - 显示详情弹窗
  const handleSelectFood = (food: FoodItem) => {
    console.log('选择食物:', food);
    setSelectedFood(food);
    setShowFoodDetail(true);
    console.log('设置弹窗状态:', {
      showFoodDetail: true,
      selectedFood: food,
      foodName: food.name,
      foodId: food.id
    });
  };

  // 处理食物保存
  const handleSaveFood = (food: FoodItem, amount: number, unit: string) => {
    // 这里可以处理保存逻辑，比如添加到营养记录
    console.log('保存食物:', food, amount, unit);
    setShowFoodDetail(false);
    router.back(); // 返回上一页
  };

  // 关闭详情弹窗
  const handleCloseFoodDetail = () => {
    setShowFoodDetail(false);
    setSelectedFood(null);
  };

  return (
    <SafeAreaView style={styles.container}>
      <StatusBar barStyle="dark-content" backgroundColor="#F8F9FA" />

      {/* 头部 */}
      <View style={styles.header}>
        <TouchableOpacity onPress={() => router.back()} style={styles.backButton}>
          <Ionicons name="chevron-back" size={24} color="#333" />
        </TouchableOpacity>
        <Text style={styles.headerTitle}>食物库</Text>
        <TouchableOpacity
          style={styles.customButton}
          onPress={() => {
            const testFood: FoodItem = {
              id: 'test',
              name: '测试食物',
              emoji: '🍎',
              calories: 100,
              unit: '100克'
            };
            handleSelectFood(testFood);
          }}
        >
          <Text style={styles.customButtonText}>测试弹窗</Text>
        </TouchableOpacity>
      </View>

      {/* 搜索框 */}
      <View style={styles.searchContainer}>
        <Ionicons name="search" size={20} color="#999" style={styles.searchIcon} />
        <TextInput
          style={styles.searchInput}
          placeholder="搜索食物"
          value={searchText}
          onChangeText={setSearchText}
          placeholderTextColor="#999"
        />
      </View>

      {/* 主要内容区域 - 卡片样式 */}
      <View style={styles.mainContentCard}>
        <View style={styles.mainContent}>
          {/* 左侧分类导航 */}
          <View style={styles.categoryContainer}>
            <ScrollView showsVerticalScrollIndicator={false}>
              {FOOD_DATA.map((category) => (
                <TouchableOpacity
                  key={category.id}
                  style={[
                    styles.categoryItem,
                    selectedCategoryId === category.id && styles.categoryItemActive
                  ]}
                  onPress={() => setSelectedCategoryId(category.id)}
                >
                  <Text style={[
                    styles.categoryText,
                    selectedCategoryId === category.id && styles.categoryTextActive
                  ]}>
                    {category.name}
                  </Text>
                </TouchableOpacity>
              ))}
            </ScrollView>
          </View>

          {/* 右侧食物列表 */}
          <View style={styles.foodContainer}>
            <ScrollView showsVerticalScrollIndicator={false}>
              {filteredFoods.map((food) => (
                <View key={food.id} style={styles.foodItem}>
                  <View style={styles.foodInfo}>
                    <Text style={styles.foodEmoji}>{food.emoji}</Text>
                    <View style={styles.foodDetails}>
                      <Text style={styles.foodName}>{food.name}</Text>
                      <Text style={styles.foodCalories}>
                        {food.calories}千卡/{food.unit}
                      </Text>
                    </View>
                  </View>
                  <TouchableOpacity
                    style={styles.addButton}
                    onPress={() => handleSelectFood(food)}
                  >
                    <Ionicons name="add" size={20} color="#666" />
                  </TouchableOpacity>
                </View>
              ))}

              {filteredFoods.length === 0 && (
                <View style={styles.emptyContainer}>
                  <Text style={styles.emptyText}>暂无食物数据</Text>
                </View>
              )}
            </ScrollView>
          </View>
        </View>
      </View>

      {/* 底部餐次选择和记录按钮 */}
      <View style={styles.bottomContainer}>
        <View style={styles.mealSelector}>
          <View style={styles.mealIndicator} />
          <Text style={styles.mealText}>{MEAL_TYPE_MAP[mealType]}</Text>
          <Ionicons name="chevron-down" size={16} color="#333" />
        </View>

        <TouchableOpacity style={styles.recordButton}>
          <Text style={styles.recordButtonText}>记录</Text>
        </TouchableOpacity>
      </View>

      {/* 食物详情弹窗 */}
      <FoodDetailModal
        visible={showFoodDetail}
        food={selectedFood}
        onClose={handleCloseFoodDetail}
        onSave={handleSaveFood}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F8F9FA',
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 16,
    paddingVertical: 12,
    backgroundColor: '#F8F9FA',
    borderBottomWidth: 1,
    borderBottomColor: '#E5E5E5',
  },
  backButton: {
    padding: 4,
  },
  headerTitle: {
    fontSize: 18,
    fontWeight: '600',
    color: '#333',
  },
  customButton: {
    paddingHorizontal: 8,
    paddingVertical: 4,
  },
  customButtonText: {
    fontSize: 16,
    color: '#4CAF50',
    fontWeight: '500',
  },
  searchContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#FFF',
    marginHorizontal: 16,
    marginVertical: 12,
    paddingHorizontal: 12,
    paddingVertical: 10,
    borderRadius: 12,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 2,
    elevation: 2,
  },
  searchIcon: {
    marginRight: 8,
  },
  searchInput: {
    flex: 1,
    fontSize: 16,
    color: '#333',
  },
  mainContentCard: {
    flex: 1,
    marginHorizontal: 16,
    marginBottom: 16,
    backgroundColor: '#FFFFFF',
    borderRadius: 16,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.1,
    shadowRadius: 8,
    elevation: 4,
    overflow: 'hidden',
  },
  mainContent: {
    flex: 1,
    flexDirection: 'row',
  },
  categoryContainer: {
    width: 100,
    backgroundColor: 'transparent',
    borderRightWidth: 1,
    borderRightColor: '#E5E5E5',
  },
  categoryItem: {
    paddingVertical: 16,
    paddingHorizontal: 12,
    alignItems: 'center',
  },
  categoryItemActive: {
    backgroundColor: '#F0F9FF',
    borderRightWidth: 2,
    borderRightColor: '#4CAF50',
  },
  categoryText: {
    fontSize: 14,
    color: '#666',
    textAlign: 'center',
  },
  categoryTextActive: {
    color: '#4CAF50',
    fontWeight: '500',
  },
  foodContainer: {
    flex: 1,
    backgroundColor: 'transparent',
  },
  foodItem: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 16,
    paddingVertical: 12,
  },
  foodInfo: {
    flexDirection: 'row',
    alignItems: 'center',
    flex: 1,
  },
  foodEmoji: {
    fontSize: 32,
    marginRight: 12,
  },
  foodDetails: {
    flex: 1,
  },
  foodName: {
    fontSize: 16,
    color: '#333',
    fontWeight: '500',
    marginBottom: 2,
  },
  foodCalories: {
    fontSize: 14,
    color: '#999',
  },
  addButton: {
    width: 32,
    height: 32,
    borderRadius: 16,
    backgroundColor: '#F5F5F5',
    alignItems: 'center',
    justifyContent: 'center',
  },
  emptyContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 40,
  },
  emptyText: {
    fontSize: 16,
    color: '#999',
  },
  bottomContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 16,
    paddingVertical: 12,
    backgroundColor: '#FFF',
    borderTopWidth: 1,
    borderTopColor: '#E5E5E5',
  },
  mealSelector: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 12,
    paddingVertical: 8,
    backgroundColor: '#F8F9FA',
    borderRadius: 20,
  },
  mealIndicator: {
    width: 8,
    height: 8,
    borderRadius: 4,
    backgroundColor: '#FF6B35',
    marginRight: 8,
  },
  mealText: {
    fontSize: 14,
    color: '#333',
    marginRight: 4,
  },
  recordButton: {
    backgroundColor: '#4CAF50',
    paddingHorizontal: 24,
    paddingVertical: 10,
    borderRadius: 20,
  },
  recordButtonText: {
    fontSize: 16,
    color: '#FFF',
    fontWeight: '500',
  },
});