import { useEffect, useState } from 'react'
// import NavigateCatagory from '../../NavigateCatagory'
import { EyeIcon, ForkLiftIcon, KebabIcon, LocationPinIcon, RightHalfFillCircleIcon } from '../../../../../icons/ExportCommonIcons';
import assetImage from "../../../../../../assets/image/asset-image.png"
import { useSceneContext } from '../../../../../../modules/scene/sceneContext';
import { useProductContext } from '../../../../../../modules/simulation/products/productContext';
import RenameInput from '../../../../../ui/inputs/RenameInput';
const AssetManagement = () => {
    // const [selectedCategory, setSelectedCategory] = useState("All Assets");
    const [expandedAssetId, setExpandedAssetId] = useState<string | null>(null);
    const [assets, setAssets] = useState<any[]>([]);

    const { productStore } = useSceneContext();
    const { products, getProductById } = productStore();
    const { selectedProductStore } = useProductContext();
    const { selectedProduct } = selectedProductStore();



    useEffect(() => {
        if (selectedProduct) {
            const productDetails = getProductById(selectedProduct.productUuid);
            const productAssets = productDetails?.eventDatas || [];
            const grouped: Record<string, any> = {};
            productAssets.forEach((asset: any) => {
                if (asset.type === "storageUnit" || asset.type === "human") return;
                if (!grouped[asset.modelName]) {
                    grouped[asset.modelName] = {
                        id: asset.assetId,
                        name: asset.modelName,
                        model: asset.modelCode || "N/A",
                        status: asset.status || "Online",
                        usageRate: asset.usageRate || 15,
                        level: asset.level || "Level 1",
                        image: assetImage,
                        description: asset.description || "No description",
                        cost: asset.cost || 0,
                        count: 1,
                    };
                } else {
                    grouped[asset.modelName].count += 1;
                }
            });

            setAssets(Object.values(grouped));
        }
    }, [selectedProduct]);

    function handleRenameAsset(newName: string) {
        // console.log('newName: ', newName);
        // if (expandedAssetId) {
        //     setAssets(prevAssets =>
        //         prevAssets.map(asset =>
        //             asset.id === expandedAssetId ? { ...asset, name: newName } : asset
        //         )
        //     );
        // }
    }

    useEffect(() => {


    }, [assets]);

    // const dummyAssets = [
    //     {
    //         id: '1',
    //         name: 'Forklift Model X200',
    //         model: 'FLK-0025',
    //         status: 'Online',
    //         usageRate: 15,
    //         level: 'Level 1',
    //         image: assetImage,
    //         description: 'Electric forklift used for moving goods and materials in warehouse operations.',
    //         cost: 122000,
    //         count: 5,
    //     },
    //     {
    //         id: '2',
    //         name: 'Warehouse Robot WR-300',
    //         model: 'WRB-3001',
    //         status: 'Online',
    //         usageRate: 50,
    //         level: 'Level 2',
    //         image: assetImage,
    //         description: 'Automated robot for handling packages and inventory in the warehouse.',
    //         cost: 85000,
    //         count: 3,
    //     },
    //     {
    //         id: '3',
    //         name: 'Conveyor Belt System CB-150',
    //         model: 'CBS-150X',
    //         status: 'Online',
    //         usageRate: 95,
    //         level: 'Level 3',
    //         image: assetImage,
    //         description: 'High-speed conveyor belt system for efficient material handling.',
    //         cost: 45000,
    //         count: 2,
    //     },
    // ];


    return (
        <>
            {/* <NavigateCatagory
                category={["All Assets", "Machines", "Workstation", "Vehicles"]}
                selectedCategory={selectedCategory}
                setSelectedCategory={setSelectedCategory}
            /> */}

            <div className='assetManagement-container assetManagement-wrapper'>
                {assets.map((asset, index) => (
                    <div className={`assetManagement-card-wrapper ${expandedAssetId === asset.id ? "openViewMore" : ""}`} key={index}>
                        <header>
                            <div className="header-wrapper">

                                {expandedAssetId === asset.id ?
                                    <>
                                        <div className="drop-icon" onClick={() => setExpandedAssetId(null)}>▾</div>
                                        <img className='asset-image' src={asset.image} alt="" />
                                    </>
                                    :
                                    <div className="icon"><ForkLiftIcon /></div>
                                }
                                <div className="asset-details-container">
                                    <div className="asset-details">
                                        {/* <div className="asset-name">{asset.name}</div> */}
                                        <RenameInput value={asset.name} onRename={handleRenameAsset} />
                                        {asset.count !== 1 && <div>
                                            <span className="asset-id-label">x</span>
                                            <span className="asset-id">{asset.count}</span>
                                        </div>}


                                        <div className="asset-model">{asset.model}</div>
                                    </div>
                                    <div className="asset-status-wrapper">
                                        <div className={`indication ${asset.status}`}></div>
                                        <div className="status">{asset.status}</div>
                                    </div>
                                </div>

                            </div>
                            {expandedAssetId === asset.id && <div className="description">{asset.description}</div>}
                        </header>

                        {expandedAssetId === asset.id ? (
                            <div className="asset-estimate">
                                <div className="asset-estimate__unit-cost">
                                    <div className="asset-estimate__label">Cost of Asset</div>
                                    <div className="asset-estimate__value">₹ 1,22,000</div>
                                </div>

                                <div className="asset-estimate__breakdown">
                                    <div className="asset-estimate__in-scene">
                                        <div className="asset-estimate__label">In Scene</div>
                                        <div className="asset-estimate__value">5 items</div>
                                    </div>
                                    <div className="asset-estimate__total-cost">
                                        <div className="asset-estimate__label">Total Cost</div>
                                        <div className="asset-estimate__value">₹ 6,10,000</div>
                                    </div>
                                </div>

                                <div className="asset-estimate__view-button">
                                    <EyeIcon isClosed={false} />
                                    <div className="asset-estimate__view-text">View in Scene</div>
                                </div>
                            </div>


                        ) : (
                            <div className="asset-contents">
                                <div className="asset-wrapper">
                                    <div className="key-wrapper">
                                        <div className="icon"><RightHalfFillCircleIcon /></div>
                                        <div className="key">Usage rate</div>
                                    </div>
                                    <div className="progress-wrapper">
                                        <div className="progress-bar">
                                            <div
                                                className="filled-value"
                                                style={{ width: `${asset.usageRate}%` }}
                                            ></div>
                                        </div>
                                        <div className="usage-value">{asset.usageRate}%</div>
                                    </div>
                                </div>

                                <div className="asset-wrapper">
                                    <div className="key-wrapper">
                                        <div className="icon"><LocationPinIcon /></div>
                                        <div className="key">{asset.level}</div>
                                    </div>

                                    <div
                                        className="viewMore"
                                        onClick={() =>
                                            setExpandedAssetId(expandedAssetId === asset.id ? null : asset.id)
                                        }
                                    >
                                        <div className="value">{expandedAssetId === asset.id ? "View Less" : "View More"}</div>
                                        <div className="icon"><KebabIcon /></div>
                                    </div>

                                </div>


                            </div>

                        )}

                    </div>

                ))}
            </div >
        </>
    )
}

export default AssetManagement


