import {
  createColumnHelper,
  flexRender,
  getCoreRowModel,
  useReactTable,
} from "@tanstack/react-table";
import axios from "axios";
import { useContext, useEffect, useMemo, useState } from "react";
import {
  BsFileCheck,
  BsFileEarmark,
  BsFileEarmarkBreak,
  BsFileMedical,
  BsReceipt,
} from "react-icons/bs";
import { useNavigate } from "react-router-dom";
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 UserSearchForm from "../../../components/Users/UserSearchForm";
import { calculateUserMedicalStatus } from "../../../components/Users/calculateUserMedicalStatus";
import useIsOneIntroducer from "../../../hooks/useIsOneIntroducer";
import Loading from "../../../utils/Loader/Loading";
import "./PatientInformationCopy.scss";
import PatientInfoTableMultipleSelectBtns from "./component/PatientInfoTableMultipleSelectBtns";

const PatientInformationCopy = () => {
  const { accessPerm } = useContext(UserContext);
  const [usersData, setUsersData] = useState([]);
  const [countryWiseUsers, setCountryWiseUsers] = useState([]);
  const [introducerWiseUsers, setIntroducerWiseUsers] = useState([]);
  const [packageWiseUsers, setPackageWiseUsers] = useState([]);
  const [loading, setLoading] = useState(false);
  const [representativeWiseUsers, setRepresentativeWiseUsers] = useState([]);

  const navigate = useNavigate();

  // Get Specific date users-------
  const methodFilterPatientsDetails = async (filterData) => {
    try {
      setLoading(true);
      const query = new URLSearchParams(filterData).toString();
      const response = await axios.get(
        `${process.env.REACT_APP_API_BASE_URL}/v2/users/search-patients?${query}`,
        {
          headers: {
            "Content-Type": "application/json",
            authorization: `Bearer ${localStorage?.getItem("jwtToken")}`,
          },
        }
      );
      const data = response?.data?.data;
      // console.log("data", data);
      if (response?.data?.status === "OK") {
        setUsersData(data?.users || []);
        setCountryWiseUsers(data?.countryWiseUser || []);
        setPackageWiseUsers(data?.packageWiseUser || []);
        setIntroducerWiseUsers(data?.introducerWiseUser || []);
        setRepresentativeWiseUsers(data?.representativeWiseUser || []);
      }
    } catch (error) {
      console.log(error);
    } finally {
      setLoading(false);
    }
  };

  // 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));
  }, [usersData]);

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

      columnHelper.accessor("options", {
        id: "Options",
        header: () => (
          <span className="text-center d-flex justify-content-center">
            Options
          </span>
        ),
        cell: ({ row: { original } }) => {
          return (
            <div className="d-flex justify-content-start">
              <div className="d-flex gap-1 align-items-center justify-content-start">
                {accessPerm(32, 7) && (
                  <BsReceipt
                    data-toggle="tooltip"
                    data-placement="center"
                    title="Invoice"
                    className="cursor-pointer custom-font-size"
                    // onClick={(e) => {
                    //   e.preventDefault();
                    //   navigate("/dashboard/invoice", {
                    //     state: { record: original },
                    //   });
                    // }}
                    onClick={(e) => {
                      e.preventDefault();
                      window.open(
                        `/dashboard/invoice/${original?.id}`,
                        "_blank"
                      );
                    }}
                  />
                )}
                {accessPerm(32, 9) && (
                  <BsFileMedical
                    data-toggle="tooltip"
                    data-placement="center"
                    title="Medical Form"
                    className="cursor-pointer custom-font-size"
                    // onClick={(e) => {
                    //   e.preventDefault();
                    //   navigate("/dashboard/print-medical-form", {
                    //     state: { record: original },
                    //   });
                    // }}
                    onClick={(e) => {
                      e.preventDefault();
                      window.open(
                        `/dashboard/print-medical-form/${original?.id}`,
                        "_blank"
                      );
                    }}
                  />
                )}
                <BsFileCheck
                  data-toggle="tooltip"
                  data-placement="center"
                  title="X-Ray"
                  className="cursor-pointer custom-font-size"
                  // onClick={(e) => {
                  //   e.preventDefault();
                  //   navigate("/print-static-xray", {
                  //     state: { record: original },
                  //   });
                  // }}
                  onClick={(e) => {
                    e.preventDefault();
                    window.open(`/print-static-xray/${original?.id}`, "_blank");
                  }}
                />
                <BsFileEarmark
                  data-toggle="tooltip"
                  data-placement="center"
                  title="Invoice Medical Form"
                  className="cursor-pointer custom-font-size"
                  // onClick={(e) => {
                  //   e.preventDefault();
                  //   navigate("/print-invoice-form", {
                  //     state: { record: original },
                  //   });
                  // }}
                  onClick={(e) => {
                    e.preventDefault();
                    window.open(
                      `/print-invoice-form/${original?.id}`,
                      "_blank"
                    );
                  }}
                />
                <BsFileEarmarkBreak
                  data-toggle="tooltip"
                  data-placement="center"
                  title="Invoice Medical X-Ray Form"
                  className="cursor-pointer custom-font-size"
                  // onClick={(e) => {
                  //   e.preventDefault();
                  //   navigate("/print-invoice-form-xray", {
                  //     state: { record: original },
                  //   });
                  // }}
                  onClick={(e) => {
                    e.preventDefault();
                    window.open(
                      `/print-invoice-form-xray/${original?.id}`,
                      "_blank"
                    );
                  }}
                />
              </div>
            </div>
          );
        },
      }),

      columnHelper.accessor("actions", {
        id: "Actions",
        header: () => (
          <span className="text-center d-flex justify-content-center">
            Actions
          </span>
        ),
        cell: ({ row: { original } }) => {
          // console.log("original", original);
          const collection = original?.user_collections?.map(
            (collection) =>
              collection.investigation_category?.investigation_group_id
          );
          const hasPathology = collection.includes(1);

          return (
            <div className="d-flex justify-content-start">
              {/* View User Details Trigger Button */}
              {accessPerm(32, 5) && (
                <button
                  type="button"
                  title="Preview"
                  data-toggle="tooltip"
                  data-placement="top"
                  onClick={() =>
                    navigate("/dashboard/profile", {
                      state: { data: original },
                    })
                  }
                  className="btn btn-warning btn-sm"
                  style={{ marginRight: "5px" }}
                >
                  <i className="fa-regular fa-eye"></i>
                </button>
              )}

              {/* Edit User Details Trigger Button */}
              {accessPerm(32, 2) && (
                <button
                  className="btn btn-primary btn-sm"
                  title="Edit"
                  data-toggle="tooltip"
                  data-placement="top"
                  onClick={(e) => {
                    e.preventDefault();
                    const targetUrl =
                      original?.role_id === 5
                        ? "/dashboard/medical-tests/edit"
                        : "/dashboard/patient-info/edit";
                    navigate(targetUrl, {
                      state: {
                        record: original,
                      },
                    });
                  }}
                  style={{ marginRight: "5px" }}
                  disabled={accessPerm(32, 33) && hasPathology ? true : false}
                >
                  <i className="fa fa-edit"></i>
                </button>
              )}
            </div>
          );
        },
      }),
    ],
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [accessPerm, usersData]
  );

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

  useEffect(() => {
    (async () => {
      try {
        await methodFilterPatientsDetails({
          fromDate: new Date(),
          toDate: new Date(),
        });
        // console.log(response);
      } catch (error) {
        console.log(error);
      }
    })();
    return () => {
      // console.log("unmount");
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // useEffect(() => {
  //   if (state?.registration_no) {
  //     methodFilterPatientsDetails(state?.registration_no, "form");
  //   }
  // }, [state?.registration_no]);

  return (
    <>
      <div className="card patient-information patient-container">
        <div className="card-body">
          <div className="rounded">
            <div className="card shadow-none mb-3">
              <div className="border p-3 rounded">
                <div className="d-flex justify-content-between align-items-center">
                  <h6
                    className="mb-0 btn btn-danger text-white text-capitalize fw-bold p-0 m-0"
                    style={{ cursor: "default" }}
                  >
                    Passenger Information
                  </h6>
                  {accessPerm(32, 1) && (
                    <button
                      onClick={(e) => {
                        e.preventDefault();
                        navigate("/dashboard/patient-info/create");
                      }}
                      type="button"
                      className="btn btn-primary border border-3"
                      style={{ whiteSpace: "nowrap" }}
                    >
                      <i className="fa-solid fa-plus"></i> Add New
                    </button>
                  )}
                </div>
                <UserSearchForm
                  userSearchHandler={methodFilterPatientsDetails}
                />
              </div>
            </div>

            {/* table multiple select rows buttons  */}
            <PatientInfoTableMultipleSelectBtns table={table} />

            <UserListReportSummary userList={usersData} />

            {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, i) => {
                    const { isDone, status } = calculateUserMedicalStatus(
                      row?.original
                    );

                    const rowClass = (() => {
                      if (status === 2) {
                        return isDone ? "text-success" : "";
                      } else if (status === 3) {
                        return isDone ? "text-danger" : "";
                      } else if (status === 4) {
                        return isDone ? "text-primary" : "";
                      } else {
                        return "text-dark";
                      }
                    })();
                    return (
                      <tr key={i} className={rowClass}>
                        {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>

      {/* 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 PatientInformationCopy;