// Shared components for PRISM application

export class MenuBar {
    constructor(currentPage = 'dashboard') {
        this.currentPage = currentPage;
        this.injectStyles();
    }

    injectStyles() {
        // Only inject styles once
        if (document.getElementById('menubar-styles')) {
            return;
        }

        const style = document.createElement('style');
        style.id = 'menubar-styles';
        style.textContent = `
            .header {
                background: linear-gradient(135deg, var(--gruvbox-bg2) 0%, var(--gruvbox-bg1) 100%);
                color: var(--gruvbox-fg0);
                padding: 1.25rem 2rem;
                display: flex;
                justify-content: space-between;
                align-items: center;
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
                border-bottom: 1px solid var(--gruvbox-bg3);
                backdrop-filter: blur(10px);
            }

            .header h1 {
                font-size: 1.5rem;
                font-weight: 700;
                color: var(--gruvbox-orange);
            }

            .nav-links {
                display: flex;
                gap: 1rem;
                align-items: center;
            }

            .nav-link {
                color: var(--gruvbox-fg1);
                text-decoration: none;
                padding: 0.5rem 1rem;
                border-radius: 6px;
                transition: all 0.3s ease;
                font-weight: 500;
            }

            .nav-link:hover {
                background: var(--gruvbox-bg3);
                color: var(--gruvbox-fg0);
            }

            .nav-link.active {
                background: var(--gruvbox-blue);
                color: var(--gruvbox-bg0);
            }

            .user-info {
                display: flex;
                align-items: center;
                gap: 1rem;
            }

            .user-info span {
                color: var(--gruvbox-fg1);
                font-weight: 500;
            }

            .logout-btn {
                background: var(--gruvbox-red);
                color: var(--gruvbox-fg0);
                border: 1px solid var(--gruvbox-bg3);
                padding: 0.625rem 1.25rem;
                border-radius: 6px;
                cursor: pointer;
                transition: all 0.3s ease;
                font-weight: 600;
            }

            .logout-btn:hover {
                background: var(--gruvbox-orange);
                transform: translateY(-1px);
                box-shadow: 0 4px 12px rgba(251, 73, 52, 0.3);
            }

            @media (max-width: 768px) {
                .header {
                    padding: 1rem;
                    flex-direction: column;
                    gap: 1rem;
                    text-align: center;
                }

                .nav-links {
                    flex-wrap: wrap;
                }
            }
        `;
        document.head.appendChild(style);
    }

    render(userName = 'Loading...') {
        return `
            <header class="header">
                <h1>🏗️ PRISM</h1>
                <nav class="nav-links">
                    <a href="/dashboard.html" class="nav-link ${this.currentPage === 'dashboard' ? 'active' : ''}">Dashboard</a>
                    <a href="/jobs.html" class="nav-link ${this.currentPage === 'jobs' ? 'active' : ''}">Jobs</a>
                </nav>
                <div class="user-info">
                    <span id="user-name">${userName}</span>
                    <button class="logout-btn" onclick="logout()">Logout</button>
                </div>
            </header>
        `;
    }

    updateUserName(name) {
        const userNameElement = document.getElementById('user-name');
        if (userNameElement) {
            userNameElement.textContent = name;
        }
    }
}

// Utility function to initialize the menu bar
export function initMenuBar(currentPage, userName = 'Loading...') {
    const menuBar = new MenuBar(currentPage);

    // Insert the menu bar at the beginning of the body
    const body = document.body;
    const firstChild = body.firstElementChild;

    // Create a temporary container for the menu HTML
    const tempDiv = document.createElement('div');
    tempDiv.innerHTML = menuBar.render(userName).trim();

    // Insert the menu bar before the first child
    if (firstChild) {
        body.insertBefore(tempDiv.firstElementChild, firstChild);
    } else {
        body.appendChild(tempDiv.firstElementChild);
    }

    return menuBar;
}

// Export a function to get the current page from the URL
export function getCurrentPage() {
    const path = window.location.pathname;
    if (path.includes('jobs.html')) {
        return 'jobs';
    }
    return 'dashboard';
}