import {
  createColumnHelper,
  flexRender,
  getCoreRowModel,
  useReactTable,
} from "@tanstack/react-table";
import axios from "axios";
import React, { useContext, useEffect, useMemo, useState } from "react";
import { Link, useLocation } from "react-router-dom";
import FingerprintMatch from "../../../components/Fingerprint/FingerprintMatch";
import AgencySummaryModal from "../../../components/Modal/RegistrationSummaryModal/AgencySummaryModal";
import CountrySummaryModal from "../../../components/Modal/RegistrationSummaryModal/CountrySummaryModal";
import PackageSummaryModal from "../../../components/Modal/RegistrationSummaryModal/PackageSummaryModal";
import RepresentativeSummeryModal from "../../../components/Modal/RegistrationSummaryModal/RepresentativeSummaryModal";
import { commonUserListColumns } from "../../../components/Table/CommonColumnsForUserList";
import UserListReportSummary from "../../../components/Users/UserListReportSummary";
import { UserContext } from "../../../Context/UserContextAPI";
import useQueryFetch from "../../../hooks/useQueryFetch";
import Loading from "../../../utils/Loader/Loading";
import request from "../../../utils/request";
import UserSearchForm from "./../../../components/Users/UserSearchForm";
import "./SpecimenCollection.scss";
import { useFetchPatientsData } from "../../../hooks/useFetchPatientData";
import formatDate from "../../../utils/formatDate";

