<script setup>
import AdminLayout from '@/Layouts/AdminLayout.vue';
import { Head, useForm, Link } from '@inertiajs/vue3';

const props = defineProps({
    plan: Object,
});

const form = useForm({
    name: props.plan.name,
    slug: props.plan.slug,
    price: props.plan.price,
    duration_days: props.plan.duration_days,
    description: props.plan.description || '',
    is_active: props.plan.is_active,
    features: {
        max_clients: props.plan.features?.max_clients ?? 10,
        max_diets: props.plan.features?.max_diets ?? 10,
        max_routines: props.plan.features?.max_routines ?? 10,
        custom_foods: props.plan.features?.custom_foods ?? false,
        pdf_export: props.plan.features?.pdf_export ?? true,
        analytics: props.plan.features?.analytics ?? 'basic',
        support: props.plan.features?.support ?? 'email',
    },
});

const submit = () => {
    form.put(route('admin.plans.update', props.plan.slug));
};
</script>

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

    <AdminLayout>
        <div class="py-6">
            <!-- Header -->
            <div class="mb-8 px-4 sm:px-0">
                <div class="flex items-center space-x-4">
                    <Link :href="route('admin.plans.index')" class="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors">
                        <svg class="w-6 h-6 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                        </svg>
                    </Link>
                    <div>
                        <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Editar Plan: {{ plan.name }}</h1>
                        <p class="text-gray-600 dark:text-gray-400">Modifica las características y límites del plan</p>
                    </div>
                </div>
            </div>

            <div class="max-w-4xl">
                <form @submit.prevent="submit" class="space-y-6">
                    <!-- Basic Information -->
                    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
                            <svg class="w-5 h-5 mr-2 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                            Información Básica
                        </h3>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    Nombre del Plan *
                                </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-indigo-500 focus:border-indigo-500"
                                    required
                                />
                                <p v-if="form.errors.name" class="mt-1 text-sm text-red-600">{{ form.errors.name }}</p>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    Slug (URL) *
                                </label>
                                <input 
                                    v-model="form.slug"
                                    type="text" 
                                    class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:ring-indigo-500 focus:border-indigo-500"
                                    required
                                />
                                <p v-if="form.errors.slug" class="mt-1 text-sm text-red-600">{{ form.errors.slug }}</p>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    Precio (USD) *
                                </label>
                                <div class="relative">
                                    <span class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-500 dark:text-gray-400">$</span>
                                    <input 
                                        v-model="form.price"
                                        type="number" 
                                        step="0.01"
                                        min="0"
                                        class="w-full pl-8 rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:ring-indigo-500 focus:border-indigo-500"
                                        required
                                    />
                                </div>
                                <p v-if="form.errors.price" class="mt-1 text-sm text-red-600">{{ form.errors.price }}</p>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    Duración (días) *
                                </label>
                                <input 
                                    v-model="form.duration_days"
                                    type="number" 
                                    min="1"
                                    class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:ring-indigo-500 focus:border-indigo-500"
                                    required
                                />
                                <p v-if="form.errors.duration_days" class="mt-1 text-sm text-red-600">{{ form.errors.duration_days }}</p>
                            </div>

                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    Descripción
                                </label>
                                <textarea 
                                    v-model="form.description"
                                    rows="3"
                                    class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:ring-indigo-500 focus:border-indigo-500"
                                ></textarea>
                            </div>

                            <div class="md:col-span-2">
                                <label class="flex items-center space-x-3 cursor-pointer">
                                    <input 
                                        v-model="form.is_active"
                                        type="checkbox" 
                                        class="w-5 h-5 rounded border-gray-300 dark:border-gray-600 text-indigo-600 focus:ring-indigo-500"
                                    />
                                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Plan activo (visible para usuarios)</span>
                                </label>
                            </div>
                        </div>
                    </div>

                    <!-- Limits -->
                    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
                            <svg class="w-5 h-5 mr-2 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                            </svg>
                            Límites del Plan
                        </h3>
                        <p class="text-sm text-gray-500 dark:text-gray-400 mb-6">Usa -1 para límites ilimitados</p>
                        
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    Máx. Clientes
                                </label>
                                <input 
                                    v-model="form.features.max_clients"
                                    type="number" 
                                    min="-1"
                                    class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:ring-indigo-500 focus:border-indigo-500"
                                />
                                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                    {{ form.features.max_clients === -1 ? 'Ilimitado' : form.features.max_clients + ' clientes' }}
                                </p>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    Máx. Dietas
                                </label>
                                <input 
                                    v-model="form.features.max_diets"
                                    type="number" 
                                    min="-1"
                                    class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:ring-indigo-500 focus:border-indigo-500"
                                />
                                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                    {{ form.features.max_diets === -1 ? 'Ilimitado' : form.features.max_diets + ' dietas' }}
                                </p>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    Máx. Rutinas
                                </label>
                                <input 
                                    v-model="form.features.max_routines"
                                    type="number" 
                                    min="-1"
                                    class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:ring-indigo-500 focus:border-indigo-500"
                                />
                                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                    {{ form.features.max_routines === -1 ? 'Ilimitado' : form.features.max_routines + ' rutinas' }}
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- Features -->
                    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
                            <svg class="w-5 h-5 mr-2 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                            Características
                        </h3>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label class="flex items-center space-x-3 cursor-pointer p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                                    <input 
                                        v-model="form.features.custom_foods"
                                        type="checkbox" 
                                        class="w-5 h-5 rounded border-gray-300 dark:border-gray-600 text-indigo-600 focus:ring-indigo-500"
                                    />
                                    <div>
                                        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Alimentos Personalizados</span>
                                        <p class="text-xs text-gray-500 dark:text-gray-400">Permite crear alimentos propios</p>
                                    </div>
                                </label>
                            </div>

                            <div>
                                <label class="flex items-center space-x-3 cursor-pointer p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                                    <input 
                                        v-model="form.features.pdf_export"
                                        type="checkbox" 
                                        class="w-5 h-5 rounded border-gray-300 dark:border-gray-600 text-indigo-600 focus:ring-indigo-500"
                                    />
                                    <div>
                                        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Exportación PDF</span>
                                        <p class="text-xs text-gray-500 dark:text-gray-400">Exportar dietas y rutinas</p>
                                    </div>
                                </label>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    Nivel de Análisis
                                </label>
                                <select 
                                    v-model="form.features.analytics"
                                    class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:ring-indigo-500 focus:border-indigo-500"
                                >
                                    <option value="none">Sin análisis</option>
                                    <option value="basic">Básico</option>
                                    <option value="advanced">Avanzado</option>
                                </select>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                    Nivel de Soporte
                                </label>
                                <select 
                                    v-model="form.features.support"
                                    class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:ring-indigo-500 focus:border-indigo-500"
                                >
                                    <option value="none">Sin soporte</option>
                                    <option value="email">Email</option>
                                    <option value="priority">Prioritario</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <!-- Actions -->
                    <div class="flex items-center justify-end space-x-4">
                        <Link 
                            :href="route('admin.plans.index')"
                            class="px-6 py-3 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
                        >
                            Cancelar
                        </Link>
                        <button 
                            type="submit"
                            :disabled="form.processing"
                            class="px-6 py-3 text-sm font-medium text-white bg-gradient-to-r from-indigo-600 to-purple-600 rounded-lg hover:from-indigo-700 hover:to-purple-700 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
                        >
                            <span v-if="form.processing">Guardando...</span>
                            <span v-else>Guardar Cambios</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </AdminLayout>
</template>
