managarten/nutriphi/apps/mobile/components/meals/EditMealModal.tsx

import React, { useState } from 'react';
import {
  Modal,
  View,
  Text,
  TextInput,
  TouchableOpacity,
  ScrollView,
  KeyboardAvoidingView,
  Platform,
} from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { MealWithItems } from '../../types/Database';
import { useMealStore } from '../../store/MealStore';

interface EditMealModalProps {
  meal: MealWithItems | null;
  visible: boolean;
  onClose: () => void;
}

export const EditMealModal: React.FC<EditMealModalProps> = ({ meal, visible, onClose }) => {
  const { updateMeal } = useMealStore();
  const [notes, setNotes] = useState(meal?.user_notes || '');
  const [rating, setRating] = useState(meal?.user_rating || 0);
  const [location, setLocation] = useState(meal?.location || '');
  const [isSaving, setIsSaving] = useState(false);

  React.useEffect(() => {
    if (meal) {
      setNotes(meal.user_notes || '');
      setRating(meal.user_rating || 0);
      setLocation(meal.location || '');
    }
  }, [meal]);

  const handleSave = async () => {
    if (!meal) return;

    setIsSaving(true);
    try {
      await updateMeal(meal.id, {
        user_notes: notes.trim() || null,
        user_rating: rating || null,
        location: location.trim() || null,
      });
      onClose();
    } catch (error) {
      console.error('Failed to update meal:', error);
    } finally {
      setIsSaving(false);
    }
  };

  const renderStars = () => {
    return (
      <View className="flex-row justify-center space-x-2">
        {[1, 2, 3, 4, 5].map((star) => (
          <TouchableOpacity key={star} onPress={() => setRating(star)} className="p-2">
            <Ionicons
              name={star <= rating ? 'star' : 'star-outline'}
              size={32}
              color={star <= rating ? '#fbbf24' : '#d1d5db'}
            />
          </TouchableOpacity>
        ))}
      </View>
    );
  };

  if (!meal) return null;

  return (
    <Modal
      visible={visible}
      animationType="slide"
      presentationStyle="pageSheet"
      onRequestClose={onClose}>
      <KeyboardAvoidingView
        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
        className="flex-1 bg-white">
        {/* Header */}
        <View className="flex-row items-center justify-between border-b border-gray-200 p-4">
          <TouchableOpacity onPress={onClose} className="p-2">
            <Text className="text-base text-blue-600">Abbrechen</Text>
          </TouchableOpacity>
          <Text className="text-lg font-semibold">Mahlzeit bearbeiten</Text>
          <TouchableOpacity onPress={handleSave} disabled={isSaving} className="p-2">
            <Text
              className={`text-base font-semibold ${isSaving ? 'text-gray-400' : 'text-blue-600'}`}>
              {isSaving ? 'Speichert...' : 'Fertig'}
            </Text>
          </TouchableOpacity>
        </View>

        {/* Content */}
        <ScrollView className="flex-1 p-4">
          {/* Rating */}
          <View className="mb-6">
            <Text className="mb-3 text-base font-semibold text-gray-900">Bewertung</Text>
            {renderStars()}
            {rating > 0 && (
              <TouchableOpacity onPress={() => setRating(0)} className="mt-2 self-center">
                <Text className="text-sm text-gray-500">Bewertung entfernen</Text>
              </TouchableOpacity>
            )}
          </View>

          {/* Location */}
          <View className="mb-6">
            <Text className="mb-2 text-base font-semibold text-gray-900">Ort</Text>
            <TextInput
              value={location}
              onChangeText={setLocation}
              placeholder="z.B. Restaurant, Zuhause, Büro..."
              placeholderTextColor="#9ca3af"
              className="rounded-lg border border-gray-300 p-3 text-base"
              returnKeyType="done"
            />
          </View>

          {/* Notes */}
          <View className="mb-6">
            <Text className="mb-2 text-base font-semibold text-gray-900">Notizen</Text>
            <TextInput
              value={notes}
              onChangeText={setNotes}
              placeholder="Füge Notizen zu dieser Mahlzeit hinzu..."
              placeholderTextColor="#9ca3af"
              multiline
              numberOfLines={4}
              textAlignVertical="top"
              className="rounded-lg border border-gray-300 p-3 text-base"
              style={{ minHeight: 100 }}
            />
          </View>

          {/* Meal Info */}
          <View className="rounded-lg bg-gray-50 p-4">
            <Text className="mb-2 text-sm font-medium text-gray-600">Mahlzeit-Info</Text>
            <Text className="text-sm text-gray-600">
              {meal.food_items?.map((item) => item.name).join(', ') || 'Keine Lebensmittel erkannt'}
            </Text>
            {meal.total_calories && (
              <Text className="mt-1 text-sm text-gray-600">
                {Math.round(meal.total_calories)} kcal
              </Text>
            )}
          </View>
        </ScrollView>
      </KeyboardAvoidingView>
    </Modal>
  );
};