import React, { useState } from "react";
import {
    EXPENSE_DRAFT,
    EXPENSE_REJECTEDBY,
    FREQUENCY_FOR_RECURRING,
    ITEMS_PER_PAGE,
} 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";

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

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

    const recurringExpenseColumns = [
        {
            key: "recurringPaymentUId",
            label: "Recurring Payment ID",
            align: "text-start ps-2",
            getValue: (e) => e?.recurringPaymentUId || "N/A",
        },
        {
            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: "strikeDate",
            label: "Strike Date",
            align: "text-start",
            getValue: (e) =>
                e?.strikeDate ? formatUTCToLocalTime(e.strikeDate) : "N/A",
        },
        {
            key: "amount",
            label: "Amount",
            align: "text-start",
            getValue: (e) =>
                e?.amount
                    ? `${e?.currency?.symbol || ""}${e.amount.toLocaleString()}`
                    : "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: "latestPRGeneratedAt",
            label: "Last Generation Date",
            align: "text-start",
            getValue: (e) =>
                e?.latestPRGeneratedAt
                    ? formatUTCToLocalTime(e.latestPRGeneratedAt)
                    : "N/A",
        },
        {
            key: "createdAt",
            label: "Next Generation Date",
            align: "text-start",
            getValue: (e) =>
                e?.createdAt ? formatUTCToLocalTime(e.createdAt) : "N/A",
        },
        {
            key: "status",
            label: "Status",
            align: "text-start",
            getValue: (e) => e?.status?.name || "N/A",
        },
        
    ];


    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 recurringExpenseData = data?.data || [];
    const totalPages = data?.totalPages || 1;

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

    const header = [
        "Template Name",
        "Frequency",
        "Next Generation Date",
        "Last Generation Date",
        "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 handleDelete = (id) => {
        setDeletingId(id);
        DeleteExpense(
            { id },
            {
                onSettled: () => {
                    setDeletingId(null);
                    setIsDeleteModalOpen(false);
                },
            }
        );
    };

    return (
        <>
            {IsDeleteModalOpen && (
                <ConfirmModal
                    isOpen={IsDeleteModalOpen}
                    type="delete"
                    header="Delete Recurring Expense"
                    message="Are you sure you want to delete?"
                    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">
                    <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>
                            {recurringExpenseData.length > 0 ? (
                                recurringExpenseData.map((recurringExpense) => (
                                    <tr key={recurringExpense.id}>
                                        {recurringExpenseColumns.map((col) => (
                                            <td
                                                key={col.key}
                                                className={`d-table-cell ${col.align ?? ""}`}
                                            >
                                                {col?.customRender
                                                    ? col?.customRender(recurringExpense)
                                                    : col?.getValue(recurringExpense)}
                                            </td>
                                        ))}
                                        <td className="sticky-action-column bg-white">
                                            <div className="d-flex justify-content-center gap-2">
                                                <i
                                                    className="bx bx-show text-primary cursor-pointer"
                                                // onClick={() =>
                                                //     setVieRequest({
                                                //         requestId: recurringExpense.id,
                                                //         view: true,
                                                //     })
                                                // }
                                                ></i>
                                                {/* Uncomment for edit/delete actions */}

                                                <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,
                                                                    RequestId: 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">
                                        <p>No Recurring Expense Found</p>
                                    </td>
                                </tr>
                            )}
                        </tbody>
                    </table>
                </div>

                {/* Pagination */}
                {totalPages > 1 && (
                    <div className="d-flex justify-content-end py-3 pe-3">
                        <nav>
                            <ul className="pagination mb-0">
                                {[...Array(totalPages)].map((_, index) => (
                                    <li
                                        key={index}
                                        className={`page-item ${currentPage === index + 1 ? "active" : ""}`}
                                    >
                                        <button
                                            className="page-link"
                                            onClick={() => setCurrentPage(index + 1)}
                                        >
                                            {index + 1}
                                        </button>
                                    </li>
                                ))}
                            </ul>
                        </nav>
                    </div>
                )}
            </div>
        </>
    );
};

export default RecurringExpenseList;