<div x-data="app" class="bg-white rounded-lg shadow">
    <div x-show="loading" class="fixed inset-0 bg-gray-800 bg-opacity-75 flex justify-center items-center z-50">
        <img src="../img/loading.gif" alt="Cargando..." class="w-16 h-16" />
    </div>

    <div class="container mx-auto p-6 w-full">
        <div class="justify-between items-center w-full md:flex mb-4">
            <div>
                <h1 class="text-2xl font-bold mb-1">Reglas de Notificación</h1>
                <p class="text-sm text-gray-500">Define cuándo y cómo se envían las alertas automáticas</p>
            </div>
            <button @click="addModal = true" class="mt-3 md:mt-0 bg-[#8eb02f] text-white px-4 py-2 rounded text-sm">+ Nueva regla</button>
        </div>

        <div class="overflow-x-auto">
            <table class="table-auto w-full text-sm">
                <thead class="text-left border-b border-gray-200 bg-gray-50">
                    <tr>
                        <th class="py-2 px-3">Nombre</th>
                        <th class="py-2 px-3">Evento</th>
                        <th class="py-2 px-3">Días</th>
                        <th class="py-2 px-3">Plantilla</th>
                        <th class="py-2 px-3">Aplica a</th>
                        <th class="py-2 px-3">Pasarela</th>
                        <th class="py-2 px-3">Estado</th>
                        <th class="py-2 px-3 w-24"></th>
                    </tr>
                </thead>
                <tbody class="text-gray-600">
                    <template x-for="d in datos" :key="d.ID">
                        <tr class="hover:bg-gray-50 border-b border-gray-100">
                            <td class="py-2 px-3 font-medium" x-text="d.nombre"></td>
                            <td class="py-2 px-3">
                                <span class="px-2 py-0.5 rounded text-xs font-medium"
                                    :class="{
                                        'bg-orange-100 text-orange-700': d.tipo_evento==='vencimiento_proximo',
                                        'bg-red-100 text-red-700': d.tipo_evento==='ya_vencido',
                                        'bg-green-100 text-green-700': d.tipo_evento==='bienvenida',
                                        'bg-blue-100 text-blue-700': d.tipo_evento==='pago_recibido',
                                        'bg-gray-100 text-gray-600': d.tipo_evento==='manual'
                                    }"
                                    x-text="tipoEventoLabel(d.tipo_evento)"></span>
                            </td>
                            <td class="py-2 px-3">
                                <span x-show="d.tipo_evento==='vencimiento_proximo'" class="px-2 py-0.5 bg-orange-100 text-orange-700 rounded text-xs font-semibold" x-text="d.dias_antes+' días'"></span>
                                <span x-show="d.tipo_evento!=='vencimiento_proximo'" class="text-gray-300 text-xs">—</span>
                            </td>
                            <td class="py-2 px-3 text-gray-500" x-text="d.plantilla?.nombre||'—'"></td>
                            <td class="py-2 px-3">
                                <span class="px-2 py-0.5 rounded text-xs bg-gray-100 text-gray-600" x-text="d.aplica_a"></span>
                            </td>
                            <td class="py-2 px-3">
                                <span class="px-2 py-0.5 rounded text-xs font-medium"
                                    :class="d.pasarela_enlace==='dlocal' ? 'bg-blue-100 text-blue-700' : d.pasarela_enlace==='ninguna' ? 'bg-gray-100 text-gray-500' : 'bg-green-100 text-green-700'"
                                    x-text="d.pasarela_enlace==='dlocal' ? 'dLocal' : d.pasarela_enlace==='ninguna' ? 'Ninguna' : 'Bold'"></span>
                            </td>
                            <td class="py-2 px-3">
                                <button @click="toggleActivo(d)"
                                    :class="d.activo ? 'bg-green-500' : 'bg-gray-300'"
                                    class="relative inline-flex h-5 w-9 items-center rounded-full transition-colors">
                                    <span :class="d.activo ? 'translate-x-5' : 'translate-x-1'"
                                        class="inline-block h-3 w-3 bg-white rounded-full transition-transform"></span>
                                </button>
                            </td>
                            <td class="py-2 px-3">
                                <div class="flex gap-2">
                                    <button @click="openEdit(d)" class="text-gray-400 hover:text-[#8eb02f]">
                                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"/></svg>
                                    </button>
                                    <button @click="openDelete(d)" class="text-gray-400 hover:text-red-500">
                                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"/></svg>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    </template>
                    <tr x-show="!loading && datos.length===0">
                        <td colspan="8" class="text-center text-gray-400 py-8">Sin reglas configuradas</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- Modal Crear / Editar -->
    <div x-show="addModal || editModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
        <div class="bg-white rounded-lg shadow-xl w-full max-w-md mx-4 p-6" @click.stop>
            <h2 class="text-lg font-semibold mb-4" x-text="editModal ? 'Editar Regla' : 'Nueva Regla'"></h2>
            <form @submit.prevent="save()">
                <div class="space-y-3">
                    <div>
                        <label class="text-xs font-medium text-gray-600">Nombre *</label>
                        <input x-model="form.nombre" required class="mt-1 w-full border rounded px-3 py-2 text-sm" />
                    </div>
                    <div>
                        <label class="text-xs font-medium text-gray-600">Tipo de evento *</label>
                        <select x-model="form.tipo_evento" required class="mt-1 w-full border rounded px-3 py-2 text-sm">
                            <option value="vencimiento_proximo">⏰ Próximo a vencer (X días antes)</option>
                            <option value="ya_vencido">🔴 Servicio ya vencido</option>
                            <option value="bienvenida">🎉 Bienvenida (al activar contrato)</option>
                            <option value="pago_recibido">✅ Pago recibido (al confirmar pago)</option>
                            <option value="manual">✋ Manual (sin disparo automático)</option>
                        </select>
                        <p class="text-xs text-gray-400 mt-1">
                            <span x-show="form.tipo_evento==='bienvenida'">Se dispara automáticamente cuando se activa un contrato nuevo.</span>
                            <span x-show="form.tipo_evento==='pago_recibido'">Se dispara automáticamente cuando se confirma un pago (Bold / dLocal).</span>
                            <span x-show="form.tipo_evento==='manual'">Solo se envía desde el historial o de forma programada manualmente.</span>
                        </p>
                    </div>
                    <div x-show="form.tipo_evento==='vencimiento_proximo'">
                        <label class="text-xs font-medium text-gray-600">Días antes del vencimiento *</label>
                        <input x-model="form.dias_antes" type="number" min="1" max="365"
                            :required="form.tipo_evento==='vencimiento_proximo'"
                            class="mt-1 w-full border rounded px-3 py-2 text-sm" />
                    </div>
                    <div>
                        <label class="text-xs font-medium text-gray-600">Plantilla de correo *</label>
                        <select x-model="form.plantilla_id" required class="mt-1 w-full border rounded px-3 py-2 text-sm">
                            <option value="">Seleccionar...</option>
                            <template x-for="p in plantillas" :key="p.ID">
                                <option :value="p.ID" x-text="p.nombre + ' (' + p.tipo + ')'"></option>
                            </template>
                        </select>
                    </div>
                    <div x-show="['vencimiento_proximo','ya_vencido','manual'].includes(form.tipo_evento)">
                        <label class="text-xs font-medium text-gray-600">Pasarela de pago (enlace)</label>
                        <select x-model="form.pasarela_enlace" class="mt-1 w-full border rounded px-3 py-2 text-sm">
                            <option value="bold">Bold (Colombia)</option>
                            <option value="dlocal">dLocal</option>
                            <option value="ninguna">Ninguna (sin enlace de pago)</option>
                        </select>
                        <p class="text-xs text-gray-400 mt-1">Genera automáticamente <code>&#123;&#123;.EnlacePago&#125;&#125;</code> en la plantilla</p>
                    </div>
                    <div>
                        <label class="text-xs font-medium text-gray-600">Aplica a</label>
                        <select x-model="form.aplica_a" class="mt-1 w-full border rounded px-3 py-2 text-sm">
                            <option value="todos">Todos</option>
                            <option value="renovable">Solo renovables</option>
                            <option value="unico">Solo únicos</option>
                        </select>
                    </div>
                    <div class="flex items-center gap-2">
                        <input type="checkbox" x-model="form.activo" id="activo_regla" />
                        <label for="activo_regla" class="text-sm">Activa</label>
                    </div>
                </div>
                <div class="flex justify-end gap-2 mt-5">
                    <button type="button" @click="closeModals()" class="px-4 py-2 border rounded text-sm">Cancelar</button>
                    <button type="submit" class="px-4 py-2 bg-[#8eb02f] text-white rounded text-sm" :disabled="loading">
                        <span x-text="loading ? 'Guardando…' : 'Guardar'"></span>
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Modal Eliminar -->
    <div x-show="deleteModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
        <div class="bg-white rounded-lg shadow-xl p-6 w-full max-w-sm mx-4 text-center" @click.stop>
            <p class="font-semibold mb-1">¿Eliminar regla?</p>
            <p class="text-sm text-gray-400 mb-5">Esta acción no se puede deshacer.</p>
            <div class="flex justify-center gap-3">
                <button @click="closeModals()" class="px-4 py-2 border rounded text-sm">Cancelar</button>
                <button @click="deleteItem()" class="px-4 py-2 bg-red-500 text-white rounded text-sm">Eliminar</button>
            </div>
        </div>
    </div>

    <div x-show="toast.show" x-cloak x-transition
        class="fixed bottom-4 right-4 z-[100] px-4 py-3 rounded shadow-lg text-sm text-white"
        :class="toast.type==='error' ? 'bg-red-500' : 'bg-[#8eb02f]'"
        x-text="toast.msg"></div>
