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

const props = defineProps({
    templates: Array,
});

const getStatusBadge = (isActive, isCustom) => {
    if (!isActive) {
        return { class: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-400', text: 'Desactivada' };
    }
    if (isCustom) {
        return { class: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400', text: 'Personalizada' };
    }
    return { class: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400', text: 'Por defecto' };
};
</script>

<template>
    <Head title="Plantillas de Email" />

    <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">
                        Plantillas de Email
                    </h2>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                        Personaliza los emails que se envían a tus clientes de tus planes
                    </p>
                </div>
                <Link
                    :href="route('coach.plans.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="M10 19l-7-7m0 0l7-7m-7 7h18" />
                    </svg>
                    Volver a Mis Planes
                </Link>
            </div>
        </template>

        <div class="py-6">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <!-- Templates Grid -->
                <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
                    <div
                        v-for="template in templates"
                        :key="template.type"
                        class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden hover:shadow-md transition-shadow"
                    >
                        <div class="p-5">
                            <div class="flex items-start justify-between mb-3">
                                <div class="flex items-center gap-2">
                                    <span class="text-2xl">
                                        {{ template.type === 'purchase_confirmed' ? '✅' : 
                                           template.type === 'purchase_pending' ? '🛒' : 
                                           template.type === 'payment_reminder' ? '⏰' : 
                                           template.type === 'plan_expiring' ? '⚠️' : 
                                           template.type === 'plan_expired' ? '📅' : '🔒' }}
                                    </span>
                                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                                        {{ template.name }}
                                    </h3>
                                </div>
                                <span :class="['px-2 py-1 text-xs font-medium rounded-full', getStatusBadge(template.is_active, template.is_custom).class]">
                                    {{ getStatusBadge(template.is_active, template.is_custom).text }}
                                </span>
                            </div>
                            
                            <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">
                                {{ template.description }}
                            </p>

                            <div class="mb-4 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                                <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">Asunto:</p>
                                <p class="text-sm text-gray-900 dark:text-white truncate">
                                    {{ template.subject }}
                                </p>
                            </div>

                            <div class="flex flex-wrap gap-1 mb-4">
                                <span
                                    v-for="variable in template.variables"
                                    :key="variable"
                                    class="px-2 py-0.5 text-xs bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-400 rounded"
                                >
                                    <span v-text="'{{' + variable + '}}'"></span>
                                </span>
                            </div>

                            <Link
                                :href="route('coach.email-templates.edit', template.type)"
                                class="inline-flex items-center justify-center w-full px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium rounded-lg transition"
                            >
                                <svg class="w-4 h-4 mr-2" 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>
                                Editar Plantilla
                            </Link>
                        </div>
                    </div>
                </div>

                <!-- Info Card -->
                <div class="mt-8 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-xl p-6">
                    <div class="flex items-start gap-4">
                        <div class="flex-shrink-0">
                            <svg class="w-6 h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                        </div>
                        <div>
                            <h4 class="text-sm font-semibold text-blue-800 dark:text-blue-300 mb-1">
                                ¿Cómo funcionan las plantillas?
                            </h4>
                            <p class="text-sm text-blue-700 dark:text-blue-400">
                                Las plantillas personalizadas se utilizan para los emails automáticos enviados a los compradores de tus planes.
                                Usa las variables disponibles (ej: <code class="bg-blue-100 dark:bg-blue-800 px-1 rounded" v-text="'{{buyer_name}}'"></code>) 
                                para incluir información dinámica en tus mensajes.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </CoachLayout>
</template>
