<script setup>
import { Head, Link, usePage } from '@inertiajs/vue3';
import { computed, ref, onMounted } from 'vue';

const props = defineProps({
    subscription: Object,
    gracePeriodDays: {
        type: Number,
        default: 3,
    },
});

const page = usePage();
const appName = computed(() => page.props.appName || 'CoachPro');
const appLogo = computed(() => page.props.appLogo || null);

// Dark mode simple
const isDark = ref(false);

onMounted(() => {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
        isDark.value = savedTheme === 'dark';
    } else {
        isDark.value = window.matchMedia('(prefers-color-scheme: dark)').matches;
    }
    applyTheme();
});

const applyTheme = () => {
    if (isDark.value) {
        document.documentElement.classList.add('dark');
    } else {
        document.documentElement.classList.remove('dark');
    }
};

const toggleDarkMode = () => {
    isDark.value = !isDark.value;
    localStorage.setItem('theme', isDark.value ? 'dark' : 'light');
    applyTheme();
};

const daysInGracePeriod = computed(() => {
    if (!props.subscription?.end_date) return 0;
    const endDate = new Date(props.subscription.end_date);
    const graceEnd = new Date(endDate);
    graceEnd.setDate(graceEnd.getDate() + props.gracePeriodDays);
    const now = new Date();
    const diff = Math.ceil((graceEnd - now) / (1000 * 60 * 60 * 24));
    return Math.max(0, diff);
});

const isInGracePeriod = computed(() => daysInGracePeriod.value > 0);
</script>

<template>
    <Head title="Suscripcion Expirada" />

    <div class="min-h-screen flex flex-col bg-gray-50 dark:bg-gray-900 transition-colors duration-200">
        <!-- Header -->
        <header class="w-full py-4 px-6 flex justify-between items-center">
            <Link href="/" class="flex items-center gap-3">
                <template v-if="appLogo">
                    <img :src="appLogo" :alt="appName" class="h-10 max-w-[140px] object-contain dark:brightness-0 dark:invert" />
                </template>
                <template v-else>
                    <div class="w-10 h-10 rounded-xl flex items-center justify-center shadow-lg bg-gradient-to-br from-green-400 to-orange-500">
                        <svg class="w-6 h-6 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6h2m0 0v12m0-12h2m14 0h2m-2 0v12m0-12h-2M7 6v12m10-12v12M7 12h10" />
                        </svg>
                    </div>
                    <span class="text-xl font-bold text-gray-900 dark:text-white">{{ appName }}</span>
                </template>
            </Link>

            <!-- Dark Mode Toggle -->
            <button
                @click="toggleDarkMode"
                class="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-all"
                :title="isDark ? 'Modo claro' : 'Modo oscuro'"
            >
                <svg v-if="isDark" 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="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
                </svg>
                <svg v-else 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="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
                </svg>
            </button>
        </header>

        <!-- Main Content -->
        <main class="flex-1 flex items-center justify-center px-4 py-8">
            <div class="w-full max-w-lg">
                <!-- Card Principal -->
                <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl border border-gray-100 dark:border-gray-700 overflow-hidden">
                    <!-- Header con icono -->
                    <div class="relative px-8 pt-10 pb-6 text-center bg-gradient-to-br from-orange-50 to-amber-50 dark:from-orange-900/20 dark:to-amber-900/20">
                        <!-- Icono -->
                        <div class="w-20 h-20 mx-auto mb-6 rounded-full flex items-center justify-center shadow-lg bg-gradient-to-br from-orange-100 to-amber-100 dark:from-orange-900/50 dark:to-amber-900/50">
                            <svg class="w-10 h-10 text-orange-600 dark:text-orange-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>

                        <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">
                            Tu suscripcion ha expirado
                        </h1>
                        <p class="text-gray-600 dark:text-gray-400">
                            Para continuar usando {{ appName }} y acceder a todas las funcionalidades, renueva tu suscripcion.
                        </p>
                    </div>

                    <!-- Periodo de gracia -->
                    <div v-if="isInGracePeriod" class="mx-6 mt-6 mb-6">
                        <div class="p-4 rounded-xl border-2 border-dashed border-green-300 dark:border-green-700 bg-green-50 dark:bg-green-900/20">
                            <div class="flex items-center gap-3">
                                <div class="w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 bg-green-100 dark:bg-green-900/50">
                                    <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="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                    </svg>
                                </div>
                                <div>
                                    <p class="font-semibold text-gray-900 dark:text-white">Periodo de gracia activo</p>
                                    <p class="text-sm text-gray-600 dark:text-gray-400">
                                        Tienes <strong class="font-bold text-green-600 dark:text-green-400">{{ daysInGracePeriod }} dias</strong>
                                        para renovar sin perder acceso a tus datos.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Alerta sin gracia -->
                    <div v-else class="mx-6 mt-6 mb-6">
                        <div class="p-4 rounded-xl bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800">
                            <div class="flex items-center gap-3">
                                <div class="w-10 h-10 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center flex-shrink-0">
                                    <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 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                                    </svg>
                                </div>
                                <div>
                                    <p class="font-semibold text-red-800 dark:text-red-300">Acceso limitado</p>
                                    <p class="text-sm text-red-700 dark:text-red-400">
                                        Tu acceso a las funcionalidades premium ha sido desactivado.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Botones de accion -->
                    <div class="px-6 pb-8 space-y-3">
                        <Link
                            :href="route('coach.subscription.index')"
                            class="flex items-center justify-center gap-2 w-full py-3.5 px-4 rounded-xl font-semibold text-white shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-200 bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800"
                        >
                            <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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                            </svg>
                            Renovar Suscripcion
                        </Link>

                        <Link
                            :href="route('profile.edit')"
                            class="flex items-center justify-center gap-2 w-full py-3 px-4 rounded-xl font-medium bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                            </svg>
                            Ir a Mi Perfil
                        </Link>

                        <form method="POST" :action="route('logout')" class="w-full">
                            <input type="hidden" name="_token" :value="$page.props.csrf_token" />
                            <button
                                type="submit"
                                class="w-full py-2.5 text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 transition-colors duration-200"
                            >
                                Cerrar sesion
                            </button>
                        </form>
                    </div>
                </div>

                <!-- Ayuda -->
                <div class="mt-6 text-center">
                    <p class="text-sm text-gray-500 dark:text-gray-400">
                        Tienes preguntas?
                        <a href="mailto:soporte@coachpro.com" class="font-medium text-blue-600 dark:text-blue-400 hover:underline">
                            Contacta a soporte
                        </a>
                    </p>
                </div>
            </div>
        </main>

        <!-- Footer -->
        <footer class="py-6 text-center">
            <p class="text-sm text-gray-500 dark:text-gray-400">
                &copy; {{ new Date().getFullYear() }} {{ appName }}. Todos los derechos reservados.
            </p>
        </footer>
    </div>
</template>