</div>

<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('app', () => ({
        loading: false, datos: [], plantillas: [],
        addModal: false, editModal: false, deleteModal: false,
        selectedId: null,
        form: { nombre:'', tipo_evento:'vencimiento_proximo', dias_antes:30, plantilla_id:'', aplica_a:'todos', pasarela_enlace:'bold', activo:true },
        toast: { show:false, msg:'', type:'ok' },

        async init() {
            const [r, p] = await Promise.all([
                axios.get('/app/api/reglas-notificacion'),
                axios.get('/app/api/plantillas-correo?limit=100')
            ]);
            this.datos = r.data.registros || [];
            this.plantillas = p.data.registros || [];
        },

        async loadData() {
            const { data } = await axios.get('/app/api/reglas-notificacion');
            this.datos = data.registros || [];
        },

        openEdit(d) {
            this.form = { nombre: d.nombre, tipo_evento: d.tipo_evento||'vencimiento_proximo', dias_antes: d.dias_antes, plantilla_id: d.plantilla_id, aplica_a: d.aplica_a, pasarela_enlace: d.pasarela_enlace||'bold', activo: d.activo };
            this.selectedId = d.ID;
            this.editModal = true;
        },
        openDelete(d) { this.selectedId = d.ID; this.deleteModal = true; },
        closeModals() {
            this.addModal = this.editModal = this.deleteModal = false;
            this.selectedId = null;
            this.form = { nombre:'', tipo_evento:'vencimiento_proximo', dias_antes:30, plantilla_id:'', aplica_a:'todos', pasarela_enlace:'bold', activo:true };
        },

        async toggleActivo(d) {
            await axios.put(`/app/api/reglas-notificacion/${d.ID}`, { ...d, activo: !d.activo });
            await this.loadData();
        },

        async save() {
            this.loading = true;
            try {
                const payload = {
                    ...this.form,
                    dias_antes: parseInt(this.form.dias_antes) || 0,
                    plantilla_id: parseInt(this.form.plantilla_id) || 0,
                };                if (this.editModal) {
                    await axios.put(`/app/api/reglas-notificacion/${this.selectedId}`, payload);
                } else {
                    await axios.post('/app/api/reglas-notificacion', payload);
                }
                this.showToast('Guardado');
                this.closeModals();
                await this.loadData();
            } catch(e) { this.showToast(e.response?.data?.error||'Error', 'error'); }
            this.loading = false;
        },

        async deleteItem() {
            this.loading = true;
            try {
                await axios.delete(`/app/api/reglas-notificacion/${this.selectedId}`);
                this.showToast('Eliminado');
                this.closeModals();
                await this.loadData();
            } catch(e) { this.showToast(e.response?.data?.error||'Error', 'error'); }
            this.loading = false;
        },

        showToast(msg, type='ok') {
            this.toast = { show:true, msg, type };
            setTimeout(() => this.toast.show = false, 3000);
        },

        tipoEventoLabel(tipo) {
            const map = {
                'vencimiento_proximo': 'Próximo a vencer',
                'ya_vencido':          'Ya vencido',
                'bienvenida':          'Bienvenida',
                'pago_recibido':       'Pago recibido',
                'manual':              'Manual',
            };
            return map[tipo] || tipo;
        }
    }));
});
</script>
