WIDGETS 1.0

desarrollo de modal con historial en Mundiales previos para el Calendario Fechas.

[original]
desarrollo de modal con historial en Mundiales previos para el Calendario Fechas.

[enhanced]
# Modal con historial en Mundiales previos para el Calendario Fechas

## Descripción Completa de la Funcionalidad
desarrollo de un modal de historial que se activa al hacer clic en los elementos VS (versus) dentro de las tarjetas de partido en el widget de Calendario Fechas. Este modal mostrará información detallada sobre los enfrentamientos históricos entre equipos en mundiales anteriores.

## Campos a Actualizar
- Nuevo componente `HistoryModal.vue` para mostrar información de historial
- Modificación del componente `MatchSocialCard.vue` para añadir evento de clic en el elemento VS
- Nuevo store `historyStore.js` para manejar la lógica de datos históricos
- Actualización del archivo de documentación para incluir el nuevo modal

## Estructura y URLs de los Endpoints Necesarios
- Endpoint para obtener datos de historial de enfrentamientos: `${configStore.extraDataUrl}/history/${tournament}/${sport}/head-to-head.json`
- El endpoint debe recibir como parámetros: `team1Id`, `team2Id`, `tournamentType` (ej. "worldcup")
- El formato de respuesta debe seguir la estructura definida en el blueprint del History Modal

## Archivos a Modificar
1. `src/components/sports/football/MatchSocialCard.vue` - Añadir evento de clic en VS
2. `src/components/widgets/CalendarWidget.vue` - Integrar la lógica de apertura del modal
3. `src/components/modals/HistoryModal.vue` - Nuevo componente para el modal de historial
4. `src/stores/history.js` - Nuevo store para manejar datos de historial
5. `src/composables/useModal.js` - Asegurar compatibilidad con el nuevo tipo de modal
6. `docs/widgets-documentation.md` - Actualizar documentación con el nuevo modal

## Pasos Requeridos para Completar la Tarea
1. Crear el store `historyStore` con la lógica para cargar datos de historial desde `extraDataUrl`
2. Implementar el componente `HistoryModal.vue` siguiendo el blueprint especificado
3. Modificar `MatchSocialCard.vue` para detectar clics en el elemento VS y disparar el modal
4. Actualizar `CalendarWidget.vue` para integrar la lógica de apertura del modal de historial
5. Probar la funcionalidad con diferentes combinaciones de equipos
6. Validar que los datos se obtengan correctamente desde la fuente externa `extraDataUrl`
7. Asegurar la responsividad y accesibilidad del modal
8. Documentar la nueva funcionalidad

## Requisitos de Seguridad
- Validar que los IDs de equipos sean seguros antes de usarlos en solicitudes
- Sanitizar cualquier contenido dinámico mostrado en el modal
- Asegurar que las URLs de origen sean confiables

## Requisitos de Performance
- Implementar caching de datos históricos para evitar múltiples solicitudes innecesarias
- Usar lazy loading para imágenes grandes en el modal
- Asegurar tiempos de carga rápidos (<2 segundos) para el contenido del modal

## Contenido del History Modal Blueprint
### Estructura del Modal:
- Sección de registro cara a cara (head-to-head record)
- Lista de encuentros pasados con marcadores y fechas
- Estadísticas comparativas de torneos
- Sección de contexto histórico

### Datos de Entrada:
- Dos objetos de equipo (team1 y team2)
- Parámetros de historial (tournamentType, dateRange, etc.)

### Componentes de UI:
- Pestañas para diferentes vistas de datos
- Tarjetas de estadísticas
- Lista de historial de partidos

### Comportamiento Responsivo:
- Pantalla completa en móviles
- Modal centrado en escritorio

## Dependencias
- El widget debe tener acceso a `configStore.extraDataUrl` para obtener los datos históricos
- Los equipos deben tener IDs válidos para realizar la consulta de historial