"use client";
import React, { Suspense, useEffect, useState } from "react";
import MasterLayout from "@/masterLayout/MasterLayout";
import client from "@auth";
import { Icon } from "@iconify/react";
import PageLoader from "@/components/common-component/PageLoader";
import PageNoData from "@/components/common-component/PageNoData";
import Breadcrumb from "@/components/Breadcrumb";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { ImageBase } from "@utils/BaseUrl.utils";

const ProductListInner = () => {

    const router = useRouter()

    const [menuData, setMenuData] = useState(null);
    const [menuItems, setMenuItems] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
    const [activeCategory, setActiveCategory] = useState(null);
    const [catMenu, setCatMenu] = useState(null);
    const [catMenuActive, setCatMenuActive] = useState(null);

    const [menuFieldsModel, setMenuFieldsModel] = useState(false);
    const [isMenuFieldEditMode, setIsMenuFieldEditMode] = useState(false);
    const [editingMenuId, setEditingMenuId] = useState(null);
    const [formErrors, setFormErrors] = useState({});
    const [menuFieldDeleteConfirm, setMenuFieldDeleteConfirm] = useState({ show: false, id: null });
    const [menuFieldsFormData, setMenuFieldsFormData] = useState({
        menuname: "",
        description: "",
        is_active: 0,
    });

    const [menuCategoryModel, setMenuCategoryModel] = useState(false);
    const [isMenuCategoryEditMode, setIsMenuCategoryEditMode] = useState(false);
    const [editingMenuCategoryId, setEditingMenuCategoryId] = useState(null);
    const [formMenuCategoryErrors, setFormMenuCategoryErrors] = useState({});
    const [menuCategoryDeleteConfirm, setMenuCategoryDeleteConfirm] = useState({ show: false, id: null });
    const [menuCategoryFormData, setMenuCategoryFormData] = useState({
        menucategoryname: "",
        description: "",
        is_active: 0,
    });

    const [menuItemDeleteConfirm, setMenuItemDeleteConfirm] = useState({ show: false, id: null });


    const [restaruntBranch, setRestaruntBranch] = useState("")

    useEffect(() => {
        const restarunt = localStorage.getItem("restaurantbranch")
        setRestaruntBranch(restarunt)
    }, [])

    useEffect(() => {
        const isLogin = JSON.parse(localStorage.getItem("isLogin"));
        if (!isLogin) {
            router.push(`/admin?restaurantbranch=${restaruntBranch}`);
        }
    }, [router]);

    useEffect(() => {
        getMenuItem();
    }, []);

    const getMenuItem = async () => {
        try {
            const res = await client?.get(`/Dine360 Menu?fields=["*"]&limit_page_length=100`);
            setCatMenu(res?.data?.data || []);
            setCatMenuActive(res?.data?.data[0]?.name || []);
        } catch (error) {
            console.error("Error fetching menu list:", error);
        }
    };

    useEffect(() => {
        if (catMenu?.length > 0) {
            getMenuCategoryItems(catMenu[0]?.menuname);
        }
    }, [catMenu]);

    useEffect(() => {
        if (menuData?.length > 0) {
            getMenuFoodItems(menuData[0]);
            setActiveCategory(menuData[0]?.name);
        }
    }, [menuData]);

    const getMenuCategoryItems = async (menuname) => {
        try {
            setLoading(true);
            setError(null);

            const menuRes = await client.get(
                `/Dine360%20Menu%20Category%20Link?fields=["*"]&limit_page_length=100&filters=[["menu","=","${menuname}"]]`
            );

            const menuLinks = menuRes?.data?.data || [];
            console.log("menuLinks", menuLinks)

            const menuCategoryPromises = menuLinks.map(async (menuItem) => {
                const res = await client.get(
                    `/Dine360%20Menu%20Category?fields=["*"]&limit_page_length=100&filters=[["name","=","${menuItem.menucategory}"]]`
                );
                return res?.data?.data?.[0] || null;
            });

            const categories = await Promise.all(menuCategoryPromises);
            const validCategories = categories.filter(Boolean);

            setMenuData(validCategories);
        } catch (error) {
            console.error("Error fetching menu categories:", error);
            setError(error?.message || "Failed to fetch menu categories");
        } finally {
            setLoading(false);
        }
    };

    const getMenuFoodItems = async (category) => {
        if (!category?.name) return;
        try {
            const res = await client.get(
                `/Dine360%20Menu%20Category/${category.name}?fields=["*"]&limit_page_length=100`
            );
            setMenuItems(res?.data?.data || []);
        } catch (error) {
            console.error("Error fetching menu items:", error);
        }
    };

    const handleCatMenuClick = async (menuname) => {
        await getMenuCategoryItems(menuname);
        setCatMenuActive(menuname);
    };

    const handleMenuClick = async (menu) => {
        try {
            const res = await client.get(
                `/Dine360%20Menu%20Category/${menu.name}?fields=["*"]&limit_page_length=100`
            );
            setMenuItems(res?.data?.data || []);
            setActiveCategory(menu?.name);
        } catch (error) {
            console.error("Error fetching menu data:", error);
            setError(error?.message || "Failed to fetch menu data");
        }
    };


    const handleInputChange = (e) => {
        const { name, value, type, checked } = e.target;
        setMenuFieldsFormData((prev) => ({
            ...prev,
            [name]: type === "checkbox" ? (checked ? 1 : 0) : value,
        }));
    };

    const openCreateModal = () => {
        setIsMenuFieldEditMode(false);
        setEditingMenuId(null);
        setMenuFieldsFormData({ menuname: "", description: "", is_active: 0 });
        setFormErrors({});
        setMenuFieldsModel(true);
    };

    const openEditModal = (menu) => {
        setIsMenuFieldEditMode(true);
        setEditingMenuId(menu.name);
        setMenuFieldsFormData({
            menuname: menu.menuname || "",
            description: menu.description || "",
            is_active: menu.is_active || 0,
        });
        setFormErrors({});
        setMenuFieldsModel(true);
    };

    const closeModal = () => {
        setMenuFieldsModel(false);
        setFormErrors({});
    };

    const handleFormSubmit = async (e) => {
        e.preventDefault();

        const errors = {};
        if (!menuFieldsFormData.menuname.trim()) errors.menuname = "Menu name is required";
        if (!menuFieldsFormData.description.trim()) errors.description = "Description is required";

        if (Object.keys(errors).length > 0) {
            setFormErrors(errors);
            return;
        }

        const body = {
            restaurantbranch: restaruntBranch,
            menuname: menuFieldsFormData?.menuname,
            description: menuFieldsFormData?.description,
            is_active: menuFieldsFormData?.is_active
        }

        try {
            if (isMenuFieldEditMode && editingMenuId) {
                await client.put(`/Dine360 Menu/${editingMenuId}`, body);
            } else {
                await client.post(`/Dine360 Menu`, body);
            }
            closeModal();
            getMenuItem();
        } catch (error) {
            console.error("Error saving menu:", error);
        }
    };

    const handleMenuFieldDelete = async () => {
        try {
            await client.delete(`/Dine360 Menu/${menuFieldDeleteConfirm.id}`);
            setMenuFieldDeleteConfirm({ show: false, id: null });
            getMenuItem();
        } catch (error) {
            if (
                error?.response?.data?.exception?.includes("DuplicateEntryError") ||
                error?.response?.data?.message?.includes("Duplicate entry")
            ) {
                alert("Menu Name already exists. Please use a different name.");
            } else if (error?.response?.data?.exception?.includes("LinkExistsError") ||
                error?.response?.data?.message?.includes("LinkExistsError")) {
                alert(" Cannot delete or cancel because Dine360 Menu three is linked with Dine360 Menu Category ");
            }
        }
    };


    // MenuCategory
    const handleMenuCategoryInputChange = (e) => {
        const { name, value, type, checked } = e.target;
        setMenuCategoryFormData((prev) => ({
            ...prev,
            [name]: type === "checkbox" ? (checked ? 1 : 0) : value,
        }));
    };

    const openMenuCategoryCreateModal = () => {
        setIsMenuCategoryEditMode(false);
        setEditingMenuCategoryId(null);
        setMenuCategoryFormData({ menucategoryname: "", description: "", is_active: 0 });
        setFormMenuCategoryErrors({});
        setMenuCategoryModel(true);
    };

    const openMenuCategoryEditModal = (menu) => {
        setIsMenuCategoryEditMode(true);
        setEditingMenuCategoryId(menu.name);
        setMenuCategoryFormData({
            menucategoryname: menu.menucategoryname || "",
            description: menu.description || "",
            is_active: menu.is_active || 0,
        });
        setFormMenuCategoryErrors({});
        setMenuCategoryModel(true);
    };

    const closeMenuCategoryModal = () => {
        setMenuCategoryModel(false);
        setFormMenuCategoryErrors({});
    };

    const handleMenuCategoryFormSubmit = async (e) => {
        e.preventDefault();

        const errors = {};
        if (!menuCategoryFormData.menucategoryname.trim()) errors.menucategoryname = "Menu Category name is required";
        if (!menuCategoryFormData.description.trim()) errors.description = "Description is required";

        if (Object.keys(errors).length > 0) {
            setFormMenuCategoryErrors(errors);
            return;
        }

        const body = {
            restaurantbranch: restaruntBranch,
            menucategoryname: menuCategoryFormData?.menucategoryname,
            description: menuCategoryFormData?.description,
            is_active: menuCategoryFormData?.is_active
        }
        try {
            if (isMenuCategoryEditMode && editingMenuCategoryId) {
                await client.put(`/Dine360%20Menu%20Category/${editingMenuCategoryId}`, body);
            } else {
                const res = await client.post(`/Dine360%20Menu%20Category`, body);
                const CategoryLinkBody = {
                    menu: catMenuActive,
                    menucategory: res?.data?.data?.name,
                    restaurantbranch: restaruntBranch,
                }
                await client.post(`/Dine360%20Menu%20Category%20Link`, CategoryLinkBody)
            }
            closeMenuCategoryModal();
            getMenuCategoryItems(catMenuActive);
        } catch (error) {
            if (
                error?.response?.data?.exc_type?.includes("UniqueValidationError") ||
                error?.response?.data?.message?.includes("Duplicate entry")
            ) {
                alert("Menu Category Name already exists. Please use a different name.");
            } else if (error?.response?.data?.exception?.includes("LinkExistsError") ||
                error?.response?.data?.message?.includes("LinkExistsError")) {
                alert("Cannot delete or cancel because Dine360 Menu three is linked with Dine360 Menu Category ");
            }
        }
    };
    console.log("catMenuActive", catMenuActive)

    const handleMenuCategoryDelete = async () => {
        try {
            await client.delete(`/Dine360%20Menu%20Category%20Link/${catMenuActive} - ${menuCategoryDeleteConfirm.id}`)

            await client.delete(`/Dine360%20Menu%20Category/${menuCategoryDeleteConfirm.id}`);
            setMenuCategoryDeleteConfirm({ show: false, id: null });
            getMenuItem();
        } catch (error) {
            if (
                error?.response?.data?.exception?.includes("DuplicateEntryError") ||
                error?.response?.data?.message?.includes("Duplicate entry")
            ) {
                alert("Menu Name already exists. Please use a different name.");
            } else if (error?.response?.data?.exception?.includes("LinkExistsError") ||
                error?.response?.data?.message?.includes("LinkExistsError")) {
                alert("Cannot delete or cancel because Dine360 Menu three is linked with Dine360 Menu Category ");
            }
        }
    };


    const handleMenuItemDelete = async () => {
        try {
            await client.delete(`/Dine360%20Menu%20Category/${activeCategory}/${menuItemDeleteConfirm.id}`);
            setMenuItemDeleteConfirm({ show: false, id: null });
            getMenuItem();
        } catch (error) {
            if (
                error?.response?.data?.exception?.includes("DuplicateEntryError") ||
                error?.response?.data?.message?.includes("Duplicate entry")
            ) {
                alert("Menu Name already exists. Please use a different name.");
            } else if (error?.response?.data?.exception?.includes("LinkExistsError") ||
                error?.response?.data?.message?.includes("LinkExistsError")) {
                alert("Cannot delete or cancel because Dine360 Menu three is linked with Dine360 Menu Category ");
            }
        }
    };


    const renderMenuItem = (menu) => (
        <div key={menu.name} className="col-xxl-2 col-md-6 user-grid-card">
            <div className="border radius-16 overflow-hidden">
                <div className="card cursor-pointer position-relative ">
                    <div className="card-body text-center p-3">
                        <img
                            src={`${ImageBase}/${menu.item_image}`}
                            alt=""
                            className="border br-white border-width-2-px w-100-px h-100-px rounded-circle object-fit-cover"
                        />
                        <div className="p-0">
                            <h6 className="text-lg mb-1 mt-1">{menu.menuitemname}</h6>
                            { /*<span className="text-secondary-light text-sm lh-sm mb-1">{menu.parent}</span>*/}
                            <p className="text-sm mb-0 mt-1">${menu.price?.toFixed(2)}</p>
                        </div>
                    </div>
                    <div className="position-absolute top-0 end-0 me-1 mt-1" onClick={(e) => e.stopPropagation()}>
                        <div className="dropdown">
                            <button
                                className="btn px-1 py-1 d-flex align-items-center text-primary-light"
                                type="button"
                                data-bs-toggle="dropdown"
                                aria-expanded="false"
                            >
                                <Icon icon="entypo:dots-three-vertical" className="menu-icon" />
                            </button>
                            <ul className="dropdown-menu">
                                <li>
                                    <Link
                                        href="#"
                                        className="dropdown-item px-16 py-8 d-flex align-items-center gap-2 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900"
                                        onClick={(e) => {
                                            e.preventDefault();
                                            router.push(`/admin/pos/update-product?category=${activeCategory}&menuitemname=${menu.name}`)
                                            // handleFloorEdit(menu);
                                        }}
                                    >
                                        <Icon icon="lucide:edit" className="menu-icon" />
                                        Edit
                                    </Link>
                                </li>
                                <li>
                                    <Link
                                        href="#"
                                        className="dropdown-item px-16 py-8 d-flex align-items-center gap-2 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900"
                                        onClick={(e) => {
                                            e.preventDefault();
                                            e.stopPropagation(); // optional
                                            setMenuItemDeleteConfirm({ show: true, id: menu.name });
                                        }}
                                    >
                                        <Icon icon="fluent:delete-24-regular" className="menu-icon" />
                                        Delete
                                    </Link>
                                </li>
                            </ul>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    );


    return (
        <>
            <div className="container-fluid" style={{ marginBottom: "100px" }}>
                {loading ? (
                    <PageLoader />
                ) : (
                    <div className="row gy-4">
                        <div className="col-xxl-2">
                            <div className="card p-0 overflow-hidden radius-12 h-100">
                                <div className="card-body p-24">
                                    <ul className="d-flex flex-column gap-2">
                                        <li
                                            className="nav-item border rounded-2 px-3 py-3 d-flex align-items-center gap-3 justify-content-between"
                                            style={{ cursor: "pointer" }}
                                            onClick={openCreateModal}
                                        >
                                            <div className="d-flex align-items-center gap-3 ">
                                                <Icon icon="lucide:plus" className="text-lg w-28-px h-28-px " />
                                                <span className="fw-semibold">New</span>
                                            </div>
                                        </li>
                                        {catMenu.map((menu) => (
                                            <li
                                                key={menu?.name}
                                                className={`nav-item border rounded-2 px-3 py-3 bg-border-theme d-flex align-items-center gap-3 position-relative ${catMenuActive === menu.menuname ? "bg-theme" : ""
                                                    }`}
                                                role="presentation"
                                                onClick={() => handleCatMenuClick(menu?.menuname)}
                                                style={{ cursor: "pointer" }}
                                            >
                                                <img
                                                    src="/assets/images/menu/menu-icons/all-menu.png"
                                                    alt="menu"
                                                    className="w-28-px h-28-px"
                                                />
                                                <span className="line-height-1">{menu?.menuname}</span>
                                                <div className="position-absolute top-0 end-0 me-1 mt-1" onClick={(e) => e.stopPropagation()}>
                                                    <div className="dropdown">
                                                        <button
                                                            className="btn px-1 py-1 d-flex align-items-center text-primary-light"
                                                            type="button"
                                                            data-bs-toggle="dropdown"
                                                            aria-expanded="false"
                                                        >
                                                            <Icon icon="entypo:dots-three-vertical" className="menu-icon" />
                                                        </button>
                                                        <ul className="dropdown-menu">
                                                            <li>
                                                                <Link
                                                                    href="#"
                                                                    className="dropdown-item px-16 py-8 d-flex align-items-center gap-2 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900"
                                                                    onClick={(e) => {
                                                                        e.preventDefault();
                                                                        openEditModal(menu);// optional: prevents bubbling from link
                                                                        // handleFloorEdit(menu);
                                                                    }}
                                                                >
                                                                    <Icon icon="lucide:edit" className="menu-icon" />
                                                                    Edit
                                                                </Link>
                                                            </li>
                                                            <li>
                                                                <Link
                                                                    href="#"
                                                                    className="dropdown-item px-16 py-8 d-flex align-items-center gap-2 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900"
                                                                    onClick={(e) => {
                                                                        e.preventDefault();
                                                                        e.stopPropagation(); // optional
                                                                        setMenuFieldDeleteConfirm({ show: true, id: menu.name });
                                                                    }}
                                                                >
                                                                    <Icon icon="fluent:delete-24-regular" className="menu-icon" />
                                                                    Delete
                                                                </Link>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </li>
                                        ))}
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div className="col-xxl-10">
                            <div className="card p-0 radius-12 mb-3">
                                <div className="card-body p-24">
                                    <ul className="d-flex gap-2 mb-0 flex-wrap">
                                        {/* Create New Category Button */}
                                        <li
                                            className="nav-item border rounded-2 px-3 py-1 bg-outline-theme d-flex align-items-center gap-2"
                                            style={{ cursor: "pointer" }}
                                            onClick={openMenuCategoryCreateModal}                                        >
                                            <Icon icon="lucide:plus" className="text-lg w-28-px h-28-px " />
                                            <span className="fw-semibold">New</span>
                                        </li>

                                        {/* Menu Items */}
                                        {menuData.map((menu) => (
                                            <li
                                                key={menu?.name}
                                                className={`nav-item border rounded-2 px-3 py-1 bg-outline-theme position-relative d-flex justify-content-between align-items-center gap-3 ${activeCategory === menu.name ? "bg-theme text-white" : ""}`}
                                                role="presentation"
                                                onClick={() => handleMenuClick(menu)} // ✅ Keep this
                                                style={{ cursor: "pointer", minWidth: "150px", maxWidth: "220px" }}
                                            >
                                                {/* Left: Icon and Name */}
                                                <div className="d-flex align-items-center gap-2">
                                                    <img
                                                        src="/assets/images/menu/menu-icons/all-menu.png"
                                                        alt="menu icon"
                                                        className="w-28-px h-28-px"
                                                    />
                                                    <span className="line-height-1">{menu?.menucategoryname}</span>
                                                </div>

                                                {/* Three Dots Menu (Absolute) */}
                                                <div
                                                    className="position-absolute"
                                                    style={{ top: "4px", right: "4px", zIndex: 100 }}
                                                    onClick={(e) => e.stopPropagation()} // ✅ Prevent parent click
                                                >
                                                    <div className="dropdown">
                                                        <button
                                                            className="btn px-1 py-1 d-flex align-items-center text-primary-light"
                                                            type="button"
                                                            data-bs-toggle="dropdown"
                                                        >
                                                            <Icon icon="entypo:dots-three-vertical" />
                                                        </button>
                                                        <ul className="dropdown-menu">
                                                            <li>
                                                                <Link
                                                                    className="dropdown-item px-16 py-8 d-flex align-items-center gap-2 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900"
                                                                    href="#"
                                                                    onClick={(e) => {
                                                                        e.preventDefault();
                                                                        openMenuCategoryEditModal(menu);
                                                                    }}
                                                                >
                                                                    <Icon icon="lucide:edit" /> Edit
                                                                </Link>
                                                            </li>
                                                            <li>
                                                                <Link
                                                                    className="dropdown-item px-16 py-8 d-flex align-items-center gap-2 rounded text-secondary-light bg-hover-neutral-200 text-hover-neutral-900"
                                                                    href="#"
                                                                    onClick={(e) => {
                                                                        e.preventDefault();
                                                                        setMenuCategoryDeleteConfirm({ show: true, id: menu.name }); // 👈 use menu
                                                                    }}
                                                                >
                                                                    <Icon icon="fluent:delete-24-regular" /> Delete
                                                                </Link>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </li>
                                        ))}

                                    </ul>


                                </div>
                            </div>

                            <div className="row gy-4">
                                <div className="col-xxl-2 col-md-6 user-grid-card">
                                    <div className="position-relative border radius-16 overflow-hidden h-100 w-100">
                                        <div className="card cursor-pointer h-100 w-100 d-flex justify-content-center align-items-center" onClick={() => router.push(`/admin/pos/create-product?category=${activeCategory}`)}>
                                            <div className="card-body text-center p-3 d-flex justify-content-center align-items-center">
                                                <div>
                                                    <Icon icon="lucide:plus" className="text-lg w-20-px h-20-px " />
                                                    <h6 className="text-md mb-0 mt-1">Create</h6>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {menuItems?.menuitems_child?.map(renderMenuItem)}
                            </div>
                        </div>
                    </div>
                )}
            </div>

            {/* Modal */}
            {menuFieldsModel && (
                <div className="modal fade show" style={{ display: "block", backgroundColor: "rgba(0,0,0,0.5)" }}>
                    <div className="modal-dialog modal-dialog-centered">
                        <div className="modal-content">
                            <div className="modal-header border-0 pb-0">
                                <h6 className="modal-title text-lg">{isMenuFieldEditMode ? "Edit Menu" : "Create Menu"}</h6>
                                <button type="button" className="btn-close" onClick={closeModal}></button>
                            </div>
                            <div className="modal-body">
                                <form onSubmit={handleFormSubmit}>
                                    <div className="mb-3">
                                        <label className="form-label">Menu Name</label>
                                        <input
                                            type="text"
                                            name="menuname"
                                            className={`form-control ${formErrors.menuname ? "is-invalid" : ""}`}
                                            value={menuFieldsFormData.menuname}
                                            onChange={handleInputChange}
                                        />
                                        {formErrors.menuname && (
                                            <div className="invalid-feedback">{formErrors.menuname}</div>
                                        )}
                                    </div>

                                    <div className="mb-3">
                                        <label className="form-label">Description</label>
                                        <textarea
                                            name="description"
                                            className={`form-control ${formErrors.description ? "is-invalid" : ""}`}
                                            value={menuFieldsFormData.description}
                                            onChange={handleInputChange}
                                            rows="3"
                                        ></textarea>
                                        {formErrors.description && (
                                            <div className="invalid-feedback">{formErrors.description}</div>
                                        )}
                                    </div>

                                    <div className="form-check mb-3 d-flex justify-content-start align-items-center gap-2">
                                        <input
                                            type="checkbox"
                                            className="form-check-input"
                                            id="is_active"
                                            name="is_active"
                                            checked={menuFieldsFormData.is_active === 1}
                                            onChange={handleInputChange}
                                        />
                                        <label className="form-check-label" htmlFor="is_active">
                                            Active
                                        </label>
                                    </div>

                                    <div className="d-flex justify-content-end">
                                        <button type="submit" className="btn btn-bg-theme">
                                            {isMenuFieldEditMode ? "Update" : "Submit"}
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            )}

            {/* Delete Confirmation Modal */}
            {menuFieldDeleteConfirm.show && (
                <div className="modal fade show" style={{ display: "block", backgroundColor: "rgba(0,0,0,0.5)" }}>
                    <div className="modal-dialog modal-dialog-centered">
                        <div className="modal-content">

                            <div className="modal-body">
                                <div className="d-flex justify-content-between mb-1">
                                    <h6 className="text-lg mb-0">Confirm Delete</h6>
                                    <button
                                        type="button"
                                        className="btn-close"
                                        onClick={() => setMenuFieldDeleteConfirm({ show: false, id: null })}
                                    ></button>
                                </div>
                                <p className="m-0">Are you sure you want to delete this Menu?</p>
                                <div className="d-flex justify-content-end gap-2 mt-1 ">
                                    <button
                                        className="btn btn-outline-danger px-14 py-6 text-sm"
                                        onClick={() => setMenuFieldDeleteConfirm({ show: false, id: null })}
                                    >
                                        Cancel
                                    </button>
                                    <button className="btn btn-danger px-14 py-6 text-sm" onClick={handleMenuFieldDelete}>
                                        Delete
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            )}


            {/* Menu category create & Upadte */}
            {menuCategoryModel && (
                <div className="modal fade show" style={{ display: "block", backgroundColor: "rgba(0,0,0,0.5)" }}>
                    <div className="modal-dialog modal-dialog-centered">
                        <div className="modal-content">
                            <div className="modal-header border-0 pb-0">
                                <h6 className="modal-title text-lg">{isMenuCategoryEditMode ? "Edit Menu Category" : "Create Menu Category"}</h6>
                                <button type="button" className="btn-close" onClick={closeMenuCategoryModal}></button>
                            </div>
                            <div className="modal-body">
                                <form onSubmit={handleMenuCategoryFormSubmit}>
                                    <div className="mb-3">
                                        <label className="form-label">Menu Category Name</label>
                                        <input
                                            type="text"
                                            name="menucategoryname"
                                            className={`form-control ${formMenuCategoryErrors.menucategoryname ? "is-invalid" : ""}`}
                                            value={menuCategoryFormData.menucategoryname}
                                            onChange={handleMenuCategoryInputChange}
                                        />
                                        {formMenuCategoryErrors.menucategoryname && (
                                            <div className="invalid-feedback">{formMenuCategoryErrors.menucategoryname}</div>
                                        )}
                                    </div>

                                    <div className="mb-3">
                                        <label className="form-label">Description</label>
                                        <textarea
                                            name="description"
                                            className={`form-control ${formMenuCategoryErrors.description ? "is-invalid" : ""}`}
                                            value={menuCategoryFormData.description}
                                            onChange={handleMenuCategoryInputChange}
                                            rows="3"
                                        ></textarea>
                                        {formMenuCategoryErrors.description && (
                                            <div className="invalid-feedback">{formMenuCategoryErrors.description}</div>
                                        )}
                                    </div>

                                    <div className="form-check mb-3 d-flex justify-content-start align-items-center gap-2">
                                        <input
                                            type="checkbox"
                                            className="form-check-input"
                                            id="is_active"
                                            name="is_active"
                                            checked={menuCategoryFormData.is_active === 1}
                                            onChange={handleMenuCategoryInputChange}
                                        />
                                        <label className="form-check-label" htmlFor="is_active">
                                            Active
                                        </label>
                                    </div>

                                    <div className="d-flex justify-content-end">
                                        <button type="submit" className="btn btn-bg-theme">
                                            {isMenuCategoryEditMode ? "Update" : "Submit"}
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            )}

            {/* Delete Confirmation Modal */}
            {menuCategoryDeleteConfirm.show && (
                <div className="modal fade show" style={{ display: "block", backgroundColor: "rgba(0,0,0,0.5)" }}>
                    <div className="modal-dialog modal-dialog-centered">
                        <div className="modal-content">

                            <div className="modal-body">
                                <div className="d-flex justify-content-between mb-1">
                                    <h6 className="text-lg mb-0">Confirm Delete</h6>
                                    <button
                                        type="button"
                                        className="btn-close"
                                        onClick={() => setMenuCategoryDeleteConfirm({ show: false, id: null })}
                                    ></button>
                                </div>
                                <p className="m-0">Are you sure you want to delete this Menu?</p>
                                <div className="d-flex justify-content-end gap-2 mt-1 ">
                                    <button
                                        className="btn btn-outline-danger px-14 py-6 text-sm"
                                        onClick={() => setMenuCategoryDeleteConfirm({ show: false, id: null })}
                                    >
                                        Cancel
                                    </button>
                                    <button className="btn btn-danger px-14 py-6 text-sm" onClick={handleMenuCategoryDelete}>
                                        Delete
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            )}

            {/* Delete Confirmation Modal */}
            {menuItemDeleteConfirm.show && (
                <div className="modal fade show" style={{ display: "block", backgroundColor: "rgba(0,0,0,0.5)" }}>
                    <div className="modal-dialog modal-dialog-centered">
                        <div className="modal-content">

                            <div className="modal-body">
                                <div className="d-flex justify-content-between mb-1">
                                    <h6 className="text-lg mb-0">Confirm Delete</h6>
                                    <button
                                        type="button"
                                        className="btn-close"
                                        onClick={() => setMenuItemDeleteConfirm({ show: false, id: null })}
                                    ></button>
                                </div>
                                <p className="m-0">Are you sure you want to delete this Menu?</p>
                                <div className="d-flex justify-content-end gap-2 mt-1 ">
                                    <button
                                        className="btn btn-outline-danger px-14 py-6 text-sm"
                                        onClick={() => setMenuItemDeleteConfirm({ show: false, id: null })}
                                    >
                                        Cancel
                                    </button>
                                    <button className="btn btn-danger px-14 py-6 text-sm" onClick={handleMenuItemDelete}>
                                        Delete
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            )}
        </>
    );
};

const ProductList = () => (
    <MasterLayout>
        <Breadcrumb title="Menu Items" />
        <Suspense fallback={<PageLoader />}>
            <ProductListInner />
        </Suspense>
    </MasterLayout>
);

export default ProductList;
