import React, { useEffect, useMemo, useState } from "react";
import Breadcrumb from "../../components/common/Breadcrumb";
import IconButton from "../../components/common/IconButton";
import GlobalModel from "../../components/common/GlobalModel";
import ManageDirectory from "../../components/Directory/ManageDirectory";
import ListViewDirectory from "../../components/Directory/ListViewDirectory";
import { useBuckets, useDirectory } from "../../hooks/useDirectory";
import { DirectoryRepository } from "../../repositories/DirectoryRepository";
import { cacheData, getCachedData } from "../../slices/apiDataManager";
import showToast from "../../services/toastService";
import UpdateContact from "../../components/Directory/UpdateContact";
import CardViewDirectory from "../../components/Directory/CardViewDirectory";
import { useContactCategory } from "../../hooks/masterHook/useMaster";
import usePagination from "../../hooks/usePagination";
import { ITEMS_PER_PAGE } from "../../utils/constants";
import ProfileContactDirectory from "../../components/Directory/ProfileContactDirectory";
import ConfirmModal from "../../components/common/ConfirmModal";
import DirectoryListTableHeader from "./DirectoryListTableHeader";
import DirectoryPageHeader from "./DirectoryPageHeader";
import ManageBucket from "../../components/Directory/ManageBucket";
import { useFab } from "../../Context/FabContext";
import { DireProvider, useDir } from "../../Context/DireContext";

