<script setup>
/**
 * Coach Edit Food Form
 */
import CoachLayout from '@/Layouts/CoachLayout.vue';
import { Head, Link, useForm } from '@inertiajs/vue3';
import { computed } from 'vue';

const props = defineProps({
    food: Object,
    categories: Array,
    mealTypes: Object,
});

const form = useForm({
    name: props.food.name || '',
    category: props.food.category || '',
    meal_type: props.food.meal_type || '',
    serving_size: props.food.serving_size || '',
    serving_weight: props.food.serving_weight || null,
    calories: props.food.calories || 0,
    proteins: props.food.proteins || 0,
    carbs: props.food.carbs || 0,
    fats: props.food.fats || 0,
    fiber: props.food.fiber || 0,
});

const calculatedCalories = computed(() => {
    return Math.round((form.proteins * 4) + (form.carbs * 4) + (form.fats * 9));
});

const useCalculatedCalories = () => {
    form.calories = calculatedCalories.value;
};

const submit = () => {
    form.put(route('coach.foods.update', props.food.id));
};
</script>

<template>
    <Head :title="`Editar ${food.name}`" />

    <CoachLayout>
        <template #header>
            <div class="flex items-center gap-4">
                <Link 
                    :href="route('coach.foods.index')"
                    class="p-2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
                >
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                    </svg>
                </Link>
                <div>
                    <h2 class="text-xl font-bold text-gray-900 dark:text-white">
                        Editar Alimento
                    </h2>
                    <p class="text-sm text-gray-500 dark:text-gray-400">
                        {{ food.name }}
                    </p>
                </div>
            </div>
        </template>

        <div class="max-w-2xl">
            <form @submit.prevent="submit" class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-6 space-y-6">
                <!-- Name & Category -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Nombre del alimento *</label>
                        <input 
                            v-model="form.name"
                            type="text"
                            class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:ring-green-500 focus:border-green-500"
                            placeholder="Ej: Pechuga de pollo"
                            required
                        />
                        <p v-if="form.errors.name" class="text-red-500 text-sm mt-1">{{ form.errors.name }}</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Categoría</label>
                        <input 
                            v-model="form.category"
                            type="text"
                            list="categories"
                            class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:ring-green-500 focus:border-green-500"
                            placeholder="Ej: Proteínas, Carbohidratos, Vegetales"
                        />
                        <datalist id="categories">
                            <option v-for="cat in categories" :key="cat" :value="cat" />
                        </datalist>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Tipo de Comida</label>
                        <select 
                            v-model="form.meal_type"
                            class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:ring-green-500 focus:border-green-500"
                        >
                            <option value="">Seleccionar tipo...</option>
                            <option v-for="(label, key) in mealTypes" :key="key" :value="key">{{ label }}</option>
                        </select>
                    </div>
                </div>

                <!-- Serving Info -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Porción</label>
                        <input 
                            v-model="form.serving_size"
                            type="text"
                            class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:ring-green-500 focus:border-green-500"
                            placeholder="Ej: 1 taza, 1 filete mediano"
                        />
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Peso de Porción (g)</label>
                        <input 
                            v-model.number="form.serving_weight"
                            type="number"
                            step="0.1"
                            min="0"
                            class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:ring-green-500 focus:border-green-500"
                            placeholder="Ej: 150"
                        />
                    </div>
                </div>

                <!-- Macros Section -->
                <div class="border-t border-gray-200 dark:border-gray-700 pt-6">
                    <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider mb-4">
                        Información Nutricional (por porción)
                    </h3>
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Calorías *</label>
                            <div class="relative">
                                <input 
                                    v-model.number="form.calories"
                                    type="number"
                                    step="0.1"
                                    min="0"
                                    class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:ring-green-500 focus:border-green-500 pr-12"
                                    required
                                />
                                <span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm">kcal</span>
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Proteína *</label>
                            <div class="relative">
                                <input 
                                    v-model.number="form.proteins"
                                    type="number"
                                    step="0.1"
                                    min="0"
                                    class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:ring-green-500 focus:border-green-500 pr-8"
                                    required
                                />
                                <span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm">g</span>
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Carbohidratos *</label>
                            <div class="relative">
                                <input 
                                    v-model.number="form.carbs"
                                    type="number"
                                    step="0.1"
                                    min="0"
                                    class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:ring-green-500 focus:border-green-500 pr-8"
                                    required
                                />
                                <span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm">g</span>
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Grasas *</label>
                            <div class="relative">
                                <input 
                                    v-model.number="form.fats"
                                    type="number"
                                    step="0.1"
                                    min="0"
                                    class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:ring-green-500 focus:border-green-500 pr-8"
                                    required
                                />
                                <span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm">g</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Additional Info -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Fibra</label>
                        <div class="relative">
                            <input 
                                v-model.number="form.fiber"
                                type="number"
                                step="0.1"
                                min="0"
                                class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:ring-green-500 focus:border-green-500 pr-8"
                            />
                            <span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm">g</span>
                        </div>
                    </div>
                    <div class="flex items-end">
                        <div class="p-3 bg-purple-50 dark:bg-purple-900/20 rounded-lg flex-1">
                            <div class="flex justify-between items-center">
                                <span class="text-sm text-purple-700 dark:text-purple-300">Calorías calculadas:</span>
                                <span class="font-bold text-purple-600 dark:text-purple-400">{{ calculatedCalories }} kcal</span>
                            </div>
                            <button 
                                type="button"
                                @click="useCalculatedCalories"
                                class="mt-2 text-xs text-purple-600 dark:text-purple-400 hover:underline"
                            >
                                Usar este valor
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Actions -->
                <div class="flex justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
                    <Link 
                        :href="route('coach.foods.index')"
                        class="px-6 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
                    >
                        Cancelar
                    </Link>
                    <button 
                        type="submit"
                        :disabled="form.processing"
                        class="px-6 py-2 bg-green-600 hover:bg-green-700 text-white font-medium rounded-lg transition-colors disabled:opacity-50"
                    >
                        Guardar Cambios
                    </button>
                </div>
            </form>
        </div>
    </CoachLayout>
</template>
