WIDGETS 1.0

h1. Modal con historial en Mundiales previos

h2. 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, contando la historia de la rivalidad (ya sea corta, larga o de un encuentro totalmente nuevo) para construir la narrativa del partido antes de que comience el juego.

h2. 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

h2. 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
* La fuente de datos es un archivo JSON que se actualiza semanalmente (máximo diariamente) mediante un script que exporta datos de una hoja de cálculo de Google

h2. Archivos a Modificar

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

h2. Pasos Requeridos para Completar la Tarea

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

h2. 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

h2. Requisitos de Performance

* Implementar estrategias de caché apropiadas que se alineen con la frecuencia de actualización semanal del archivo JSON
* Manejar la invalidación de caché cuando se actualice el archivo
* Usar lazy loading para imágenes grandes en el modal
* Asegurar tiempos de carga rápidos (<2 segundos) para el contenido del modal
* Implementar mecanismos de fallback si el archivo JSON no está disponible temporalmente

h2. Contenido del History Modal Blueprint

h3. Estructura del Modal:

* Cabecera de Confrontación: Presenta a los protagonistas con sus respectivos nombres y banderas, utilizando un círculo central para establecer la naturaleza del duelo
* Tablero de Estadísticas Generales (KPIs): Utiliza un sistema de tarjetas para desglosar los datos históricos de forma cuantitativa (total de partidos, victorias por equipo, empates)
* Filtros y Navegación Interna: Incluye pestañas para segmentar la información ("Últimos enfrentamientos", "Mundial", etc.)
* Feed de Partidos Recientes: Listado detallado de los juegos previos que incluye fecha exacta, marcador destacado y contexto del torneo
* Sección de contexto histórico

h3. Datos de Entrada:

* Dos objetos de equipo (team1 y team2)
* Parámetros de historial (tournamentType, dateRange, etc.)

h3. Componentes de UI:

* Pestañas para diferentes vistas de datos
* Tarjetas de estadísticas
* Lista de historial de partidos
* Manejo especial para equipos sin historial previo ("Banner de Debut")

h3. Comportamiento Responsivo:

* Pantalla completa en móviles
* Modal centrado en escritorio
* Diseño adaptable a diferentes tamaños de pantalla

h2. 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
* El archivo JSON de datos se actualiza semanalmente (máximo diariamente) mediante un script que exporta de una hoja de cálculo de Google

h2. Manejo de Escenarios Especiales

h3. Escenario de "Historial Cero":

* Si los equipos nunca han jugado, el modal mostrará un "Banner de Debut" con texto sugerido: "¡Duelo inédito! Estas selecciones nunca se han enfrentado en la historia"
* Si no hay historial en un torneo específico pero sí en otros, mostrar: "Será el primer duelo entre ambos en una Copa del Mundo"

h3. Modos de Visualización:

* Versión estática: Mostrar la lista completa de encuentros de un solo torneo o varios
* Versión dinámica con pestañas: Permitir al usuario segmentar la importancia de los partidos (por ejemplo, separar partidos de Mundial de todos los partidos amistosos)

h2. Características Adicionales

* Soporte multi-idioma (español e inglés como mínimo)
* Personalización de branding, colores y tipografía
* Posibilidad de adaptar el título principal en función del historial que se muestre
* Manejo adecuado de casos donde hay pocos datos (menos de 5 partidos) versus rivalidades históricas extensas (20+ partidos)