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

const props = defineProps({
    subscription: Object,
    plans: Array,
    auditLogs: Array,
    paymentMethods: Array,
});

const formatDate = (date, withTime = false) => {
    if (!date) return '-';
    const options = { year: 'numeric', month: 'short', day: 'numeric' };
    if (withTime) {
        options.hour = '2-digit';
        options.minute = '2-digit';
    }
    return new Date(date).toLocaleDateString('es-ES', options);
};

const formatCurrency = (amount) => {
    return new Intl.NumberFormat('es-ES', {
        style: 'currency',
        currency: 'USD',
    }).format(amount || 0);
};

const getStatusBadge = (status) => {
    const badges = {
        active: 'bg-green-100 text-green-800 dark:bg-green-900/50 dark:text-green-300',
        pending: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/50 dark:text-yellow-300',
        expired: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300',
        cancelled: 'bg-red-100 text-red-800 dark:bg-red-900/50 dark:text-red-300',
        suspended: 'bg-orange-100 text-orange-800 dark:bg-orange-900/50 dark:text-orange-300',
    };
    return badges[status] || badges.expired;
};

const getStatusLabel = (status) => {
    const labels = {
        active: 'Activo',
        pending: 'Pendiente',
        expired: 'Expirado',
        cancelled: 'Cancelado',
        suspended: 'Suspendido',
    };
    return labels[status] || status;
};

const getActionLabel = (action) => {
    const labels = {
        'status_changed': 'Estado cambiado',
        'payment_confirmed': 'Pago confirmado',
        'plan_changed': 'Plan modificado',
        'extended': 'Suscripción extendida',
        'cancelled': 'Cancelada',
        'refunded': 'Reembolsada',
        'created': 'Creada',
        'activated': 'Activada',
        'renewed': 'Renovada',
        'suspended': 'Suspendida',
    };
    return labels[action] || action;
};

const getActionIcon = (action) => {
    const icons = {
        'status_changed': '🔄',
        'payment_confirmed': '💳',
        'plan_changed': '📦',
        'extended': '➕',
        'cancelled': '❌',
        'refunded': '💰',
        'created': '✨',
        'activated': '✅',
        'renewed': '🔁',
        'suspended': '⏸️',
    };
    return icons[action] || '📝';
};

// Calculate days remaining
const daysRemaining = computed(() => {
    if (!props.subscription.end_date) return null;
    const end = new Date(props.subscription.end_date);
    const now = new Date();
    const diff = Math.ceil((end - now) / (1000 * 60 * 60 * 24));
    return diff;
});

// Action Modals
const showActionModal = ref(false);
const actionType = ref('');
const actionForm = useForm({
    status: props.subscription.status,
    notes: '',
    payment_method: 'bank_transfer',
    transaction_reference: '',
    days: 30,
    plan_id: props.subscription.plan_id,
    extend_days: false,
    reason: '',
    refund: false,
});

const openAction = (type) => {
    actionType.value = type;
    actionForm.reset();
    actionForm.status = props.subscription.status;
    actionForm.plan_id = props.subscription.plan_id;
    showActionModal.value = true;
};

const submitAction = () => {
    const subId = props.subscription.id;

    switch (actionType.value) {
        case 'status':
            actionForm.post(route('admin.subscriptions.update-status', subId), {
                onSuccess: () => showActionModal.value = false,
            });
            break;
        case 'payment':
            actionForm.post(route('admin.subscriptions.confirm-payment', subId), {
                onSuccess: () => showActionModal.value = false,
            });
            break;
        case 'plan':
            actionForm.post(route('admin.subscriptions.change-plan', subId), {
                onSuccess: () => showActionModal.value = false,
            });
            break;
        case 'extend':
            actionForm.post(route('admin.subscriptions.extend', subId), {
                onSuccess: () => showActionModal.value = false,
            });
            break;
        case 'cancel':
            actionForm.post(route('admin.subscriptions.cancel', subId), {
                onSuccess: () => showActionModal.value = false,
            });
            break;
    }
};
</script>

