"use client"
import { Icon } from "@iconify/react";
import Link from "next/link";
import React, { useState } from "react";

const FoodMenu = () => {
    const [cart, setCart] = useState([]);
    const [showOrderModal, setShowOrderModal] = useState(false);
    const [orderStatus, setOrderStatus] = useState('pending');
    const HST_TAX_RATE = 0.13; // 13% HST tax rate

    const allMenu = [
        {
            id: 1,
            name: "Sweet Corn Soup - Veg",
            price: 7.99,
            profileImg: "assets/images/user-grid/user-grid-img1.png",
            bgImg: "assets/images/user-grid/user-grid-bg1.png",
        },
        {
            id: 2,
            name: "Hot & Sour Soup - Veg",
            price: 7.99,
            profileImg: "assets/images/user-grid/user-grid-img2.png",
            bgImg: "assets/images/user-grid/user-grid-bg2.png",
        },
        {
            id: 3,
            name: "Madurai Mutton Bone Soup",
            price: 9.99,
            profileImg: "assets/images/user-grid/user-grid-img2.png",
            bgImg: "assets/images/user-grid/user-grid-bg2.png",
        },
        {
            id: 4,
            name: "Sweet Corn Soup Chicken",
            price: 8.99,
            profileImg: "assets/images/user-grid/user-grid-img2.png",
            bgImg: "assets/images/user-grid/user-grid-bg2.png",
        },
        {
            id: 5,
            name: "Hot & Sour Soup Chicken",
            price: 8.99,
            profileImg: "assets/images/user-grid/user-grid-img2.png",
            bgImg: "assets/images/user-grid/user-grid-bg2.png",
        },
        {
            id: 6,
            name: "Onion Pakoda - South Style",
            price: 8.99,
            profileImg: "assets/images/user-grid/user-grid-img2.png",
            bgImg: "assets/images/user-grid/user-grid-bg2.png",
        },
        {
            id: 7,
            name: "Gun Powder Fries",
            price: 6.99,
            profileImg: "assets/images/user-grid/user-grid-img2.png",
            bgImg: "assets/images/user-grid/user-grid-bg2.png",
        },
        {
            id: 8,
            name: "Paneer 65",
            price: 10.99,
            profileImg: "assets/images/user-grid/user-grid-img2.png",
            bgImg: "assets/images/user-grid/user-grid-bg2.png",
        },
    ];

    const addToCart = (item) => {
        const existingItem = cart.find(cartItem => cartItem.id === item.id);
        if (existingItem) {
            setCart(cart.map(cartItem =>
                cartItem.id === item.id
                    ? { ...cartItem, quantity: cartItem.quantity + 1 }
                    : cartItem
            ));
        } else {
            setCart([...cart, { ...item, quantity: 1 }]);
        }
    };

    const removeFromCart = (itemId) => {
        setCart(cart.filter(item => item.id !== itemId));
    };

    const updateQuantity = (itemId, newQuantity) => {
        if (newQuantity < 1) {
            removeFromCart(itemId);
            return;
        }
        setCart(cart.map(item =>
            item.id === itemId
                ? { ...item, quantity: newQuantity }
                : item
        ));
    };

    const calculateSubtotal = () => {
        return cart.reduce((total, item) => total + (item.price * item.quantity), 0);
    };

    const calculateTax = () => {
        return calculateSubtotal() * HST_TAX_RATE;
    };

    const calculateTotal = () => {
        return calculateSubtotal() + calculateTax();
    };

    const handlePlaceOrder = () => {
        setShowOrderModal(true);
    };

    const confirmOrder = () => {
        // TODO: Implement order confirmation logic
        alert('Order placed successfully!');
        setCart([]);
        setShowOrderModal(false);
        setOrderStatus('pending');
    };

    const renderMenuItem = (menu) => {
        const cartItem = cart.find(item => item.id === menu.id);
        const isInCart = !!cartItem;

        return (
            <div key={menu.id} className="col-xxl-3 col-md-6 user-grid-card">
                <div className="position-relative border radius-16 overflow-hidden">
                    <div className="p-16 text-center">
                        <img
                            src={menu.profileImg}
                            alt=""
                            className="border br-white border-width-2-px w-100-px h-100-px rounded-circle object-fit-cover"
                        />
                        <h6 className="text-md mb-0 mt-3">{menu.name}</h6>
                        <span className="text-secondary-light mb-16">${menu.price.toFixed(2)}</span>
                        {isInCart ? (
                            <div className="d-flex align-items-center justify-content-center gap-2">
                                <button
                                    className="btn btn-sm btn-outline-primary"
                                    onClick={() => updateQuantity(menu.id, cartItem.quantity - 1)}
                                >
                                    -
                                </button>
                                <span className="mx-2">{cartItem.quantity}</span>
                                <button
                                    className="btn btn-sm btn-outline-primary"
                                    onClick={() => updateQuantity(menu.id, cartItem.quantity + 1)}
                                >
                                    +
                                </button>
                            </div>
                        ) : (
                            <button
                                onClick={() => addToCart(menu)}
                                className="bg-primary-50 text-primary-600 bg-hover-primary-600 hover-text-white p-10 text-sm btn-sm px-12 py-12 radius-8 d-flex align-items-center justify-content-center mt-2 fw-medium gap-2 w-100"
                            >
                                Add to Cart
                            </button>
                        )}
                    </div>
                </div>
            </div>
        );
    };

    return (
        <div className="container-fluid">
            <div className="row gy-4">
                <div className="col-xxl-9">
                    <div className="card p-0 overflow-hidden position-relative radius-12 h-100">
                        <div className="card-body p-24">
                            <ul
                                className="nav button-tab nav-pills mb-5 gap-3"
                                id="pills-tab-four"
                                role="tablist"
                            >
                                <li className="nav-item" role="presentation">
                                    <button
                                        className="nav-link d-flex align-items-center gap-2 fw-semibold text-primary-light radius-4 px-16 py-10 active"
                                        id="pills-button-icon-allMenu-tab"
                                        data-bs-toggle="pill"
                                        data-bs-target="#pills-button-icon-allMenu"
                                        type="button"
                                        role="tab"
                                        aria-controls="pills-button-icon-allMenu"
                                        aria-selected="true"
                                    >
                                        {/* <Icon
                                    icon="solar:allMenu-smile-angle-outline"
                                    className="text-xl"
                                /> */}
                                        <img src="/assets/images/menu/menu-icons/all-menu.png" alt="all menu" className="w-28-px h-28-px" />
                                        <span className="line-height-1">All Menu</span>
                                    </button>
                                </li>
                                <li className="nav-item" role="presentation">
                                    <button
                                        className="nav-link d-flex align-items-center gap-2 fw-semibold text-primary-light radius-4 px-16 py-10"
                                        id="pills-button-icon-soups-tab"
                                        data-bs-toggle="pill"
                                        data-bs-target="#pills-button-icon-soups"
                                        type="button"
                                        role="tab"
                                        aria-controls="pills-button-icon-soups"
                                        aria-selected="false"
                                    >
                                        <img src="/assets/images/menu/menu-icons/soups.png" alt="all menu" className="w-28-px h-28-px" />
                                        {/* <Icon
                                    icon="hugeicons:folder-soups"
                                    className="text-xl"
                                /> */}
                                        <span className="line-height-1">Soups</span>
                                    </button>
                                </li>
                                <li className="nav-item" role="presentation">
                                    <button
                                        className="nav-link d-flex align-items-center gap-2 fw-semibold text-primary-light radius-4 px-16 py-10"
                                        id="pills-button-icon-appetizers-tab"
                                        data-bs-toggle="pill"
                                        data-bs-target="#pills-button-icon-appetizers"
                                        type="button"
                                        role="tab"
                                        aria-controls="pills-button-icon-appetizers"
                                        aria-selected="false"
                                    >
                                        {/* <Icon icon="iconamoon:appetizers" className="text-xl" /> */}
                                        <img src="/assets/images/menu/menu-icons/appetizers.png" alt="all menu" className="w-28-px h-28-px" />
                                        <span className="line-height-1">Appetizers</span>
                                    </button>
                                </li>
                                <li className="nav-item" role="presentation">
                                    <button
                                        className="nav-link d-flex align-items-center gap-2 fw-semibold text-primary-light radius-4 px-16 py-10"
                                        id="pills-button-icon-mainCourse-tab"
                                        data-bs-toggle="pill"
                                        data-bs-target="#pills-button-icon-mainCourse"
                                        type="button"
                                        role="tab"
                                        aria-controls="pills-button-icon-mainCourse"
                                        aria-selected="false"
                                    >
                                        {/* <Icon icon="uil:mainCourse" className="text-xl" /> */}
                                        <img src="/assets/images/menu/menu-icons/main-course.png" alt="all menu" className="w-28-px h-28-px" />
                                        <span className="line-height-1">Main Course</span>
                                    </button>
                                </li>
                                <li className="nav-item" role="presentation">
                                    <button
                                        className="nav-link d-flex align-items-center gap-2 fw-semibold text-primary-light radius-4 px-16 py-10"
                                        id="pills-button-icon-indoChinese-tab"
                                        data-bs-toggle="pill"
                                        data-bs-target="#pills-button-icon-indoChinese"
                                        type="button"
                                        role="tab"
                                        aria-controls="pills-button-icon-indoChinese"
                                        aria-selected="false"
                                    >
                                        {/* <Icon icon="uil:indoChinese" className="text-xl" /> */}
                                        <img src="/assets/images/menu/menu-icons/indo-chinese.png" alt="all menu" className="w-28-px h-28-px" />
                                        <span className="line-height-1">Indo Chinese</span>
                                    </button>
                                </li>
                                <li className="nav-item" role="presentation">
                                    <button
                                        className="nav-link d-flex align-items-center gap-2 fw-semibold text-primary-light radius-4 px-16 py-10"
                                        id="pills-button-icon-Desserts-tab"
                                        data-bs-toggle="pill"
                                        data-bs-target="#pills-button-icon-Desserts"
                                        type="button"
                                        role="tab"
                                        aria-controls="pills-button-icon-Desserts"
                                        aria-selected="false"
                                    >
                                        {/* <Icon icon="uil:Desserts" className="text-xl" /> */}
                                        <img src="/assets/images/menu/menu-icons/beverages.png" alt="all menu" className="w-28-px h-28-px" />
                                        <span className="line-height-1">Beverages and Desserts</span>
                                    </button>
                                </li>
                            </ul>
                            <div className="tab-content" id="pills-tab-fourContent">
                                <div
                                    className="tab-pane fade show active"
                                    id="pills-button-icon-allMenu"
                                    role="tabpanel"
                                    aria-labelledby="pills-button-icon-allMenu-tab"
                                    tabIndex={0}
                                >
                                    <div className="row gy-4">
                                        {allMenu.map(renderMenuItem)}
                                    </div>
                                </div>

                                <div
                                    className="tab-pane fade"
                                    id="pills-button-icon-soups"
                                    role="tabpanel"
                                    aria-labelledby="pills-button-icon-soups-tab"
                                    tabIndex={0}
                                >
                                    <div className="row gy-4">
                                        {allMenu.map(renderMenuItem)}
                                    </div>
                                </div>

                                <div
                                    className="tab-pane fade"
                                    id="pills-button-icon-appetizers"
                                    role="tabpanel"
                                    aria-labelledby="pills-button-icon-appetizers-tab"
                                    tabIndex={0}
                                >
                                    <div className="row gy-4">
                                        {allMenu.map(renderMenuItem)}
                                    </div>
                                </div>

                                <div
                                    className="tab-pane fade"
                                    id="pills-button-icon-mainCourse"
                                    role="tabpanel"
                                    aria-labelledby="pills-button-icon-mainCourse-tab"
                                    tabIndex={0}
                                >
                                    <div className="row gy-4">
                                        {allMenu.map(renderMenuItem)}
                                    </div>
                                </div>

                                <div
                                    className="tab-pane fade"
                                    id="pills-button-icon-indoChinese"
                                    role="tabpanel"
                                    aria-labelledby="pills-button-icon-indoChinese-tab"
                                    tabIndex={0}
                                >
                                    <div className="row gy-4">
                                        {allMenu.map(renderMenuItem)}
                                    </div>
                                </div>

                                <div
                                    className="tab-pane fade"
                                    id="pills-button-icon-Desserts"
                                    role="tabpanel"
                                    aria-labelledby="pills-button-icon-Desserts-tab"
                                    tabIndex={0}
                                >
                                    <div className="row gy-4">
                                        {allMenu.map(renderMenuItem)}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="col-xxl-3">
                    <div className="card p-0 overflow-hidden position-relative radius-12 h-100">
                        <div className="card-body p-24">
                            <h6 className="mb-4">Order Details</h6>
                            {cart.length === 0 ? (
                                <p className="">Your cart is empty</p>
                            ) : (
                                <>
                                    <div className="cart-items mb-4 pt-3">
                                        {cart.map((item) => (
                                            <div key={item.id} className="card mb-3 border">
                                                <div className="card-body p-3">
                                                    <div className="d-flex align-items-center gap-3">
                                                        <div className="flex-shrink-0">
                                                            <img
                                                                src={item.profileImg}
                                                                alt={item.name}
                                                                className="rounded-circle"
                                                                style={{ width: '60px', height: '60px', objectFit: 'cover' }}
                                                            />
                                                        </div>
                                                        <div className="flex-grow-1">
                                                            <div className="d-flex justify-content-between align-items-center">
                                                                <div>
                                                                    <p className="mb-0 fw-semibold text-md text-truncate">{item.name}</p>
                                                                    <p className="mb-0">${(item.price).toFixed(2)}</p>
                                                                </div>
                                                                <div>
                                                                    <div className="d-flex align-items-center gap-1">

                                                                        <button
                                                                            className="px-1 py-0 text-sm border border-primary"
                                                                            onClick={() => updateQuantity(item.id, item.quantity - 1)}
                                                                        >
                                                                            -
                                                                        </button>
                                                                        <span className="mx-1 text-sm">{item.quantity}</span>
                                                                        <button
                                                                            className="px-1 py-0 text-sm border border-primary"
                                                                            onClick={() => updateQuantity(item.id, item.quantity + 1)}
                                                                        >
                                                                            +
                                                                        </button>
                                                                    </div>
                                                                    <div className="mt-2 text-end">

                                                                        <button
                                                                            className="btn btn-sm btn-link text-danger p-0 ms-2"
                                                                            onClick={() => removeFromCart(item.id)}
                                                                        >
                                                                            <Icon icon="mdi:delete" className="fs-5" />
                                                                        </button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        ))}
                                    </div>
                                    <div className="order-summary border-top pt-3">
                                        <button 
                                            className="btn btn-primary w-100 py-2"
                                            disabled={cart.length === 0}
                                            onClick={handlePlaceOrder}
                                        >
                                            Place Order
                                        </button>
                                    </div>
                                </>
                            )}
                        </div>
                    </div>
                </div>
            </div>

            {/* Order Confirmation Modal */}
            {showOrderModal && (
                <>
                    <div 
                        className="modal-backdrop fade show" 
                        style={{ 
                            position: 'fixed',
                            top: 0,
                            left: 0,
                            right: 0,
                            bottom: 0,
                            backgroundColor: 'rgba(0, 0, 0, 0.5)',
                            zIndex: 1040
                        }}
                        onClick={() => setShowOrderModal(false)}
                    />
                    <div 
                        className="modal fade show" 
                        style={{ 
                            display: 'block',
                            zIndex: 1050
                        }}
                    >
                        <div className="modal-dialog modal-dialog-centered modal-lg">
                            <div className="modal-content shadow-lg">
                                <div className="modal-header border-0">
                                    <h5 className="modal-title">Confirm Your Order</h5>
                                    <button
                                        type="button"
                                        className="btn-close"
                                        onClick={() => setShowOrderModal(false)}
                                    ></button>
                                </div>
                                <div className="modal-body">
                                    <div className="order-items mb-4">
                                        <div className="d-flex justify-content-between align-items-center mb-3">
                                            <h6 className="mb-0">Order Items:</h6>
                                            <select 
                                                className="form-select form-select-sm w-auto"
                                                value={orderStatus}
                                                onChange={(e) => setOrderStatus(e.target.value)}
                                            >
                                                <option value="pending">Pending</option>
                                                <option value="preparing">Preparing</option>
                                                <option value="ready">Ready for Pickup</option>
                                                <option value="completed">Completed</option>
                                                <option value="cancelled">Cancelled</option>
                                            </select>
                                        </div>
                                        {cart.map((item) => (
                                            <div key={item.id} className="card mb-2 border">
                                                <div className="card-body p-3">
                                                    <div className="d-flex align-items-center gap-3">
                                                        <div className="flex-shrink-0">
                                                            <img
                                                                src={item.profileImg}
                                                                alt={item.name}
                                                                className="rounded-circle"
                                                                style={{ width: '50px', height: '50px', objectFit: 'cover' }}
                                                            />
                                                        </div>
                                                        <div className="flex-grow-1">
                                                            <div className="d-flex justify-content-between align-items-center">
                                                                <div>
                                                                    <p className="mb-0 fw-semibold">{item.name}</p>
                                                                    <p className="mb-0 text-secondary">Quantity: {item.quantity}</p>
                                                                </div>
                                                                <div className="text-end">
                                                                    <p className="mb-0 fw-semibold">${(item.price * item.quantity).toFixed(2)}</p>
                                                                    <p className="mb-0 text-secondary">${item.price.toFixed(2)} each</p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        ))}
                                    </div>
                                    <div className="order-summary border-top pt-3">
                                        <div className="d-flex justify-content-between mb-2">
                                            <span>Subtotal:</span>
                                            <span>${calculateSubtotal().toFixed(2)}</span>
                                        </div>
                                        <div className="d-flex justify-content-between mb-2">
                                            <span>HST Tax (13%):</span>
                                            <span>${calculateTax().toFixed(2)}</span>
                                        </div>
                                        <div className="d-flex justify-content-between mb-3 fw-bold">
                                            <span>Total:</span>
                                            <span>${calculateTotal().toFixed(2)}</span>
                                        </div>
                                    </div>
                                </div>
                                <div className="modal-footer border-0">
                                    <button
                                        type="button"
                                        className="btn btn-light"
                                        onClick={() => setShowOrderModal(false)}
                                    >
                                        Cancel
                                    </button>
                                    <button
                                        type="button"
                                        className="btn btn-primary"
                                        onClick={confirmOrder}
                                    >
                                        Confirm Order
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </>
            )}
        </div>
    );
};

export default FoodMenu;
