import React from 'react';
import Table from '@/components/Table';
import { GraduationCap } from 'lucide-react';

const ClasseDetails = ({ classe }) => {
  if (!classe) return null;

  const nombreElevesInscrits = classe?.eleves?.length || 0;
  const capaciteTotale = classe.number_of_students;
  const pourcentage = Math.round((nombreElevesInscrits / capaciteTotale) * 100);

  const getColor = (pourcentage) => {
    if (pourcentage < 50) return 'bg-emerald-500';
    if (pourcentage < 75) return 'bg-orange-500';
    return 'bg-red-500';
  };

  return (
    <div className="p-4">
      <div className="mb-4 flex justify-between items-center">
        {/* Section Enseignant Principal */}
        <div className="flex items-center space-x-4">
          <div className="bg-gray-100 p-3 rounded-lg shadow-md flex items-center space-x-4">
            <GraduationCap className="w-10 h-10 text-gray-600" />
            <div>
              <p className="italic text-gray-600">Enseignant Principal :</p>
              <p className="font-bold text-gray-800">
                {classe.enseignant_principal ? (
                  `${classe.enseignant_principal.nom} ${classe.enseignant_principal.prenom}`
                ) : (
                  <i>Non assigné</i>
                )}
              </p>
            </div>
          </div>
        </div>

        {/* Section Capacité de la Classe */}
        <div className="flex items-center space-x-4">
          <div className="flex items-center">
            <span className="font-bold text-gray-700 mr-4">
              {nombreElevesInscrits}/{capaciteTotale}
            </span>
            <div className="w-32 bg-gray-200 rounded-full h-6 shadow-inner">
              <div
                className={`h-full rounded-full ${getColor(pourcentage)}`}
                style={{ width: `${pourcentage}%` }}
              ></div>
            </div>
            <span className="ml-4 font-bold text-gray-700">{pourcentage}%</span>
          </div>
        </div>
      </div>

      <h3 className="text-xl font-semibold mb-4">Liste des élèves</h3>
      <div className="bg-white rounded-lg border border-gray-200 shadow-md">
        <Table
          columns={[
            { name: 'NOM', transform: (row) => row.name },
            { name: 'PRENOM', transform: (row) => row.first_name },
            { name: 'AGE', transform: (row) => `${row.age}` },
          ]}
          data={classe.students}
        />
      </div>
    </div>
  );
};

export default ClasseDetails;