<template>
    <Head :title="`Suscripción #${subscription.id}`" />

    <AdminLayout>
        <template #header>
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-4">
                    <Link :href="route('admin.subscriptions.index')" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
                        <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>
                    <h2 class="text-xl font-semibold leading-tight text-gray-800 dark:text-white">
                        Suscripción #{{ subscription.id }}
                    </h2>
                    <span :class="['px-3 py-1 rounded-full text-sm font-medium', getStatusBadge(subscription.status)]">
                        {{ getStatusLabel(subscription.status) }}
                    </span>
                </div>
            </div>
        </template>

        <div class="py-8">
            <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                    <!-- Main Info -->
                    <div class="lg:col-span-2 space-y-6">
                        <!-- Subscription Details -->
                        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
                            <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-700">
                                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Detalles de la Suscripción</h3>
                            </div>
                            <div class="p-6 grid grid-cols-2 gap-6">
                                <div>
                                    <p class="text-sm text-gray-500 dark:text-gray-400">Plan</p>
                                    <p class="text-lg font-semibold text-gray-900 dark:text-white">{{ subscription.plan?.name }}</p>
                                    <p class="text-sm text-gray-600 dark:text-gray-400">{{ formatCurrency(subscription.plan?.price) }} / {{ subscription.plan?.duration_days }} días</p>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-500 dark:text-gray-400">Duración</p>
                                    <p class="text-lg font-semibold text-gray-900 dark:text-white">
                                        {{ formatDate(subscription.start_date) }} - {{ formatDate(subscription.end_date) }}
                                    </p>
                                    <p v-if="daysRemaining !== null" :class="['text-sm', daysRemaining > 7 ? 'text-green-600' : daysRemaining > 0 ? 'text-yellow-600' : 'text-red-600']">
                                        {{ daysRemaining > 0 ? `${daysRemaining} días restantes` : daysRemaining === 0 ? 'Expira hoy' : `Expirado hace ${Math.abs(daysRemaining)} días` }}
                                    </p>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-500 dark:text-gray-400">Método de Pago</p>
                                    <p class="text-gray-900 dark:text-white capitalize">{{ subscription.payment_method || 'No especificado' }}</p>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-500 dark:text-gray-400">Fecha de Pago</p>
                                    <p class="text-gray-900 dark:text-white">{{ formatDate(subscription.payment_date, true) }}</p>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-500 dark:text-gray-400">Referencia</p>
                                    <p class="text-gray-900 dark:text-white font-mono text-sm">{{ subscription.transaction_id || '-' }}</p>
                                </div>
                                <div>
                                    <p class="text-sm text-gray-500 dark:text-gray-400">Creada</p>
                                    <p class="text-gray-900 dark:text-white">{{ formatDate(subscription.created_at, true) }}</p>
                                </div>
                            </div>
                        </div>

                        <!-- Invoice Info -->
                        <div v-if="subscription.invoice" class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
                            <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-700 flex items-center justify-between">
                                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Factura</h3>
                                <a
                                    :href="route('admin.invoices.download', subscription.invoice.id)"
                                    target="_blank"
                                    class="inline-flex items-center gap-2 px-3 py-1.5 text-sm font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 bg-blue-50 hover:bg-blue-100 dark:bg-blue-900/30 dark:hover:bg-blue-900/50 rounded-lg transition-colors"
                                >
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                                    </svg>
                                    Descargar PDF
                                </a>
                            </div>
                            <div class="p-6">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="text-lg font-semibold text-gray-900 dark:text-white">#{{ subscription.invoice.invoice_number }}</p>
                                        <p class="text-sm text-gray-500 dark:text-gray-400">{{ formatDate(subscription.invoice.created_at) }}</p>
                                    </div>
                                    <div class="text-right">
                                        <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ formatCurrency(subscription.invoice.total) }}</p>
                                        <span :class="[
                                            'px-2 py-0.5 rounded text-xs font-medium',
                                            subscription.invoice.status === 'paid' ? 'bg-green-100 text-green-700' : 'bg-yellow-100 text-yellow-700'
                                        ]">
                                            {{ subscription.invoice.status === 'paid' ? 'Pagado' : 'Pendiente' }}
                                        </span>
                                    </div>
                                </div>
                                <div v-if="subscription.invoice.tax_amount > 0" class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-700">
                                    <div class="flex justify-between text-sm">
                                        <span class="text-gray-500 dark:text-gray-400">Subtotal</span>
                                        <span class="text-gray-900 dark:text-white">{{ formatCurrency(subscription.invoice.subtotal) }}</span>
                                    </div>
                                    <div class="flex justify-between text-sm mt-1">
                                        <span class="text-gray-500 dark:text-gray-400">Impuestos</span>
                                        <span class="text-gray-900 dark:text-white">{{ formatCurrency(subscription.invoice.tax_amount) }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Receipt / Comprobante -->
                        <div v-if="subscription.invoice?.receipt_path || subscription.invoice?.selected_bank" class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
                            <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-700">
                                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Comprobante de Pago</h3>
                            </div>
                            <div class="p-6 space-y-4">
                                <!-- Selected Bank -->
                                <div v-if="subscription.invoice.selected_bank" class="flex items-center gap-3 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
                                    <span class="text-xl">🏦</span>
                                    <div>
                                        <p class="text-sm text-blue-700 dark:text-blue-300 font-medium">Banco seleccionado por el coach:</p>
                                        <p class="font-semibold text-blue-900 dark:text-blue-100">{{ subscription.invoice.selected_bank.bank_name }}</p>
                                    </div>
                                </div>

                                <!-- Receipt Image -->
                                <div v-if="subscription.invoice.receipt_path">
                                    <p class="text-sm text-gray-500 dark:text-gray-400 mb-2">Comprobante adjuntado:</p>
                                    <div class="bg-gray-50 dark:bg-gray-900 rounded-xl overflow-hidden border border-gray-200 dark:border-gray-700">
                                        <img v-if="!subscription.invoice.receipt_path.endsWith('.pdf')"
                                             :src="'/storage/' + subscription.invoice.receipt_path"
                                             alt="Comprobante de pago"
                                             class="w-full h-auto max-h-[400px] object-contain mx-auto cursor-pointer"
                                             @click="window.open('/storage/' + subscription.invoice.receipt_path, '_blank')" />
                                        <div v-else class="flex items-center justify-center p-8">
                                            <a :href="'/storage/' + subscription.invoice.receipt_path" target="_blank"
                                               class="inline-flex items-center gap-2 px-4 py-2 bg-red-100 text-red-700 rounded-lg hover:bg-red-200 transition">
                                                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6zM14 9V3.5L18.5 8H15a1 1 0 01-1-1v2z"/></svg>
                                                Ver PDF del comprobante
                                            </a>
                                        </div>
                                    </div>
                                    <a :href="'/storage/' + subscription.invoice.receipt_path" target="_blank" download
                                       class="inline-flex items-center gap-2 mt-3 text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                                        </svg>
                                        Descargar comprobante
                                    </a>
                                </div>

                                <!-- No receipt -->
                                <div v-if="!subscription.invoice.receipt_path" class="text-center py-4">
                                    <p class="text-sm text-gray-400 dark:text-gray-500">El coach no adjuntó comprobante de pago</p>
                                </div>
                            </div>
                        </div>

                        <!-- Audit Log -->
                        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
                            <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-700">
                                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Historial de Cambios</h3>
                            </div>
                            <div class="divide-y divide-gray-100 dark:divide-gray-700">
                                <div v-for="log in auditLogs" :key="log.id" class="px-6 py-4 flex items-start gap-4">
                                    <div class="w-10 h-10 flex-shrink-0 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center text-lg">
                                        {{ getActionIcon(log.action) }}
                                    </div>
                                    <div class="flex-1 min-w-0">
                                        <p class="text-sm font-medium text-gray-900 dark:text-white">
                                            {{ getActionLabel(log.action) }}
                                        </p>
                                        <p class="text-xs text-gray-500 dark:text-gray-400">
                                            por {{ log.admin?.name || 'Sistema' }} • {{ formatDate(log.created_at, true) }}
                                        </p>
                                        <div v-if="log.old_values || log.new_values" class="mt-2 text-xs text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-900/50 rounded p-2">
                                            <p v-if="log.old_values?.status">
                                                Estado: <span class="font-medium">{{ getStatusLabel(log.old_values.status) }}</span> → <span class="font-medium">{{ getStatusLabel(log.new_values?.status) }}</span>
                                            </p>
                                            <p v-if="log.new_values?.days">Días agregados: <span class="font-medium">{{ log.new_values.days }}</span></p>
                                            <p v-if="log.notes">Nota: {{ log.notes }}</p>
                                        </div>
                                    </div>
                                </div>
                                <div v-if="!auditLogs?.length" class="px-6 py-8 text-center text-gray-500 dark:text-gray-400">
                                    No hay registros de cambios
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Sidebar -->
                    <div class="space-y-6">
                        <!-- User Info -->
                        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
                            <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-700">
                                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Coach</h3>
                            </div>
                            <div class="p-6">
                                <div class="flex items-center gap-4">
                                    <div class="h-16 w-16 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white text-2xl font-bold">
                                        {{ subscription.user?.name?.charAt(0)?.toUpperCase() || '?' }}
                                    </div>
                                    <div>
                                        <p class="font-semibold text-gray-900 dark:text-white">{{ subscription.user?.name }}</p>
                                        <p class="text-sm text-gray-500 dark:text-gray-400">{{ subscription.user?.email }}</p>
                                    </div>
                                </div>
                                <div class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-700">
                                    <p class="text-sm text-gray-500 dark:text-gray-400">ID de Usuario</p>
                                    <p class="font-mono text-sm text-gray-900 dark:text-white">{{ subscription.user_id }}</p>
                                </div>
                            </div>
                        </div>

                        <!-- Actions -->
                        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
                            <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-700">
                                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Acciones</h3>
                            </div>
                            <div class="p-4 space-y-2">
                                <button
                                    @click="openAction('status')"
                                    class="w-full flex items-center gap-3 px-4 py-3 text-left text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg transition-colors"
                                >
                                    <svg class="w-5 h-5 text-blue-600" 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>
                                    Cambiar Estado
                                </button>

                                <button
                                    v-if="subscription.status === 'pending'"
                                    @click="openAction('payment')"
                                    class="w-full flex items-center gap-3 px-4 py-3 text-left text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg transition-colors"
                                >
                                    <svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" />
                                    </svg>
                                    Confirmar Pago
                                </button>

                                <button
                                    @click="openAction('plan')"
                                    class="w-full flex items-center gap-3 px-4 py-3 text-left text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg transition-colors"
                                >
                                    <svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
                                    </svg>
                                    Cambiar Plan
                                </button>

                                <button
                                    @click="openAction('extend')"
                                    class="w-full flex items-center gap-3 px-4 py-3 text-left text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg transition-colors"
                                >
                                    <svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                                    </svg>
                                    Extender Suscripción
                                </button>

                                <button
                                    v-if="subscription.status !== 'cancelled'"
                                    @click="openAction('cancel')"
                                    class="w-full flex items-center gap-3 px-4 py-3 text-left text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 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="M6 18L18 6M6 6l12 12" />
                                    </svg>
                                    Cancelar Suscripción
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Action Modal -->
        <div v-if="showActionModal" class="fixed inset-0 z-50 overflow-y-auto">
            <div class="flex items-center justify-center min-h-screen px-4">
                <div class="fixed inset-0 bg-gray-500/75 dark:bg-gray-900/80" @click="showActionModal = false"></div>

                <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-xl max-w-md w-full p-6">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                        {{ actionType === 'status' ? 'Cambiar Estado' :
                           actionType === 'payment' ? 'Confirmar Pago' :
                           actionType === 'plan' ? 'Cambiar Plan' :
                           actionType === 'extend' ? 'Extender Suscripción' :
                           'Cancelar Suscripción' }}
                    </h3>

                    <form @submit.prevent="submitAction" class="space-y-4">
                        <!-- Status Change -->
                        <template v-if="actionType === 'status'">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Nuevo Estado</label>
                                <select v-model="actionForm.status" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                                    <option value="active">Activo</option>
                                    <option value="pending">Pendiente</option>
                                    <option value="expired">Expirado</option>
                                    <option value="cancelled">Cancelado</option>
                                    <option value="suspended">Suspendido</option>
                                </select>
                            </div>
                        </template>

                        <!-- Payment Confirmation -->
                        <template v-if="actionType === 'payment'">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Método de Pago</label>
                                <select v-model="actionForm.payment_method" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                                    <option value="bank_transfer">Transferencia Bancaria</option>
                                    <option value="cash">Efectivo</option>
                                    <option value="other">Otro</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Referencia de Transacción</label>
                                <input v-model="actionForm.transaction_reference" type="text" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white" placeholder="Número de referencia..." />
                            </div>
                        </template>

                        <!-- Plan Change -->
                        <template v-if="actionType === 'plan'">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Nuevo Plan</label>
                                <select v-model="actionForm.plan_id" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white">
                                    <option v-for="plan in plans" :key="plan.id" :value="plan.id">{{ plan.name }} - ${{ plan.price }}</option>
                                </select>
                            </div>
                            <div class="flex items-center">
                                <input v-model="actionForm.extend_days" type="checkbox" class="rounded border-gray-300 text-blue-600" id="extend_days" />
                                <label for="extend_days" class="ml-2 text-sm text-gray-700 dark:text-gray-300">Extender duración según el nuevo plan</label>
                            </div>
                        </template>

                        <!-- Extend -->
                        <template v-if="actionType === 'extend'">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Días a agregar</label>
                                <input v-model="actionForm.days" type="number" min="1" max="365" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white" />
                            </div>
                        </template>

                        <!-- Cancel -->
                        <template v-if="actionType === 'cancel'">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Razón de cancelación *</label>
                                <textarea v-model="actionForm.reason" rows="3" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white" required></textarea>
                            </div>
                            <div class="flex items-center">
                                <input v-model="actionForm.refund" type="checkbox" class="rounded border-gray-300 text-blue-600" id="refund_modal" />
                                <label for="refund_modal" class="ml-2 text-sm text-gray-700 dark:text-gray-300">Solicitar reembolso</label>
                            </div>
                        </template>

                        <!-- Notes (common) -->
                        <div v-if="actionType !== 'cancel'">
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Notas (opcional)</label>
                            <textarea v-model="actionForm.notes" rows="2" class="w-full rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white" placeholder="Notas internas..."></textarea>
                        </div>

                        <div class="flex justify-end gap-3 pt-4">
                            <button type="button" @click="showActionModal = false" class="px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg">
                                Cancelar
                            </button>
                            <button type="submit" :disabled="actionForm.processing" :class="[
                                'px-4 py-2 rounded-lg disabled:opacity-50',
                                actionType === 'cancel' ? 'bg-red-600 text-white hover:bg-red-700' : 'bg-blue-600 text-white hover:bg-blue-700'
                            ]">
                                {{ actionForm.processing ? 'Guardando...' : 'Confirmar' }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </AdminLayout>
</template>
