import {
  createColumnHelper,
  flexRender,
  getCoreRowModel,
  useReactTable,
} from "@tanstack/react-table";
import axios from "axios";
import { useContext, useEffect, useMemo, useState } from "react";
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 Loading from "../../utils/Loader/Loading";
import "../ProcessAndProcedure/MedicalReports/MedicalReports.scss";

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

  const {
    introducerUsers,
    countryUsers,
    companyUsers,
    delegateUsers,
    packages,
    representativeUsers,
  } = useContext(UserContext);
  const [usersData, setUsersData] = useState([]);
  const [initialRowSelection, setInitialRowSelection] = useState([]);
  const [rowSelection, setRowSelection] = useState(initialRowSelection);
  const [checkedUsers, setCheckedUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [statusCounts, setStatusCounts] = useState({
    status1: 0,
    status2: 0,
    status3: 0,
    status4: 0,
  });

  const [countryWiseUsers, setCountryWiseUsers] = useState([]);
  const [introducerWiseUsers, setIntroducerWiseUsers] = useState([]);
  const [packageWiseUsers, setPackageWiseUsers] = useState([]);
  const [representativeWiseUsers, setRepresentativeWiseUsers] = useState([]);

  const [selectedOption, setSelectedOption] = useState("");
  const [searchData, setSearchData] = useState({});
  const navigate = useNavigate();

  const optionLink = [
    {
      name: "Record Only",
      link: "1",
    },
    {
      name: "With Photo",
      link: "2",
    },
    {
      name: "With Account",
      link: "3",
    },
  ];

  const handleOptionSelect = (e) => {
    const selectedValue = e.target.value;
    const selectedRows = table
      .getSelectedRowModel()
      .rows.map((row) => row.original);

    if (selectedValue === "1") {
      return navigate("/dashboard/medical-registration/read-only", {
        state: { checkedUsers: selectedRows, searchedData: searchData },
      });
    } else if (selectedValue === "2") {
      return navigate("/dashboard/medical-registration/with-photo", {
        state: { checkedUsers: selectedRows, searchedData: searchData },
      });
    } else if (selectedValue === "3") {
      return navigate("/dashboard/medical-registration/with-account", {
        state: { checkedUsers: selectedRows, searchedData: searchData },
      });
    }
  };

  // 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);
    }
  };

  const columnHelper = createColumnHelper();

  const columns = useMemo(
    () => [
      ...commonUserListColumns(usersData, {
        serialNumberIncrement: true,
      }),
    ],
    [usersData],
  );

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

    enableRowSelection: true,
  });

  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(() => {
    table.toggleAllRowsSelected(true);
  }, [table, 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 text-uppercase fw-bold"
                  style={{ color: "red" }}
                >
                  Medical Registration
                </h6>
                <UserSearchForm
                  userSearchHandler={(filterData) => {
                    methodFilterPatientsDetails(filterData);
                    setSearchData(filterData);
                  }}
                />

                {accessPerm(67, 24) && (
                  <div className="d-flex align-items-center gap-3 justify-content-end w-100 mt-0">
                    <label htmlFor="">Report Type</label>
                    <select
                      className="px-5 py-2"
                      onChange={handleOptionSelect}
                      value={selectedOption}
                    >
                      <option value="">Action</option>
                      {optionLink.map((option, index) => (
                        <option key={index} value={option.link}>
                          {option.name}
                        </option>
                      ))}
                    </select>
                  </div>
                )}
              </div>
            </div>

            <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 MedicalRegistrationPage;