service_manager/frontend-internal/src/routes/audit/+page.svelte

<script lang="ts">
  import { onMount } from 'svelte';
  import { api } from '$lib/utils/api';
  import { toast } from '$lib/stores/toast';
  import { auth } from '$lib/stores/auth';
  import Modal from '$lib/components/Modal.svelte';

  // Estado de carga y datos
  let logs = [];
  let stats = null;
  let users = [];
  let isLoading = false;
  let selectedLog = null;
  let showDetailModal = false;

  // Paginación
  let currentPage = 1;
  let totalPages = 1;
  let totalLogs = 0;
  const perPage = 20;

  // Filtros básicos
  let filterUserId = '';
  let filterAction = '';
  let filterResourceType = '';
  let searchText = '';
  
  // Filtro multi-tenant (solo para ADMIN/SUPPORT_MANAGER)
  let allTenants = false;
  
  // Filtro de período
  let periodFilter: 'today' | 'yesterday' | 'last7days' | 'last30days' | 'custom' = 'today';
  let customDateFrom = '';
  let customDateTo = '';
  
  // Control de visibilidad de filtros avanzados
  let showAdvancedFilters = false;

  // Usuario actual
  $: currentUser = $auth.user;
  $: canSeeAllTenants = currentUser && (currentUser.role === 'ADMIN' || currentUser.role === 'SUPPORT_MANAGER');

  // Contador de filtros activos (excluyendo el período que es por defecto)
  $: activeFiltersCount = [filterUserId, filterAction, filterResourceType, searchText].filter(f => f && f.trim()).length;

  // Tipos de acciones y recursos (extraídos de los logs)
  let availableActions = new Set<string>();
  let availableResourceTypes = new Set<string>();

  /**
   * Obtener fechas según el período seleccionado
   */
  function getDateRangeForPeriod(): { from: string; to: string } {
    // Trabajar en UTC para evitar problemas de zona horaria
    const now = new Date();
    
    let from: Date;
    let to: Date;
    
    switch (periodFilter) {
      case 'today':
        // Hoy desde las 00:00:00 hasta ahora en UTC
        from = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), 0, 0, 0));
        to = new Date(); // Ahora en UTC
        break;
      case 'yesterday':
        // Ayer completo en UTC
        from = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate() - 1, 0, 0, 0));
        to = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), 0, 0, 0));
        break;
      case 'last7days':
        // Últimos 7 días en UTC
        from = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate() - 7, 0, 0, 0));
        to = new Date();
        break;
      case 'last30days':
        // Últimos 30 días en UTC
        from = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate() - 30, 0, 0, 0));
        to = new Date();
        break;
      case 'custom':
        // Para fechas custom, parsear como UTC
        if (!customDateFrom || !customDateTo) {
          return { from: '', to: '' };
        }
        const fromParts = customDateFrom.split('-').map(Number);
        const toParts = customDateTo.split('-').map(Number);
        from = new Date(Date.UTC(fromParts[0], fromParts[1] - 1, fromParts[2], 0, 0, 0));
        to = new Date(Date.UTC(toParts[0], toParts[1] - 1, toParts[2], 23, 59, 59));
        return {
          from: from.toISOString(),
          to: to.toISOString()
        };
      default:
        from = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), 0, 0, 0));
        to = new Date();
    }
    
    return {
      from: from.toISOString(),
      to: to.toISOString()
    };
  }

  /**
   * Cambiar período y actualizar datos
   */
  function changePeriod(period: typeof periodFilter) {
    periodFilter = period;
    currentPage = 1;
    loadLogs();
  }

  /**
   * Cargar estadísticas de auditoría
   */
  async function loadStats() {
    try {
      const params: any = {};
      if (allTenants && canSeeAllTenants) {
        params.all_tenants = true;
      }
      stats = await api.get('/audit/stats', params);
    } catch (e) {
      console.error('Error cargando estadísticas:', e);
    }
  }

  /**
   * Cargar logs de auditoría con filtros
   */
  async function loadLogs() {
    isLoading = true;
    try {
      const params: any = {
        page: currentPage,
        per_page: perPage
      };

      // Aplicar rango de fechas según período
      const dateRange = getDateRangeForPeriod();
      if (dateRange.from) params.date_from = dateRange.from;
      if (dateRange.to) params.date_to = dateRange.to;

      // Aplicar filtros adicionales
      if (filterUserId) params.user_id = filterUserId;
      if (filterAction) params.action = filterAction;
      if (filterResourceType) params.resource_type = filterResourceType;
      if (searchText) params.search = searchText;
      
      // Aplicar filtro multi-tenant si el usuario tiene permiso
      if (allTenants && canSeeAllTenants) {
        params.all_tenants = true;
      }

      const response = await api.get('/audit/', params);
      
      logs = response.logs;
      totalLogs = response.total;
      totalPages = response.total_pages;
      currentPage = response.page;

      // Extraer acciones y tipos de recursos únicos para los selectores
      logs.forEach((log: any) => {
        availableActions.add(log.action);
        availableResourceTypes.add(log.resource_type);
      });

      // Convertir Sets a Arrays para bind:value
      availableActions = new Set(availableActions);
      availableResourceTypes = new Set(availableResourceTypes);
    } catch (e) {
      toast.error('Error cargando logs: ' + (e.message || 'Error desconocido'));
    } finally {
      isLoading = false;
    }
  }

  /**
   * Cargar usuarios para el filtro
   */
  async function loadUsers() {
    try {
      users = await api.get('/users/');
    } catch (e) {
      console.error('Error cargando usuarios:', e);
      users = [];
    }
  }

  /**
   * Aplicar filtros y recargar desde página 1
   */
  function applyFilters() {
    currentPage = 1;
    loadLogs();
  }

  /**
   * Limpiar todos los filtros (excepto el período)
   */
  function clearFilters() {
    filterUserId = '';
    filterAction = '';
    filterResourceType = '';
    searchText = '';
    currentPage = 1;
    loadLogs();
  }

  /**
   * Filtrar por acciones críticas (vulnerabilidad)
   */
  function filterCriticalActions() {
    // Limpiar otros filtros
    filterUserId = '';
    filterResourceType = '';
    
    // Buscar acciones críticas: delete, update sensibles, etc.
    searchText = 'delete';
    
    // Cambiar a hoy para ver las del día
    periodFilter = 'today';
    
    // Expandir filtros avanzados para que el usuario vea lo aplicado
    showAdvancedFilters = true;
    
    currentPage = 1;
    loadLogs();
  }

  /**
   * Cambiar página
   */
  function goToPage(page: number) {
    if (page >= 1 && page <= totalPages) {
      currentPage = page;
      loadLogs();
    }
  }

  /**
   * Ver detalle de un log
   */
  function viewDetail(log: any) {
    selectedLog = log;
    showDetailModal = true;
  }

  /**
   * Formatear fecha de manera amigable
   */
  function formatDate(dateString: string): string {
    const date = new Date(dateString);
    return date.toLocaleString('es-MX', {
      year: 'numeric',
      month: 'short',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit'
    });
  }

  /**
   * Formatear fecha corta (solo hora para hoy)
   */
  function formatDateShort(dateString: string): string {
    const date = new Date(dateString);
    const today = new Date();
    const isToday = date.toDateString() === today.toDateString();
    
    if (isToday) {
      return date.toLocaleTimeString('es-MX', {
        hour: '2-digit',
        minute: '2-digit'
      });
    }
    
    return date.toLocaleDateString('es-MX', {
      month: 'short',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit'
    });
  }

  /**
   * Obtener color de badge según tipo de acción
   */
  function getActionColor(action: string): string {
    if (action.includes('login')) return 'bg-green-100 text-green-800';
    if (action.includes('logout')) return 'bg-gray-100 text-gray-800';
    if (action.includes('create')) return 'bg-blue-100 text-blue-800';
    if (action.includes('update')) return 'bg-yellow-100 text-yellow-800';
    if (action.includes('delete')) return 'bg-red-100 text-red-800';
    if (action.includes('assign')) return 'bg-purple-100 text-purple-800';
    return 'bg-gray-100 text-gray-800';
  }

  /**
   * Formatear acción de forma legible
   */
  function formatActionText(action: string): string {
    const parts = action.split('.');
    if (parts.length !== 2) return action;

    const [resource, verb] = parts;
    
    const verbMap: Record<string, string> = {
      'login': 'Inicio de sesión',
      'logout': 'Cierre de sesión',
      'create': 'Creó',
      'update': 'Actualizó',
      'delete': 'Eliminó',
      'assign': 'Asignó',
      'close': 'Cerró',
      'reopen': 'Reabrió'
    };

    const verbText = verbMap[verb] || verb;
    return `${verbText} ${resource}`;
  }

  /**
   * Obtener texto del rol
   */
  function getRoleText(role: string): string {
    const roleMap: Record<string, string> = {
      'ADMIN': 'Administrador',
      'SUPPORT_MANAGER': 'Gerente',
      'AGENT': 'Agente',
      'AUDITOR': 'Auditor',
      'CLIENT_ADMIN': 'Admin Cliente',
      'CLIENT_USER': 'Usuario'
    };
    return roleMap[role] || role;
  }

  /**
   * Inicializar datos
   */
  onMount(() => {
    loadStats();
    loadUsers();
    loadLogs();
  });
