import 'package:flutter/material.dart'; import 'package:focusflow_shared/focusflow_shared.dart'; import '../theme/app_colors.dart'; /// ADHD-friendly task card. /// /// Design principles: /// - Large title text for scannability. /// - Energy level indicator (colored dot). /// - Estimated time badge. /// - Tags as small chips. /// - Gentle color coding — NO overwhelming information density. /// - Tap to open, long-press for quick actions. class TaskCard extends StatelessWidget { final Task task; final VoidCallback? onTap; final VoidCallback? onComplete; final VoidCallback? onSkip; const TaskCard({ super.key, required this.task, this.onTap, this.onComplete, this.onSkip, }); Color _energyColor() { switch (task.energyLevel) { case 'low': return AppColors.energyLow; case 'high': return AppColors.energyHigh; default: return AppColors.energyMedium; } } String _energyLabel() { switch (task.energyLevel) { case 'low': return 'Low'; case 'high': return 'High'; default: return 'Med'; } } @override Widget build(BuildContext context) { final theme = Theme.of(context); return Card( child: InkWell( borderRadius: BorderRadius.circular(16), onTap: onTap, onLongPress: () => _showQuickActions(context), child: Padding( padding: const EdgeInsets.all(16), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ // ── Top row: title + energy dot ───────────────────── Row( children: [ // Energy dot Container( width: 12, height: 12, decoration: BoxDecoration( color: _energyColor(), shape: BoxShape.circle, ), ), const SizedBox(width: 10), // Title Expanded( child: Text( task.title, style: theme.textTheme.titleMedium?.copyWith( fontSize: 18, fontWeight: FontWeight.w600, ), maxLines: 2, overflow: TextOverflow.ellipsis, ), ), ], ), if (task.description != null && task.description!.isNotEmpty) ...[ const SizedBox(height: 6), Text( task.description!, style: theme.textTheme.bodyMedium, maxLines: 2, overflow: TextOverflow.ellipsis, ), ], const SizedBox(height: 12), // ── Bottom row: badges & tags ────────────────────── Wrap( spacing: 8, runSpacing: 6, children: [ // Energy badge _Badge( icon: Icons.bolt_rounded, label: _energyLabel(), color: _energyColor(), ), // Estimated time if (task.estimatedMinutes != null) _Badge( icon: Icons.timer_outlined, label: '${task.estimatedMinutes} min', color: AppColors.primary, ), // Category if (task.category != null) _Badge( icon: Icons.label_outline, label: task.category!, color: AppColors.tertiary, ), // Tags ...task.tags.take(3).map((tag) => Chip( label: Text(tag, style: const TextStyle(fontSize: 11)), materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, visualDensity: VisualDensity.compact, padding: EdgeInsets.zero, )), ], ), ], ), ), ), ); } void _showQuickActions(BuildContext context) { showModalBottomSheet( context: context, shape: const RoundedRectangleBorder( borderRadius: BorderRadius.vertical(top: Radius.circular(20)), ), builder: (ctx) => SafeArea( child: Padding( padding: const EdgeInsets.symmetric(vertical: 16), child: Column( mainAxisSize: MainAxisSize.min, children: [ ListTile( leading: const Icon(Icons.check_circle_outline, color: AppColors.completed), title: const Text('Mark as done'), onTap: () { Navigator.pop(ctx); onComplete?.call(); }, ), ListTile( leading: const Icon(Icons.skip_next_outlined, color: AppColors.skipped), title: const Text('Skip for now'), onTap: () { Navigator.pop(ctx); onSkip?.call(); }, ), ], ), ), ), ); } } /// Small coloured badge used inside [TaskCard]. class _Badge extends StatelessWidget { final IconData icon; final String label; final Color color; const _Badge({required this.icon, required this.label, required this.color}); @override Widget build(BuildContext context) { return Container( padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4), decoration: BoxDecoration( color: color.withAlpha(30), borderRadius: BorderRadius.circular(12), ), child: Row( mainAxisSize: MainAxisSize.min, children: [ Icon(icon, size: 14, color: color), const SizedBox(width: 4), Text( label, style: TextStyle(fontSize: 12, fontWeight: FontWeight.w600, color: color), ), ], ), ); } }