@extends('layouts.app')

@section('title', 'Ajustes de WhatsApp')

@section('content')
<div class="h-full flex flex-col space-y-6" x-data="whatsappSettingsManager()">
    <!-- Encabezado Estilizado -->
    <div class="relative bg-white dark:bg-slate-900 rounded-[2.5rem] p-8 border border-slate-100 dark:border-slate-800 shadow-sm overflow-hidden mb-8">
        <div class="absolute top-0 right-0 -mr-16 -mt-16 w-64 h-64 bg-brand-orange/5 rounded-full blur-3xl"></div>
        <div class="relative flex flex-col md:flex-row justify-between items-center gap-6">
            <div class="flex items-center gap-6">
                <div class="w-16 h-16 rounded-2xl bg-brand-orange/10 flex items-center justify-center text-brand-orange shadow-inner">
                    <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24"><path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.246 2.248 3.484 5.232 3.483 8.412-.003 6.557-5.338 11.892-11.893 11.892-1.997-.001-3.951-.5-5.688-1.448l-6.308 1.656zm6.29-4.139c1.52.907 3.013 1.385 4.62 1.386 5.405.003 9.803-4.395 9.805-9.802.002-2.618-1.017-5.078-2.871-6.932-1.854-1.853-4.312-2.871-6.931-2.872-5.405 0-9.803 4.398-9.806 9.806-.001 1.673.447 3.307 1.293 4.747l-.815 2.979 3.04-.797zm10.37-6.498c-.281-.141-1.662-.821-1.919-.914-.258-.093-.446-.14-.634.141-.188.281-.727.914-.891 1.101-.164.188-.328.211-.609.07-.281-.141-1.189-.439-2.264-1.401-.837-.746-1.401-1.668-1.565-1.949-.164-.281-.017-.433.123-.573.126-.126.281-.328.422-.492.141-.164.188-.281.281-.469.093-.188.047-.352-.023-.492-.07-.141-.634-1.526-.867-2.09-.227-.546-.458-.472-.634-.48-.163-.008-.352-.01-.54-.01s-.492.07-.75.352c-.258.281-.984.961-.984 2.344 0 1.383 1.007 2.719 1.147 2.907.141.188 1.984 3.029 4.808 4.246.671.29 1.196.463 1.604.593.673.214 1.286.184 1.77.112.54-.081 1.662-.68 1.897-1.336.234-.656.234-1.219.164-1.336-.07-.117-.258-.188-.54-.329z"/></svg>
                </div>
                <div>
                    <h1 class="text-2xl font-black text-slate-800 dark:text-white uppercase tracking-tight">Centro de <span class="text-brand-orange">Mensajería</span></h1>
                    <p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest mt-1">Configuración avanzada de comunicación JoinTrust</p>
                </div>
            </div>
            <div class="flex items-center gap-4">
                <div class="px-4 py-2 bg-emerald-50 dark:bg-emerald-500/10 border border-emerald-100 dark:border-emerald-500/20 rounded-xl flex items-center gap-2">
                    <div class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></div>
                    <span class="text-[9px] font-black text-emerald-600 uppercase tracking-widest">Servidor Online</span>
                </div>
                <button @click="saveTemplates" 
                        :disabled="saving"
                        class="px-6 py-3 bg-brand-orange hover:bg-brand-orange/90 text-white rounded-xl text-[10px] font-black uppercase tracking-widest shadow-lg shadow-brand-orange/20 transition-all hover:scale-105 active:scale-95 disabled:opacity-50 flex items-center gap-2">
                    <span x-show="!saving">Guardar Cambios</span>
                    <span x-show="saving">Guardando...</span>
                    <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.5" d="M5 13l4 4L19 7"></path></svg>
                </button>
            </div>
        </div>
    </div>

    <!-- PANEL DE CONTROL OPERATIVO DEL AGENTE IA (MODOS DE JORNADA) -->
    <div class="relative bg-gradient-to-br from-slate-900 via-slate-800 to-indigo-950 text-white rounded-[2.5rem] p-8 border border-slate-700/50 shadow-xl overflow-hidden mb-4">
        <div class="absolute -right-10 -bottom-10 w-48 h-48 bg-brand-orange/10 rounded-full blur-2xl"></div>
        <div class="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-6 relative z-10">
            <div>
                <div class="flex items-center gap-3">
                    <span class="px-3 py-1 bg-white/10 rounded-full text-[10px] font-black uppercase tracking-widest text-orange-400 border border-white/10 flex items-center gap-1.5">
                        <span class="w-2 h-2 rounded-full" 
                              :class="{
                                  'bg-emerald-400': shiftMode === 'manual',
                                  'bg-amber-400 animate-pulse': shiftMode === 'caliente',
                                  'bg-rose-400 animate-pulse': shiftMode === 'cierre'
                              }"></span>
                        <span x-text="shiftMode === 'manual' ? 'Modo Manual' : (shiftMode === 'caliente' ? 'Modo En Caliente' : 'Cierre de Jornada')"></span>
                    </span>
                    <span class="text-xs text-slate-400 font-bold" x-text="`Hora Bogotá: ${serverTime}`"></span>
                </div>
                <h2 class="text-xl font-black mt-2 tracking-tight">Control de Recepción Autónoma de Pedidos</h2>
                <p class="text-xs text-slate-300 mt-1 max-w-xl">
                    Define cómo interactúa el Agente IA con los clientes que escriben a WhatsApp. Cambia de modo para ausencias temporales o al finalizar la ruta de despacho.
                </p>
                <div class="mt-2 text-[11px] font-bold text-amber-300 flex items-center gap-1.5">
                    <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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                    <span>Fecha objetivo asignada a nuevos pedidos: <strong class="underline" x-text="targetDate"></strong></span>
                </div>
            </div>

            <!-- Botonera de Modos -->
            <div class="flex flex-wrap items-center gap-3 bg-black/30 p-2 rounded-2xl border border-white/10 backdrop-blur-md">
                <!-- Modo Manual -->
                <button type="button" @click="changeShiftMode('manual')"
                        :class="shiftMode === 'manual' ? 'bg-emerald-600 text-white shadow-lg shadow-emerald-600/30 ring-2 ring-emerald-400/50' : 'bg-white/5 text-slate-400 hover:text-white hover:bg-white/10'"
                        class="px-4 py-3 rounded-xl text-xs font-black uppercase tracking-wider transition-all flex items-center gap-2">
                    <span>🟢 Manual</span>
                    <span class="text-[9px] opacity-80 normal-case hidden sm:inline">(Operador en línea)</span>
                </button>

                <!-- Modo En Caliente -->
                <button type="button" @click="changeShiftMode('caliente')"
                        :class="shiftMode === 'caliente' ? 'bg-amber-600 text-white shadow-lg shadow-amber-600/30 ring-2 ring-amber-400/50' : 'bg-white/5 text-slate-400 hover:text-white hover:bg-white/10'"
                        class="px-4 py-3 rounded-xl text-xs font-black uppercase tracking-wider transition-all flex items-center gap-2"
                        title="El bot toma pedidos para HOY y auto-confirma si hay stock">
                    <span>🟡 En Caliente</span>
                    <span class="text-[9px] opacity-80 normal-case hidden sm:inline">(Para Hoy)</span>
                </button>

                <!-- Modo Cierre de Jornada -->
                <button type="button" @click="changeShiftMode('cierre')"
                        :class="shiftMode === 'cierre' ? 'bg-rose-600 text-white shadow-lg shadow-rose-600/30 ring-2 ring-rose-400/50' : 'bg-white/5 text-slate-400 hover:text-white hover:bg-white/10'"
                        class="px-4 py-3 rounded-xl text-xs font-black uppercase tracking-wider transition-all flex items-center gap-2"
                        title="El bot agenda los pedidos para MAÑANA tras cerrar despacho">
                    <span>🔴 Cierre de Jornada</span>
                    <span class="text-[9px] opacity-80 normal-case hidden sm:inline">(Para Mañana)</span>
                </button>
            </div>
        </div>
    </div>

    <!-- Contenedor Principal en Grilla -->
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
        
        <!-- Grilla de Plantillas (Izquierda - 9/12) -->
        <div class="lg:col-span-8">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <template x-for="(template, key) in templates_config" :key="key">
                    <div class="group relative flex flex-col h-full">
                        <div class="absolute -inset-0.5 bg-gradient-to-r from-brand-orange/50 to-brand-wine/50 rounded-[2rem] blur opacity-0 group-hover:opacity-10 transition duration-500"></div>
                        
                        <div class="relative flex-1 bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 rounded-[2rem] shadow-sm hover:shadow-md transition-all flex flex-col overflow-hidden"
                             :class="activeTemplate === key ? 'ring-2 ring-brand-orange/30 border-brand-orange/30' : ''">
                            
                            <!-- Header de Tarjeta -->
                            <div class="p-5 border-b border-slate-50 dark:border-slate-800/50 flex items-center gap-4 transition-colors"
                                 :class="activeTemplate === key ? 'bg-brand-orange/[0.03]' : 'bg-slate-50/30'">
                                <div class="w-12 h-12 rounded-xl text-white flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform duration-500"
                                     :class="template.color">
                                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" x-html="template.icon"></svg>
                                </div>
                                <div class="flex-1">
                                    <h3 class="text-[11px] font-black text-slate-800 dark:text-white uppercase tracking-tight" x-text="template.name"></h3>
                                    <div class="flex items-center gap-2 mt-1">
                                        <span class="text-[8px] font-bold text-slate-400 uppercase tracking-widest truncate max-w-[150px]" x-text="template.description"></span>
                                    </div>
                                </div>
                                <button @click="activeTemplate = key" 
                                        class="p-2 rounded-lg transition-colors"
                                        :class="activeTemplate === key ? 'text-brand-orange bg-brand-orange/10' : 'text-slate-300 hover:text-slate-500'">
                                    <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.5" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
                                </button>
                            </div>

                            <!-- Área de Edición -->
                            <div class="p-5 flex-1 flex flex-col gap-4">
                                <div class="relative flex-1">
                                    <textarea x-model="templates[key]" 
                                        :id="'textarea-' + key"
                                        @focus="activeTemplate = key"
                                        class="w-full h-48 bg-slate-50/50 dark:bg-slate-950/20 border-slate-100 dark:border-slate-800 rounded-2xl p-4 text-xs font-medium text-slate-600 dark:text-slate-300 focus:ring-0 focus:border-brand-orange/40 transition-all leading-relaxed placeholder-slate-300 resize-none" 
                                        placeholder="Mensaje de la plantilla..."></textarea>
                                </div>

                                <!-- Variables Mini -->
                                <div>
                                    <div class="flex items-center justify-between mb-3">
                                        <span class="text-[8px] font-black text-slate-400 uppercase tracking-widest flex items-center gap-1">
                                            <svg class="w-3 h-3 text-brand-orange" fill="currentColor" viewBox="0 0 20 20"><path d="M7 3a1 1 0 000 2h6a1 1 0 100-2H7zM4 7a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1zM2 11a2 2 0 012-2h12a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4z"></path></svg>
                                            Variables
                                        </span>
                                    </div>
                                    <div class="flex flex-wrap gap-1.5">
                                        <template x-for="v in vars[key]">
                                            <button @click="insertVar(key, v)" 
                                                class="px-2.5 py-1.5 bg-slate-100 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-slate-500 dark:text-slate-400 rounded-lg text-[7px] font-black uppercase tracking-tighter hover:border-brand-orange hover:text-brand-orange transition-all">
                                                <span x-text="'{' + v + '}'"></span>
                                            </button>
                                        </template>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        </div>

        <!-- Columna de Previsualización (Derecha - 4/12) -->
        <div class="lg:col-span-4">
            <div class="sticky top-8 space-y-6">
                <!-- Preview WhatsApp Estilo Premium -->
                <div class="bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 rounded-[2.5rem] overflow-hidden shadow-sm">
                    <div class="bg-[#075E54] p-4 flex items-center justify-between">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-full bg-slate-200 border-2 border-white/20 overflow-hidden shrink-0">
                                <img src="https://ui-avatars.com/api/?name=Join+Trust&background=4F46E5&color=fff" class="w-full h-full object-cover">
                            </div>
                            <div>
                                <h4 class="text-xs font-bold text-white leading-tight">JoinTrust <span class="px-1 py-0.5 bg-brand-orange text-[7px] rounded uppercase ml-1">Bot</span></h4>
                                <div class="flex items-center gap-1">
                                    <div class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></div>
                                    <span class="text-[9px] text-emerald-100">En línea</span>
                                </div>
                            </div>
                        </div>
                        <div class="flex gap-3 text-white/70">
                            <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="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>
                            <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="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path></svg>
                        </div>
                    </div>

                    <div class="h-[450px] bg-[#E5DDD5] dark:bg-slate-950/40 relative overflow-hidden flex flex-col">
                        <!-- Fondo WhatsApp -->
                        <div class="absolute inset-0 opacity-[0.03] dark:opacity-[0.05] pointer-events-none" style="background-image: url('https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png')"></div>
                        
                        <div class="relative flex-1 overflow-y-auto p-4 flex flex-col gap-4 custom-scrollbar">
                            <div class="self-center bg-white/60 dark:bg-slate-800/60 backdrop-blur-md px-3 py-1 rounded-full shadow-sm">
                                <span class="text-[8px] font-black text-slate-500 uppercase tracking-widest">Hoy</span>
                            </div>

                            <div class="self-start max-w-[90%] bg-white dark:bg-slate-800 p-3 rounded-2xl rounded-tl-none shadow-sm relative group animate-fade-in border border-slate-50 dark:border-slate-700">
                                <p class="text-[10px] text-slate-700 dark:text-slate-300 whitespace-pre-wrap leading-relaxed" x-text="getPreviewText()"></p>
                                <div class="flex justify-end items-center gap-1 mt-1">
                                    <span class="text-[7px] text-slate-400">12:45 PM</span>
                                    <svg class="w-3 h-3 text-brand-orange" fill="currentColor" viewBox="0 0 24 24"><path d="M22.319 6.643L11.309 18.147l-4.154-4.261-.016-.017-1.121-1.15-1.121 1.15 1.121 1.15.016.017 4.154 4.261 1.121 1.15 1.121-1.15 11.01-11.504-2.242-2.144zM11.309 18.147l-1.121 1.15 1.121 1.15 1.121-1.15-1.121-1.15zM22.319 6.643l-11.01 11.504-1.121-1.15.016-.017-4.154-4.261-2.242 2.144 6.396 6.565 11.01-11.504-2.242-2.144z"/></svg>
                                </div>
                            </div>
                        </div>

                        <div class="p-3 bg-slate-50/80 dark:bg-slate-900/80 border-t border-slate-100 dark:border-slate-800 flex items-center gap-2">
                            <div class="w-8 h-8 rounded-full bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 flex items-center justify-center text-slate-400">
                                <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="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                            </div>
                            <div class="flex-1 h-8 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-full flex items-center px-4">
                                <span class="text-[9px] text-slate-300">Escribe un mensaje...</span>
                            </div>
                            <div class="w-8 h-8 rounded-full bg-[#128C7E] flex items-center justify-center text-white shadow-lg">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"></path></svg>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Botones de Sistema Estandarizados -->
                <div class="bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 rounded-[2.5rem] p-6 shadow-sm flex flex-col gap-3">
                    <button @click="saveTemplates" 
                            :disabled="saving"
                            class="w-full py-3 bg-brand-orange hover:bg-brand-orange/90 text-white rounded-xl text-[10px] font-black uppercase tracking-widest shadow-md transition-all flex items-center justify-center gap-2">
                        <span x-show="!saving">Confirmar Configuración</span>
                        <span x-show="saving">Procesando...</span>
                    </button>
                    <a href="/pedidos" class="w-full py-3 bg-slate-50 dark:bg-slate-800 text-slate-500 dark:text-slate-400 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all hover:bg-slate-100 dark:hover:bg-slate-700 flex items-center justify-center gap-2">
                        <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="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
                        Regresar al Panel
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    function whatsappSettingsManager() {
        return {
            templates: {
                confirmacion_cliente: '',
                asignacion_ruta: '',
                disponibilidad: ''
            },
            templates_config: {
                confirmacion_cliente: {
                    name: 'Confirmación de Pedido',
                    description: 'Envío post-creación',
                    icon: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>',
                    color: 'bg-indigo-600'
                },
                asignacion_ruta: {
                    name: 'Asignación de Ruta',
                    description: 'Notificar domiciliarios',
                    icon: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"></path>',
                    color: 'bg-brand-orange'
                },
                disponibilidad: {
                    name: 'Disponibilidad Diaria',
                    description: 'Catálogo a clientes',
                    icon: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>',
                    color: 'bg-emerald-600'
                },
                cobro_saldo: {
                    name: 'Recordatorio de Saldo',
                    description: 'Cobro de deudas',
                    icon: '<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"></path>',
                    color: 'bg-rose-600'
                },
                confirmacion_pago_efectivo: {
                    name: 'Pago Efectivo',
                    description: 'Recibo de dinero físico',
                    icon: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"></path>',
                    color: 'bg-emerald-600'
                },
                confirmacion_pago_transferencia: {
                    name: 'Pago Transferencia',
                    description: 'Confirmación de soporte (En revisión)',
                    icon: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path>',
                    color: 'bg-indigo-500'
                },
                pago_verificado: {
                    name: 'Pago Verificado',
                    description: 'Confirmación final vs extracto',
                    icon: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>',
                    color: 'bg-emerald-500'
                }
            },
            vars: {
                confirmacion_cliente: ['cliente', 'orden', 'fecha', 'total', 'total_pedido', 'saldo_anterior', 'total_a_pagar', 'costo_domicilio', 'observaciones', 'detalles', 'saldo_favor', 'saldo_pendiente', 'url_actualizacion'],
                asignacion_ruta: ['domiciliario', 'fecha', 'cantidad_pedidos', 'total_cajas', 'resumen_productos', 'detalles_pedidos', 'url_ruta'],
                disponibilidad: ['cliente', 'fecha', 'lista_productos'],
                cobro_saldo: ['cliente', 'total', 'orden', 'fecha', 'balance_note', 'datos_banco'],
                confirmacion_pago_efectivo: ['orden', 'total', 'fecha', 'estado_cuenta', 'url_actualizacion'],
                confirmacion_pago_transferencia: ['orden', 'total', 'fecha', 'estado_cuenta', 'url_actualizacion'],
                pago_verificado: ['orden', 'total', 'fecha', 'estado_cuenta', 'url_actualizacion']
            },
            activeTemplate: 'confirmacion_cliente',
            saving: false,
            shiftMode: 'manual',
            targetDate: 'Cargando...',
            serverTime: '--:--',
            baseUrl: '{{ url("/") }}',

            async init() {
                try {
                    const res = await fetch(`${this.baseUrl}/settings/whatsapp-templates`);
                    this.templates = await res.json();
                } catch (e) {
                    console.error("Error loading templates:", e);
                }
                await this.loadShiftMode();
            },

            async loadShiftMode() {
                try {
                    const res = await fetch(`${this.baseUrl}/settings/whatsapp/shift-mode`);
                    if (res.ok) {
                        const data = await res.json();
                        this.shiftMode = data.modo;
                        this.targetDate = data.fecha_objetivo;
                        this.serverTime = data.hora_servidor;
                    }
                } catch (e) {
                    console.error("Error loading shift mode:", e);
                }
            },

            async changeShiftMode(newMode) {
                try {
                    const res = await fetch(`${this.baseUrl}/settings/whatsapp/shift-mode`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: JSON.stringify({ modo: newMode })
                    });
                    if (res.ok) {
                        const data = await res.json();
                        this.shiftMode = data.modo;
                        this.targetDate = data.fecha_objetivo;
                        window.dispatchEvent(new CustomEvent('notify', {
                            detail: { 
                                title: 'Modo Actualizado', 
                                message: `Agente configurado en: ${newMode.toUpperCase()}`, 
                                type: 'success' 
                            }
                        }));
                    }
                } catch (e) {
                    console.error("Error changing shift mode:", e);
                    window.dispatchEvent(new CustomEvent('notify', {
                        detail: { title: 'Error', message: 'No se pudo cambiar el modo de jornada', type: 'error' }
                    }));
                }
            },

            insertVar(template, variable) {
                const textarea = document.getElementById('textarea-' + template);
                if (!textarea) {
                    this.templates[template] += `{${variable}}`;
                    return;
                }

                const start = textarea.selectionStart;
                const end = textarea.selectionEnd;
                const text = this.templates[template] || '';
                const before = text.substring(0, start);
                const after = text.substring(end, text.length);
                const varText = `{${variable}}`;

                this.templates[template] = before + varText + after;

                // Devolver el foco y posicionar el cursor después de la variable insertada
                this.$nextTick(() => {
                    textarea.focus();
                    const newPos = start + varText.length;
                    textarea.setSelectionRange(newPos, newPos);
                });
            },

            getPreviewText() {
                let text = this.templates[this.activeTemplate] || 'Selecciona una plantilla para previsualizar...';
                
                const mockValues = {
                    cliente: 'Juan Pérez',
                    orden: '#1025',
                    fecha: 'sábado 04 de abril de 2026',
                    total: '$55,000',
                    costo_domicilio: '$5,000',
                    observaciones: 'Llamar al llegar',
                    detalles: '• 2x Fresas T1\n• 1x Frambuesa Rojas',
                    domiciliario: 'Cristian Neva',
                    cantidad_pedidos: '9',
                    total_cajas: '9',
                    resumen_productos: '2 (T1), 1 (T3), 4 (FbR), 1 (Mr), 1 (Nrnj).',
                    detalles_pedidos: 'Sandra Santa Cruz (Calle 127...): 1 Fresa T3, 2 FbR...',
                    url_ruta: 'jointrust.com/app/domiciliario/123',
                    lista_productos: '• Arándanos x 500g\n• Miel de Abeja 250ml',
                    datos_banco: 'Bancolombia Ahorros #123456789 (JoinTrust S.A.S)',
                    n_pedido: '#1025',
                    orden: '#1025',
                    balance_note: ' (Incluyendo saldo pendiente anterior de $10,000)',
                    saldo_favor: '🌟 *Nota:* Tienes un saldo a favor de $20.000. ¡Puedes usarlo en este pedido!'
                };

                Object.keys(mockValues).forEach(key => {
                    const regex = new RegExp(`{${key}}`, 'g');
                    text = text.replace(regex, mockValues[key]);
                });

                return text;
            },

            async saveTemplates() {
                this.saving = true;
                try {
                    const res = await fetch(`${this.baseUrl}/settings/whatsapp-templates`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: JSON.stringify({ templates: this.templates })
                    });
                    if (res.ok) {
                        window.dispatchEvent(new CustomEvent('notify', {
                            detail: { title: 'Guardado', message: 'Plantillas actualizadas correctamente', type: 'success' }
                        }));
                    } else {
                        throw new Error('Error en la respuesta del servidor');
                    }
                } catch (e) {
                    console.error("Error saving:", e);
                    window.dispatchEvent(new CustomEvent('notify', {
                        detail: { title: 'Error', message: 'No se pudieron guardar los cambios', type: 'error' }
                    }));
                } finally {
                    this.saving = false;
                }
            }
        }
    }
</script>
@endsection