// src/components/learning-paths/ProgressTracker.tsx
import React from 'react';
import { Card, CardHeader, CardContent, CardTitle } from '@/components/ui/card';
import { Progress } from '@/components/ui/progress';
import { useUser } from '../../contexts/UserContext';
import { useLearning } from '../../contexts/LearningContext';

const ProgressTracker = () => {
  const { user } = useUser();
  const { paths } = useLearning();

  const totalModules = paths.reduce((acc, path) => 
    acc + path.modules.length, 0
  );

  const completedModules = user.progress.completedModules.length;
  const overallProgress = (completedModules / totalModules) * 100;

  return (
    <Card>
      <CardHeader>
        <CardTitle>Learning Progress</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-6">
          <div>
            <div className="flex justify-between text-sm text-gray-600 mb-2">
              <span>Overall Progress</span>
              <span>{Math.round(overallProgress)}%</span>
            </div>
            <Progress value={overallProgress} className="h-2" />
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div className="bg-blue-50 p-4 rounded">
              <div className="text-2xl font-bold text-blue-600">
                {completedModules}
              </div>
              <div className="text-sm text-gray-600">Modules Completed</div>
            </div>
            <div className="bg-green-50 p-4 rounded">
              <div className="text-2xl font-bold text-green-600">
                {user.progress.learningStreak}
              </div>
              <div className="text-sm text-gray-600">Day Streak</div>
            </div>
          </div>

          {user.progress.achievements.length > 0 && (
            <div>
              <h3 className="font-semibold mb-2">Recent Achievements</h3>
              <div className="space-y-2">
                {user.progress.achievements.slice(-3).map((achievement, idx) => (
                  <div key={idx} className="flex items-center gap-2 text-sm">
                    <span>🏆</span>
                    <span>{achievement.name}</span>
                    <span className="text-gray-500">
                      {new Date(achievement.date).toLocaleDateString()}
                    </span>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
      </CardContent>
    </Card>
  );
};

export default ProgressTracker;