import React, { useState } from 'react';
import {
  Trash2,
  Eye,
  EyeOff,
  ToggleLeft,
  ToggleRight,
  Info,
  XCircle,
} 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';
import Tooltip from '@/components/Tooltip';

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,
  handleDissociateGuardian,
}) => {
  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 [visibleTooltipId, setVisibleTooltipId] = useState(null);

  const handleTooltipVisibility = (id) => {
    setVisibleTooltipId(id); // Définir l'ID de la ligne pour laquelle la tooltip est visible
  };

  const handleTooltipHide = () => {
    setVisibleTooltipId(null); // Cacher toutes les tooltips
  };

  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 handleConfirmDissociateGuardian = (profileRole, student) => {
    setVisibleTooltipId(null);
    setConfirmPopupMessage(
      `Vous êtes sur le point de dissocier le responsable ${profileRole.associated_person?.guardian_name} de l'élève ${student.student_name}. Êtes-vous sûr de vouloir poursuivre cette opération ?`
    );
    setConfirmPopupOnConfirm(() => () => {
      handleDissociateGuardian(student.id, profileRole.associated_person?.id)
        .then(() => {
          setPopupMessage('Le responsable a été dissocié avec succès.');
          setPopupVisible(true);
        })
        .catch((error) => {
          setPopupMessage('Erreur lors de la dissociation du responsable.');
          setPopupVisible(true);
        });
      setConfirmPopupVisible(false);
    });
    setConfirmPopupVisible(true);
  };

  const parentColumns = [
    { name: 'Identifiant', transform: (row) => row.associated_profile_email },
    { name: 'Mise à jour', transform: (row) => row.updated_date_formatted },
    {
      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) => (
        <div className="flex items-center justify-center space-x-2 relative">
          <span>{row.associated_person?.guardian_name}</span>
          {row.associated_person && (
            <div
              className="relative group"
              onMouseEnter={() => handleTooltipVisibility(row.id)} // Afficher la tooltip pour cette ligne
              onMouseLeave={handleTooltipHide} // Cacher la tooltip
            >
              <button className="relative text-blue-500 hover:text-blue-700 flex items-center justify-center">
                <div className="w-6 h-6 bg-blue-100 text-blue-700 rounded-full flex items-center justify-center font-bold">
                  {row.associated_person?.students?.length || 0}
                </div>
              </button>
              {visibleTooltipId === row.id && ( // Afficher uniquement si l'ID correspond
                <div className="fixed z-50 w-96 p-4 bg-white border border-gray-200 rounded shadow-lg -translate-x-1/2">
                  <div className="mb-2">
                    <strong>Elève(s) associé(s):</strong>
                    <div className="flex flex-col justify-center space-y-2 mt-4">
                      {row.associated_person?.students?.map((student) => (
                        <div
                          key={student.student_name}
                          className="flex justify-between items-center"
                        >
                          <span className="px-2 py-1 rounded-full text-gray-800 whitespace-nowrap inline-block min-w-0 max-w-fit">
                            {student.student_name}
                          </span>
                          <div className="flex items-center space-x-2">
                            <StatusLabel
                              status={student.registration_status}
                              showDropdown={false}
                            />
                            <button
                              className="text-red-500 hover:text-red-700 flex items-center space-x-1"
                              onClick={() =>
                                handleConfirmDissociateGuardian(row, student)
                              }
                            >
                              <XCircle className="w-5 h-5" />
                              <span className="text-sm">Dissocier</span>
                            </button>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              )}
            </div>
          )}
        </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: 'Mise à jour', transform: (row) => row.updated_date_formatted },
    {
      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) => (
        <div className="flex items-center justify-center space-x-2 relative">
          <span>{row.associated_person?.teacher_name}</span>
          {row.associated_person && (
            <div
              className="relative group"
              onMouseEnter={() => handleTooltipVisibility(row.id)} // Afficher la tooltip pour cette ligne
              onMouseLeave={handleTooltipHide} // Cacher la tooltip
            >
              <button className="relative text-blue-500 hover:text-blue-700 flex items-center justify-center">
                <div className="w-6 h-6 bg-blue-100 text-blue-700 rounded-full flex items-center justify-center font-bold">
                  <Info className="w-4 h-4" /> {/* Icône Info */}
                </div>
              </button>
              {visibleTooltipId === row.id && ( // Afficher uniquement si l'ID correspond
                <div className="fixed z-50 w-96 p-4 bg-white border border-gray-200 rounded shadow-lg -translate-x-1/2">
                  <div className="mb-2">
                    <strong>Classes associées:</strong>
                    <div className="flex flex-wrap justify-center space-x-2 mt-4">
                      {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>
                  </div>
                  <div>
                    <strong>Spécialités:</strong>
                    <div className="flex flex-wrap justify-center space-x-2 mt-4">
                      {row.associated_person?.specialities?.map(
                        (speciality) => (
                          <SpecialityItem
                            key={speciality.name}
                            speciality={speciality}
                            isDraggable={false}
                          />
                        )
                      )}
                    </div>
                  </div>
                </div>
              )}
            </div>
          )}
        </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-3/5 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;