import React from 'react';
import { History, Clock, Users } from 'lucide-react';
import logger from '@/utils/logger';

const ClassesList = ({ classes, onClassSelect, selectedClassId }) => {
  const currentYear = new Date().getFullYear();
  const currentMonth = new Date().getMonth();
  const currentSchoolYearStart =
    currentMonth >= 8 ? currentYear : currentYear - 1;

  const handleClassClick = (classe) => {
    logger.debug(
      `Classe sélectionnée: ${classe.atmosphere_name}, Année scolaire: ${classe.school_year}`
    );
    onClassSelect(classe);
  };

  const categorizedClasses = classes.reduce((acc, classe) => {
    const { school_year } = classe;
    const [startYear] = school_year.split('-').map(Number);
    const category =
      startYear >= currentSchoolYearStart ? 'Actives' : 'Anciennes';

    if (!acc[category]) {
      acc[category] = [];
    }
    acc[category].push(classe);
    return acc;
  }, {});

  return (
    <div className="w-full p-4 bg-gray-50 rounded-lg shadow-inner">
      <div className="flex justify-between items-center mb-4">
        <h2 className="text-3xl text-gray-800 flex items-center">
          <Users className="w-8 h-8 mr-2" />
          Classes
        </h2>
      </div>
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
        <div>
          <h3 className="text-xl font-semibold mb-2 text-emerald-600 flex items-center space-x-2">
            <Clock className="inline-block mr-2 w-5 h-5" /> Actives
          </h3>
          <div className="flex flex-col">
            {categorizedClasses['Actives']?.map((classe) => (
              <div
                key={classe.id}
                className={`flex items-center ${selectedClassId === classe.id ? 'bg-emerald-600 text-white' : 'bg-emerald-100 text-emerald-600'} border border-emerald-300 rounded-lg shadow-lg overflow-hidden hover:bg-emerald-300 hover:text-emerald-700 cursor-pointer p-4 mb-4`}
                onClick={() => handleClassClick(classe)}
                style={{ maxWidth: '400px' }}
              >
                <div className="flex-1 text-sm font-medium">
                  {classe.atmosphere_name}
                </div>
                <div className="flex-1 text-sm font-medium">
                  {classe.school_year}
                </div>
              </div>
            ))}
          </div>
        </div>
        <div>
          <h3 className="text-xl font-semibold mb-2 text-gray-600 flex items-center space-x-2">
            <History className="inline-block mr-2 w-5 h-5" /> Anciennes
          </h3>
          <div className="flex flex-col">
            {categorizedClasses['Anciennes']?.map((classe) => (
              <div
                key={classe.id}
                className={`flex items-center ${selectedClassId === classe.id ? 'bg-gray-400 text-white' : 'bg-gray-100 text-gray-600'} border border-gray-300 rounded-lg shadow-lg overflow-hidden hover:bg-gray-300 hover:text-gray-700 cursor-pointer p-4 mb-4`}
                onClick={() => handleClassClick(classe)}
                style={{ maxWidth: '400px' }}
              >
                <div className="flex-1 text-sm font-medium">
                  {classe.atmosphere_name}
                </div>
                <div className="flex-1 text-sm font-medium">
                  {classe.school_year}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default ClassesList;
