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

const props = defineProps({
    paypal_email: String,
    paypal_me_link: String,
    paypal_enabled: Boolean,
});

const form = useForm({
    paypal_email: props.paypal_email || '',
    paypal_me_link: props.paypal_me_link || '',
    paypal_enabled: props.paypal_enabled || false,
});

const submit = () => {
    form.put(route('coach.paypal.update'));
};
</script>

<template>
    <Head title="Configuración PayPal" />

    <CoachLayout>
        <template #header>
            <div class="flex items-center gap-4">
                <Link
                    :href="route('coach.plans.index')"
                    class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
                >
                    <svg class="w-6 h-6" 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>
                <h2 class="text-xl font-semibold leading-tight text-gray-800 dark:text-white">
                    Configuración de PayPal
                </h2>
            </div>
        </template>

        <div class="py-6">
            <div class="max-w-2xl mx-auto">
                <!-- Info Card -->
                <div class="mb-6 bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-700 rounded-xl p-5">
                    <div class="flex">
                        <div class="flex-shrink-0">
                            <svg class="h-6 w-6 text-blue-500" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944.901C5.026.382 5.474 0 5.998 0h7.46c2.57 0 4.578.543 5.69 1.81 1.01 1.15 1.304 2.42 1.012 4.287-.023.143-.047.288-.077.437-.983 5.05-4.349 6.797-8.647 6.797h-2.19c-.524 0-.968.382-1.05.9l-1.12 7.106z"/>
                            </svg>
                        </div>
                        <div class="ml-4">
                            <h3 class="text-lg font-medium text-blue-800 dark:text-blue-200">
                                Recibe pagos directamente en tu cuenta PayPal
                            </h3>
                            <p class="mt-2 text-blue-700 dark:text-blue-300">
                                Configura tu cuenta de PayPal para que tus clientes puedan pagar directamente. 
                                Recomendamos usar PayPal.me para una experiencia más sencilla.
                            </p>
                        </div>
                    </div>
                </div>

                <form @submit.prevent="submit" class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
                    <div class="p-6 space-y-6">
                        <!-- PayPal Email -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Email de PayPal
                            </label>
                            <input
                                v-model="form.paypal_email"
                                type="email"
                                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"
                                placeholder="tu-email@ejemplo.com"
                            >
                            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                El email asociado a tu cuenta de PayPal
                            </p>
                            <p v-if="form.errors.paypal_email" class="mt-1 text-sm text-red-600">{{ form.errors.paypal_email }}</p>
                        </div>

                        <!-- PayPal.me Link -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Enlace PayPal.me
                            </label>
                            <input
                                v-model="form.paypal_me_link"
                                type="url"
                                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"
                                placeholder="https://paypal.me/tunombre"
                            >
                            <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                <a href="https://www.paypal.com/paypalme" target="_blank" class="text-indigo-600 hover:underline">
                                    Crea tu enlace PayPal.me aquí →
                                </a>
                            </p>
                            <p v-if="form.errors.paypal_me_link" class="mt-1 text-sm text-red-600">{{ form.errors.paypal_me_link }}</p>
                        </div>

                        <!-- Enable PayPal -->
                        <div class="pt-4 border-t border-gray-200 dark:border-gray-700">
                            <label class="flex items-start">
                                <input
                                    v-model="form.paypal_enabled"
                                    type="checkbox"
                                    class="mt-1 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-700"
                                >
                                <span class="ml-3">
                                    <span class="text-sm font-medium text-gray-900 dark:text-white">
                                        Habilitar pagos por PayPal
                                    </span>
                                    <p class="text-sm text-gray-500 dark:text-gray-400">
                                        Cuando esté activo, tus clientes podrán ver el botón de pago con PayPal en tus planes.
                                    </p>
                                </span>
                            </label>
                        </div>
                    </div>

                    <!-- Actions -->
                    <div class="px-6 py-4 bg-gray-50 dark:bg-gray-700/50 border-t border-gray-200 dark:border-gray-600 flex justify-end gap-3">
                        <Link
                            :href="route('coach.plans.index')"
                            class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600 transition"
                        >
                            Cancelar
                        </Link>
                        <button
                            type="submit"
                            :disabled="form.processing"
                            class="px-6 py-2 bg-indigo-600 hover:bg-indigo-700 text-white font-medium rounded-md transition disabled:opacity-50"
                        >
                            {{ form.processing ? 'Guardando...' : 'Guardar Configuración' }}
                        </button>
                    </div>
                </form>

                <!-- Help Section -->
                <div class="mt-6 bg-gray-50 dark:bg-gray-800 rounded-xl p-5 border border-gray-200 dark:border-gray-700">
                    <h4 class="font-medium text-gray-900 dark:text-white mb-3">¿Cómo funciona?</h4>
                    <ol class="space-y-3 text-sm text-gray-600 dark:text-gray-400">
                        <li class="flex gap-3">
                            <span class="flex-shrink-0 w-6 h-6 bg-indigo-100 dark:bg-indigo-900/50 rounded-full flex items-center justify-center text-indigo-600 dark:text-indigo-400 text-xs font-bold">1</span>
                            Crea planes con los precios que desees en la sección "Mis Planes"
                        </li>
                        <li class="flex gap-3">
                            <span class="flex-shrink-0 w-6 h-6 bg-indigo-100 dark:bg-indigo-900/50 rounded-full flex items-center justify-center text-indigo-600 dark:text-indigo-400 text-xs font-bold">2</span>
                            Comparte el enlace público del plan con tus clientes
                        </li>
                        <li class="flex gap-3">
                            <span class="flex-shrink-0 w-6 h-6 bg-indigo-100 dark:bg-indigo-900/50 rounded-full flex items-center justify-center text-indigo-600 dark:text-indigo-400 text-xs font-bold">3</span>
                            El cliente hace clic en "Pagar con PayPal" y es redirigido a PayPal.me
                        </li>
                        <li class="flex gap-3">
                            <span class="flex-shrink-0 w-6 h-6 bg-indigo-100 dark:bg-indigo-900/50 rounded-full flex items-center justify-center text-indigo-600 dark:text-indigo-400 text-xs font-bold">4</span>
                            Recibes el pago directamente en tu cuenta de PayPal
                        </li>
                        <li class="flex gap-3">
                            <span class="flex-shrink-0 w-6 h-6 bg-indigo-100 dark:bg-indigo-900/50 rounded-full flex items-center justify-center text-indigo-600 dark:text-indigo-400 text-xs font-bold">5</span>
                            Confirmas manualmente el pago desde tu panel
                        </li>
                    </ol>
                </div>
            </div>
        </div>
    </CoachLayout>
</template>
