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

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

const form = useForm({
    referral_enabled: props.settings.enabled,
    referral_bonus_amount: props.settings.bonus_amount,
    referral_bonus_type: props.settings.bonus_type,
    referral_qualification_type: props.settings.qualification_type,
    referral_min_subscription_amount: props.settings.min_subscription_amount,
});

const submit = () => {
    form.post(route('admin.referrals.settings.update'));
};
</script>

<template>
    <Head title="Configuración de Referidos" />

    <AdminLayout>
        <template #header>
            <div class="flex items-center gap-4">
                <Link 
                    :href="route('admin.referrals.index')"
                    class="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
                >
                    <svg class="w-5 h-5 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>
                    <h2 class="text-xl font-bold text-gray-900 dark:text-white">
                        Configuración del Programa de Referidos
                    </h2>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                        Ajusta las recompensas y requisitos del programa
                    </p>
                </div>
            </div>
        </template>

        <div class="py-6 sm:py-12">
            <div class="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
                <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">
                    
                    <!-- Enable/Disable -->
                    <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                        <div>
                            <h3 class="font-medium text-gray-900 dark:text-white">Programa Activo</h3>
                            <p class="text-sm text-gray-500 dark:text-gray-400">Habilita o deshabilita el programa de referidos</p>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" v-model="form.referral_enabled" class="sr-only peer">
                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 dark:peer-focus:ring-indigo-800 rounded-full peer dark:bg-gray-600 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-500 peer-checked:bg-indigo-600"></div>
                        </label>
                    </div>

                    <!-- Bonus Type -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Tipo de Recompensa
                        </label>
                        <select 
                            v-model="form.referral_bonus_type"
                            class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                        >
                            <option value="fixed">Monto Fijo ($)</option>
                            <option value="percentage">Porcentaje del primer pago (%)</option>
                        </select>
                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                            Selecciona si la recompensa es un monto fijo o un porcentaje
                        </p>
                    </div>

                    <!-- Bonus Amount -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            {{ form.referral_bonus_type === 'fixed' ? 'Monto de Recompensa ($)' : 'Porcentaje de Recompensa (%)' }}
                        </label>
                        <input 
                            type="number" 
                            v-model="form.referral_bonus_amount"
                            step="0.01"
                            min="0"
                            :max="form.referral_bonus_type === 'percentage' ? 100 : 10000"
                            class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                        />
                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                            {{ form.referral_bonus_type === 'fixed' 
                                ? 'El referidor recibirá este monto por cada referido que cumpla los requisitos' 
                                : 'El referidor recibirá este porcentaje del primer pago del referido' 
                            }}
                        </p>
                    </div>

                    <!-- Qualification Type -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Requisito para Calificar
                        </label>
                        <select 
                            v-model="form.referral_qualification_type"
                            class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                        >
                            <option value="signup">Al registrarse</option>
                            <option value="first_payment">Al realizar primer pago</option>
                            <option value="first_month">Después de 1 mes activo</option>
                        </select>
                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                            ¿Cuándo se considera que un referido "califica" para generar recompensa?
                        </p>
                    </div>

                    <!-- Min Subscription Amount -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            Monto Mínimo de Suscripción ($)
                        </label>
                        <input 
                            type="number" 
                            v-model="form.referral_min_subscription_amount"
                            step="0.01"
                            min="0"
                            class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                        />
                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                            El referido debe suscribirse a un plan de al menos este valor (0 = cualquier plan)
                        </p>
                    </div>

                    <!-- Info Box -->
                    <div class="p-4 bg-blue-50 dark:bg-blue-900/30 rounded-lg border border-blue-200 dark:border-blue-800">
                        <h4 class="font-medium text-blue-800 dark:text-blue-300 mb-2">ℹ️ Cómo funciona</h4>
                        <ul class="text-sm text-blue-700 dark:text-blue-400 space-y-1 list-disc list-inside">
                            <li>Cada coach tiene un código/enlace de referido único</li>
                            <li>Cuando un nuevo usuario se registra usando ese enlace, se crea un referido pendiente</li>
                            <li>Según el requisito configurado, el referido pasa a "calificado"</li>
                            <li>La recompensa se acredita automáticamente en la billetera del referidor</li>
                        </ul>
                    </div>

                    <!-- Submit -->
                    <div class="flex justify-end pt-4 border-t border-gray-200 dark:border-gray-700">
                        <button 
                            type="submit"
                            :disabled="form.processing"
                            class="px-6 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white font-medium rounded-lg shadow-sm transition-all disabled:opacity-50"
                        >
                            {{ form.processing ? 'Guardando...' : 'Guardar Configuración' }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </AdminLayout>
</template>
