import 'package:flutter/material.dart';
import 'package:xp_models/xp_models.dart';
import '../theme/app_theme.dart';

class ProgressCard extends StatelessWidget {
  final DashboardStats? stats;

  const ProgressCard({
    super.key,
    required this.stats,
  });

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              children: [
                const Icon(Icons.analytics, color: AppTheme.primaryColor),
                const SizedBox(width: 8),
                Text(
                  'Today\'s Progress',
                  style: Theme.of(context).textTheme.titleLarge?.copyWith(
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ],
            ),
            const SizedBox(height: 24),
            if (stats != null) ...[
              _ProgressItem(
                label: 'Focus Time',
                value: _formatDuration(stats!.today.focusTime),
                progress: _calculateProgress(stats!.today.focusTime, 8 * 3600), // 8 hours target
                color: AppTheme.successColor,
                icon: Icons.psychology,
              ),
              const SizedBox(height: 16),
              _ProgressItem(
                label: 'Meeting Time',
                value: _formatDuration(stats!.today.meetingTime),
                progress: _calculateProgress(stats!.today.meetingTime, 4 * 3600), // 4 hours target
                color: AppTheme.infoColor,
                icon: Icons.groups,
              ),
              const SizedBox(height: 16),
              _ProgressItem(
                label: 'Focus Sessions',
                value: stats!.today.focusSessions.toString(),
                progress: _calculateProgress(stats!.today.focusSessions, 8), // 8 sessions target
                color: AppTheme.warningColor,
                icon: Icons.timer,
                isCount: true,
              ),
            ] else ...[
              const Center(
                child: CircularProgressIndicator(),
              ),
            ],
          ],
        ),
      ),
    );
  }

  String _formatDuration(int seconds) {
    final hours = seconds ~/ 3600;
    final minutes = (seconds % 3600) ~/ 60;
    return '${hours}h ${minutes}m';
  }

  double _calculateProgress(int current, int target) {
    if (target == 0) return 0.0;
    return (current / target).clamp(0.0, 1.0);
  }
}

class _ProgressItem extends StatelessWidget {
  final String label;
  final String value;
  final double progress;
  final Color color;
  final IconData icon;
  final bool isCount;

  const _ProgressItem({
    required this.label,
    required this.value,
    required this.progress,
    required this.color,
    required this.icon,
    this.isCount = false,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          children: [
            Icon(icon, size: 20, color: color),
            const SizedBox(width: 8),
            Expanded(
              child: Text(
                label,
                style: Theme.of(context).textTheme.bodyMedium?.copyWith(
                  fontWeight: FontWeight.w500,
                ),
              ),
            ),
            Text(
              value,
              style: Theme.of(context).textTheme.bodyLarge?.copyWith(
                fontWeight: FontWeight.bold,
                color: color,
              ),
            ),
          ],
        ),
        const SizedBox(height: 8),
        Stack(
          children: [
            Container(
              height: 8,
              decoration: BoxDecoration(
                color: Colors.grey.shade200,
                borderRadius: BorderRadius.circular(4),
              ),
            ),
            AnimatedContainer(
              duration: const Duration(milliseconds: 800),
              curve: Curves.easeInOut,
              height: 8,
              width: MediaQuery.of(context).size.width * progress * 0.8, // Approximate width
              decoration: BoxDecoration(
                color: color,
                borderRadius: BorderRadius.circular(4),
                gradient: LinearGradient(
                  colors: [color, color.withOpacity(0.7)],
                  begin: Alignment.centerLeft,
                  end: Alignment.centerRight,
                ),
              ),
            ),
          ],
        ),
        const SizedBox(height: 4),
        Text(
          '${(progress * 100).toInt()}% of target',
          style: Theme.of(context).textTheme.bodySmall?.copyWith(
            color: Colors.grey.shade600,
          ),
        ),
      ],
    );
  }
}
