import { Colors } from '@/constants/Colors';
import { useColorScheme } from '@/hooks/useColorScheme';
import { Ionicons } from '@expo/vector-icons';
import React from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';

interface DietOption {
  id: string;
  title: string;
  description: string;
  icon: string;
  action: () => void;
}

interface DietOptionsCardProps {
  cardId: string;
  onSelectOption: (cardId: string, optionId: string) => void;
}

const DietOptionsCard: React.FC<DietOptionsCardProps> = ({
  cardId,
  onSelectOption
}) => {
  const colorScheme = useColorScheme();
  const theme = Colors[colorScheme ?? 'light'];

  const dietOptions: DietOption[] = [
    {
      id: 'photo',
      title: '拍照记录',
      description: '拍摄食物照片，AI自动识别',
      icon: 'camera',
      action: () => onSelectOption(cardId, 'photo')
    },
    {
      id: 'text',
      title: '文字描述',
      description: '用文字描述你吃了什么',
      icon: 'create',
      action: () => onSelectOption(cardId, 'text')
    }
  ];

  return (
    <View style={[styles.bubble, { backgroundColor: theme.surface }]}>
      <Text style={[styles.title, { color: theme.text }]}>选择记录方式</Text>
      <View style={styles.dietOptionsContainer}>
        {dietOptions.map((option) => (
          <TouchableOpacity
            key={option.id}
            style={[styles.dietOptionBtn, {
              backgroundColor: theme.background,
              borderColor: `${theme.primary}4d`
            }]}
            onPress={option.action}
          >
            <View style={[styles.dietOptionIconContainer, {
              backgroundColor: `${theme.primary}33`
            }]}>
              <Ionicons name={option.icon as any} size={20} color={theme.primary} />
            </View>
            <View style={styles.dietOptionTextContainer}>
              <Text style={[styles.dietOptionTitle, { color: theme.text }]}>
                {option.title}
              </Text>
              <Text style={[styles.dietOptionDesc, { color: theme.textMuted }]}>
                {option.description}
              </Text>
            </View>
          </TouchableOpacity>
        ))}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  bubble: {
    paddingHorizontal: 12,
    paddingVertical: 10,
    borderRadius: 16,
    maxWidth: '85%',
    alignSelf: 'flex-start',
    gap: 12,
    minWidth: 300
  },
  title: {
    fontSize: 16,
    fontWeight: '600',
    textAlign: 'center',
  },
  dietOptionsContainer: {
    gap: 8,
  },
  dietOptionBtn: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 12,
    borderRadius: 12,
    borderWidth: 1,
  },
  dietOptionIconContainer: {
    width: 40,
    height: 40,
    borderRadius: 20,
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 12,
  },
  dietOptionTextContainer: {
    flex: 1,
  },
  dietOptionTitle: {
    fontSize: 15,
    fontWeight: '700',
  },
  dietOptionDesc: {
    fontSize: 13,
    marginTop: 2,
  },
});

export default DietOptionsCard;