import React, { useState } from "react";
import {
  EXPENSE_DRAFT,
  EXPENSE_REJECTEDBY,
  FREQUENCY_FOR_RECURRING,
  ITEMS_PER_PAGE,
  PAYEE_RECURRING_EXPENSE,
} from "../../utils/constants";
import { formatCurrency, useDebounce } from "../../utils/appUtils";
import { formatUTCToLocalTime } from "../../utils/dateUtils";
import { ExpenseTableSkeleton } from "../Expenses/ExpenseSkeleton";
import ConfirmModal from "../common/ConfirmModal";
import { useNavigate } from "react-router-dom";
import { useSelector } from "react-redux";
import Error from "../common/Error";
import { useRecurringExpenseContext } from "../../pages/RecurringExpense/RecurringExpensePage";
import { useRecurringExpenseList } from "../../hooks/useExpense";
import Pagination from "../common/Pagination";
import { SpinnerLoader } from "../common/Loader";

const RecurringExpenseList = ({ search, filterStatuses }) => {
  const { setManageRequest, setVieRequest, setViewRecurring } =
    useRecurringExpenseContext();
  const navigate = useNavigate();
  const [IsDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
  const [deletingId, setDeletingId] = useState(null);

  const SelfId = useSelector(
    (store) => store?.globalVariables?.loginUser?.employeeInfo?.id
  );

  const statusColorMap = {
    "da462422-13b2-45cc-a175-910a225f6fc8": "primary", // Active
    "306856fb-5655-42eb-bf8b-808bb5e84725": "success", // Completed
    "3ec864d2-8bf5-42fb-ba70-5090301dd816": "danger", // De-Activated
    "8bfc9346-e092-4a80-acbf-515ae1ef6868": "warning", // Paused
  };

  const recurringExpenseColumns = [
    {
      key: "expenseCategory",
      label: "Category",
      align: "text-start",
      getValue: (e) => e?.expenseCategory?.name || "N/A",
    },
    {
      key: "title",
      label: "Title",
      align: "text-start",
      getValue: (e) => e?.title || "N/A",
    },
    {
      key: "payee",
      label: "Payee",
      align: "text-start",
      getValue: (e) => e?.payee || "N/A",
    },
    {
      key: "frequency",
      label: "Frequency",
      align: "text-start",
      getValue: (e) =>
        e?.frequency !== undefined && e?.frequency !== null
          ? FREQUENCY_FOR_RECURRING[e.frequency] || "N/A"
          : "N/A",
    },
    {
      key: "amount",
      label: "Amount",
      align: "text-end",
      getValue: (e) =>
        e?.amount
          ? `${
              e?.currency?.symbol ? e.currency.symbol + " " : ""
            }${e.amount.toLocaleString()}`
          : "N/A",
    },
    {
      key: "createdAt",
      label: "Next Generation Date",
      align: "text-center",
      getValue: (e) =>
        e?.createdAt ? formatUTCToLocalTime(e.createdAt) : "N/A",
    },
    {
      key: "status",
      label: "Status",
      align: "text-center",
      getValue: (e) => {
        const color = statusColorMap[e?.status?.id] || "secondary";
        const label = PAYEE_RECURRING_EXPENSE.find(
          (s) => s.id === e?.status?.id
        )?.label;
        return (
          <span className={`badge bg-label-${color}`}>
            {label || e?.status?.name || "N/A"}
          </span>
        );
      },
    },
  ];

  const [currentPage, setCurrentPage] = useState(1);
  const debouncedSearch = useDebounce(search, 500);

  const { data, isLoading, isError, error, isRefetching, refetch } =
    useRecurringExpenseList(
      ITEMS_PER_PAGE,
      currentPage,
      {},
      true,
      debouncedSearch
    );

  const paginate = (page) => {
    if (page >= 1 && page <= (data?.totalPages ?? 1)) {
      setCurrentPage(page);
    }
  };

  if (isError) {
    return <Error error={error} isFeteching={isRefetching} refetch={refetch} />;
  }

  const header = [
    "Category",
    "Title",
    "Amount",
    "Payee",
    "Frequency",
    "Next Generation",
    "Status",
    "Action",
  ];

  if (isLoading) return <ExpenseTableSkeleton headers={header} />;

  const canEditExpense = (recurringExpense) => {
    // return (
    //     (recurringExpense?.expenseStatus?.id === EXPENSE_DRAFT ||
    //         EXPENSE_REJECTEDBY.includes(recurringExpense?.expenseStatus.id)) &&
    //     recurringExpense?.createdBy?.id === SelfId
    // );
  };

  const canDeleteExpense = (request) => {
    return (
      request?.expenseStatus?.id === EXPENSE_DRAFT &&
      request?.createdBy?.id === SelfId
    );
  };

  const filteredData = data?.data?.filter((item) =>
    filterStatuses.includes(item?.status?.id)
  );

  const handleDelete = (id) => {
    setDeletingId(id);
    DeleteExpense(
      { id },
      {
        onSettled: () => {
          setDeletingId(null);
          setIsDeleteModalOpen(false);
        },
      }
    );
  };
console.log("Tanish",filteredData)
  return (
    <>
      {IsDeleteModalOpen && (
        <ConfirmModal
          isOpen={IsDeleteModalOpen}
          type="delete"
          header="Delete Recurring Expense"
          message="Under the working"
          onSubmit={handleDelete}
          onClose={() => setIsDeleteModalOpen(false)}
          paramData={deletingId}
        />
      )}

      <div className="card page-min-h table-responsive px-sm-4">
        <div className="card-datatable" id="payment-request-table">
         <div className="mx-2">
           {Array.isArray(filteredData) && filteredData.length > 0 && (
            <table className="table border-top dataTable text-nowrap  align-middle">
              <thead>
                <tr>
                  {recurringExpenseColumns.map((col) => (
                    <th key={col.key} className={`sorting ${col.align}`}>
                      {col.label}
                    </th>
                  ))}
                  <th className="text-center">Action</th>
                </tr>
              </thead>

              <tbody>
                {filteredData?.length > 0 ? (
                  filteredData?.map((recurringExpense) => (
                    <tr
                      key={recurringExpense.id}
                      className="align-middle"
                      style={{ height: "40px" }}
                    >
                      {recurringExpenseColumns.map((col) => (
                        <td
                          key={col.key}
                          className={`d-table-cell ${col.align ?? ""} py-3`}
                        >
                          {col?.customRender
                            ? col?.customRender(recurringExpense)
                            : col?.getValue(recurringExpense)}
                        </td>
                      ))}
                      <td className="sticky-action-column bg-white">
                        <div className="d-flex flex-row gap-2 gap-0">
                          <i
                            className="bx bx-show text-primary cursor-pointer"
                            onClick={() =>
                              setViewRecurring({
                                recurringId: recurringExpense?.id,
                                view: true,
                              })
                            }
                          ></i>

                          <div className="dropdown z-2">
                            <button
                              type="button"
                              className="btn btn-xs btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0 m-0"
                              data-bs-toggle="dropdown"
                            >
                              <i className="bx bx-dots-vertical-rounded text-muted p-0"></i>
                            </button>
                            <ul className="dropdown-menu dropdown-menu-end w-auto">
                              <li
                                onClick={() =>
                                  setManageRequest({
                                    IsOpen: true,
                                    RecurringId: recurringExpense?.id,
                                  })
                                }
                              >
                                <a className="dropdown-item px-2 cursor-pointer py-1">
                                  <i className="bx bx-edit text-primary bx-xs me-2"></i>
                                  Modify
                                </a>
                              </li>

                              <li
                                onClick={() => {
                                  setIsDeleteModalOpen(true);
                                  setDeletingId(recurringExpense.id);
                                }}
                              >
                                <a className="dropdown-item px-2 cursor-pointer py-1">
                                  <i className="bx bx-trash text-danger bx-xs me-2"></i>
                                  Delete
                                </a>
                              </li>
                            </ul>
                          </div>
                        </div>
                      </td>
                    </tr>
                  ))
                ) : (
                  <tr>
                    <td
                      colSpan={recurringExpenseColumns?.length + 1}
                      className="text-center border-0 py-8"
                    ></td>
                  </tr>
                )}
              </tbody>
            </table>
          )}
          {!filteredData ||
            filteredData.length === 0
           && (
              <div className="d-flex justify-content-center align-items-center h-64">
                {isError ? (<p>{error.message}</p>):(<p>No Recurring Expense Found</p>)}
              </div>
            )}
         </div>
        </div>

        {/* Pagination */}
        <Pagination
          currentPage={currentPage}
          totalPages={data?.totalPages}
          e
          onPageChange={paginate}
        />
      </div>
    </>
  );
};

export default RecurringExpenseList;