import React from 'react';
import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
import 'react-circular-progressbar/dist/styles.css';

export default function GradesStatsCircle({ grades }) {
  // grades : { [competence_id]: grade }
  const total = Object.keys(grades).length;
  const acquired = Object.values(grades).filter((g) => g === 3).length;
  const inProgress = Object.values(grades).filter((g) => g === 2).length;
  const notAcquired = Object.values(grades).filter((g) => g === 1).length;
  const notEvaluated = Object.values(grades).filter((g) => g === 0).length;

  // Pourcentage d'acquis
  const percent = total ? Math.round((acquired / total) * 100) : 0;

  return (
    <div className="flex flex-col items-center gap-4 bg-white p-6 rounded-lg shadow-sm border border-gray-200">
      <h2 className="text-xl font-semibold mb-2">Statistiques globales</h2>
      <div style={{ width: 120, height: 120 }}>
        <CircularProgressbar
          value={percent}
          text={`${percent}%`}
          styles={buildStyles({
            textColor: '#059669',
            pathColor: '#059669',
            trailColor: '#d1fae5',
          })}
        />
      </div>
      <div className="flex flex-col items-center text-sm mt-2">
        <span className="text-emerald-700 font-semibold">
          {acquired} acquis
        </span>
        <span className="text-yellow-600">{inProgress} en cours</span>
        <span className="text-red-500">{notAcquired} non acquis</span>
        <span className="text-gray-400">{notEvaluated} non évalués</span>
      </div>
    </div>
  );
}