import React from "react";
import { Athlete, Session } from "../classes";
import { calculStatsAthlete, niveauAlerte, StatsAthlete } from "../utils/athleteUtils"

interface AthleteStatsProps {
  athlete: Athlete;
  sessions: Session[]; 
}

function StatAthlete({ athlete, sessions }: AthleteStatsProps) {
  const [dateDebut, setDateDebut] = React.useState(new Date());
  const [dateFin, setDateFin] = React.useState(new Date());
  const [seuilCritique, setSeuilCritique] = React.useState(0);
  const [seuilMax, setSeuilMax] = React.useState(0);
  const [stats, setStats] = React.useState<StatsAthlete | null>(null);

  const dateToDatetimeLocal = (date: Date) => {
    const pad = (n: number) => n.toString().padStart(2, "0");
    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
  };

  const handleCalculerStats = () => {
    const statsCalculees = calculStatsAthlete(sessions, athlete, dateDebut, dateFin);
    setStats(statsCalculees);
  };

  return (
    <div className="creneau-stats">
      <label>
        Début :
        <input
          type="datetime-local"
          value={dateToDatetimeLocal(dateDebut)}
          onChange={e => setDateDebut(new Date(e.target.value))}
        />
      </label>
      
      <label>
        Fin :
        <input
          type="datetime-local"
          value={dateToDatetimeLocal(dateFin)}
          onChange={e => setDateFin(new Date(e.target.value))}
        />
      </label>
      
      <label>
        Seuil critique :
        <input
          type="number"
          value={seuilCritique}
          min={1}
          onChange={e => setSeuilCritique(Number(e.target.value))}
        />
      </label>
      
      <label>
        Seuil max :
        <input
          type="number"
          value={seuilMax}
          min={1}
          onChange={e => setSeuilMax(Number(e.target.value))}
        />
      </label>

      <button onClick={handleCalculerStats}>Calculer les statistiques</button>

      {stats && (
        <div className="stats-display">
          <h3>Statistiques de {athlete.nom}</h3>
          <p><strong>Nombre total de sessions :</strong> {stats.nbSessions}</p>
          <p><strong>Sessions par semaine :</strong> {stats.nbSessionsPerWeek.toFixed(2)}</p>
          <p><strong>Statut :</strong> {niveauAlerte(stats, seuilCritique, seuilMax)}</p>
          
          {stats.distributions.size > 0 && (
            <>
              <h4>Distribution des activités :</h4>
              <ul>
                {Array.from(stats.distributions.entries()).map(([nomActivite, count]) => (
                  <li key={String(nomActivite)}>
                    {nomActivite} : {count} session(s)
                  </li>
                ))}
              </ul>
            </>
          )}
        </div>
      )}
    </div>
  );
}

export default StatAthlete;