import 'package:flutter/material.dart'; import 'package:flutter_mobx/flutter_mobx.dart'; import 'package:intl/intl.dart'; import '../../../../core/theme/app_colors.dart'; import '../store/patient_store.dart'; class SecretaryAppointmentSection extends StatelessWidget { final PatientStore store; const SecretaryAppointmentSection({ super.key, required this.store, }); void _setDate(DateTime date) { store.fecProxcita = DateFormat('dd/MM/yyyy').format(date); } @override Widget build(BuildContext context) { final now = DateTime.now(); return Observer( builder: (_) { return Container( margin: const EdgeInsets.symmetric(horizontal: 20, vertical: 14), padding: const EdgeInsets.all(20), decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(14), border: Border.all(color: const Color(0xFFE2E8F0)), boxShadow: [ BoxShadow( color: Colors.black.withValues(alpha: 0.02), blurRadius: 8, offset: const Offset(0, 2), ), ], ), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ // 1. Título de la sección Row( children: [ Container( padding: const EdgeInsets.all(8), decoration: BoxDecoration( color: const Color(0xFF00A65A).withValues(alpha: 0.12), borderRadius: BorderRadius.circular(10), ), child: const Icon( Icons.event_available_rounded, color: Color(0xFF00A65A), size: 20, ), ), const SizedBox(width: 12), const Expanded( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( 'Gestión de Citas y Turno del Paciente', style: TextStyle( fontSize: 14, fontWeight: FontWeight.w700, color: AppColors.textPrimary, ), ), SizedBox(height: 2), Text( 'Coordine la próxima visita o turno del paciente en el consultorio', style: TextStyle(fontSize: 12, color: AppColors.textMuted), ), ], ), ), ], ), const SizedBox(height: 18), // 2. Estado actual de la cita Container( padding: const EdgeInsets.all(16), decoration: BoxDecoration( color: const Color(0xFFF8FAFC), borderRadius: BorderRadius.circular(10), border: Border.all(color: const Color(0xFFE2E8F0)), ), child: Row( children: [ Icon( store.fecProxcita.isNotEmpty ? Icons.check_circle_rounded : Icons.info_outline_rounded, color: store.fecProxcita.isNotEmpty ? const Color(0xFF00A65A) : AppColors.textMuted, size: 22, ), const SizedBox(width: 12), Expanded( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( store.fecProxcita.isNotEmpty ? 'Próxima Cita Programada: ${store.fecProxcita}' : 'Sin fecha de cita programada', style: TextStyle( fontSize: 13.5, fontWeight: FontWeight.w700, color: store.fecProxcita.isNotEmpty ? AppColors.textPrimary : AppColors.textSecondary, ), ), if (store.diasParaProximaCita != null) ...[ const SizedBox(height: 2), Text( store.diasParaProximaCita! < 0 ? 'La cita programada venció hace ${store.diasParaProximaCita!.abs()} días.' : (store.diasParaProximaCita! == 0 ? '¡Cita pautada para el día de HOY!' : 'Faltan ${store.diasParaProximaCita} días para la cita.'), style: TextStyle( fontSize: 11.5, fontWeight: FontWeight.w600, color: store.diasParaProximaCita! < 0 ? AppColors.error : (store.diasParaProximaCita! == 0 ? const Color(0xFFE65100) : const Color(0xFF00A65A)), ), ), ], ], ), ), if (store.fecProxcita.isNotEmpty) TextButton.icon( onPressed: () => store.fecProxcita = '', icon: const Icon(Icons.clear_rounded, size: 16, color: AppColors.error), label: const Text( 'Quitar Cita', style: TextStyle(color: AppColors.error, fontSize: 12, fontWeight: FontWeight.w600), ), ), ], ), ), const SizedBox(height: 16), // 3. Botones para selección de fecha Wrap( spacing: 8, runSpacing: 8, crossAxisAlignment: WrapCrossAlignment.center, children: [ ElevatedButton.icon( onPressed: () async { final picked = await showDatePicker( context: context, initialDate: now.add(const Duration(days: 7)), firstDate: now.subtract(const Duration(days: 30)), lastDate: now.add(const Duration(days: 365 * 3)), builder: (context, child) { return Theme( data: Theme.of(context).copyWith( colorScheme: const ColorScheme.light( primary: Color(0xFF00A65A), onPrimary: Colors.white, surface: Colors.white, ), ), child: child!, ); }, ); if (picked != null) { _setDate(picked); } }, icon: const Icon(Icons.calendar_month_rounded, size: 16), label: const Text('Elegir en Calendario', style: TextStyle(fontWeight: FontWeight.w600, fontSize: 12.5)), style: ElevatedButton.styleFrom( backgroundColor: const Color(0xFF00A65A), foregroundColor: Colors.white, padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12), shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)), elevation: 0, ), ), OutlinedButton( onPressed: () => _setDate(now), style: OutlinedButton.styleFrom( padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 12), shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)), side: const BorderSide(color: Color(0xFFCBD5E1)), ), child: const Text('Para Hoy', style: TextStyle(fontSize: 12, color: AppColors.textPrimary)), ), OutlinedButton( onPressed: () => _setDate(now.add(const Duration(days: 1))), style: OutlinedButton.styleFrom( padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 12), shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)), side: const BorderSide(color: Color(0xFFCBD5E1)), ), child: const Text('Mañana', style: TextStyle(fontSize: 12, color: AppColors.textPrimary)), ), OutlinedButton( onPressed: () => _setDate(now.add(const Duration(days: 7))), style: OutlinedButton.styleFrom( padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 12), shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)), side: const BorderSide(color: Color(0xFFCBD5E1)), ), child: const Text('En 7 días', style: TextStyle(fontSize: 12, color: AppColors.textPrimary)), ), OutlinedButton( onPressed: () => _setDate(now.add(const Duration(days: 15))), style: OutlinedButton.styleFrom( padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 12), shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)), side: const BorderSide(color: Color(0xFFCBD5E1)), ), child: const Text('En 15 días', style: TextStyle(fontSize: 12, color: AppColors.textPrimary)), ), OutlinedButton( onPressed: () => _setDate(now.add(const Duration(days: 30))), style: OutlinedButton.styleFrom( padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 12), shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)), side: const BorderSide(color: Color(0xFFCBD5E1)), ), child: const Text('En 1 mes', style: TextStyle(fontSize: 12, color: AppColors.textPrimary)), ), ], ), const SizedBox(height: 18), // 4. Nota de Confidencialidad Container( padding: const EdgeInsets.all(12), decoration: BoxDecoration( color: const Color(0xFFEFF6FF), borderRadius: BorderRadius.circular(8), border: Border.all(color: const Color(0xFFBFDBFE)), ), child: const Row( crossAxisAlignment: CrossAxisAlignment.start, children: [ Icon(Icons.shield_outlined, color: Color(0xFF2563EB), size: 18), SizedBox(width: 8), Expanded( child: Text( 'Privacidad de Datos: Los diagnósticos, notas de consulta y prescripciones médicas son de gestión exclusiva del médico tratante y se mantienen protegidos.', style: TextStyle( fontSize: 11.5, color: Color(0xFF1E40AF), height: 1.35, ), ), ), ], ), ), ], ), ); }, ); } }