import { useEffect, useState } from 'react'
import { ClockThreeIcon, LocationPinIcon, TargetIcon } from '../../../../icons/ExportCommonIcons'
import { useSceneContext } from '../../../../../modules/scene/sceneContext';
import { useProductContext } from '../../../../../modules/simulation/products/productContext';
import RenameInput from '../../../../ui/inputs/RenameInput';
// import NavigateCatagory from '../NavigateCatagory'

const Hrm = () => {
    const [selectedCard, setSelectedCard] = useState(0);
    const [workers, setWorkers] = useState<any[]>([]);

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

    useEffect(() => {
        if (selectedProduct) {
            const productDetails = getProductById(selectedProduct.productUuid);
            const workerDetails = productDetails?.eventDatas || [];

            const formattedWorkers = workerDetails
                .filter((worker: any) => worker.type === "human")
                .map((worker: any, index: number) => ({
                    employee: {
                        image: "",
                        name: worker.modelName,
                        employee_id: `HR-${204 + index}`,
                        status: "Active",
                    },
                    task: {
                        status: "Ongoing",
                        title: worker.taskTitle || "No Task Assigned",
                        location: {
                            floor: worker.floor || 0,
                            zone: worker.zone || "N/A"
                        },
                        planned_time_hours: worker.plannedTime || 0,
                        time_spent_hours: worker.timeSpent || 0,
                        total_tasks: worker.totalTasks || 0,
                        completed_tasks: worker.completedTasks || 0
                    },
                    actions: [
                        "Assign Task",
                        "Reassign Task",
                        "Pause",
                        "Emergency Stop"
                    ],
                    location: `Floor ${worker.floor || "-"} . Zone ${worker.zone || "-"}`
                }));

            setWorkers(formattedWorkers);
        }
    }, [selectedProduct, getProductById]);

    useEffect(() => {
        // console.log("Workers data updated:", workers);
    }, [workers]);




    // const employee_details = [
    //     {
    //         "employee": {
    //             image: "",
    //             "name": "John Doe",
    //             "employee_id": "HR-204",
    //             "status": "Active",

    //         },
    //         "task": {
    //             "status": "Ongoing",
    //             "title": "Inspecting Machine X",
    //             "location": {
    //                 "floor": 4,
    //                 "zone": "B"
    //             },
    //             "planned_time_hours": 6,
    //             "time_spent_hours": 2,
    //             "total_tasks": 12,
    //             "completed_tasks": 3
    //         },
    //         "actions": [
    //             "Assign Task",
    //             "Reassign Task",
    //             "Pause",
    //             "Emergency Stop"
    //         ],
    //         "location": "Floor 4 . Zone B"
    //     },
    //     {
    //         "employee": {
    //             image: "",
    //             "name": "Alice Smith",
    //             "employee_id": "HR-205",
    //             "status": "Active",

    //         },
    //         "task": {
    //             "status": "Ongoing",
    //             "title": "Calibrating Sensor Y",
    //             "location": {
    //                 "floor": 2,
    //                 "zone": "A"
    //             },
    //             "planned_time_hours": 4,
    //             "time_spent_hours": 1.5,
    //             "total_tasks": 10,
    //             "completed_tasks": 2
    //         },
    //         "actions": [
    //             "Assign Task",
    //             "Reassign Task",
    //             "Pause",
    //             "Emergency Stop"
    //         ],
    //         "location": "Floor 4 . Zone B"
    //     },
    //     {
    //         "employee": {
    //             image: "",
    //             "name": "Michael Lee",
    //             "employee_id": "HR-206",
    //             "status": "Active",

    //         },
    //         "task": {
    //             "status": "Ongoing",
    //             "title": "Testing Conveyor Belt Z",
    //             "location": {
    //                 "floor": 5,
    //                 "zone": "C"
    //             },
    //             "planned_time_hours": 5,
    //             "time_spent_hours": 3,
    //             "total_tasks": 8,
    //             "completed_tasks": 5
    //         },
    //         "actions": [
    //             "Assign Task",
    //             "Reassign Task",
    //             "Pause",
    //             "Emergency Stop"
    //         ],
    //         "location": "Floor 4 . Zone B"
    //     },
    // ]
    function handleRenameWorker(newName: string) {
        // console.log('newName: ', newName);

    }


    return (
        <>
            {/* <NavigateCatagory
                category={["All People", "Technician", "Operator", "Supervisor", "Safety Officer"]}
                selectedCategory={selectedCategory}
                setSelectedCategory={setSelectedCategory}
            /> */}

            <div className='hrm-container assetManagement-wrapper'>
                {workers.map((employee, index) => (
                    <div
                        className={`analysis-wrapper ${selectedCard === index ? "active" : ""}`}
                        onClick={() => setSelectedCard(index)}
                        key={index}
                    >
                        <header>
                            <div className="user-details">
                                <div className="user-image-wrapper">
                                    <img className='user-image' src={employee.employee.image} alt="" />
                                    <div className={`status ${employee.employee.status}`}></div>
                                </div>
                                <div className="details">
                                    {/* <div className="employee-name">{employee.employee.name}</div> */}
                                    <RenameInput value={employee.employee.name} onRename={handleRenameWorker} />
                                    <div className="employee-id">{employee.employee.employee_id}</div>
                                </div>
                            </div>

                            <div className="see-more">View more</div>
                        </header>

                        <div className="content">
                            {/* <div className="task-info">
                                <div className="task-wrapper">
                                    <div className="task-label">
                                        <span className='label-icon'><ListTaskIcon /></span>
                                        <span className='label-text'>Ongoing Task:</span>
                                    </div>
                                    <div className="task-title">{employee.task.title}</div>
                                </div>


                                <div className="task-wrapper">
                                    <div className="task-label">
                                        <span className='label-icon'><LocationPinIcon /></span>
                                        <span className='label-text'>Location:</span>
                                    </div>
                                    <div className="task-title">
                                        Floor {employee.task.location.floor}. Zone {employee.task.location.zone}
                                    </div>
                                </div>
                            </div> */}

                            <div className="task-stats">
                                <div className="stat-item">

                                    <div className="stat-wrapper">
                                        <span className="stat-icon"><ClockThreeIcon /></span>
                                        <span>Planned time:</span>
                                    </div>

                                    <span className='stat-value'>{employee.task.planned_time_hours} hr</span>
                                </div>
                                {/* <div className="stat-item">

                                    <div className="stat-wrapper">
                                        <span className="stat-icon"><SlectedTickIcon /></span>
                                        <span>Total Tasks:</span>
                                    </div>

                                    <span className='stat-value'>{employee.task.total_tasks}</span>
                                </div>
                                <div className="stat-item">

                                    <div className="stat-wrapper">
                                        <span className="stat-icon"><HourGlassIcon /></span>
                                        <span>Time Spent:</span>
                                    </div>

                                    <span className='stat-value'>{employee.task.time_spent_hours} hr</span>
                                </div> */}
                                <div className="stat-item">

                                    <div className="stat-wrapper">
                                        <span className="stat-icon"><TargetIcon /></span>
                                        <span>Cost per hr:</span>
                                    </div>

                                    <span className='stat-value'>{employee.task.completed_tasks}</span>
                                </div>
                            </div>

                            <div className="location-wrapper">
                                <div className="location-header">
                                    <div className="icon">
                                        <LocationPinIcon />
                                    </div>
                                    <div className="header">Location:</div>
                                </div>
                                <div className="location-value">{employee.location}</div>
                            </div>
                            <div className="task-actions">
                                {/* <button className="btn btn-default">Assign Task</button>
                                <button className="btn btn-default">Reassign Task</button> */}
                                <button className="btn btn-default">Pause</button>
                                <button className="btn btn-danger">Emergency Stop</button>
                            </div>
                        </div>

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

export default Hrm