<script setup>
/**
 * Admin Email Templates Index
 */
import AdminLayout from '@/Layouts/AdminLayout.vue';
import { Head, Link, router } from '@inertiajs/vue3';

defineProps({
    templates: Array,
});

const resetAll = () => {
    if (confirm('¿Restaurar todas las plantillas a valores por defecto?')) {
        router.post(route('admin.email-templates.reset'));
    }
};

const formatVariable = (variable) => '{{' + variable + '}}';
</script>

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

    <AdminLayout>
        <div class="py-6">
            <!-- Header -->
            <div class="mb-8 px-4 sm:px-0">
                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                    <div>
                        <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Plantillas de Email</h1>
                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                            Personaliza los emails que envía la plataforma
                        </p>
                    </div>
                    <button 
                        @click="resetAll"
                        class="inline-flex items-center px-4 py-2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
                    >
                        <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="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>
                        Restaurar Todo
                    </button>
                </div>
            </div>

            <!-- Templates Grid -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <div 
                    v-for="template in templates" 
                    :key="template.id"
                    class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden hover:shadow-md transition-shadow"
                >
                    <div class="p-6">
                        <div class="flex items-start justify-between mb-4">
                            <div class="flex-1">
                                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                                    {{ template.name }}
                                </h3>
                                <p class="text-xs text-gray-400 dark:text-gray-500 font-mono mt-1">
                                    {{ template.slug }}
                                </p>
                            </div>
                            <span 
                                :class="[
                                    'px-2 py-1 text-xs font-medium rounded-full',
                                    template.is_active 
                                        ? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400'
                                        : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400'
                                ]"
                            >
                                {{ template.is_active ? 'Activa' : 'Inactiva' }}
                            </span>
                        </div>

                        <div class="text-sm text-gray-500 dark:text-gray-400 mb-4">
                            <p class="truncate"><strong>Asunto:</strong> {{ template.subject }}</p>
                        </div>

                        <!-- Variables disponibles -->
                        <div v-if="template.variables?.length" class="mb-4">
                            <p class="text-xs text-gray-500 dark:text-gray-400 mb-2">Variables disponibles:</p>
                            <div class="flex flex-wrap gap-1">
                                <span 
                                    v-for="variable in template.variables" 
                                    :key="variable"
                                    class="px-2 py-0.5 bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 text-xs rounded font-mono"
                                >
                                    {{ formatVariable(variable) }}
                                </span>
                            </div>
                        </div>

                        <div class="flex items-center gap-2 pt-4 border-t border-gray-100 dark:border-gray-700">
                            <Link 
                                :href="route('admin.email-templates.edit', template.id)"
                                class="flex-1 text-center px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors"
                            >
                                Editar
                            </Link>
                            <a 
                                :href="route('admin.email-templates.preview', template.id)"
                                target="_blank"
                                class="px-4 py-2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm font-medium rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
                                title="Vista previa"
                            >
                                👁️
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Empty State -->
            <div v-if="!templates?.length" class="text-center py-12 bg-white dark:bg-gray-800 rounded-xl">
                <svg class="mx-auto h-12 w-12 text-gray-400" 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>
                <h3 class="mt-2 text-sm font-medium text-gray-900 dark:text-white">No hay plantillas</h3>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                    Ejecuta el seeder para crear las plantillas predefinidas.
                </p>
            </div>
        </div>
    </AdminLayout>
</template>