const SpecimenCollection = () => {
  const { accessPerm } = useContext(UserContext);

  // fetch investigation category
  const { data: invCat } = useQueryFetch(
    "investigation-category/collection",
    () => request.getAll("investigation-category/collection "),
    {
      staleTime: Infinity,
      placeHolderData: [],
    }
  );

  const [filterData, setFilterData] = useState({
    fromDate: formatDate(new Date(), "yyyy-MM-dd"),
    toDate: formatDate(new Date(), "yyyy-MM-dd"),
  });

  const [loading, setLoading] = useState(false);

  const {
    data: {
      users: usersData,
      countryWiseUser: countryWiseUsers,
      packageWiseUser: packageWiseUsers,
      introducerWiseUser: introducerWiseUsers,
      representativeWiseUser: representativeWiseUsers,
    },
    isLoading,
    isFetching,
    refetch,
  } = useFetchPatientsData(filterData, {
    refetchInterval: 1000 * 30, // Refetch every 30 seconds
  });

  const columnHelper = createColumnHelper();

  const commonColumns = useMemo(() => {
    // Move the column filtering logic to a separate function for clarity
    const filterColumns = (columns) =>
      columns.filter(
        (item) =>
          item &&
          item.id !== "status" &&
          item.id !== "amount" &&
          item.id !== "multiple_select" &&
          item.id !== "created_by"
      );

    // Apply the filter to the common columns
    return filterColumns(commonUserListColumns(usersData));
  }, [usersData]);

  const columns = useMemo(
    () => [
      ...commonColumns,

      columnHelper.accessor("user", {
        id: "collection",
        header: () => (
          <span className="d-flex justify-content-center">Collection</span>
        ),
        cell: (info) => {
          return (
            <div className="d-flex justify-content-start">
              {accessPerm(35, 15) &&
                invCat?.map((cat, index) => {
                  const isLast = index === invCat?.length - 1;
                  // Find the matching collection based on investigation_category_id
                  const matchingCollection =
                    info?.row?.original?.user_collections?.find(
                      (collection) =>
                        collection?.investigation_category_id === cat?.id
                    );
                  return (
                    <>
                      <Link
                        to={`/dashboard/collection-label/${info?.row?.original?.id}`}
                        className={`cursor-pointer ms-2 ${
                          matchingCollection
                            ? matchingCollection?.createdAt !== "---"
                              ? "text-success"
                              : "text-danger"
                            : "text-danger"
                        }`}
                        target="_blank"
                      >
                        {cat?.name}
                      </Link>
                      {!isLast && <div className="ms-2">|</div>}
                    </>
                  );
                })}
            </div>
          );
        },
      }),
    ],
    [accessPerm, usersData]
  );

  const table = useReactTable({
    data: usersData,
    columns: columns,
    getCoreRowModel: getCoreRowModel(),
  });

  // fingerprint handler

  const fingerprintHandler = (user) => {
    return window.open(`/dashboard/collection-label/${user?.userId}`, "_blank");
  };
  const fingeprintUserData = useMemo(() => {
    return usersData?.reduce((users, user) => {
      if (user?.finger_print_temp) {
        users.push({
          userId: user?.id,
          finger_print_temp: user?.finger_print_temp,
        });
      }
      return users;
    }, []);
  }, [usersData]);

  // loading false when fetching is done
  useEffect(() => {
    if (!isFetching) {
      setLoading(false);
    }
  }, [isFetching]);

  return (
    <>
      <div className="card patient-information specimen-container">
        <div className="card-body">
          <div className="rounded">
            <div className="card shadow-none mb-3">
              <div className="border p-3 rounded">
                <h6
                  className="mb-0 btn btn-danger text-white text-capitalize fw-bold m-0 p-0"
                  style={{ cursor: "default" }}
                >
                  Specimen Collection
                </h6>
                <div className="d-flex ">
                  <UserSearchForm
                    userSearchHandler={(data) => {
                      setFilterData(data);
                      setLoading(true); //  another loading state  here , so that when click on search button then loading state will be true, otherwise isFetching will be true always, so it will be show loading state always. thats why i added this loading state here.
                      refetch();
                    }}
                    isLoading={loading && isFetching}
                  />
                  <div className="ms-5">
                    <FingerprintMatch
                      successHandler={fingerprintHandler}
                      userData={fingeprintUserData}
                    >
                      <img
                        width={40}
                        height={40}
                        src="fingerprint.png"
                        alt="Report"
                        className="cursor-pointer "
                      />
                      <p>Collection</p>
                    </FingerprintMatch>
                  </div>
                </div>
              </div>
            </div>

            <UserListReportSummary userList={usersData} />

            {isLoading || (isFetching && loading) ? (
              <Loading />
            ) : (
              <table className="table align-middle table-hover table-bordered mb-0 rounded">
                <thead className="bg-primary text-white">
                  {table.getHeaderGroups().map((headerGroup) => (
                    <tr key={headerGroup?.id}>
                      {headerGroup.headers.map((header) => (
                        <th
                          key={header?.id}
                          className={`p-1`}
                          style={{ backgroundColor: "#095d7e" }}
                        >
                          {header.isPlaceholder
                            ? null
                            : flexRender(
                                header.column.columnDef.header,
                                header.getContext()
                              )}
                        </th>
                      ))}
                    </tr>
                  ))}
                </thead>
                <tbody>
                  {table.getRowModel().rows.map((row) => (
                    <tr key={row.id}>
                      {row.getVisibleCells().map((cell) => (
                        <td key={cell.id} className="p-1">
                          {flexRender(
                            cell.column.columnDef.cell,
                            cell.getContext()
                          )}
                        </td>
                      ))}
                    </tr>
                  ))}
                </tbody>
              </table>
            )}
          </div>
        </div>
      </div>

      <div>
        <CountrySummaryModal
          countryWiseUsers={countryWiseUsers || []}
          isColumn2={true}
        />
        <AgencySummaryModal
          introducerWiseUsers={introducerWiseUsers || []}
          isColumn2={true}
        />
        <PackageSummaryModal
          packageWiseUsers={packageWiseUsers || []}
          isColumn2
        />
        <RepresentativeSummeryModal
          representativeWiseUsers={representativeWiseUsers || []}
          isColumn2={true}
        />
      </div>
    </>
  );
};

export default SpecimenCollection;