codigo0/docs/FASE_2_INTEGRACION_FRONTEND.md

# FASE 2: INTEGRACIÓN FRONTEND-BACKEND

**Fecha**: 2025-01-07  
**Estado**: ✅ **VERIFICADA**

---

## ✅ Verificaciones Completadas

### 1. Endpoint Content Pack
- **URL**: `http://localhost:3000/api/content-pack/latest.json`
- **Estado**: ✅ Funciona correctamente
- **Respuesta**: Content Pack con 23 items

### 2. Estructura del Content Pack
```json
{
  "metadata": {
    "version": "1.0.0",
    "generated_at": "2026-01-07T20:53:30.646Z",
    "total_items": 23,
    "hash": "sha256:..."
  },
  "content": {
    "protocols": [...],  // 5 protocolos
    "guides": [...],     // 9 guías
    "drugs": [...],       // 6 fármacos
    "checklists": [...]   // 3 checklists
  },
  "media": {
    "resources": [...],
    "associations": [...]
  }
}
```

### 3. ExternalContentAdapter
- **Configuración**: 
  - Usa `VITE_API_URL` si está configurado
  - O ruta relativa: `/api/content-pack/latest.json`
- **Cache**: 
  - IndexedDB (preferido)
  - localStorage (fallback)
  - Expiración: 24 horas
- **Fallback**: Automático a `LocalContentAdapter` si falla

---

## 🔧 Configuración

### Opción 1: Variable de Entorno
Crear `.env` en la raíz del proyecto:
```env
VITE_API_URL=http://localhost:3000
```

### Opción 2: Proxy en Vite (Recomendado para desarrollo)
Añadir en `vite.config.ts`:
```typescript
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
      },
    },
  },
  // ... resto de configuración
});
```

Con esta configuración, el frontend puede usar rutas relativas (`/api/content-pack/latest.json`) y Vite las redirigirá al backend.

---

## 🧪 Pruebas Realizadas

### 1. Carga del Content Pack
```bash
curl http://localhost:3000/api/content-pack/latest.json
```
**Resultado**: ✅ Content Pack cargado correctamente

### 2. Estructura Verificada
- ✅ Metadata presente
- ✅ Content con todas las secciones
- ✅ Media resources (vacío por ahora)

### 3. Contenido Verificado
- ✅ 5 protocolos
- ✅ 9 guías
- ✅ 6 fármacos
- ✅ 3 checklists

---

## 📋 Cómo Probar en el Frontend

### 1. Iniciar Backend
```bash
cd backend
npm start
```

### 2. Iniciar Frontend
```bash
npm run dev
```

### 3. Verificar en el Navegador
1. Abrir la app en `http://localhost:8096`
2. Abrir la consola del navegador (F12)
3. Buscar mensajes de `[ContentAdapter]`
4. Verificar que carga el Content Pack

### 4. Verificar Badge "Externo"
- Las páginas que usan `useContentAdapter()` mostrarán un badge "Externo" si están usando contenido del backend
- Ejemplo: `Farmacos.tsx` muestra el badge cuando usa `ExternalContentAdapter`

### 5. Probar Fallback
1. Detener el backend (`Ctrl+C`)
2. Recargar la página
3. Verificar que la app sigue funcionando (usa `LocalContentAdapter`)
4. El badge "Externo" no debería aparecer

---

## 🔍 Debugging

### Verificar que el Content Pack se carga
En la consola del navegador:
```javascript
// Verificar cache
localStorage.getItem('content_pack')

// Verificar adapter
import { contentAdapter } from '@/services/content-adapter';
console.log(contentAdapter.isAvailable()); // true si tiene pack
```

### Verificar estructura de fármacos
El `ExternalContentAdapter` tiene lógica para manejar fármacos en dos formatos:
1. **Formato directo**: `{ genericName, tradeName, ... }`
2. **Formato content**: `{ content: { genericName, ... } }`

El adapter detecta automáticamente el formato y lo convierte.

---

## ⚠️ Notas Importantes

### Estructura de Fármacos
Los fármacos vienen desde la tabla `tes_content.drugs` con estructura directa:
```javascript
{
  id: "...",
  slug: "adrenalina",
  genericName: "Adrenalina",
  tradeName: "Adrenalina 1mg/1ml",
  category: "cardiovascular",
  // ... otros campos
}
```

El `ExternalContentAdapter` está preparado para manejar esta estructura.

### Cache
- El Content Pack se cachea automáticamente
- Cache válido por 24 horas
- Para forzar recarga: `localStorage.removeItem('content_pack')`

---

## ✅ Checklist de Integración

- [x] Endpoint `/api/content-pack/latest.json` funciona
- [x] Content Pack se genera correctamente
- [x] Estructura del pack es correcta
- [x] ExternalContentAdapter configurado
- [x] Cache implementado (IndexedDB + localStorage)
- [x] Fallback a LocalContentAdapter funciona
- [ ] Probar en navegador (pendiente)
- [ ] Verificar badge "Externo" (pendiente)
- [ ] Probar fallback con backend detenido (pendiente)

---

**Estado**: ✅ Integración verificada y lista para pruebas en navegador