import React, { createContext, useState, useEffect, useContext } from "react";
import Breadcrumb from "../../components/common/Breadcrumb";
import GlobalModel from "../../components/common/GlobalModel";
import { useFab } from "../../Context/FabContext";
import ManageRecurringExpense from "../../components/RecurringExpense/ManageRecurringExpense";
import RecurringExpenseList from "../../components/RecurringExpense/RecurringExpenseList";
import { PAYEE_RECURRING_EXPENSE } from "../../utils/constants";
import { SearchRecurringExpenseSchema } from "../../components/RecurringExpense/RecurringExpenseSchema";
import ViewRecurringExpense from "../../components/RecurringExpense/ViewRecurringExpense";

export const RecurringExpenseContext = createContext();
export const useRecurringExpenseContext = () => {
    const context = useContext(RecurringExpenseContext);
    if (!context) {
        throw new Error("useRecurringExpenseContext must be used within an ExpenseProvider");
    }
    return context;
};
const RecurringExpensePage = () => {
    const [ManageRequest, setManageRequest] = useState({
        IsOpen: null,
        RecurringId: null,
    });
    const [viewRecurring, setViewRecurring] = useState({ view: false, recurringId: null })

    const [selectedStatuses, setSelectedStatuses] = useState(
        PAYEE_RECURRING_EXPENSE.map((s) => s.id)
    );

    const [search, setSearch] = useState("");

    const contextValue = {
        setManageRequest,
        setViewRecurring
    };

    const handleStatusChange = (id) => {
        setSelectedStatuses((prev) =>
            prev.includes(id)
                ? prev.filter((s) => s !== id)
                : [...prev, id]
        );
    };
    return (
        <RecurringExpenseContext.Provider value={contextValue}>
            <div className="container-fluid">
                {/* Breadcrumb */}
                <Breadcrumb
                    data={[
                        { label: "Home", link: "/dashboard" },
                        { label: "Recurring Expense", link: null },
                    ]}
                />

                {/* Top Bar */}
                <div className="card my-3 px-sm-4 px-0">
                    <div className="card-body py-2 px-1">
                        <div className="row align-items-center mb-0">
                            {/* Left Column: Search + Filter */}
                            <div className="col-md-8 col-sm-12 mb-2 mb-md-0">
                                <div className="d-flex align-items-center flex-wrap gap-0">
                                    <input
                                        type="search"
                                        className="form-control form-control-sm w-25"
                                        placeholder="Search Recurring Expense"
                                        value={search}
                                        onChange={(e) => setSearch(e.target.value)}
                                    />

                                    <div className="dropdown">
                                        <a
                                            className="dropdown-toggle hide-arrow cursor-pointer p-1"
                                            data-bs-toggle="dropdown"
                                            aria-expanded="false"
                                            title="Filter"
                                        >
                                            <i className="bx bx-slider-alt ms-1"></i>
                                        </a>
                                        <ul className="dropdown-menu p-2 text-capitalize">
                                            {PAYEE_RECURRING_EXPENSE.map(({ id, label }) => (
                                                <li key={id}>
                                                    <div className="form-check">
                                                        <input
                                                            className="form-check-input"
                                                            type="checkbox"
                                                            checked={selectedStatuses.includes(id)}
                                                            onChange={() => handleStatusChange(id)}
                                                        />
                                                        <label className="form-check-label">{label}</label>
                                                    </div>
                                                </li>
                                            ))}
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            {/* Right Column: Add Button */}
                            <div className="col-md-4 col-sm-12 text-md-end text-start">
                                <button
                                    className="btn btn-sm btn-primary"
                                    type="button"
                                    onClick={() =>
                                        setManageRequest({
                                            IsOpen: true,
                                            RecurringId: null,
                                        })
                                    }
                                >
                                    <i className="bx bx-plus-circle me-2"></i>
                                    <span className="d-none d-md-inline-block">
                                        Add Recurring Expense
                                    </span>
                                </button>
                            </div>
                        </div>

                    </div>
                </div>

                <RecurringExpenseList filterStatuses={selectedStatuses} search={search} />

                {ManageRequest.IsOpen && (
                    <GlobalModel
                        isOpen
                        size="lg"
                        closeModal={() =>
                            setManageRequest({ IsOpen: null, expenseId: null })
                        }
                    >
                        <ManageRecurringExpense
                            key={ManageRequest.RecurringId ?? "new"}
                            closeModal={() =>
                                setManageRequest({ IsOpen: null, RecurringId: null })
                            }
                            requestToEdit={ManageRequest.RecurringId}
                        />
                    </GlobalModel>
                )}
                {viewRecurring.view && (
                    <GlobalModel
                        isOpen
                        size="lg"
                        closeModal={() =>
                            setViewRecurring({ IsOpen: null, recurringId: null })
                        }
                    >
                        {/* <viewRecurring
                            key={viewRecurring.RecurringId ?? "new"}
                            closeModal={() =>
                                setViewRecurring({ IsOpen: null, recurringId: null })
                            }
                            RecurringId={viewRecurring.recurringId}
                        /> */}
                        <ViewRecurringExpense RecurringId={viewRecurring.recurringId} />
                    </GlobalModel>
                )}


            </div>
        </RecurringExpenseContext.Provider>
    );
};

export default RecurringExpensePage;