import {
  createColumnHelper,
  flexRender,
  getCoreRowModel,
  useReactTable,
} from "@tanstack/react-table";
import { useContext, useMemo, useState } from "react";
import { UserContext } from "../../../Context/UserContextAPI";
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 { calculateUserMedicalStatus } from "../../../components/Users/calculateUserMedicalStatus";
import { useFetchPatientsData } from "../../../hooks/useFetchPatientData";
import useIsOneIntroducer from "../../../hooks/useIsOneIntroducer";
import Loading from "../../../utils/Loader/Loading";
import UserSearchForm from "./../../../components/Users/UserSearchForm";

const ReinvestigationList = () => {
  const { smsAPI, accessPerm } = useContext(UserContext);
  const [rowSelection, setRowSelection] = useState([]);

  const [filterData, setFilterData] = useState({
    fromDate: new Date().toISOString().split("T")[0],
    toDate: new Date().toISOString().split("T")[0],
    isReinvestigation: true,
  });

  const { data, isFetching, isLoading } = useFetchPatientsData(filterData, {});
  const usersData = data?.users || [];
  const countryWiseUsers = data?.countryWiseUsers || [];
  const packageWiseUsers = data?.packageWiseUsers || [];
  const introducerWiseUsers = data?.introducerWiseUsers || [];
  const representativeWiseUsers = data?.representativeWiseUsers || [];

  // custom hooks
  const isOneIntroducer = useIsOneIntroducer();

  const columnHelper = createColumnHelper();

  const commonColumns = useMemo(() => {
    // Move the column filtering logic to a separate function for clarity
    const filterColumns = (columns) =>
      columns.filter(
        (item) => item && (isOneIntroducer ? item.id !== "agency" : true),
      );

    // Apply the filter to the common columns
    return filterColumns(
      commonUserListColumns(usersData, {
        fromMedicalReports: accessPerm(33, 29),
      }),
    );
  }, [usersData]);

  const getUniqueUserCollections = (collections) => {
    const seenGroupIds = new Set();
    let track = false;
    const result = [];

    for (const item of collections || []) {
      const categoryId = item.investigation_category_id;

      if (track && (categoryId === 4 || categoryId === 5)) continue;
      if (categoryId === 4 || categoryId === 5) track = true;

      const groupId = item.investigation_category?.investigation_group_id;
      if (!seenGroupIds.has(groupId)) {
        seenGroupIds.add(groupId);
        result.push(item);
      }
    }

    return result;
  };

  const isOnlyVaccine = (collection) => {
    const uniqueCollection = [...new Set(collection)];
    return uniqueCollection.length === 1 && uniqueCollection.includes(4);
  };

  const columns = useMemo(() => [...commonColumns], [accessPerm, usersData]);

  const table = useReactTable({
    data: usersData,
    columns: columns,
    getCoreRowModel: getCoreRowModel(),
    state: {
      rowSelection: rowSelection,
    },
    onRowSelectionChange: setRowSelection,
    enableRowSelection: true,
  });

  const getStatusString = (status) => {
    switch (status) {
      case 2:
        return "FIT";
      case 3:
        return "UNFIT";
      case 4:
        return "HELD-UP";
      default:
        return "PROCESSING";
    }
  };
  console.log("a", usersData);

  return (
    <>
      <div className="card medical-report-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" }}
                >
                  Re-investigation List
                </h6>
                <div className="">
                  <div className="d-flex flex-wrap">
                    <UserSearchForm
                      userSearchHandler={(val) =>
                        setFilterData((prev) => ({ ...prev, ...val }))
                      }
                    />
                  </div>
                </div>
              </div>
            </div>

            <UserListReportSummary userList={usersData} />

            {isFetching ? (
              <Loading />
            ) : (
              <table className="table align-middle table-hover table-bordered mb-0 rounded">
                <thead className="bg-primary">
                  {table.getHeaderGroups().map((headerGroup) => (
                    <tr key={headerGroup.id}>
                      {headerGroup.headers.map((header, i) => (
                        <th
                          key={i}
                          id={`th-${i}`}
                          className="text-light p-1"
                          style={{ backgroundColor: "#095d7e" }}
                        >
                          {header.isPlaceholder
                            ? null
                            : flexRender(
                                header.column.columnDef.header,
                                header.getContext(),
                              )}
                        </th>
                      ))}
                    </tr>
                  ))}
                </thead>
                <tbody>
                  {table.getRowModel().rows.map((row, i) => {
                    // } = row;
                    const { isDone, status } = calculateUserMedicalStatus(
                      row?.original,
                    );

                    return (
                      <tr
                        key={i}
                        className={`${
                          isDone && status === 4 && "text-primary"
                        } ${isDone && status === 2 && "text-success"} ${
                          isDone && status === 3 && "text-danger"
                        } ${status === 1 && "text-dark"}
         `}
                      >
                        {row.getVisibleCells().map((cell, i) => (
                          <td key={i} className="p-1">
                            {flexRender(
                              cell.column.columnDef.cell,
                              cell.getContext(),
                            )}
                          </td>
                        ))}
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            )}
          </div>
        </div>
      </div>

      {/* Registration Summery Modal Body */}
      <div>
        <CountrySummaryModal
          countryWiseUsers={countryWiseUsers}
          isColumn2={true}
        />
        <AgencySummaryModal
          introducerWiseUsers={introducerWiseUsers}
          isColumn2={true}
        />
        <PackageSummaryModal packageWiseUsers={packageWiseUsers} isColumn2 />
        <RepresentativeSummeryModal
          representativeWiseUsers={representativeWiseUsers}
          isColumn2={true}
        />
      </div>
    </>
  );
};

export default ReinvestigationList;