</script>

<div class="px-4 sm:px-6 lg:px-8 py-8">
  <!-- Header -->
  <div class="sm:flex sm:items-center sm:justify-between mb-6">
    <div>
      <h1 class="text-2xl font-semibold text-gray-900">Auditoría del Sistema</h1>
      <p class="mt-1 text-sm text-gray-600">
        Registro de actividades • 
        <span class="font-medium text-primary-600">
          {periodFilter === 'today' ? 'Hoy' :
           periodFilter === 'yesterday' ? 'Ayer' :
           periodFilter === 'last7days' ? 'Últimos 7 días' :
           periodFilter === 'last30days' ? 'Últimos 30 días' :
           'Período personalizado'}
        </span>
      </p>
    </div>
  </div>

  <!-- Selector de Período -->
  <div class="bg-white shadow rounded-lg p-4 mb-6">
    <div class="flex flex-wrap gap-2">
      <button
        on:click={() => changePeriod('today')}
        class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {periodFilter === 'today' ? 'bg-primary-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}"
      >
        Hoy
      </button>
      <button
        on:click={() => changePeriod('yesterday')}
        class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {periodFilter === 'yesterday' ? 'bg-primary-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}"
      >
        Ayer
      </button>
      <button
        on:click={() => changePeriod('last7days')}
        class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {periodFilter === 'last7days' ? 'bg-primary-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}"
      >
        Últimos 7 días
      </button>
      <button
        on:click={() => changePeriod('last30days')}
        class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {periodFilter === 'last30days' ? 'bg-primary-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}"
      >
        Últimos 30 días
      </button>
      <button
        on:click={() => changePeriod('custom')}
        class="px-4 py-2 rounded-lg text-sm font-medium transition-colors {periodFilter === 'custom' ? 'bg-primary-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}"
      >
        <svg class="w-4 h-4 inline-block mr-1" 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>
        Personalizado
      </button>
    </div>

    <!-- Rango de fechas personalizado -->
    {#if periodFilter === 'custom'}
      <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4 pt-4 border-t">
        <div>
          <label for="custom-date-from" class="block text-sm font-medium text-gray-700 mb-1">Desde</label>
          <input
            type="date"
            id="custom-date-from"
            bind:value={customDateFrom}
            on:change={applyFilters}
            class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
          />
        </div>
        <div>
          <label for="custom-date-to" class="block text-sm font-medium text-gray-700 mb-1">Hasta</label>
          <input
            type="date"
            id="custom-date-to"
            bind:value={customDateTo}
            on:change={applyFilters}
            class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
          />
        </div>
      </div>
    {/if}
  </div>

  <!-- Filtro Multi-Tenant (solo para ADMIN/SUPPORT_MANAGER) -->
  {#if canSeeAllTenants}
    <div class="bg-white shadow rounded-lg p-4 mb-6">
      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <label for="all-tenants-toggle" class="flex items-center cursor-pointer">
            <input
              type="checkbox"
              id="all-tenants-toggle"
              bind:checked={allTenants}
              on:change={() => { 
                currentPage = 1;
                loadLogs(); 
                loadStats();
              }}
              class="rounded border-gray-300 text-primary-600 shadow-sm focus:border-primary-500 focus:ring-primary-500 h-4 w-4 mr-3"
            />
            <div>
              <span class="text-sm font-medium text-gray-900">Ver todos los clientes</span>
              <p class="text-xs text-gray-500">Mostrar registros de auditoría de todas las organizaciones</p>
            </div>
         </label>
        </div>
        {#if allTenants}
          <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
            <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
              <path d="M10 2a8 8 0 100 16 8 8 0 000-16zM9 9a1 1 0 012 0v4a1 1 0 11-2 0V9zm1-5a1 1 0 100 2 1 1 0 000-2z" />
            </svg>
            Multi-tenant activo
          </span>
        {/if}
      </div>
    </div>
  {/if}

  <!-- Estadísticas Rápidas -->
  {#if stats}
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
      <div class="bg-white rounded-lg shadow p-4">
        <div class="text-sm text-gray-500">Total</div>
        <div class="text-2xl font-bold text-gray-900">{stats.total_actions.toLocaleString()}</div>
      </div>
      <div class="bg-white rounded-lg shadow p-4">
        <div class="text-sm text-gray-500">Hoy</div>
        <div class="text-2xl font-bold text-primary-600">{stats.actions_today}</div>
      </div>
      <div class="bg-white rounded-lg shadow p-4">
        <div class="text-sm text-gray-500">Esta Semana</div>
        <div class="text-2xl font-bold text-green-600">{stats.actions_this_week}</div>
      </div>
      <div class="bg-white rounded-lg shadow p-4 hover:shadow-md transition-shadow">
        <div class="flex items-center gap-2 mb-1">
          <svg class="w-4 h-4 text-amber-500" 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" />
          </svg>
          <div class="text-sm text-gray-500">Vulnerabilidad</div>
        </div>
        <div class="flex items-center justify-between">
          <div class="text-2xl font-bold {stats.critical_actions_today > 10 ? 'text-red-600' : stats.critical_actions_today > 5 ? 'text-amber-600' : 'text-green-600'}">
            {stats.critical_actions_today}
          </div>
          <button 
            type="button"
            class="text-xs text-primary-600 hover:text-primary-700 font-medium flex items-center gap-1 px-2 py-1 rounded hover:bg-primary-50 transition-colors"
            on:click={() => filterCriticalActions()}
            title="Filtrar acciones críticas"
          >
            Ver
            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
            </svg>
          </button>
        </div>
        <div class="text-xs text-gray-500 mt-1">Acciones críticas hoy</div>
      </div>
    </div>
  {/if}

  <!-- Filtros Avanzados (Colapsables) -->
  <div class="bg-white shadow rounded-lg mb-6">
    <button
      on:click={() => showAdvancedFilters = !showAdvancedFilters}
      class="w-full px-4 py-3 flex items-center justify-between text-left hover:bg-gray-50 rounded-lg transition-colors"
    >
      <div class="flex items-center gap-2">
        <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
        </svg>
        <span class="text-sm font-medium text-gray-900">Filtros Avanzados</span>
        {#if activeFiltersCount > 0}
          <span class="px-2 py-0.5 rounded-full bg-primary-100 text-primary-700 text-xs font-medium">
            {activeFiltersCount}
          </span>
        {/if}
      </div>
      <svg class="w-5 h-5 text-gray-400 transition-transform {showAdvancedFilters ? 'rotate-180' : ''}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
      </svg>
    </button>

    {#if showAdvancedFilters}
      <div class="px-4 pb-4 border-t">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-4">
          <!-- Búsqueda de texto -->
          <div>
            <label for="search" class="block text-sm font-medium text-gray-700 mb-1">Buscar</label>
            <input
              type="text"
              id="search"
              bind:value={searchText}
              on:input={applyFilters}
              placeholder="Buscar en acciones..."
              class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
            />
          </div>

          <!-- Filtro por usuario -->
          <div>
            <label for="user" class="block text-sm font-medium text-gray-700 mb-1">Usuario</label>
            <select
              id="user"
              bind:value={filterUserId}
              on:change={applyFilters}
              class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
            >
              <option value="">Todos</option>
              {#each users as user}
                <option value={user.id}>{user.first_name} {user.last_name}</option>
              {/each}
            </select>
          </div>

          <!-- Filtro por acción -->
          <div>
            <label for="action" class="block text-sm font-medium text-gray-700 mb-1">Acción</label>
            <select
              id="action"
              bind:value={filterAction}
              on:change={applyFilters}
              class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
            >
              <option value="">Todas</option>
              {#each Array.from(availableActions).sort() as action}
                <option value={action}>{formatActionText(action)}</option>
              {/each}
            </select>
          </div>

          <!-- Filtro por tipo de recurso -->
          <div>
            <label for="resource-type" class="block text-sm font-medium text-gray-700 mb-1">Tipo de Recurso</label>
            <select
              id="resource-type"
              bind:value={filterResourceType}
              on:change={applyFilters}
              class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
            >
              <option value="">Todos</option>
              {#each Array.from(availableResourceTypes).sort() as resourceType}
                <option value={resourceType}>{resourceType}</option>
              {/each}
            </select>
          </div>
        </div>

        {#if activeFiltersCount > 0}
          <div class="mt-4 flex justify-end">
            <button
              on:click={clearFilters}
              class="text-sm text-primary-600 hover:text-primary-700 font-medium"
            >
              Limpiar filtros
            </button>
          </div>
        {/if}
      </div>
    {/if}
  </div>

  <!-- Tabla de Logs -->
  <div class="bg-white shadow rounded-lg overflow-hidden flex flex-col" style="max-height: calc(100vh - 500px); min-height: 400px;">
    <div class="px-4 py-3 border-b border-gray-200 bg-gray-50 flex-shrink-0">
      <div class="flex items-center justify-between">
        <h3 class="text-sm font-medium text-gray-900">
          Registros de Auditoría
        </h3>
        <span class="text-sm text-gray-500">{totalLogs} registros</span>
      </div>
    </div>

    {#if isLoading}
      <div class="flex items-center justify-center flex-1">
        <div class="text-center">
          <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mx-auto"></div>
          <p class="mt-2 text-sm text-gray-500">Cargando registros...</p>
        </div>
      </div>
    {:else if logs.length === 0}
      <div class="flex items-center justify-center flex-1">
        <div class="text-center py-12">
          <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="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
          </svg>
          <h3 class="mt-2 text-sm font-medium text-gray-900">No hay registros</h3>
          <p class="mt-1 text-sm text-gray-500">
            {periodFilter === 'today' ? 'No hay actividad registrada hoy.' : 'No se encontraron registros para el período seleccionado.'}
          </p>
        </div>
      </div>
    {:else}
      <!-- Contenedor con scroll -->
      <div class="overflow-y-auto flex-1">
        <!-- Vista Desktop (Tabla) -->
        <div class="hidden lg:block">
          <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50 sticky top-0 z-10">
              <tr>
                <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-24">
                  Hora
                </th>
                <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  Usuario
                </th>
                <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  Acción
                </th>
                <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  Recurso
                </th>
                <th scope="col" class="relative px-3 py-2 w-20">
                  <span class="sr-only">Acciones</span>
                </th>
              </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
              {#each logs as log (log.id)}
                <tr class="hover:bg-gray-50 transition-colors">
                  <td class="px-3 py-2 whitespace-nowrap text-sm text-gray-900">
                    {formatDateShort(log.created_at)}
                  </td>
                  <td class="px-3 py-2 text-sm">
                    {#if log.user_email}
                      <div class="flex items-center gap-2">
                        <div class="flex-shrink-0 w-8 h-8 bg-primary-100 rounded-full flex items-center justify-center">
                          <span class="text-xs font-medium text-primary-700">
                            {(log.user_name || '?').charAt(0).toUpperCase()}
                          </span>
                        </div>
                        <div class="min-w-0 flex-1">
                          <div class="font-medium text-gray-900 truncate">{log.user_name || 'N/A'}</div>
                          <div class="text-xs text-gray-500">{getRoleText(log.user_role)}</div>
                        </div>
                      </div>
                    {:else}
                      <span class="text-gray-500 italic text-sm">Sistema</span>
                    {/if}
                  </td>
                  <td class="px-3 py-2 whitespace-nowrap">
                    <span class="px-2 py-1 text-xs font-medium rounded-full {getActionColor(log.action)}">
                      {formatActionText(log.action)}
                    </span>
                  </td>
                  <td class="px-3 py-2 text-sm">
                    <div class="font-medium text-gray-900">{log.resource_type}</div>
                    {#if log.ip_address}
                      <div class="text-xs text-gray-500">{log.ip_address}</div>
                    {/if}
                  </td>
                  <td class="px-3 py-2 whitespace-nowrap text-right text-sm">
                    <button
                      type="button"
                      on:click={() => viewDetail(log)}
                      class="text-primary-600 hover:text-primary-900 font-medium transition-colors"
                    >
                      Ver
                    </button>
                  </td>
                </tr>
              {/each}
            </tbody>
          </table>
        </div>

        <!-- Vista Mobile/Tablet (Tarjetas) -->
        <div class="lg:hidden divide-y divide-gray-200">
          {#each logs as log (log.id)}
            <div 
              class="p-4 hover:bg-gray-50 transition-colors"
            >
              <div class="flex items-start justify-between gap-3">
                <div class="flex items-start gap-3 flex-1 min-w-0">
                  <!-- Avatar -->
                  {#if log.user_email}
                    <div class="flex-shrink-0 w-10 h-10 bg-primary-100 rounded-full flex items-center justify-center">
                      <span class="text-sm font-medium text-primary-700">
                        {(log.user_name || '?').charAt(0).toUpperCase()}
                      </span>
                    </div>
                  {:else}
                    <div class="flex-shrink-0 w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center">
                      <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
                      </svg>
                    </div>
                  {/if}
                  
                  <!-- Contenido -->
                  <div class="flex-1 min-w-0">
                    <div class="flex items-center gap-2 mb-1">
                      <span class="text-xs text-gray-500">{formatDateShort(log.created_at)}</span>
                      <span class="px-2 py-0.5 text-xs font-medium rounded-full {getActionColor(log.action)}">
                        {formatActionText(log.action)}
                      </span>
                    </div>
                    <div class="font-medium text-gray-900 text-sm mb-1">
                      {log.user_name || 'Sistema'}
                      <span class="text-xs text-gray-500 font-normal ml-1">• {getRoleText(log.user_role)}</span>
                    </div>
                    <div class="text-sm text-gray-600">
                      {log.resource_type}
                      {#if log.ip_address}
                        <span class="text-xs text-gray-400 ml-1">• {log.ip_address}</span>
                      {/if}
                    </div>
                  </div>
                </div>
                
                <!-- Botón Ver -->
                <button
                  type="button"
                  on:click={() => viewDetail(log)}
                  class="flex-shrink-0 text-primary-600 hover:text-primary-900 transition-colors p-1"
                  title="Ver detalles"
                >
                  <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 5l7 7-7 7" />
                  </svg>
                </button>
              </div>
            </div>
          {/each}
        </div>
      </div>

      <!-- Paginación (Sticky al fondo) -->
      {#if totalPages > 1}
        <div class="bg-white border-t border-gray-200 px-4 py-2 flex-shrink-0 sticky bottom-0">
          <!-- Mobile -->
          <div class="flex items-center justify-between sm:hidden">
            <button
              on:click={() => goToPage(currentPage - 1)}
              disabled={currentPage === 1}
              class="relative inline-flex items-center px-3 py-1.5 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
            >
              Anterior
            </button>
            <span class="text-sm text-gray-700">
              Página <span class="font-medium">{currentPage}</span> de <span class="font-medium">{totalPages}</span>
            </span>
            <button
              on:click={() => goToPage(currentPage + 1)}
              disabled={currentPage === totalPages}
              class="relative inline-flex items-center px-3 py-1.5 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
            >
              Siguiente
            </button>
          </div>
          
          <!-- Desktop -->
          <div class="hidden sm:flex sm:items-center sm:justify-between">
            <div class="text-sm text-gray-700">
              <span class="font-medium">{(currentPage - 1) * perPage + 1}</span>
              -
              <span class="font-medium">{Math.min(currentPage * perPage, totalLogs)}</span>
              de
              <span class="font-medium">{totalLogs}</span>
            </div>
            <div>
              <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                <!-- Botón Primera página -->
                {#if currentPage > 3}
                  <button
                    on:click={() => goToPage(1)}
                    class="relative inline-flex items-center px-2 py-1.5 rounded-l-md border border-gray-300 bg-white text-xs font-medium text-gray-500 hover:bg-gray-50"
                  >
                    <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
                      <path fill-rule="evenodd" d="M15.707 15.707a1 1 0 01-1.414 0l-5-5a1 1 0 010-1.414l5-5a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 010 1.414zm-6 0a1 1 0 01-1.414 0l-5-5a1 1 0 010-1.414l5-5a1 1 0 011.414 1.414L5.414 10l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd" />
                    </svg>
                  </button>
                {/if}
                
                <!-- Botón Anterior -->
                <button
                  on:click={() => goToPage(currentPage - 1)}
                  disabled={currentPage === 1}
                  class="relative inline-flex items-center px-2 py-1.5 {currentPage <= 3 ? 'rounded-l-md' : ''} border border-gray-300 bg-white text-xs font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
                  </svg>
                </button>
                
                <!-- Números de página -->
                {#each Array.from({length: Math.min(5, totalPages)}, (_, i) => i + Math.max(1, Math.min(currentPage - 2, totalPages - 4))) as page}
                  <button
                    on:click={() => goToPage(page)}
                    class="relative inline-flex items-center px-3 py-1.5 border text-xs font-medium transition-colors {page === currentPage ? 'z-10 bg-primary-600 border-primary-600 text-white' : 'bg-white border-gray-300 text-gray-700 hover:bg-gray-50'}"
                  >
                    {page}
                  </button>
                {/each}

                <!-- Botón Siguiente -->
                <button
                  on:click={() => goToPage(currentPage + 1)}
                  disabled={currentPage === totalPages}
                  class="relative inline-flex items-center px-2 py-1.5 {currentPage >= totalPages - 2 ? 'rounded-r-md' : ''} border border-gray-300 bg-white text-xs font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                  </svg>
                </button>
                
                <!-- Botón Última página -->
                {#if currentPage < totalPages - 2}
                  <button
                    on:click={() => goToPage(totalPages)}
                    class="relative inline-flex items-center px-2 py-1.5 rounded-r-md border border-gray-300 bg-white text-xs font-medium text-gray-500 hover:bg-gray-50"
                  >
                    <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
                      <path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                      <path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
                    </svg>
                  </button>
                {/if}
              </nav>
            </div>
          </div>
        </div>
      {/if}
    {/if}
  </div>
</div>

<!-- Modal de Detalle -->
{#if showDetailModal && selectedLog}
  <Modal open={showDetailModal} size="2xl" title="Detalle del Registro de Auditoría" on:close={() => showDetailModal = false}>
    <div class="space-y-4">
      <!-- Información General -->
      <div>
        <h4 class="text-sm font-medium text-gray-900 mb-2">Información General</h4>
        <dl class="grid grid-cols-2 gap-3 text-sm">
          <div>
            <dt class="font-medium text-gray-500">Fecha y Hora:</dt>
            <dd class="text-gray-900">{formatDate(selectedLog.created_at)}</dd>
          </div>
          <div>
            <dt class="font-medium text-gray-500">Usuario:</dt>
            <dd class="text-gray-900">{selectedLog.user_name || 'Sistema'}</dd>
          </div>
          <div>
            <dt class="font-medium text-gray-500">Email:</dt>
            <dd class="text-gray-900">{selectedLog.user_email || 'N/A'}</dd>
          </div>
          {#if selectedLog.user_role}
            <div>
              <dt class="font-medium text-gray-500">Rol:</dt>
              <dd class="text-gray-900">{getRoleText(selectedLog.user_role)}</dd>
            </div>
          {/if}
          <div>
            <dt class="font-medium text-gray-500">IP:</dt>
            <dd class="text-gray-900 font-mono text-xs">{selectedLog.ip_address || 'N/A'}</dd>
          </div>
          <div>
            <dt class="font-medium text-gray-500">Correlation ID:</dt>
            <dd class="text-gray-900 font-mono text-xs truncate">{selectedLog.correlation_id || 'N/A'}</dd>
          </div>
        </dl>
      </div>

      <!-- Acción -->
      <div>
        <h4 class="text-sm font-medium text-gray-900 mb-2">Acción</h4>
        <div class="bg-gray-50 rounded-lg p-3">
          <span class="px-2 py-1 text-xs font-semibold rounded-full {getActionColor(selectedLog.action)}">
            {selectedLog.action}
          </span>
          <p class="mt-2 text-sm text-gray-700">{formatActionText(selectedLog.action)}</p>
        </div>
      </div>

      <!-- Recurso -->
      <div>
        <h4 class="text-sm font-medium text-gray-900 mb-2">Recurso Afectado</h4>
        <div class="bg-gray-50 rounded-lg p-3 text-sm">
          <div><span class="font-medium">Tipo:</span> {selectedLog.resource_type}</div>
          {#if selectedLog.resource_id}
            <div class="mt-1"><span class="font-medium">ID:</span> <code class="text-xs">{selectedLog.resource_id}</code></div>
          {/if}
        </div>
      </div>

      <!-- User Agent -->
      {#if selectedLog.user_agent}
        <div>
          <h4 class="text-sm font-medium text-gray-900 mb-2">Navegador / Dispositivo</h4>
          <div class="bg-gray-50 rounded-lg p-3 text-xs font-mono text-gray-600 break-all">
            {selectedLog.user_agent}
          </div>
        </div>
      {/if}

      <!-- Valores Anteriores -->
      {#if selectedLog.old_values && Object.keys(selectedLog.old_values).length > 0}
        <div>
          <h4 class="text-sm font-medium text-gray-900 mb-2">Valores Anteriores</h4>
          <pre class="bg-gray-50 rounded-lg p-3 text-xs font-mono text-gray-600 overflow-auto max-h-40">{JSON.stringify(selectedLog.old_values, null, 2)}</pre>
        </div>
      {/if}

      <!-- Valores Nuevos -->
      {#if selectedLog.new_values && Object.keys(selectedLog.new_values).length > 0}
        <div>
          <h4 class="text-sm font-medium text-gray-900 mb-2">Valores Nuevos</h4>
          <pre class="bg-gray-50 rounded-lg p-3 text-xs font-mono text-gray-600 overflow-auto max-h-40">{JSON.stringify(selectedLog.new_values, null, 2)}</pre>
        </div>
      {/if}

      <!-- Metadata -->
      {#if selectedLog.metadata && Object.keys(selectedLog.metadata).length > 0}
        <div>
          <h4 class="text-sm font-medium text-gray-900 mb-2">Información Adicional</h4>
          <pre class="bg-gray-50 rounded-lg p-3 text-xs font-mono text-gray-600 overflow-auto max-h-40">{JSON.stringify(selectedLog.metadata, null, 2)}</pre>
        </div>
      {/if}
    </div>

    <div slot="footer" class="flex justify-end">
      <button
        on:click={() => showDetailModal = false}
        class="px-4 py-2 bg-white border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50"
      >
        Cerrar
      </button>
    </div>
  </Modal>
{/if}