<script setup>
import AdminLayout from '@/Layouts/AdminLayout.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,
    proteins: props.food.proteins,
    carbs: props.food.carbs,
    fats: props.food.fats,
    fiber: props.food.fiber || 0,
    is_active: props.food.is_active ?? true,
});

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

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

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

    <AdminLayout>
        <template #header>
            <div class="flex justify-between items-center">
                <h2 class="text-xl font-semibold leading-tight text-gray-800 dark:text-gray-200">
                    Editar Alimento
                </h2>
                <Link :href="route('admin.foods.index')" class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400">
                    ← Volver
                </Link>
            </div>
        </template>

        <div class="py-6">
            <div class="mx-auto max-w-2xl">
                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
                    <form @submit.prevent="submit" class="space-y-6">
                        <!-- Name -->
                        <div>
                            <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="input"
                                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>

                        <!-- Category -->
                        <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"
                                class="input"
                                placeholder="Ej: Proteínas, Carbohidratos, Frutas..."
                                list="categories"
                            />
                            <datalist id="categories">
                                <option v-for="cat in categories" :key="cat" :value="cat" />
                            </datalist>
                        </div>

                        <!-- Meal Type -->
                        <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="input">
                                <option value="">Seleccionar tipo...</option>
                                <option v-for="(label, key) in mealTypes" :key="key" :value="key">{{ label }}</option>
                            </select>
                        </div>

                        <!-- Serving Info -->
                        <div class="grid 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="input"
                                    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="input"
                                    placeholder="Ej: 150"
                                />
                            </div>
                        </div>

                        <!-- Macros -->
                        <div>
                            <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-4">
                                Macronutrientes (por 100g)
                            </h3>
                            <div class="grid grid-cols-2 gap-4">
                                <div>
                                    <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">
                                        Proteínas (g)
                                    </label>
                                    <input
                                        v-model.number="form.proteins"
                                        type="number"
                                        step="0.1"
                                        min="0"
                                        max="100"
                                        class="input"
                                    />
                                    <p v-if="form.errors.proteins" class="text-red-500 text-xs mt-1">{{ form.errors.proteins }}</p>
                                </div>
                                <div>
                                    <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">
                                        Carbohidratos (g)
                                    </label>
                                    <input
                                        v-model.number="form.carbs"
                                        type="number"
                                        step="0.1"
                                        min="0"
                                        max="100"
                                        class="input"
                                    />
                                    <p v-if="form.errors.carbs" class="text-red-500 text-xs mt-1">{{ form.errors.carbs }}</p>
                                </div>
                                <div>
                                    <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">
                                        Grasas (g)
                                    </label>
                                    <input
                                        v-model.number="form.fats"
                                        type="number"
                                        step="0.1"
                                        min="0"
                                        max="100"
                                        class="input"
                                    />
                                    <p v-if="form.errors.fats" class="text-red-500 text-xs mt-1">{{ form.errors.fats }}</p>
                                </div>
                                <div>
                                    <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">
                                        Fibra (g)
                                    </label>
                                    <input
                                        v-model.number="form.fiber"
                                        type="number"
                                        step="0.1"
                                        min="0"
                                        max="100"
                                        class="input"
                                    />
                                    <p v-if="form.errors.fiber" class="text-red-500 text-xs mt-1">{{ form.errors.fiber }}</p>
                                </div>
                            </div>
                        </div>

                        <!-- Calculated Calories -->
                        <div class="p-4 bg-gradient-to-r from-purple-50 to-indigo-50 dark:from-purple-900/20 dark:to-indigo-900/20 rounded-xl border border-purple-100 dark:border-purple-800">
                            <div class="flex items-center justify-between">
                                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">
                                    Calorías calculadas
                                </span>
                                <span class="text-2xl font-bold text-purple-600 dark:text-purple-400">
                                    {{ calculatedCalories }} kcal
                                </span>
                            </div>
                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                Calculado: (Proteínas × 4) + (Carbos × 4) + (Grasas × 9)
                            </p>
                        </div>

                        <!-- Active Status -->
                        <div>
                            <label class="flex items-center">
                                <input
                                    v-model="form.is_active"
                                    type="checkbox"
                                    class="rounded border-gray-300 text-blue-600 shadow-sm focus:ring-blue-500"
                                />
                                <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">Alimento activo (visible para coaches)</span>
                            </label>
                        </div>

                        <!-- Actions -->
                        <div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
                            <Link 
                                :href="route('admin.foods.index')" 
                                class="btn btn-md btn-secondary"
                            >
                                Cancelar
                            </Link>
                            <button
                                type="submit"
                                :disabled="form.processing"
                                class="btn btn-md btn-primary"
                            >
                                <span v-if="form.processing">Guardando...</span>
                                <span v-else>Guardar Cambios</span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </AdminLayout>
</template>
