import React, {useEffect, useRef, useState} from "react";

function Item({active, icon, label, onClick, collapsed}) {
    return (
        <button
            onClick={onClick}
            className={`side-item ${active ? "active" : ""}`}
            title={label}
            type="button"
        >
            <span className="side-icon">{icon}</span>
            {!collapsed && <span className="side-label">{label}</span>}
        </button>
    );
}

export default function SideMenu({activeView, setActiveView}) {
    const [open, setOpen] = useState(false);
    const rootRef = useRef(null);

    // close on click outside (ако е open преку click)
    useEffect(() => {
        function onDocClick(e) {
            if (!open) return;
            if (!rootRef.current) return;
            if (!rootRef.current.contains(e.target)) setOpen(false);
        }

        document.addEventListener("mousedown", onDocClick);
        return () => document.removeEventListener("mousedown", onDocClick);
    }, [open]);

    const collapsed = !open;

    return (
        <aside
            ref={rootRef}
            className={`side ${open ? "open" : "collapsed"}`}
            onMouseEnter={() => setOpen(true)}   // hover open
            onMouseLeave={() => setOpen(false)}  // hover close
        >
            {/* мал “handle” што се гледа секогаш */}
            <button
                className="side-handle"
                type="button"
                onClick={() => setOpen((v) => !v)}  // click toggle (ако не сакаш click, избриши ова)
                aria-label="Toggle menu"
                title="Menu"
            >
                {open ? "◀" : "▶"}
            </button>

            <div className="side-inner">
                <div className="side-brand">
                    <div className="side-brand-dot"/>
                    {!collapsed && (
                        <div className="side-brand-text">
                            <div className="side-brand-title">netIntel</div>
                            <div className="side-brand-sub">tenant dashboard</div>
                        </div>
                    )}
                </div>


                <div className="side-section">
                    {/*<div className="side-section-title">MAIN</div>*/}

                    <Item
                        collapsed={collapsed}
                        active={activeView === "dashboard"}
                        icon="🖥️"
                        label="Dashboard"
                        onClick={() => setActiveView("dashboard")}
                    />

                    <Item
                        collapsed={collapsed}
                        active={activeView === "visualizations"}
                        icon="📈"
                        label="Visualizations"
                        onClick={() => setActiveView("visualizations")}
                    />

                    <Item
                        collapsed={collapsed}
                        active={activeView === "account"}
                        icon="👤"
                        label="Account"
                        onClick={() => setActiveView("account")}
                    />
                </div>

                {!collapsed && (
                    <div className="side-footer">
                        <div className="side-footer-hint">Tip: користи Visualizations за графови</div>
                    </div>
                )}
            </div>
        </aside>
    );
}