'use client';
import React, { useState, useEffect } from 'react';
import { useEstablishment } from '@/context/EstablishmentContext';
import { PARENT_FILTER, SCHOOL_FILTER } from '@/utils/constants';
import { Trash2, 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 SidebarTabs from '@/components/SidebarTabs';
import {
  fetchProfileRoles,
  updateProfileRoles,
  deleteProfileRoles,
} from '@/app/actions/authAction';
import { dissociateGuardian } from '@/app/actions/subscriptionAction';
import { useCsrfToken } from '@/context/CsrfContext';
import DjangoCSRFToken from '@/components/DjangoCSRFToken';
import logger from '@/utils/logger';
import AlertMessage from '@/components/AlertMessage';

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';
  }
};

export default function Page() {
  const [profileRolesDatasParent, setProfileRolesDatasParent] = useState([]);
  const [profileRolesDatasSchool, setProfileRolesDatasSchool] = useState([]);
  const [reloadFetch, setReloadFetch] = useState(false);

  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 [activeTab, setActiveTab] = useState('parent'); // Onglet actif
  const [totalProfilesParentPages, setTotalProfilesParentPages] = useState(1);
  const [totalProfilesSchoolPages, setTotalProfilesSchoolPages] = useState(1);
  const [currentProfilesParentPage, setCurrentProfilesParentPage] = useState(1);

  const [totalProfilesParent, setTotalProfilesParent] = useState(0);
  const [totalProfilesSchool, setTotalProfilesSchool] = useState(0);
  const [currentProfilesSchoolPage, setCurrentProfilesSchoolPage] = useState(1);
  const [profileRolesParent, setProfileRolesParent] = useState([]);
  const [profileRolesSchool, setProfileRolesSchool] = useState([]);
  const itemsPerPage = 15; // Nombre d'éléments par page

  const csrfToken = useCsrfToken();

  const { selectedEstablishmentId } = useEstablishment();

  const requestErrorHandler = (err) => {
    logger.error('Error fetching data:', err);
  };

  useEffect(() => {
    if (selectedEstablishmentId) {
      // Fetch data for profileRolesParent
      handleProfiles();
    }
  }, [
    selectedEstablishmentId,
    reloadFetch,
    currentProfilesParentPage,
    currentProfilesSchoolPage,
  ]);

  const handleProfiles = () => {
    fetchProfileRoles(
      selectedEstablishmentId,
      PARENT_FILTER,
      currentProfilesParentPage,
      itemsPerPage
    )
      .then((data) => {
        setProfileRolesDatasParent(data);
      })
      .catch(requestErrorHandler);

    fetchProfileRoles(
      selectedEstablishmentId,
      SCHOOL_FILTER,
      currentProfilesSchoolPage,
      itemsPerPage
    )
      .then((data) => {
        setProfileRolesDatasSchool(data);
      })
      .catch(requestErrorHandler);
    setReloadFetch(false);
  };

  const handleEdit = (profileRole) => {
    const updatedData = { ...profileRole, is_active: !profileRole.is_active };
    return updateProfileRoles(profileRole.id, updatedData, csrfToken)
      .then((data) => {
        setProfileRolesParent((prevState) =>
          prevState.map((item) => (item.id === profileRole.id ? data : item))
        );
        return data;
      })
      .catch((error) => {
        logger.error('Error editing data:', error);
        throw error;
      });
  };

  const handleDelete = (id) => {
    return deleteProfileRoles(id, csrfToken)
      .then(() => {
        setProfileRolesParent((prevState) =>
          prevState.filter((item) => item.id !== id)
        );
        logger.debug('Profile deleted successfully:', id);
      })
      .catch((error) => {
        logger.error('Error deleting profile:', error);
        throw error;
      });
  };

  const handleDissociate = (studentId, guardianId) => {
    return dissociateGuardian(studentId, guardianId)
      .then((response) => {
        logger.debug('Guardian dissociated successfully:', guardianId);

        // Vérifier si le Guardian a été supprimé
        const isGuardianDeleted = response?.isGuardianDeleted;

        // Mettre à jour le modèle profileRolesParent
        setProfileRolesParent(
          (prevState) =>
            prevState
              .map((profileRole) => {
                if (profileRole.associated_person?.id === guardianId) {
                  if (isGuardianDeleted) {
                    // Si le Guardian est supprimé, retirer le profileRole
                    return null;
                  } else {
                    // Si le Guardian n'est pas supprimé, mettre à jour les élèves associés
                    const updatedStudents =
                      profileRole.associated_person.students.filter(
                        (student) => student.id !== studentId
                      );
                    return {
                      ...profileRole,
                      associated_person: {
                        ...profileRole.associated_person,
                        students: updatedStudents, // Mettre à jour les élèves associés
                      },
                    };
                  }
                }
                return profileRole; // Conserver les autres profileRolesParent
              })
              .filter(Boolean) // Supprimer les entrées nulles
        );
      })
      .catch((error) => {
        logger.error('Error dissociating guardian:', error);
        throw error;
      });
  };

  const profilesRoleParentDataHandler = (data) => {
    if (data) {
      const { profilesRoles, count, page_size } = data;
      if (profilesRoles) {
        setProfileRolesParent(profilesRoles);
      }
      const calculatedTotalPages =
        count === 0 ? count : Math.ceil(count / page_size);
      setTotalProfilesParent(count);
      setTotalProfilesParentPages(calculatedTotalPages);
    }
  };

  const profilesRoleSchoolDataHandler = (data) => {
    if (data) {
      const { profilesRoles, count, page_size } = data;
      if (profilesRoles) {
        setProfileRolesSchool(profilesRoles);
      }
      const calculatedTotalPages =
        count === 0 ? count : Math.ceil(count / page_size);
      setTotalProfilesSchool(count);
      setTotalProfilesSchoolPages(calculatedTotalPages);
    }
  };

  useEffect(() => {
    profilesRoleParentDataHandler(profileRolesDatasParent);
    profilesRoleSchoolDataHandler(profileRolesDatasSchool);

    if (activeTab === 'parent') {
      setTotalProfilesParentPages(
        Math.ceil(totalProfilesParent / itemsPerPage)
      );
    } else if (activeTab === 'school') {
      setTotalProfilesSchoolPages(
        Math.ceil(totalProfilesSchool / itemsPerPage)
      );
    }
  }, [profileRolesDatasParent, profileRolesDatasSchool, activeTab]);

  const handlePageChange = (newPage) => {
    if (activeTab === 'parent') {
      setCurrentProfilesParentPage(newPage);
    } else if (activeTab === 'school') {
      setCurrentProfilesSchoolPage(newPage);
    }
  };

  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(() => () => {
      handleEdit(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(() => () => {
      handleDelete(id)
        .then(() => {
          setPopupMessage('Le profil a été supprimé avec succès.');
          setPopupVisible(true);
        })
        .catch((error) => {
          setPopupMessage(error.message);
          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(() => () => {
      handleDissociate(student.id, profileRole.associated_person?.id)
        .then(() => {
          setPopupMessage('Le responsable a été dissocié avec succès.');
          setPopupVisible(true);
        })
        .catch((error) => {
          setPopupMessage(error.message);
          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 (
    <>
      <DjangoCSRFToken csrfToken={csrfToken} />
      <SidebarTabs
        tabs={[
          {
            id: 'parent',
            label: 'Parents',
            content: (
              <div className="h-full overflow-y-auto p-4">
                <Table
                  key={`parent-${currentProfilesParentPage}`}
                  data={profileRolesParent}
                  columns={parentColumns}
                  itemsPerPage={itemsPerPage}
                  currentPage={currentProfilesParentPage}
                  totalPages={totalProfilesParentPages}
                  onPageChange={handlePageChange}
                  emptyMessage={
                    <AlertMessage
                      type="info"
                      title="Aucun profil PARENT enregistré"
                      message="Un profil Parent est ajouté lors de la création d'un nouveau dossier d'inscription."
                    />
                  }
                />
              </div>
            ),
          },
          {
            id: 'school',
            label: 'École',
            content: (
              <div className="h-full overflow-y-auto p-4">
                <Table
                  key={`school-${currentProfilesSchoolPage}`}
                  data={profileRolesSchool}
                  columns={schoolAdminColumns}
                  itemsPerPage={itemsPerPage}
                  currentPage={currentProfilesSchoolPage}
                  totalPages={totalProfilesSchoolPages}
                  onPageChange={handlePageChange}
                  emptyMessage={
                    <AlertMessage
                      type="info"
                      title="Aucun profil ECOLE enregistré"
                      message="Un profil ECOLE est ajouté lors de la création d'un nouvel enseignant."
                    />
                  }
                />
              </div>
            ),
          },
        ]}
        onTabChange={(newActiveTab) => {
          setActiveTab(newActiveTab);
        }}
      />
      {/* Popups */}
      <Popup
        visible={popupVisible}
        message={popupMessage}
        onConfirm={() => setPopupVisible(false)}
        uniqueConfirmButton={true}
      />
      <Popup
        visible={confirmPopupVisible}
        message={confirmPopupMessage}
        onConfirm={confirmPopupOnConfirm}
        onCancel={() => setConfirmPopupVisible(false)}
      />
    </>
  );
}