<?php
/**
 * Quick Menu Component for HNF Resort Dashboard
 * Provides a reusable menu button that clones sidebar navigation links
 */

function renderQuickMenu($title = "Resort Dashboard", $subtitle = null) {
    $defaultSubtitle = "Welcome back, " . htmlspecialchars($_SESSION['fullname'] ?? $_SESSION['username'] ?? 'User') . "! Here's your resort overview.";
    $subtitle = $subtitle ?? $defaultSubtitle;
    
    echo '
    <div class="page-header">
        <div class="page-header-content">
            <div class="dashboard-title">
                <i class="fas fa-tachometer-alt mr-2"></i>
                ' . htmlspecialchars($title) . '
            </div>
            <p class="welcome-text mb-0">' . htmlspecialchars($subtitle) . '</p>
        </div>
        <div class="quick-menu">
            <button class="quick-menu-toggle" type="button" aria-expanded="false" aria-controls="quickMenuDropdown">
                <i class="fas fa-bars"></i>
                Menu
            </button>
            <div class="quick-menu-dropdown" id="quickMenuDropdown" role="menu" aria-hidden="true">
                <div class="quick-menu-empty text-muted small">Menu is loading...</div>
            </div>
        </div>
    </div>';
}

function renderQuickMenuCSS() {
    echo '
    <style>
        .page-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 1.5rem;
            border-radius: 15px;
            margin-bottom: 1.5rem;
            text-align: left;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
        }
        
        .page-header-content {
            flex: 1 1 auto;
            min-width: 220px;
        }
        
        .quick-menu {
            position: relative;
            flex: 0 0 auto;
        }
        
        .quick-menu-toggle {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: rgba(255, 255, 255, 0.15);
            color: #fff;
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 50px;
            padding: 0.5rem 1rem;
            font-weight: 600;
            transition: all 0.2s ease;
        }
        
        .quick-menu-toggle:hover,
        .quick-menu-toggle:focus {
            background: rgba(255, 255, 255, 0.25);
            color: #fff;
            text-decoration: none;
            outline: none;
        }

        .quick-menu-dropdown {
            position: absolute;
            top: calc(100% + 10px);
            right: 0;
            background: #ffffff;
            color: #2c3e50;
            border-radius: 12px;
            min-width: 220px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
            padding: 0.75rem 0;
            display: none;
            z-index: 1050;
        }

        .quick-menu-dropdown.show {
            display: block;
            animation: fadeInUp 0.2s ease forwards;
        }

        .quick-menu-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .quick-menu-list li a {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.6rem 1rem;
            color: inherit;
            text-decoration: none;
            font-weight: 600;
            transition: background 0.2s ease;
        }

        .quick-menu-list li a:hover,
        .quick-menu-list li a:focus {
            background: #f1f5f9;
            color: inherit;
        }

        .quick-menu-list li a i {
            width: 18px;
            text-align: center;
        }

        .quick-menu-empty {
            padding: 0.5rem 1rem;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .welcome-text {
            font-size: 1.1rem;
            opacity: 0.9;
            margin-bottom: 0;
        }
        
        .dashboard-title {
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }
        
        /* Mobile optimizations */
        @media (max-width: 768px) {
            .page-header {
                padding: 1rem;
                margin-bottom: 1rem;
                flex-direction: column;
                align-items: stretch;
            }
            
            .quick-menu {
                width: 100%;
            }

            .quick-menu-toggle {
                justify-content: center;
                width: 100%;
            }

            .quick-menu-dropdown {
                position: static;
                margin-top: 0.5rem;
                box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
            }

            .dashboard-title {
                font-size: 1.5rem;
            }
        }
    </style>';
}

function renderQuickMenuScript() {
    echo '
    <script>
        function initializeQuickMenu() {
            const $toggle = $(".quick-menu-toggle");
            const $dropdown = $("#quickMenuDropdown");

            if (!$toggle.length || !$dropdown.length) {
                return;
            }

            const $menuList = $("<ul class=\"quick-menu-list\" role=\"menu\"></ul>");
            const $links = $("#accordionSidebar .nav-item > a.nav-link").filter(function() {
                const $link = $(this);
                const href = $link.attr("href");
                const hasContent = href && href.trim().length && href.trim() !== "#";
                const isSidebarBrand = $link.closest(".sidebar-brand").length > 0;
                return hasContent && !isSidebarBrand;
            });

            let itemsAdded = 0;

            $links.each(function() {
                const $link = $(this);
                const href = $link.attr("href");
                const $icon = $link.find("i").first().clone();
                const $span = $link.find("span");
                const label = $span.length ? $.trim($span.text()) : $.trim($link.text());

                const $menuLink = $("<a></a>", {
                    href,
                    role: "menuitem"
                });

                if ($icon.length) {
                    $menuLink.append($icon);
                } else {
                    $menuLink.append("<i class=\"fas fa-angle-right\"></i>");
                }

                $menuLink.append($("<span></span>").text(label || "Menu Item"));

                $menuLink.on("click.quickMenu", function() {
                    hideQuickMenu();
                });

                const $item = $("<li></li>").append($menuLink);
                $menuList.append($item);
                itemsAdded++;
            });

            $dropdown.empty();

            if (itemsAdded) {
                $dropdown.append($menuList);
                $dropdown.attr("aria-hidden", "true");
            } else {
                $dropdown.append($("<div class=\"quick-menu-empty text-muted small\">No menu items available</div>"));
            }

            function hideQuickMenu() {
                $dropdown.removeClass("show").attr("aria-hidden", "true");
                $toggle.attr("aria-expanded", "false");
            }

            function showQuickMenu() {
                $dropdown.addClass("show").attr("aria-hidden", "false");
                $toggle.attr("aria-expanded", "true");
            }

            $toggle.off("click.quickMenu").on("click.quickMenu", function(event) {
                event.preventDefault();
                event.stopPropagation();

                const isOpen = $dropdown.hasClass("show");
                $(".quick-menu-dropdown").not($dropdown).removeClass("show").attr("aria-hidden", "true");
                $(".quick-menu-toggle").not($toggle).attr("aria-expanded", "false");

                if (isOpen) {
                    hideQuickMenu();
                } else {
                    showQuickMenu();
                }
            });

            $(document).off("click.quickMenu").on("click.quickMenu", function() {
                hideQuickMenu();
            });

            $(document).off("keydown.quickMenu").on("keydown.quickMenu", function(event) {
                if (event.key === "Escape") {
                    hideQuickMenu();
                }
            });

            $dropdown.off("click.quickMenu").on("click.quickMenu", function(event) {
                event.stopPropagation();
            });
        }

        // Auto-initialize when jQuery is ready
        $(document).ready(function() {
            if (typeof initializeQuickMenu === "function") {
                initializeQuickMenu();
            }
        });
    </script>';
}
?>