const Directory = ({ IsPage = true, prefernceContacts }) => {
  const [projectPrefernce, setPerfence] = useState(null);
  const [IsActive, setIsActive] = useState(true);
  const [isOpenModal, setIsOpenModal] = useState(false);
  const [isOpenModalNote, setIsOpenModalNote] = useState(false);
  const [selectedContact, setSelectedContact] = useState(null);
  const [open_contact, setOpen_contact] = useState(null);
  const [ContactList, setContactList] = useState([]);
  const [contactCategories, setContactCategories] = useState([]);
  const [searchText, setSearchText] = useState("");
  const [listView, setListView] = useState(false);
  const [selectedBucketIds, setSelectedBucketIds] = useState([]);
  const [deleteContact, setDeleteContact] = useState(null);
  const [IsDeleting, setDeleting] = useState(false);
  const [openBucketModal, setOpenBucketModal] = useState(false);

  const [tempSelectedBucketIds, setTempSelectedBucketIds] = useState([]);
  const [tempSelectedCategoryIds, setTempSelectedCategoryIds] = useState([]);
  const { setActions } = useFab();
  const { dirActions, setDirActions } = useDir();

  const { contacts, loading, refetch } = useDirectory(
    IsActive,
    projectPrefernce
  );
  const { contactCategory, loading: contactCategoryLoading } =
    useContactCategory();
  const { buckets, refetch: refetchBucket } = useBuckets();

  const submitContact = async (data) => {
    try {
      let response;
      let updatedContacts;
      const contacts_cache = getCachedData("contacts")?.data || [];

      if (selectedContact) {
        response = await DirectoryRepository.UpdateContact(data.id, data);
        updatedContacts = contacts_cache.map((contact) =>
          contact.id === data.id ? response.data : contact
        );
        showToast("Contact updated successfully", "success");
        setIsOpenModal(false);
        setSelectedContact(null);
      } else {
        response = await DirectoryRepository.CreateContact(data);
        updatedContacts = [...contacts_cache, response.data];
        showToast("Contact created successfully", "success");
        setIsOpenModal(false);
      }

      // cacheData("Contacts", {data:updatedContacts,isActive:IsActive});
      // setContactList(updatedContacts);
      refetch(IsActive, prefernceContacts);
      refetchBucket();
    } catch (error) {
      const msg =
        error.response?.data?.message ||
        error.message ||
        "Error occurred during API call!";
      showToast(msg, "error");
    }
  };

  const handleDeleteContact = async (overrideId = null) => {
    try {
      if (!IsActive) {
        setDirActions((prev) => ({ ...prev, action: true }));
      } else {
        setDeleting(true);
      }
      const id = overrideId || (!IsActive ? dirActions.id : deleteContact);
      if (!id) {
        showToast("No contact selected for deletion", "error");
        return;
      }

      await DirectoryRepository.DeleteContact(id, !IsActive);

      const updatedContacts = ContactList.filter((c) => c.id !== id);
      setContactList(updatedContacts);
      cacheData("Contacts", { data: updatedContacts, isActive: IsActive });

      showToast(
        `Contact ${IsActive ? "Deleted" : "Restored"} successfully`,
        "success"
      );

      setDeleteContact(null);
      refetchBucket();
      setDirActions({ action: false, id: null });
      setDeleting(false);
    } catch (error) {
      const msg =
        error?.response?.data?.message ||
        error.message ||
        "Error occurred during API call";
      showToast(msg, "error");

      setDeleting(false);
      setDirActions({ action: false, id: null });
    }
  };

  const closedModel = () => {
    setIsOpenModal(false);
    setSelectedContact(null);
    setOpen_contact(null);
  };
  const [selectedCategoryIds, setSelectedCategoryIds] = useState(
    contactCategory.map((category) => category.id)
  );

  useEffect(() => {
    setContactList(contacts);

    setTempSelectedCategoryIds([]);
    setTempSelectedBucketIds([]);
  }, [contacts]);

  const usedCategoryIds = [
    ...new Set(contacts.map((c) => c.contactCategory?.id)),
  ];
  const filteredCategories = contactCategory.filter((category) =>
    usedCategoryIds.includes(category.id)
  );
  const handleTempBucketChange = (id) => {
    setTempSelectedBucketIds((prev) =>
      prev.includes(id) ? prev.filter((bid) => bid !== id) : [...prev, id]
    );
  };

  const handleTempCategoryChange = (id) => {
    setTempSelectedCategoryIds((prev) =>
      prev.includes(id) ? prev.filter((cid) => cid !== id) : [...prev, id]
    );
  };

  const usedBucketIds = [
    ...new Set(contacts.flatMap((c) => c.bucketIds || [])),
  ];

  const filteredBuckets = buckets.filter((bucket) =>
    usedBucketIds.includes(bucket.id)
  );

  const filteredContacts = useMemo(() => {
    return ContactList.filter((c) => {
      const matchesSearch =
        c.name.toLowerCase().includes(searchText.toLowerCase()) ||
        c.organization.toLowerCase().includes(searchText.toLowerCase());

      const matchesCategory =
        selectedCategoryIds.length === 0 ||
        selectedCategoryIds.includes(c.contactCategory?.id);

      const matchesBucket =
        selectedBucketIds.length === 0 ||
        (c.bucketIds || []).some((id) => selectedBucketIds.includes(id));

      return matchesSearch && matchesCategory && matchesBucket;
    }).sort((a, b) => a?.name?.localeCompare(b.name));
  }, [
    ContactList,
    searchText,
    selectedCategoryIds,
    selectedBucketIds,
    selectedContact,
  ]);

  const applyFilter = () => {
    setSelectedBucketIds(tempSelectedBucketIds);
    setSelectedCategoryIds(tempSelectedCategoryIds);
  };

  const clearFilter = () => {
    setTempSelectedBucketIds([]);
    setTempSelectedCategoryIds([]);
    setSelectedBucketIds([]);
    setSelectedCategoryIds([]);
  };

  const { currentPage, totalPages, currentItems, paginate } = usePagination(
    filteredContacts,
    ITEMS_PER_PAGE
  );

  const renderModalContent = () => {
    if (selectedContact) {
      return (
        <UpdateContact
          existingContact={selectedContact}
          submitContact={submitContact}
          onCLosed={closedModel}
        />
      );
    }

    if (!open_contact) {
      return (
        <ManageDirectory submitContact={submitContact} onCLosed={closedModel} />
      );
    }
  };

  useEffect(() => {
    const actions = [];

    if (IsPage) {
      actions.push({
        label: "Manage Bucket",
        icon: "fa-solid fa-bucket fs-5",
        color: "primary",
        onClick: () => setOpenBucketModal(true),
      });
    }
    if (buckets?.length > 0) {
      actions.push({
        label: "New Contact",
        icon: "bx bx-plus-circle",
        color: "warning",
        onClick: () => setIsOpenModal(true),
      });
    }

    setActions(actions);

    return () => setActions([]);
  }, [IsPage, buckets]);
  useEffect(() => {
    setPerfence(prefernceContacts);
  }, [prefernceContacts]);

  return (
    <div className="container-xxl flex-grow-1 container-p-y">
      {IsPage && (
        <Breadcrumb
          data={[
            { label: "Home", link: "/dashboard" },
            { label: "Directory", link: null },
          ]}
        ></Breadcrumb>
      )}

      {isOpenModal && (
        <GlobalModel
          isOpen={isOpenModal}
          closeModal={() => {
            setSelectedContact(null);
            setIsOpenModal(false);
          }}
          size="xl"
        >
          {renderModalContent()}
        </GlobalModel>
      )}
      {isOpenModalNote && (
        <GlobalModel
          isOpen={isOpenModalNote}
          closeModal={() => {
            setOpen_contact(null);
            setIsOpenModalNote(false);
          }}
          size="xl"
        >
          {open_contact && (
            <ProfileContactDirectory
              contact={open_contact}
              setOpen_contact={setOpen_contact}
              closeModal={() => setIsOpenModalNote(false)}
            />
          )}
        </GlobalModel>
      )}
      {deleteContact && (
        <div
          className={`modal fade  ${deleteContact ? "show" : ""}`}
          tabIndex="-1"
          role="dialog"
          style={{
            display: deleteContact ? "block" : "none",
            backgroundColor: deleteContact ? "rgba(0,0,0,0.5)" : "transparent",
          }}
          aria-hidden="false"
        >
          <ConfirmModal
            type={"delete"}
            header={"Delete Contact"}
            message={"Are you sure you want delete?"}
            onSubmit={handleDeleteContact}
            onClose={() => setDeleteContact(null)}
            loading={IsDeleting}
          />
        </div>
      )}

      {openBucketModal && (
        <GlobalModel
          isOpen={openBucketModal}
          closeModal={() => setOpenBucketModal(false)}
          size="lg"
        >
          <ManageBucket buckets={buckets} />
        </GlobalModel>
      )}

      <div className="card p-0 mb-2 ">
        <div className="card-body p-1 pb-0">
          <DirectoryPageHeader
            searchText={searchText}
            setSearchText={setSearchText}
            setIsActive={setIsActive}
            listView={listView}
            setListView={setListView}
            filteredBuckets={filteredBuckets}
            tempSelectedBucketIds={tempSelectedBucketIds}
            handleTempBucketChange={handleTempBucketChange}
            filteredCategories={filteredCategories}
            tempSelectedCategoryIds={tempSelectedCategoryIds}
            handleTempCategoryChange={handleTempCategoryChange}
            clearFilter={clearFilter}
            applyFilter={applyFilter}
            loading={loading}
            IsActive={IsActive}
            setOpenBucketModal={setOpenBucketModal}
            contactsToExport={contacts}
          />
        </div>
      </div>
      <div className="card-minHeight">
        {/* Messages when listView is false */}
        {!listView && (
          <div className="d-flex flex-column justify-content-center align-items-center text-center ">
            {loading && <p className="mt-10">Loading...</p>}
            {!loading && contacts?.length === 0 && (
              <p className="mt-10">No contact found</p>
            )}
            {!loading && contacts?.length > 0 && currentItems.length === 0 && (
              <p className="mt-10">No matching contact found</p>
            )}
          </div>
        )}

        {/* Table view (listView === true) */}

        {listView ? (
          <div className="card cursor-pointer mt-5">
            <div className="card-body p-2 pb-1">
              <DirectoryListTableHeader>
                {loading && (
                  <tr>
                    <td colSpan={10}>
                      {" "}
                      <p className="mt-10">Loading...</p>{" "}
                    </td>
                  </tr>
                )}

                {!loading && contacts?.length === 0 && (
                  <tr>
                    <td colSpan={10}>
                      <p className="mt-10">No contact found</p>
                    </td>
                  </tr>
                )}

                {!loading &&
                  currentItems.length === 0 &&
                  contacts?.length > 0 && (
                    <tr>
                      <td colSpan={10}>
                        <p className="mt-10">No matching contact found</p>
                      </td>
                    </tr>
                  )}

                {!loading &&
                  currentItems.map((contact) => (
                    <ListViewDirectory
                      key={contact.id}
                      IsActive={IsActive}
                      contact={contact}
                      setSelectedContact={setSelectedContact}
                      setIsOpenModal={setIsOpenModal}
                      setOpen_contact={setOpen_contact}
                      setIsOpenModalNote={setIsOpenModalNote}
                      IsDeleted={setDeleteContact}
                      restore={handleDeleteContact}
                    />
                  ))}
              </DirectoryListTableHeader>
            </div>
          </div>
        ) : (
          <div className="row mt-5">
            {!loading &&
              currentItems.map((contact) => (
                <div
                  key={contact.id}
                  className="col-12 col-sm-6 col-md-4 col-lg-4 mb-4"
                >
                  <CardViewDirectory
                    IsActive={IsActive}
                    contact={contact}
                    setSelectedContact={setSelectedContact}
                    setIsOpenModal={setIsOpenModal}
                    setOpen_contact={setOpen_contact}
                    setIsOpenModalNote={setIsOpenModalNote}
                    IsDeleted={setDeleteContact}
                    restore={handleDeleteContact}
                  />
                </div>
              ))}
          </div>
        )}

        {/* Pagination */}
        {!loading &&
          contacts?.length > 0 &&
          currentItems.length > ITEMS_PER_PAGE && (
            <nav aria-label="Page navigation">
              <ul className="pagination pagination-sm justify-content-end py-1">
                <li
                  className={`page-item ${currentPage === 1 ? "disabled" : ""}`}
                >
                  <button
                    className="page-link btn-xs"
                    onClick={() => paginate(currentPage - 1)}
                  >
                    &laquo;
                  </button>
                </li>

                {[...Array(totalPages)].map((_, index) => (
                  <li
                    key={index}
                    className={`page-item ${
                      currentPage === index + 1 ? "active" : ""
                    }`}
                  >
                    <button
                      className="page-link"
                      onClick={() => paginate(index + 1)}
                    >
                      {index + 1}
                    </button>
                  </li>
                ))}

                <li
                  className={`page-item ${
                    currentPage === totalPages ? "disabled" : ""
                  }`}
                >
                  <button
                    className="page-link"
                    onClick={() => paginate(currentPage + 1)}
                  >
                    &raquo;
                  </button>
                </li>
              </ul>
            </nav>
          )}
      </div>
    </div>
  );
};

export default Directory;