@extends('layouts.app')

@section('title', 'Mantenimiento del Sistema')

@section('content')
<div x-data="{ activeTab: 'critical' }" class="space-y-8 animate-fade-in">
    <!-- Encabezado -->
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
        <div>
            <h1 class="text-3xl font-black text-slate-800 dark:text-white tracking-tight">Mantenimiento <span class="bg-clip-text text-transparent bg-gradient-to-r from-red-600 to-brand-wine">Crítico</span></h1>
            <p class="text-[10px] text-slate-500 font-bold uppercase tracking-[0.2em] mt-1">Advanced System Reset & Recovery</p>
        </div>
        <div class="flex items-center gap-2 px-4 py-2 bg-red-50 dark:bg-red-950/20 border border-red-100 dark:border-red-950/40 rounded-2xl">
            <div class="w-2 h-2 rounded-full bg-red-500 animate-pulse"></div>
            <span class="text-[10px] font-black uppercase tracking-widest text-red-600 dark:text-red-400">Área de Alto Riesgo</span>
        </div>
    </div>

    @if(session('success'))
        <div class="p-4 bg-emerald-50 border border-emerald-100 rounded-2xl text-emerald-700 font-bold flex items-center gap-3">
            <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="M5 13l4 4L19 7"></path></svg>
            {{ session('success') }}
        </div>
    @endif

    @if(session('error'))
        <div class="p-4 bg-red-50 border border-red-100 rounded-2xl text-red-700 font-bold flex items-center gap-3">
            <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 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            {{ session('error') }}
        </div>
    @endif

    <!-- Selector de Pestañas (Alpine.js) -->
    <div class="flex border-b border-slate-100 dark:border-slate-800 gap-4 shrink-0">
        <button @click="activeTab = 'critical'" 
                :class="activeTab === 'critical' ? 'border-brand-orange text-brand-orange dark:text-orange-400 font-black' : 'border-transparent text-slate-400 dark:text-slate-500 font-bold hover:text-slate-600 dark:hover:text-slate-300'"
                class="pb-4 px-4 border-b-2 text-[10px] uppercase tracking-widest transition-all focus:outline-none">
            Acciones Críticas
        </button>
        <button @click="activeTab = 'logs'" 
                :class="activeTab === 'logs' ? 'border-brand-orange text-brand-orange dark:text-orange-400 font-black' : 'border-transparent text-slate-400 dark:text-slate-500 font-bold hover:text-slate-600 dark:hover:text-slate-300'"
                class="pb-4 px-4 border-b-2 text-[10px] uppercase tracking-widest transition-all focus:outline-none flex items-center gap-2">
            <span>Logs del Sistema</span>
            @if(count($logs) > 0)
                <span class="px-1.5 py-0.5 rounded-full text-[9px] font-bold bg-red-100 dark:bg-red-950 text-red-600 dark:text-red-400 leading-none">
                    {{ count($logs) }}
                </span>
            @endif
        </button>
    </div>

    <!-- Pestaña 1: Cards de Mantenimiento -->
    <div x-show="activeTab === 'critical'" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-6">
        
        <!-- Copia de Seguridad -->
        <div class="glass-card-premium p-6 flex flex-col h-full border-t-4 border-t-indigo-600 bg-indigo-50/5">
            <div class="flex items-center gap-3 mb-4">
                <div class="w-10 h-10 rounded-xl bg-indigo-50 dark:bg-indigo-950 flex items-center justify-center text-indigo-600 dark:text-indigo-400 shadow-inner">
                    <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="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"></path></svg>
                </div>
                <div>
                    <h3 class="font-black text-indigo-900 dark:text-indigo-300 uppercase tracking-wider text-xs">Respaldo</h3>
                    <p class="text-[9px] font-bold text-indigo-400">Prioridad: Alta</p>
                </div>
            </div>
            <p class="text-[11px] text-slate-500 leading-relaxed font-medium flex-grow mb-6">
                Descarga un respaldo completo de la base de datos en formato SQL. **Hágalo siempre antes de cualquier reset.**
            </p>
            <button @click="openResetModal('backup')" 
                    class="w-full py-3 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl font-black uppercase tracking-widest text-[9px] transition-all shadow-lg shadow-indigo-200 dark:shadow-none">
                Generar SQL
            </button>
        </div>
        
        <!-- Reset Pedidos -->
        <div class="glass-card-premium p-6 flex flex-col h-full border-t-4 border-t-orange-500">
            <div class="flex items-center gap-3 mb-4">
                <div class="w-10 h-10 rounded-xl bg-orange-50 dark:bg-orange-950 flex items-center justify-center text-orange-600 dark:text-orange-400">
                    <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 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path></svg>
                </div>
                <div>
                    <h3 class="font-black text-slate-800 dark:text-slate-200 uppercase tracking-wider text-xs">Pedidos</h3>
                    <p class="text-[9px] font-bold text-slate-400">Impacto: Medio</p>
                </div>
            </div>
            <p class="text-[11px] text-slate-500 leading-relaxed flex-grow mb-4">
                Elimina **todos** los pedidos y detalles de venta actuales. Útil para pasar de pruebas a producción real.
            </p>
            <div class="flex justify-between items-center py-2 border-y border-slate-50 dark:border-slate-800 mb-6">
                <span class="text-[9px] font-black uppercase text-slate-400">Pedidos actuales</span>
                <span class="text-xs font-black text-orange-600 dark:text-orange-400">{{ $stats['pedidos'] }}</span>
            </div>
            <button @click="openResetModal('orders')" 
                    class="w-full py-3 bg-orange-500 hover:bg-orange-600 text-white rounded-xl font-black uppercase tracking-widest text-[9px] transition-all shadow-lg shadow-orange-200 dark:shadow-none">
                Reiniciar Pedidos
            </button>
        </div>

        <!-- Reset Productos -->
        <div class="glass-card-premium p-6 flex flex-col h-full border-t-4 border-t-emerald-500">
            <div class="flex items-center gap-3 mb-4">
                <div class="w-10 h-10 rounded-xl bg-emerald-50 dark:bg-emerald-950 flex items-center justify-center text-emerald-600 dark:text-emerald-400">
                    <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="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path></svg>
                </div>
                <div>
                    <h3 class="font-black text-slate-800 dark:text-slate-200 uppercase tracking-wider text-xs">Catálogo</h3>
                    <p class="text-[9px] font-bold text-slate-400">Impacto: Medio</p>
                </div>
            </div>
            <p class="text-[11px] text-slate-500 leading-relaxed flex-grow mb-4">
                Elimina todos los **Productos, Categorías y Souvenirs**. (No podrá borrar si hay pedidos activos ligados).
            </p>
            <div class="flex justify-between items-center py-2 border-y border-slate-50 dark:border-slate-800 mb-6">
                <span class="text-[9px] font-black uppercase text-slate-400">Productos / Categorías</span>
                <span class="text-xs font-black text-emerald-600 dark:text-emerald-400">{{ $stats['productos'] }} / {{ $stats['categorias'] }}</span>
            </div>
            <button @click="openResetModal('products')" 
                    class="w-full py-3 bg-emerald-500 hover:bg-emerald-600 text-white rounded-xl font-black uppercase tracking-widest text-[9px] transition-all shadow-lg shadow-emerald-200 dark:shadow-none">
                Borrar Catálogo
            </button>
        </div>

        <!-- Reset Inventario -->
        <div class="glass-card-premium p-6 flex flex-col h-full border-t-4 border-t-blue-500">
            <div class="flex items-center gap-3 mb-4">
                <div class="w-10 h-10 rounded-xl bg-blue-50 dark:bg-blue-950 flex items-center justify-center text-blue-600 dark:text-blue-400">
                    <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="M9 19v-6a2 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></svg>
                </div>
                <div>
                    <h3 class="font-black text-slate-800 dark:text-slate-200 uppercase tracking-wider text-xs">Limpiar Stock</h3>
                    <p class="text-[9px] font-bold text-slate-400">Impacto: Bajo</p>
                </div>
            </div>
            <p class="text-[11px] text-slate-500 leading-relaxed flex-grow mb-4">
                Mantiene los productos pero pone el **Stock Actual a 0** y **vacía el Historial de Movimientos**. Ideal para cierres de cosecha.
            </p>
            <div class="flex justify-between items-center py-2 border-y border-slate-50 dark:border-slate-800 mb-6">
                <span class="text-[9px] font-black uppercase text-slate-400">Stock Total Actual</span>
                <span class="text-xs font-black text-blue-600 dark:text-blue-400">{{ number_format($stats['stock_total']) }}</span>
            </div>
            <button @click="openResetModal('inventory')" 
                    class="w-full py-3 bg-blue-500 hover:bg-blue-600 text-white rounded-xl font-black uppercase tracking-widest text-[9px] transition-all shadow-lg shadow-blue-200 dark:shadow-none">
                Poner a Cero
            </button>
        </div>

        <!-- Reset Sistema Total -->
        <div class="glass-card-premium p-6 flex flex-col h-full border-t-4 border-t-red-600 bg-red-50/5">
            <div class="flex items-center gap-3 mb-4">
                <div class="w-10 h-10 rounded-xl bg-red-50 dark:bg-red-950 flex items-center justify-center text-red-600 dark:text-red-400">
                    <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
                </div>
                <div>
                    <h3 class="font-black text-red-700 dark:text-red-300 uppercase tracking-wider text-xs">Wipe Maestro</h3>
                    <p class="text-[9px] font-bold text-red-400">Impacto: Crítico</p>
                </div>
            </div>
            <p class="text-[11px] text-slate-500 leading-relaxed font-bold italic flex-grow mb-6">
                ¡ADVERTENCIA! Borrará Pedidos, Clientes, Direcciones y Usuarios (excepto usted). El sistema volverá a su estado inicial.
            </p>
            <button @click="openResetModal('full')" 
                    class="w-full py-3 bg-red-600 hover:bg-red-700 text-white rounded-xl font-black uppercase tracking-widest text-[9px] transition-all shadow-lg shadow-red-200 dark:shadow-none">
                Wipe Total (Reset)
            </button>
        </div>

    </div>

    <!-- Pestaña 2: Logs del Sistema -->
    <div x-show="activeTab === 'logs'" class="space-y-6" x-cloak>
        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 bg-slate-50 dark:bg-slate-900/50 p-6 rounded-3xl border border-slate-100 dark:border-slate-800">
            <div>
                <h2 class="text-base font-black text-slate-800 dark:text-white uppercase tracking-wider">Historial de Excepciones</h2>
                <p class="text-[10px] text-slate-500 font-bold uppercase tracking-widest mt-0.5">Últimos 50 errores de ejecución registrados en el laravel.log</p>
            </div>
            @if(count($logs) > 0)
                <form action="{{ route('maintenance.clear-logs') }}" method="POST" onsubmit="return confirm('¿Está seguro de limpiar todos los logs? Esta acción vaciará el archivo log.');">
                    @csrf
                    <button type="submit" class="px-5 py-3 bg-red-600 hover:bg-red-700 text-white rounded-2xl text-[10px] font-black uppercase tracking-widest shadow-lg shadow-red-200 dark:shadow-none transition-all flex items-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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                        </svg>
                        <span>Limpiar Historial de Logs</span>
                    </button>
                </form>
            @endif
        </div>

        @if(count($logs) === 0)
            <div class="py-20 text-center bg-white dark:bg-slate-800 rounded-3xl border border-slate-100 dark:border-slate-700">
                <div class="w-20 h-20 bg-emerald-50 dark:bg-emerald-950/20 rounded-[2rem] flex items-center justify-center mx-auto mb-6 text-emerald-500 border border-emerald-100 dark:border-emerald-950/50">
                    <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <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" />
                    </svg>
                </div>
                <h4 class="text-sm font-black text-slate-700 dark:text-slate-200 uppercase tracking-[0.2em] mb-2">¡Todo Limpio!</h4>
                <p class="text-[10px] font-bold text-slate-400 uppercase tracking-tight">No se encontraron registros de error recientes en el sistema.</p>
            </div>
        @else
            <div class="overflow-x-auto rounded-3xl border border-slate-100 dark:border-slate-800 shadow-sm bg-white dark:bg-slate-900">
                <table class="w-full text-left border-collapse min-w-[800px]">
                    <thead>
                        <tr class="bg-slate-50/50 dark:bg-slate-800/50 border-b border-slate-100 dark:border-slate-800">
                            <th class="py-4 px-6 text-[10px] font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest">Nivel</th>
                            <th class="py-4 px-6 text-[10px] font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest">Fecha y Hora</th>
                            <th class="py-4 px-6 text-[10px] font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest">Ubicación</th>
                            <th class="py-4 px-6 text-[10px] font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest">Mensaje</th>
                            <th class="py-4 px-6 text-[10px] font-black text-slate-500 dark:text-slate-400 uppercase tracking-widest text-center">Detalle</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 dark:divide-slate-800/50">
                        @foreach($logs as $index => $log)
                            <tr class="hover:bg-slate-50/50 dark:hover:bg-slate-800/30 transition-colors">
                                <td class="py-4 px-6">
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-[9px] font-black uppercase tracking-wider border
                                        @if(in_array($log['level'], ['CRITICAL', 'EMERGENCY', 'ALERT']))
                                            bg-red-100 dark:bg-red-950/40 text-red-700 dark:text-red-400 border-red-200 dark:border-red-900/50
                                        @else
                                            bg-orange-100 dark:bg-orange-950/40 text-orange-700 dark:text-orange-400 border-orange-200 dark:border-orange-900/50
                                        @endif">
                                        {{ $log['level'] }}
                                    </span>
                                </td>
                                <td class="py-4 px-6 text-xs font-mono font-bold text-slate-700 dark:text-slate-300 whitespace-nowrap">
                                    {{ $log['date'] }}
                                </td>
                                <td class="py-4 px-6">
                                    <div class="max-w-[220px] truncate text-[11px] font-mono text-slate-600 dark:text-slate-400 font-bold" title="{{ $log['file'] }}">
                                        {{ $log['file'] }}
                                    </div>
                                    <div class="text-[9px] font-mono text-slate-400 mt-0.5 font-bold">Línea: {{ $log['line'] }}</div>
                                </td>
                                <td class="py-4 px-6">
                                    <div class="max-w-[400px] truncate text-xs font-medium text-slate-800 dark:text-slate-200" title="{{ $log['message'] }}">
                                        {{ $log['message'] }}
                                    </div>
                                </td>
                                <td class="py-4 px-6 text-center">
                                    <button @click="$dispatch('open-log-detail', { log: {{ json_encode($log) }} })" 
                                            class="p-2 bg-slate-50 hover:bg-slate-100 dark:bg-slate-800 dark:hover:bg-slate-750 border border-slate-100 dark:border-slate-750 text-slate-600 dark:text-slate-300 rounded-xl transition-all inline-flex items-center justify-center">
                                        <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="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                        </svg>
                                    </button>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </div>

    <!-- Modal para Ver Detalles del Log (AlpineJS) -->
    <div x-data="{ detailOpen: false, selectedLog: {} }"
         @open-log-detail.window="selectedLog = $event.detail.log; detailOpen = true;"
         class="fixed inset-0 z-[120] flex items-center justify-center p-4 overflow-hidden"
         x-show="detailOpen"
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="transition ease-in duration-200"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         x-cloak>
         <!-- Backdrop -->
         <div class="absolute inset-0 bg-slate-900/60 backdrop-blur-md" @click="detailOpen = false"></div>
         
         <!-- Contenedor -->
         <div class="bg-white dark:bg-slate-900 w-full max-w-4xl overflow-hidden shadow-2xl rounded-[3rem] relative z-10 border border-slate-100 dark:border-slate-800 flex flex-col h-[75vh]"
              x-show="detailOpen"
              x-transition:enter="transition ease-out duration-300"
              x-transition:enter-start="opacity-0 translate-y-8 scale-95"
              x-transition:enter-end="opacity-100 translate-y-0 scale-100"
              x-transition:leave="transition ease-in duration-200"
              x-transition:leave-start="opacity-100 translate-y-0 scale-100"
              x-transition:leave-end="opacity-0 translate-y-8 scale-95">
              
              <!-- Header -->
              <div class="p-6 bg-slate-900 text-white flex justify-between items-center shrink-0">
                  <div class="flex items-center gap-3">
                      <span class="px-2.5 py-1 text-[10px] font-black uppercase tracking-wider rounded-lg border"
                            :class="{
                                'bg-red-500/20 text-red-400 border-red-500/30': ['ERROR', 'CRITICAL', 'EMERGENCY', 'ALERT'].includes(selectedLog.level)
                            }"
                            x-text="selectedLog.level"></span>
                      <h3 class="text-sm font-black uppercase tracking-wider" x-text="selectedLog.date"></h3>
                  </div>
                  <button @click="detailOpen = false" class="text-white hover:text-slate-300">
                      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12" /></svg>
                  </button>
              </div>
              
              <!-- Cuerpo -->
              <div class="p-8 overflow-y-auto flex-1 custom-scrollbar space-y-6">
                  <div>
                      <span class="text-[9px] font-black text-slate-400 uppercase tracking-widest block mb-2">Mensaje del Error:</span>
                      <div class="p-4 bg-red-50 dark:bg-red-950/20 border border-red-100 dark:border-red-950/40 rounded-2xl text-red-700 dark:text-red-400 font-bold text-xs leading-relaxed" x-text="selectedLog.message"></div>
                  </div>
                  
                  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div>
                          <span class="text-[9px] font-black text-slate-400 uppercase tracking-widest block mb-1">Archivo de Origen:</span>
                          <span class="text-xs font-mono font-bold text-slate-700 dark:text-slate-300 break-all" x-text="selectedLog.file"></span>
                      </div>
                      <div>
                          <span class="text-[9px] font-black text-slate-400 uppercase tracking-widest block mb-1">Línea:</span>
                          <span class="text-xs font-mono font-bold text-slate-700 dark:text-slate-300" x-text="selectedLog.line"></span>
                      </div>
                  </div>
                  
                  <div>
                      <span class="text-[9px] font-black text-slate-400 uppercase tracking-widest block mb-2">Pila de Llamadas (Stack Trace):</span>
                      <pre class="p-6 bg-slate-950 text-slate-300 rounded-2xl text-[10px] font-mono leading-relaxed overflow-x-auto whitespace-pre-wrap max-h-[300px] border border-slate-900" x-text="selectedLog.stack_trace || 'Sin stack trace disponible.'"></pre>
                  </div>
              </div>
              
              <!-- Footer -->
              <div class="p-6 bg-slate-50 dark:bg-slate-900 border-t border-slate-100 dark:border-slate-800 flex justify-end shrink-0">
                  <button @click="detailOpen = false" class="px-6 py-3 bg-slate-800 hover:bg-slate-955 text-white rounded-xl text-[10px] font-black uppercase tracking-widest">Cerrar Detalles</button>
              </div>
         </div>
    </div>

    <!-- Modales de Seguridad (Alpine.js) -->
    <div x-data="{ 
            modalOpen: false, 
            type: '', 
            title: '', 
            keyword: '', 
            expected: '',
            url: ''
        }"
        @open-reset-modal.window="
            type = $event.detail.type;
            title = $event.detail.title;
            expected = $event.detail.expected;
            url = $event.detail.url;
            keyword = '';
            modalOpen = true;
        "
        class="fixed inset-0 z-[100] flex items-center justify-center p-4 overflow-hidden"
        x-show="modalOpen"
        x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100"
        x-transition:leave="transition ease-in duration-200"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
        x-cloak>
        
        <!-- Backdrop con Blur Profundo -->
        <div class="absolute inset-0 bg-slate-900/60 backdrop-blur-md" 
             @click="modalOpen = false"></div>

        <!-- Contenedor del Modal -->
        <div class="bg-white dark:bg-slate-900 w-full max-w-lg overflow-hidden shadow-[0_32px_64px_-12px_rgba(0,0,0,0.3)] rounded-[3rem] relative z-10 border border-slate-100 dark:border-slate-800"
             x-show="modalOpen"
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="opacity-0 translate-y-8 scale-95"
             x-transition:enter-end="opacity-100 translate-y-0 scale-100"
             x-transition:leave="transition ease-in duration-200"
             x-transition:leave-start="opacity-100 translate-y-0 scale-100"
             x-transition:leave-end="opacity-0 translate-y-8 scale-95">
            
            <!-- Header Crítico con Gradiente de Alerta -->
            <div class="relative px-10 pt-12 pb-10 bg-gradient-to-br from-slate-900 to-slate-800 text-white">
                <div class="absolute top-0 right-0 p-8 opacity-5 pointer-events-none">
                    <svg class="w-40 h-40" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2L1 21h22L12 2zm0 3.45l8.27 14.3H3.73L12 5.45zM11 10v4h2v-4h-2zm0 6v2h2v-2h-2z"/></svg>
                </div>
                
                <div class="relative z-10 flex items-center gap-6">
                    <div class="w-16 h-16 rounded-3xl flex items-center justify-center shadow-inner"
                         :class="type === 'backup' ? 'bg-indigo-500/20 border border-indigo-500/30 text-indigo-400' : 'bg-red-500/20 border border-red-500/30 text-red-500'">
                        <template x-if="type === 'backup'">
                            <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"></path></svg>
                        </template>
                        <template x-if="type !== 'backup'">
                            <svg class="w-10 h-10" 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"></path></svg>
                        </template>
                    </div>
                    <div>
                        <h2 class="text-2xl font-black uppercase tracking-widest leading-none mb-2" x-text="title"></h2>
                        <p class="text-[10px] font-bold uppercase tracking-[0.2em]" :class="type === 'backup' ? 'text-indigo-400' : 'text-red-400'" x-text="type === 'backup' ? 'Seguridad: Respaldo de datos' : 'Advertencia: Acción de alto impacto'"></p>
                    </div>
                </div>
            </div>

            <div class="px-10 py-12">
                <form :action="url" method="POST" class="space-y-8">
                    @csrf
                    <div class="p-8 rounded-[2rem] bg-slate-50 dark:bg-slate-800/50 border border-slate-100 dark:border-slate-800 text-center">
                        <p class="text-sm text-slate-500 dark:text-slate-400 leading-relaxed font-medium mb-6" x-text="type === 'backup' ? 'Se generará un archivo SQL con toda la información. Escriba la palabra para continuar:' : 'Esta operación es irreversible. Escriba la palabra de seguridad para continuar:'">
                        </p>
                        <div class="flex items-center justify-center">
                            <span class="px-8 py-3 bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 rounded-2xl font-mono font-black text-xl text-slate-800 dark:text-white tracking-[0.4em] shadow-sm select-none" x-text="expected"></span>
                        </div>
                    </div>

                    <div class="space-y-3">
                        <label class="block text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-[0.2em] ml-2">Confirmar Palabra:</label>
                        <input type="text" name="confirm_text" x-model="keyword"
                               class="w-full bg-white dark:bg-slate-900 border-2 border-slate-100 dark:border-slate-800 rounded-2xl px-6 py-5 text-sm font-black text-slate-800 dark:text-white focus:border-red-500 dark:focus:border-red-500 focus:ring-4 focus:ring-red-500/10 transition-all uppercase tracking-[0.2em] placeholder-slate-300 dark:placeholder-slate-700"
                               placeholder="Escriba aquí..." autocomplete="off">
                    </div>

                    <div class="flex gap-4 pt-4">
                        <button type="button" @click="modalOpen = false"
                                class="flex-1 py-5 bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 text-slate-500 dark:text-slate-400 rounded-2xl font-black uppercase tracking-widest text-[10px] transition-all">
                            Cancelar
                        </button>
                        <button type="submit" :disabled="keyword.toUpperCase() !== expected"
                                class="flex-[2_2_0%] py-5 text-white rounded-2xl font-black uppercase tracking-widest text-[10px] transition-all shadow-xl disabled:opacity-20 disabled:grayscale disabled:cursor-not-allowed flex items-center justify-center gap-3"
                                :class="type === 'backup' ? 'bg-indigo-600 hover:bg-indigo-700 shadow-indigo-200' : 'bg-red-600 hover:bg-red-700 shadow-red-200'">
                            <span x-text="type === 'backup' ? 'Iniciar Descarga' : 'Confirmar Operación'"></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="3" d="M13 7l5 5m0 0l-5 5m5-5H6"></path></svg>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</div>

<script>
    function openResetModal(type) {
        let config = {
            orders: {
                title: 'Reset de Pedidos',
                expected: 'BORRAR-PEDIDOS',
                url: '{{ route("maintenance.reset-orders") }}'
            },
            products: {
                title: 'Borrar Catálogo Completo',
                expected: 'BORRAR-PRODUCTOS',
                url: '{{ route("maintenance.reset-products") }}'
            },
            inventory: {
                title: 'Limpiar Stock (Poner a 0)',
                expected: 'LIMPIAR-STOCK',
                url: '{{ route("maintenance.reset-inventory") }}'
            },
            full: {
                title: 'REINICIO TOTAL DEL SISTEMA',
                expected: 'RESET-TOTAL-SISTEMA',
                url: '{{ route("maintenance.reset-full") }}'
            },
            backup: {
                title: 'Generar Copia de Seguridad',
                expected: 'COPIA-SEGURIDAD',
                url: '{{ route("maintenance.backup") }}'
            }
        };

        window.dispatchEvent(new CustomEvent('open-reset-modal', {
            detail: {
                type: type,
                title: config[type].title,
                expected: config[type].expected,
                url: config[type].url
            }
        }));
    }
</script>
@endsection