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

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

const activeFilter = ref('all');

const filteredPlans = computed(() => {
    if (activeFilter.value === 'all') return props.plans;
    return props.plans.filter(p => {
        if (activeFilter.value === 'active') return p.is_active;
        if (activeFilter.value === 'inactive') return !p.is_active;
        return true;
    });
});

const deletePlan = (plan) => {
    if (confirm('¿Eliminar este plan? Esta acción no se puede deshacer.')) {
        router.delete(route('coach.plans.destroy', plan.id));
    }
};

const linkCopiedSlug = ref(null);
const copyLink = (slug) => {
    const url = route('public.coach-plan', slug);
    navigator.clipboard.writeText(url);
    linkCopiedSlug.value = slug;
    setTimeout(() => { linkCopiedSlug.value = null; }, 2500);
};

const statusColors = {
    pending: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400',
    paid: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400',
    cancelled: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-400',
    expired: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400',
};
</script>

<template>
    <Head title="Mis Planes de Venta" />

    <CoachLayout>
        <template #header>
            <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                <div>
                    <h2 class="text-xl font-semibold leading-tight text-gray-800 dark:text-white">
                        Mis Planes de Venta
                    </h2>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                        Crea planes para que tus clientes puedan comprar y pagar directamente a tu PayPal
                    </p>
                </div>
                <div class="flex flex-wrap gap-2">
                    <Link
                        :href="route('coach.email-templates.index')"
                        class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition"
                    >
                        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                        </svg>
                        Plantillas Email
                    </Link>
                    <Link
                        :href="route('coach.plans.create')"
                        class="inline-flex items-center px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white font-medium rounded-md transition"
                    >
                        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                        </svg>
                        Crear Plan
                    </Link>
                </div>
            </div>
        </template>

        <div class="py-6">
            <!-- Stats Cards -->
            <div v-if="purchaseStats" class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-4">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 rounded-lg bg-green-100 dark:bg-green-900/30 flex items-center justify-center">
                            <svg class="w-5 h-5 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                            </svg>
                        </div>
                        <div>
                            <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ purchaseStats.paid || 0 }}</p>
                            <p class="text-xs text-gray-500 dark:text-gray-400">Pagados</p>
                        </div>
                    </div>
                </div>
                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-4">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 rounded-lg bg-yellow-100 dark:bg-yellow-900/30 flex items-center justify-center">
                            <svg class="w-5 h-5 text-yellow-600 dark:text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                        </div>
                        <div>
                            <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ purchaseStats.pending || 0 }}</p>
                            <p class="text-xs text-gray-500 dark:text-gray-400">Pendientes</p>
                        </div>
                    </div>
                </div>
                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-4">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 rounded-lg bg-red-100 dark:bg-red-900/30 flex items-center justify-center">
                            <svg class="w-5 h-5 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                        </div>
                        <div>
                            <p class="text-2xl font-bold text-gray-900 dark:text-white">{{ purchaseStats.expired || 0 }}</p>
                            <p class="text-xs text-gray-500 dark:text-gray-400">Expirados</p>
                        </div>
                    </div>
                </div>
                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-4">
                    <div class="flex items-center gap-3">
                        <div class="w-10 h-10 rounded-lg bg-indigo-100 dark:bg-indigo-900/30 flex items-center justify-center">
                            <svg class="w-5 h-5 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                        </div>
                        <div>
                            <p class="text-2xl font-bold text-gray-900 dark:text-white">${{ Number(purchaseStats.totalRevenue || 0).toFixed(0) }}</p>
                            <p class="text-xs text-gray-500 dark:text-gray-400">Ingresos</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Filter tabs -->
            <div class="flex gap-2 mb-4">
                <button
                    @click="activeFilter = 'all'"
                    :class="[
                        'px-3 py-1.5 text-sm font-medium rounded-lg transition',
                        activeFilter === 'all'
                            ? 'bg-indigo-600 text-white'
                            : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
                    ]"
                >
                    Todos ({{ plans.length }})
                </button>
                <button
                    @click="activeFilter = 'active'"
                    :class="[
                        'px-3 py-1.5 text-sm font-medium rounded-lg transition',
                        activeFilter === 'active'
                            ? 'bg-green-600 text-white'
                            : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
                    ]"
                >
                    Activos ({{ plans.filter(p => p.is_active).length }})
                </button>
                <button
                    @click="activeFilter = 'inactive'"
                    :class="[
                        'px-3 py-1.5 text-sm font-medium rounded-lg transition',
                        activeFilter === 'inactive'
                            ? 'bg-gray-600 text-white'
                            : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'
                    ]"
                >
                    Inactivos ({{ plans.filter(p => !p.is_active).length }})
                </button>
            </div>

            <!-- Plans Grid -->
            <div v-if="filteredPlans.length > 0" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <div
                    v-for="plan in filteredPlans"
                    :key="plan.id"
                    class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden"
                >
                    <!-- Plan Image or Default -->
                    <div class="h-32 bg-gradient-to-r from-indigo-500 to-purple-600 flex items-center justify-center">
                        <img
                            v-if="plan.image"
                            :src="`/storage/${plan.image}`"
                            class="w-full h-full object-cover"
                            :alt="plan.name"
                        >
                        <span v-else class="text-4xl">💪</span>
                    </div>

                    <div class="p-5">
                        <div class="flex items-start justify-between mb-3">
                            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                                {{ plan.name }}
                            </h3>
                            <span
                                :class="[
                                    'px-2 py-1 text-xs font-medium rounded-full',
                                    plan.is_active
                                        ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400'
                                        : 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-400'
                                ]"
                            >
                                {{ plan.is_active ? 'Activo' : 'Inactivo' }}
                            </span>
                        </div>

                        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4 line-clamp-2">
                            {{ plan.description || 'Sin descripción' }}
                        </p>

                        <div class="flex items-baseline mb-4">
                            <span class="text-3xl font-bold text-gray-900 dark:text-white">
                                ${{ Number(plan.price).toFixed(2) }}
                            </span>
                            <span class="text-gray-500 dark:text-gray-400 ml-2">
                                / {{ plan.duration_days }} días
                            </span>
                        </div>

                        <div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400 mb-4">
                            <span>📊 {{ plan.purchases_count || 0 }} compras</span>
                            <span>✅ {{ plan.active_purchases_count || 0 }} activas</span>
                        </div>

                        <!-- Actions -->
                        <div class="flex flex-wrap gap-2">
                            <div class="flex-1 relative">
                                <button
                                    @click="copyLink(plan.slug)"
                                    class="w-full inline-flex justify-center items-center px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm font-medium transition"
                                    :class="linkCopiedSlug === plan.slug ? 'text-green-700 dark:text-green-300 border-green-300 dark:border-green-600 bg-green-50 dark:bg-green-900/30' : 'text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600'"
                                    title="Copiar enlace público"
                                >
                                    <svg v-if="linkCopiedSlug !== plan.slug" class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
                                    </svg>
                                    <svg v-else class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                    </svg>
                                    {{ linkCopiedSlug === plan.slug ? '¡Copiado!' : 'Enlace' }}
                                </button>
                                <transition
                                    enter-active-class="transition ease-out duration-200"
                                    enter-from-class="opacity-0 translate-y-1"
                                    enter-to-class="opacity-100 translate-y-0"
                                    leave-active-class="transition ease-in duration-150"
                                    leave-from-class="opacity-100 translate-y-0"
                                    leave-to-class="opacity-0 translate-y-1"
                                >
                                    <div v-if="linkCopiedSlug === plan.slug" class="absolute top-full left-1/2 -translate-x-1/2 mt-2 px-3 py-1.5 bg-gray-900 dark:bg-gray-600 text-white text-xs rounded-lg shadow-lg whitespace-nowrap z-10">
                                        Enlace copiado al portapapeles
                                    </div>
                                </transition>
                            </div>
                            <Link
                                :href="route('coach.plans.show', plan.id)"
                                class="flex-1 inline-flex justify-center items-center px-3 py-2 border border-indigo-300 dark:border-indigo-600 rounded-md text-sm font-medium text-indigo-700 dark:text-indigo-300 bg-indigo-50 dark:bg-indigo-900/30 hover:bg-indigo-100 dark:hover:bg-indigo-900/50 transition"
                            >
                                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                </svg>
                                Ver
                            </Link>
                            <Link
                                :href="route('coach.plans.edit', plan.id)"
                                class="inline-flex justify-center items-center px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition"
                            >
                                <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                                </svg>
                            </Link>
                            <button
                                @click="deletePlan(plan)"
                                class="inline-flex justify-center items-center px-3 py-2 border border-red-300 dark:border-red-600 rounded-md text-sm font-medium text-red-700 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/30 transition"
                            >
                                <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Empty State -->
            <div v-else class="text-center py-12 bg-white dark:bg-gray-800 rounded-xl shadow-sm">
                <svg class="mx-auto h-16 w-16 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
                </svg>
                <h3 class="mt-4 text-lg font-medium text-gray-900 dark:text-white">No tienes planes creados</h3>
                <p class="mt-2 text-gray-500 dark:text-gray-400">
                    Crea tu primer plan para que tus clientes puedan comprarlo y pagarte directamente por PayPal.
                </p>
                <Link
                    :href="route('coach.plans.create')"
                    class="mt-6 inline-flex items-center px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white font-medium rounded-md transition"
                >
                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                    </svg>
                    Crear mi primer plan
                </Link>
            </div>
        </div>
    </CoachLayout>
</template>

<style scoped>
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
</style>
