import React, { useEffect, useState, useMemo, useCallback } from "react";
import { HelpIcon, WifiIcon } from "../icons/DashboardIcon";
import { useLogger } from "../ui/log/LoggerContext";
import { GetLogIcon } from "./getLogIcons";
import { CurserLeftIcon, CurserMiddleIcon, CurserRightIcon } from "../icons/LogIcons";
import ShortcutHelper from "./shortcutHelper";
import { useShortcutStore } from "../../store/builder/store";
import { usePlayButtonStore } from "../../store/ui/usePlayButtonStore";
import useModuleStore, { useSubModuleStore } from "../../store/ui/useModuleStore";
import { mouseActionHelper } from "../../utils/mouseUtils/mouseHelper";
import { useMouseNoteStore } from "../../store/ui/useUIToggleStore";
import { useSceneContext } from "../../modules/scene/sceneContext";

const Footer: React.FC = () => {
    const { logs, setIsLogListVisible } = useLogger();
    const lastLog = logs[logs.length - 1] || null;

    const { setActiveModule } = useModuleStore();
    const { setSubModule } = useSubModuleStore();
    const { isPlaying } = usePlayButtonStore();
    const { showShortcuts, setShowShortcuts } = useShortcutStore();
    const { versionStore } = useSceneContext();
    const { selectedVersion, setVersionHistoryVisible } = versionStore();

    const { Leftnote, Middlenote, Rightnote } = useMouseNoteStore();
    const [isOnline, setIsOnline] = useState<boolean>(navigator.onLine);

    // -------------------- Online/Offline Handlers --------------------
    const handleOnline = useCallback(() => {
        echo.success("You are back Online");
        setIsOnline(true);
    }, []);

    const handleOffline = useCallback(() => {
        echo.warn("Changes made now might not be saved");
        echo.error("You are now Offline.");
        setIsOnline(false);
    }, []);

    useEffect(() => {
        window.addEventListener("online", handleOnline);
        window.addEventListener("offline", handleOffline);
        return () => {
            window.removeEventListener("online", handleOnline);
            window.removeEventListener("offline", handleOffline);
        };
    }, [handleOnline, handleOffline]);

    // -------------------- Mouse Buttons --------------------
    const mouseButtons = useMemo(
        () => [
            { icon: <CurserLeftIcon />, label: Leftnote || "Pan", mouse: "left" },
            { icon: <CurserMiddleIcon />, label: Middlenote || "Scroll Zoom", mouse: "middle" },
            { icon: <CurserRightIcon />, label: Rightnote || "Orbit / Cancel action", mouse: "right" },
        ],
        [Leftnote, Middlenote, Rightnote]
    );

    // -------------------- Mouse Helper --------------------
    useEffect(() => {
        const cleanup = mouseActionHelper();
        return () => cleanup();
    }, []);

    return (
        <div className="footer-container">
            <div className="footer-wrapper">
                {/* Mouse Button Info */}
                <div className="selection-wrapper">
                    {mouseButtons.map(({ icon, label, mouse }) => (
                        <div className="selector-wrapper" key={mouse}>
                            <div className="icon">{icon}</div>
                            <div className="selector">{label}</div>
                        </div>
                    ))}
                </div>

                {/* Logs and Version */}
                <div className="logs-wrapper">
                    <div className="bg-dummy left-top" />
                    <div className="bg-dummy right-bottom" />

                    <div className="log-container">
                        <button id="log-details-buttton" className={`logs-detail ${lastLog?.type ?? ""}`} onClick={() => setIsLogListVisible(true)}>
                            {lastLog ? (
                                <>
                                    <span className="log-icon">{GetLogIcon(lastLog.type)}</span>
                                    <span className="log-message">{lastLog.message}</span>
                                </>
                            ) : (
                                "There are no logs to display at the moment."
                            )}
                        </button>
                    </div>

                    <div
                        className="version"
                        onClick={() => {
                            setVersionHistoryVisible(true);
                            setSubModule("properties");
                            setActiveModule("builder");
                        }}
                    >
                        {selectedVersion?.version ?? "v 0.0.0"}
                        <div className="icon">
                            <HelpIcon />
                        </div>
                    </div>

                    <div className={`wifi-connection ${isOnline ? "connected" : "disconnected"}`}>
                        <div className="icon">
                            <WifiIcon />
                        </div>
                        <div className="tooltip">{isOnline ? "Online" : "Offline"}</div>
                    </div>
                </div>
            </div>

            {/* Shortcut Helper */}
            {!isPlaying && showShortcuts && (
                <div className="shortcut-helper-overlay visible">
                    <ShortcutHelper setShowShortcuts={setShowShortcuts} />
                </div>
            )}
        </div>
    );
};

export default Footer;
