# 🐛 Debug Panel v1.5.24 - Sistema de Debug Flotante

## 📋 Descripción General

El sistema de debug flotante es una herramienta visual que permite rastrear **todas las llamadas al API** paso a paso, mostrando:
- ✅ URLs consultadas
- 🔑 Tokens generados y utilizados
- 📤 Headers enviados
- 📥 Respuestas recibidas
- ⏱️ Tiempos de ejecución
- ❌ Errores detallados

## 🎯 Características Principales

### 1. **Burbuja Flotante**
- Ubicada en la esquina inferior derecha
- Badge con contador de eventos registrados
- Animación de pulso para llamar la atención
- Solo visible para usuarios logueados

### 2. **Panel Modal**
- Popup que se abre al hacer clic en la burbuja
- Muestra eventos organizados por sesión
- Acordeones expandibles para ver detalles
- Código JSON formateado con syntax highlighting

### 3. **Sesiones de Debug**
Cada operación se registra como una "sesión" con múltiples pasos:

**Ejemplo: Consulta de Parámetros**
```
📋 Sesión: Obtener Parámetros/Criterios
├── 🔑 Paso 1: Generar Token
│   ├── URL: http://192.168.100.137:8081/simafir_api/ws/auth/login
│   ├── Payload: {"user":"admin","password":"admin"}
│   ├── HTTP Status: 200
│   └── Response: {"JWT": "eyJhbGci..."}
│
├── 🔄 Paso 2: Consultar Parámetros
│   ├── URL: http://.../public/v1/criterios/IPC
│   ├── Headers: Content-Type, Token (No requerido)
│   ├── HTTP Status: 200
│   └── Response: {variables: [...], paises: [...], ...}
│
└── ✨ Paso 3: Transformar Datos (si aplica)
    └── JSON Final: [...] registros transformados
```

## 🚀 Cómo Usar

### Para el Usuario Final

1. **Cargar una página con parámetros o datos**
   - Ve a cualquier página con `[scm-params]` o `[scm-chart]`

2. **Observar la burbuja flotante**
   - Aparecerá en la esquina inferior derecha
   - El badge mostrará el número de eventos (ej: 3)

3. **Hacer clic en la burbuja**
   - Se abrirá el panel de debug
   - Verás todas las sesiones registradas

4. **Explorar los detalles**
   - Haz clic en cualquier sesión para expandirla
   - Revisa cada paso con sus detalles
   - Copia URLs o JSON si es necesario

### Para el Desarrollador

#### Agregar Debug en Nuevas Funciones

```php
// Iniciar sesión de debug
$this->debug_start_session('Nombre de la Operación');

// Agregar un paso
$this->debug_add_step(array(
    'title' => '📊 Título del Paso',
    'url' => $fullUrl,
    'headers' => $headers,
    'httpStatus' => $http_code,
    'response' => $responseData,
    'notes' => 'Información adicional'
));

// Finalizar sesión
$this->debug_end_session('success'); // o 'error'
```

## 📁 Archivos Modificados

### Archivos Nuevos
- ✨ `assets/css/debug-panel.css` - Estilos del panel flotante
- ✨ `assets/js/debug-panel.js` - Lógica JavaScript del panel

### Archivos Modificados
- 🔧 `secmca-api.php` 
  - Agregado: `wp_footer` hook para renderizar marcador de usuario logueado
  - Agregado: Enqueue de CSS y JS del panel
  - Versión actualizada a **1.5.24**

- 🔧 `inc/api.php`
  - Agregadas funciones helper: `debug_start_session()`, `debug_add_step()`, `debug_end_session()`
  - Modificado: `get_report_variables()` con llamadas de debug
  - Modificado: `generate_token()` (preparado para debug en futuras versiones)

## 🔍 Funciones Actualmente Debuggeadas

### ✅ Implementado
- `get_report_variables()` - Consulta de parámetros/criterios
  - Paso 1: Consulta HTTP
  - Paso 2: Transformación de datos (si aplica)

### 🚧 Pendiente de Implementar
- `generate_token()` - Generación de token JWT
- `get_all_data1()` - Consulta de datos con Guzzle
- `get_years()` / `get_years2()` - Consulta de años disponibles

## 🎨 Estados Visuales

El panel utiliza colores para indicar el estado de cada sesión:

- 🟢 **Verde** (`success`): Operación completada exitosamente
- 🔴 **Rojo** (`error`): Error durante la operación
- 🟡 **Amarillo** (`warning`): Advertencia o datos incompletos

## 🔧 Solución de Problemas

### La burbuja no aparece
**Causa:** Usuario no está logueado
**Solución:** Asegúrate de estar logueado en WordPress

### No se registran eventos
**Causa:** Función no tiene llamadas de debug
**Solución:** Verifica que la función tenga `debug_start_session()`, `debug_add_step()`, y `debug_end_session()`

### Panel no se abre
**Causa:** JavaScript no se carga correctamente
**Solución:** 
1. Verifica la consola del navegador (F12)
2. Limpia el caché del navegador
3. Verifica que `debug-panel.js` se esté cargando

## 📊 Ejemplo de Salida JSON

```json
{
  "id": 1,
  "type": "session",
  "timestamp": "2026-01-24T19:06:19.000Z",
  "data": {
    "name": "Obtener Parámetros/Criterios",
    "startTime": "2026-01-24T19:06:19.000Z",
    "endTime": "2026-01-24T19:06:19.500Z",
    "status": "success",
    "steps": [
      {
        "title": "📋 Consultar Parámetros/Criterios",
        "url": "http://192.168.100.137:8081/simafir_api/ws/public/v1/criterios/IPC",
        "headers": {
          "Content-Type": "application/json",
          "Token": "No requerido (endpoint público)"
        },
        "httpStatus": 200,
        "response": { ... },
        "notes": "Claves: variables, paises, frecuencias, ..."
      }
    ]
  }
}
```

## 🚀 Próximos Pasos

1. Agregar debug a `generate_token()`
2. Agregar debug a `get_all_data1()`
3. Agregar botón para exportar log completo
4. Agregar filtros por tipo de operación
5. Agregar timeline visual de las operaciones

## 📝 Notas de la Versión 1.5.24

### Cambios Principales
- ✨ **NUEVO**: Sistema de debug flotante completo
- ✨ **NUEVO**: Panel modal con detalles paso a paso
- 🔧 **MEJORADO**: `get_report_variables()` con debug integrado
- 🔧 **MEJORADO**: Función helper para iniciar/finalizar sesiones de debug

### Compatibilidad
- ✅ WordPress 5.0+
- ✅ PHP 7.4+
- ✅ Guzzle 5.x
- ✅ Navegadores modernos (Chrome, Firefox, Safari, Edge)

## 🤝 Contribuir

Si encuentras un bug o tienes una sugerencia, por favor:
1. Documenta el problema con capturas de pantalla
2. Incluye el log del panel de debug
3. Indica la versión del plugin y WordPress

---

**Versión:** 1.5.24  
**Fecha:** 24 de Enero, 2026  
**Autor:** Codeskill.io
