n3wt-school/Front-End/src/components/ProfileDirectory.js

import React, { useState } from 'react';
import { Trash2, Eye, EyeOff, ToggleLeft, ToggleRight } from 'lucide-react';
import Table from '@/components/Table';
import Popup from '@/components/Popup';
import StatusLabel from '@/components/StatusLabel';
import SpecialityItem from '@/components/Structure/Configuration/SpecialityItem';

const roleTypeToLabel = (roleType) => {
  switch (roleType) {
    case 0:
      return 'ECOLE';
    case 1:
      return 'ADMIN';
    case 2:
      return 'PARENT';
    default:
      return 'UNKNOWN';
  }
};

const roleTypeToBadgeClass = (roleType) => {
  switch (roleType) {
    case 0:
      return 'bg-blue-100 text-blue-600';
    case 1:
      return 'bg-red-100 text-red-600';
    case 2:
      return 'bg-green-100 text-green-600';
    default:
      return 'bg-gray-100 text-gray-600';
  }
};

const ProfileDirectory = ({ profileRoles, handleActivateProfile, handleDeleteProfile }) => {
  const parentProfiles = profileRoles.filter(profileRole => profileRole.role_type === 2);
  const schoolAdminProfiles = profileRoles.filter(profileRole => profileRole.role_type !== 2);

  const [popupVisible, setPopupVisible] = useState(false);
  const [popupMessage, setPopupMessage] = useState("");
  const [confirmPopupVisible, setConfirmPopupVisible] = useState(false);
  const [confirmPopupMessage, setConfirmPopupMessage] = useState("");
  const [confirmPopupOnConfirm, setConfirmPopupOnConfirm] = useState(() => {});

  const handleConfirmActivateProfile = (profileRole) => {
    setConfirmPopupMessage(`Êtes-vous sûr de vouloir ${profileRole.is_active ? 'désactiver' : 'activer'} ce profil ?`);
    setConfirmPopupOnConfirm(() => () => {
      handleActivateProfile(profileRole)
        .then(() => {
          setPopupMessage(`Le profil a été ${profileRole.is_active ? 'désactivé' : 'activé'} avec succès.`);
          setPopupVisible(true);
        })
        .catch(error => {
          setPopupMessage(`Erreur lors de la ${profileRole.is_active ? 'désactivation' : 'activation'} du profil.`);
          setPopupVisible(true);
        });
      setConfirmPopupVisible(false);
    });
    setConfirmPopupVisible(true);
  };

  const handleConfirmDeleteProfile = (id) => {
    setConfirmPopupMessage("Êtes-vous sûr de vouloir supprimer ce profil ?");
    setConfirmPopupOnConfirm(() => () => {
      handleDeleteProfile(id)
        .then(() => {
          setPopupMessage("Le profil a été supprimé avec succès.");
          setPopupVisible(true);
        })
        .catch(error => {
          setPopupMessage("Erreur lors de la suppression du profil.");
          setPopupVisible(true);
        });
      setConfirmPopupVisible(false);
    });
    setConfirmPopupVisible(true);
  };

  const parentColumns = [
    { name: 'Identifiant', transform: (row) => row.associated_profile_email },
    { name: 'Rôle', transform: (row) => (
        <span className={`px-2 py-1 rounded-full font-bold ${roleTypeToBadgeClass(row.role_type)}`}>
          {roleTypeToLabel(row.role_type)}
        </span>
      )
    },
    { name: 'Utilisateur', transform: (row) => row.associated_person?.guardian_name },
    { name: 'Elève(s) associé(s)', transform: (row) => (
      <div className="flex flex-col justify-center space-y-2">
        {row.associated_person?.students?.map(student => (
          <span key={student.student_name} className="px-2 py-1 rounded-full text-gray-800">
            {student.student_name}
          </span>
        ))}
      </div>
      )
    },
    { name: 'Etat du dossier d\'inscription', transform: (row) => (
        <div className="flex flex-col justify-center items-center space-y-2">
          {row.associated_person?.students?.map(student => (
            <StatusLabel key={student.student_name} status={student.registration_status} showDropdown={false} />
          ))}
        </div>
      )
    },
    {
      name: 'Actions',
      transform: (row) => (
        <div className="flex justify-center space-x-2">
          <button
            type="button"
            className={row.is_active ? 'text-emerald-500 hover:text-emerald-700' : 'text-orange-500 hover:text-orange-700'}
            onClick={() => handleConfirmActivateProfile(row)}
          >
            {row.is_active ? <ToggleRight className="w-5 h-5 " /> : <ToggleLeft className="w-5 h-5" />}
          </button>
          <button
            type="button"
            className="text-red-500 hover:text-red-700"
            onClick={() => handleConfirmDeleteProfile(row.id)}
          >
            <Trash2 className="w-5 h-5" />
          </button>
        </div>
      )
    }
  ];

  const schoolAdminColumns = [
    { name: 'Identifiant', transform: (row) => row.associated_profile_email },
    { name: 'Rôle', transform: (row) => (
        <span className={`px-2 py-1 rounded-full font-bold ${roleTypeToBadgeClass(row.role_type)}`}>
          {roleTypeToLabel(row.role_type)}
        </span>
      )
    },
    { name: 'Utilisateur', transform: (row) => row.associated_person?.teacher_name },
    { name: 'Classe(s) associée(s)', transform: (row) => (
        <div className="flex flex-wrap justify-center space-x-2">
          {row.associated_person?.classes?.map(classe => (
            <span key={classe.id} className="px-2 py-1 rounded-full bg-gray-200 text-gray-800">
              {classe.name}
            </span>
          ))}
        </div>
      )
    },
    { name: 'Spécialités', transform: (row) => (
        <div className="flex flex-wrap justify-center space-x-2">
          {row.associated_person?.specialities?.map(speciality => (
            <SpecialityItem speciality={speciality} isDraggable={false}/>
          ))}
        </div>
      )
    },
    {
      name: 'Actions',
      transform: (row) => (
        <div className="flex justify-center space-x-2">
          <button
            type="button"
            className={row.is_active ? 'text-emerald-500 hover:text-emerald-700' : 'text-orange-500 hover:text-orange-700'}
            onClick={() => handleConfirmActivateProfile(row)}
          >
            {row.is_active ? <ToggleRight className="w-5 h-5 " /> : <ToggleLeft className="w-5 h-5" />}
          </button>
          <button
            type="button"
            className="text-red-500 hover:text-red-700"
            onClick={() => handleConfirmDeleteProfile(row.id)}
          >
            <Trash2 className="w-5 h-5" />
          </button>
        </div>
      )
    }
  ];

  return (
    <div className="bg-white rounded-lg shadow-lg w-full p-6">
      <div className="space-y-8">
        <div className="max-h-128 overflow-y-auto border rounded p-4">
          {parentProfiles.length === 0 ? (
            <div>Aucun profil trouvé</div>
          ) : (
            <Table
              data={parentProfiles}
              columns={parentColumns}
            />
          )}
        </div>
        <div className="max-h-128 overflow-y-auto border rounded p-4">
          {schoolAdminProfiles.length === 0 ? (
            <div>Aucun profil trouvé</div>
          ) : (
            <Table
              data={schoolAdminProfiles}
              columns={schoolAdminColumns}
            />
          )}
        </div>
      </div>
      <Popup
        visible={popupVisible}
        message={popupMessage}
        onConfirm={() => setPopupVisible(false)}
        uniqueConfirmButton={true}
      />
      <Popup
        visible={confirmPopupVisible}
        message={confirmPopupMessage}
        onConfirm={confirmPopupOnConfirm}
        onCancel={() => setConfirmPopupVisible(false)}
      />
    </div>
  );
};

export default ProfileDirectory;