# Chat Medical Alert Banner - Implementation

## Objetivo
Mostrar banner persistente cuando chatbot detecta `RECOMENDADO` o `URGENTE`, permitiendo agendar cita con reporte generado automáticamente.

## Flujo Nuevo
```
Mensaje con RECOMENDADO/URGENTE
→ Banner sticky top: "⚠️ Consulta [recomendada/urgente]"
→ [Agendar Cita Ahora] [Continuar Conversación]
→ Si Agendar: genera reporte + abre modal + asocia reportId
→ Si Continuar: banner permanece visible
→ Al mensaje 3 o agendar: fin + reporte
```

## Tasks

### ✅ Completadas

#### 1. Nuevo Componente: `MedicalAlertBanner.tsx`
- ✅ Crear `/src/components/chatbot/MedicalAlertBanner.tsx`
- ✅ Props: `alert`, `onSchedule`, `onDismiss`, `isScheduling`
- ✅ Sticky top, colores según alert type
- ✅ Botones: "Agendar Cita Ahora" + "X" (dismiss)

#### 2. Modificar `useChat.ts`
- ✅ State: `medicalAlertDetected: MedicalAlert | null`
- ✅ State: `showMedicalAlertBanner: boolean`
- ✅ State: `isSchedulingFromAlert: boolean`
- ✅ Logic: detectar cuando `response.medicalAlert !== "NO_AGENDAR"`
- ✅ Función: `handleScheduleFromAlert(callback)` → genera reporte + callback con reportId
- ✅ Función: `dismissMedicalAlertBanner()`
- ✅ Reset states al limpiar chat

#### 3. Modificar `ChatInterface.tsx`
- ✅ Import `MedicalAlertBanner`
- ✅ State: `appointmentReportId`
- ✅ Renderizar banner después de `ChatHeader`
- ✅ Handler: `handleScheduleFromAlertClick()` → genera reporte y abre modal
- ✅ Pasar `reportId` al `AppointmentModalFromChat`

#### 4. Modificar `ChatMessage.tsx`
- ✅ Remover import de `MedicalAlert`
- ✅ Quitar render de `<MedicalAlert />` individual
- ✅ Solo mostrar texto de respuesta

#### 5. Modificar `AppointmentModalFromChat.tsx`
- ✅ Prop: `reportId?: string`
- ✅ Incluir `reportId` en payload al crear cita

#### 6. API: `/api/appointments/route.ts`
- ✅ Agregar campo `reportId` opcional en body
- ✅ Asociar en Prisma create con spread operator

#### 7. Schema Prisma
- ✅ Agregar campo `reportId String?` a `Appointment`
- ✅ Migration ejecutada: `20251013144104_add_report_id_to_appointments`

#### 8. Testing
- ✅ Dev server corriendo sin errores
- 🔄 Pendiente testing manual del flujo completo

### 🔄 En Progreso
Ninguna

### 📋 Pendientes Testing Manual
- [ ] Enviar mensaje que genere alerta RECOMENDADO
- [ ] Verificar que banner aparezca sticky top
- [ ] Click en "Agendar Cita Ahora"
- [ ] Verificar que se genera reporte
- [ ] Verificar que modal se abre con reportId
- [ ] Crear cita y verificar que reportId se guarda en DB
- [ ] Probar dismiss del banner
- [ ] Probar con alerta URGENTE
- [ ] Verificar que banner persiste entre mensajes

## Archivos a Modificar
```
NEW: src/components/chatbot/MedicalAlertBanner.tsx
MOD: src/hooks/useChat.ts
MOD: src/components/chatbot/ChatInterface.tsx
MOD: src/components/chatbot/ChatMessage.tsx
MOD: src/components/chatbot/AppointmentModalFromChat.tsx
MOD: src/app/api/appointments/route.ts
CHK: prisma/schema.prisma
```

## Notas de Implementación
- Banner NO usa toast, es componente persistente
- Dismiss temporal: solo oculta UI, state se mantiene
- Al agendar desde banner: misma lógica que reset con reporte
- ReportId se pasa al modal, no se crea nueva cita sin contexto

## Decisiones de Diseño
- Banner sticky top (no dentro de mensajes)
- Colores: amarillo (RECOMENDADO), rojo (URGENTE)
- Solo aparece una vez por sesión de chat
- Al generar reporte, se asocia automáticamente a cita