import { useParams } from "react-router-dom";
import React, { useState, useRef, useEffect, Suspense } from "react";
import { CompareLayoutIcon, LayoutIcon, ResizerIcon } from "../../icons/SimulationIcons";
import { useLoadingProgress, useIsComparing } from "../../../store/builder/store";
import { useSimulationState } from "../../../store/simulation/useSimulationStore";
import { usePlayButtonStore } from "../../../store/ui/usePlayButtonStore";
import { useSceneContext } from "../../../modules/scene/sceneContext";
import { getAllProductsApi } from "../../../services/simulation/products/getallProductsApi";
import Search from "../inputs/Search";
import OuterClick from "../../../utils/outerClick";
import Scene from "../../../modules/scene/scene";
import useRestStates from "../../../hooks/useResetStates";

import { getVersionHistoryApi } from "../../../services/factoryBuilder/versionControl/getVersionHistoryApi";
import { validateSimulationDataApi } from "../../../services/simulation/comparison/validateSimulationDataApi";

const CompareLayOut = () => {
    const { clearComparisonState, comparisonScene, setComparisonState } = useSimulationState();
    const { versionStore } = useSceneContext();
    const { versionHistory, selectedVersion, setSelectedVersion, clearSelectedVersion, setVersions } = versionStore();
    const { setLoadingProgress } = useLoadingProgress();
    const [width, setWidth] = useState("50vw");
    const [isResizing, setIsResizing] = useState(false);
    const [showLayoutDropdown, setShowLayoutDropdown] = useState(false);
    const wrapperRef = useRef<HTMLDivElement>(null);
    const startWidthRef = useRef<number>(0);
    const startXRef = useRef<number>(0);
    const { setIsComparing } = useIsComparing();
    const { loadingProgress } = useLoadingProgress();
    const { setIsPlaying } = usePlayButtonStore();
    const { projectId } = useParams();
    const { resetStates } = useRestStates();
    useEffect(() => {
        return () => {
            resetStates();
        };
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    useEffect(() => {
        if (!projectId) return;

        getVersionHistoryApi(projectId)
            .then((data) => {
                const versions: VersionHistory = [];
                data.versions.forEach((version: any) => {
                    versions.push({
                        version: version.version,
                        versionId: version.versionId,
                        versionName: version.versionName,
                        versionDescription: version.description,
                        timeStamp: version.createdAt,
                        createdBy: version.createdBy.userName,
                    });
                });
                setVersions(versions);
            })
            .catch(() => {});
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [projectId]);

    useEffect(() => {
        if (!comparisonScene) {
            clearSelectedVersion();
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [comparisonScene]);

    OuterClick({
        contextClassName: ["displayLayouts-container", "selectLayout"],
        setMenuVisible: () => setShowLayoutDropdown(false),
    });

    const handleStartResizing = (e: React.MouseEvent) => {
        e.preventDefault();
        setIsResizing(true);
        startXRef.current = e.clientX;
        if (wrapperRef.current) {
            startWidthRef.current = wrapperRef.current.getBoundingClientRect().width;
        }
    };

    const handleMouseMove = (e: MouseEvent) => {
        if (!isResizing || !wrapperRef.current) return;

        const dx = startXRef.current - e.clientX;
        const newWidthPx = startWidthRef.current + dx;
        const viewportWidth = window.innerWidth;
        const newWidthVw = (newWidthPx / viewportWidth) * 100;

        if (newWidthVw <= 10) {
            setWidth("0px");
        } else if (newWidthVw <= 90) {
            setWidth(`${newWidthPx}px`);
        }
    };

    const handleMouseUp = () => {
        if (!isResizing) return;

        if (wrapperRef.current) {
            const finalWidthPx = wrapperRef.current.getBoundingClientRect().width;
            const viewportWidth = window.innerWidth;
            const finalWidthVw = (finalWidthPx / viewportWidth) * 100;

            if (finalWidthVw <= 10) {
                setWidth("0px");
                setIsComparing(false);
                clearComparisonState();
                setIsPlaying(false);
            } else {
                setWidth(`${finalWidthVw}vw`);
            }
        }

        setIsResizing(false);
    };

    useEffect(() => {
        if (isResizing) {
            window.addEventListener("mousemove", handleMouseMove);
            window.addEventListener("mouseup", handleMouseUp);
            document.body.classList.add("resizing-active");
        }

        return () => {
            window.removeEventListener("mousemove", handleMouseMove);
            window.removeEventListener("mouseup", handleMouseUp);
            document.body.classList.remove("resizing-active");
        };
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [isResizing]);

    // Maintain proportional width on window resize
    useEffect(() => {
        const handleResize = () => {
            if (!wrapperRef.current || isResizing) return;

            const currentWidth = wrapperRef.current.style.width;
            if (currentWidth === "0px" || currentWidth.endsWith("vw")) return;

            const pxWidth = parseFloat(currentWidth);
            const vwWidth = (pxWidth / window.innerWidth) * 100;
            setWidth(`${vwWidth}vw`);
        };

        window.addEventListener("resize", handleResize);
        return () => window.removeEventListener("resize", handleResize);
    }, [isResizing]);

    const handleSelectLayout = (version: Version) => {
        getAllProductsApi(projectId || "", version.versionId || "").then((data) => {
            if (data && data.length > 0) {
                setSelectedVersion(version);
                const comparisonData = {
                    productUuid: data[0].productUuid,
                    productName: data[0].productName,
                    versionUuid: version.versionId,
                    versionName: version.versionName,
                };
                setComparisonState(comparisonData);
                setLoadingProgress(1);
                const singleData = {
                    projectId: projectId,
                    versionId: version.versionId, 
                    productUuid: data[0].productUuid, 
                };

                validateSimulationDataApi(singleData).then((getData) => {
                    echo.log(getData.message);
                    const getSimulate = getData?.data?.existingSimulatedData;

                    if (!getSimulate) return;
                    // addSimulationRecord(projectId, version?.versionId || "", data[0].productUuid || "", getSimulate.data);
                });
            }
        });
    };

    return (
        <div className={`compareLayOut-wrapper ${width === "0px" ? "closed" : ""}`} ref={wrapperRef} style={{ width }}>
            {loadingProgress === 0 && selectedVersion?.versionId && (
                <button title="resize-canvas" id="compare-resize-slider-btn" className="resizer" onMouseDown={handleStartResizing}>
                    <ResizerIcon />
                </button>
            )}
            <div className="chooseLayout-container">
                {selectedVersion?.versionId && (
                    <div className="compare-layout-canvas-container">
                        <Suspense fallback={null}>
                            <Scene layout="Comparison Layout" />
                        </Suspense>
                    </div>
                )}

                {width !== "0px" &&
                    !selectedVersion?.versionId && ( // Show only if no layout selected
                        <div className="chooseLayout-wrapper">
                            <div className="icon">
                                <CompareLayoutIcon />
                            </div>
                            <div className="value">Choose Version to compare</div>
                            <button className="selectLayout" onClick={() => setShowLayoutDropdown(!showLayoutDropdown)}>
                                Select Version
                            </button>

                            {showLayoutDropdown && (
                                <div className="displayLayouts-container">
                                    <div className="header">Versions</div>
                                    <Search onChange={() => {}} />
                                    <div className="layouts-container">
                                        {versionHistory.map((version) => (
                                            <button
                                                key={version.versionId}
                                                className="layout-wrapper"
                                                onClick={() => {
                                                    handleSelectLayout(version);
                                                    setShowLayoutDropdown(false);
                                                }}
                                            >
                                                <LayoutIcon />
                                                <div className="layout">{version.versionName}</div>
                                            </button>
                                        ))}
                                    </div>
                                </div>
                            )}
                        </div>
                    )}

                {/* Always show after layout is selected */}
            </div>
        </div>
    );
};

export default CompareLayOut;
