Nexus.Reader/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor

@inherits LayoutComponentBase
@implements IDisposable
@using NexusReader.UI.Shared.Components.Molecules
@using NexusReader.UI.Shared.Components.Atoms
@using NexusReader.Application.Abstractions.Services
@using NexusReader.UI.Shared.Services

@if (!_isFullyLoaded)
{
    <div @key='"preloader"' class="app-preloader" style="backdrop-filter: blur(15px); background: rgba(18, 18, 18, 0.95); z-index: 100000; color: #ffffff;">
        <div class="preloader-spinner"></div>
        <div class="preloader-text" style="color: #ffffff;">Synchronizing Secure Session...</div>
    </div>
}

<div @key='"hub-container"' class="hub-container @(_isMobileMenuOpen ? "mobile-menu-open" : "") @(ThemeService.IsLightMode ? "theme-light" : "theme-dark")">
    <AuthorizeView>
        <Authorized>
            <!-- Mobile Sticky Top-bar -->
            <div class="nexus-mobile-topbar">
                <button class="hamburger-btn" @onclick="ToggleMobileMenu" aria-label="Toggle Menu">
                    <NexusIcon Name="menu" Size="24" />
                </button>
                <div class="mobile-logo">
                    <NexusIcon Name="diamond" Size="20" Class="logo-icon pulsing-logo" />
                    <span class="logo-text">Nexus</span>
                </div>
                <div class="mobile-user-pill">
                    <div class="user-avatar-mini">
                        @context.User.Identity?.Name?[0].ToString().ToUpper()
                    </div>
                </div>
            </div>

            <!-- Mobile Backdrop overlay -->
            @if (_isMobileMenuOpen)
            {
                <div class="mobile-sidebar-backdrop" @onclick="CloseMobileMenu"></div>
            }

            <aside class="hub-sidebar">
                <div class="sidebar-header">
                    <div class="logo">
                        <NexusIcon Name="diamond" Size="24" Class="logo-icon" />
                        <span class="logo-text">Nexus</span>
                    </div>
                </div>
                
                <nav class="sidebar-nav">
                    <NavLink class="nav-item" href="/dashboard" Match="NavLinkMatch.All" @onclick="CloseMobileMenu" title="Pulpit" aria-label="Pulpit">
                        <div class="nav-icon">
                            <NexusIcon Name="home" Size="20" />
                        </div>
                        <span class="nav-text">Pulpit</span>
                    </NavLink>
                    <NavLink class="nav-item" href="/catalog" @onclick="CloseMobileMenu" title="Katalog" aria-label="Katalog">
                        <div class="nav-icon">
                            <NexusIcon Name="layout" Size="20" />
                        </div>
                        <span class="nav-text">Katalog</span>
                    </NavLink>
                    <NavLink class="nav-item" href="/my-books" @onclick="CloseMobileMenu" title="Moje" aria-label="Moje">
                        <div class="nav-icon">
                            <NexusIcon Name="book-open" Size="20" />
                        </div>
                        <span class="nav-text">Moje</span>
                    </NavLink>
                    <NavLink class="nav-item" href="/profile" @onclick="CloseMobileMenu" title="Konto" aria-label="Konto">
                        <div class="nav-icon">
                            <NexusIcon Name="user" Size="20" />
                        </div>
                        <span class="nav-text">Konto</span>
                    </NavLink>
                    <NavLink class="nav-item" href="/concepts-map" @onclick="CloseMobileMenu" title="Mapa Pojęć" aria-label="Mapa Pojęć">
                        <div class="nav-icon">
                            <NexusIcon Name="map" Size="20" />
                        </div>
                        <span class="nav-text">Mapa Pojęć</span>
                    </NavLink>
                    <NavLink class="nav-item" href="/intelligence" @onclick="CloseMobileMenu" title="Globalne AI" aria-label="Globalne AI">
                        <div class="nav-icon">
                            <NexusIcon Name="robot" Size="20" />
                        </div>
                        <span class="nav-text">Globalne AI</span>
                    </NavLink>
                    <NavLink class="nav-item" href="/settings" @onclick="CloseMobileMenu" title="Ustawienia" aria-label="Ustawienia">
                        <div class="nav-icon">
                            <NexusIcon Name="settings" Size="20" />
                        </div>
                        <span class="nav-text">Ustawienia</span>
                    </NavLink>
                    <NavLink class="nav-item" href="/concenters" @onclick="CloseMobileMenu" title="Koncentry" aria-label="Koncentry">
                        <div class="nav-icon">
                            <NexusIcon Name="target" Size="20" />
                        </div>
                        <span class="nav-text">Koncentry</span>
                    </NavLink>
                    <NavLink class="nav-item" href="/creator" @onclick="CloseMobileMenu" title="Kreator" aria-label="Kreator">
                        <div class="nav-icon">
                            <NexusIcon Name="edit" Size="20" />
                        </div>
                        <span class="nav-text">Kreator</span>
                    </NavLink>
                </nav>

                <div class="sidebar-footer">
                    <div class="user-brief">
                        <div class="user-avatar">
                            @context.User.Identity?.Name?[0].ToString().ToUpper()
                        </div>
                        <div class="user-details">
                            <span class="user-name">@context.User.Identity?.Name</span>
                        </div>
                    </div>
                    <button class="logout-btn" @onclick="HandleLogout" title="Wyloguj">
                        <NexusIcon Name="log-out" Size="20" />
                    </button>
                </div>
            </aside>

            <!-- Reader Mobile Dock v3 -->
            <nav class="reader-mobile-dock">
                <NavLink class="dock-item" href="/dashboard" Match="NavLinkMatch.All" title="Pulpit">
                    <NexusIcon Name="home" Size="20" />
                    <span class="dock-text">Pulpit</span>
                </NavLink>
                <NavLink class="dock-item" href="/catalog" title="Katalog">
                    <NexusIcon Name="layout" Size="20" />
                    <span class="dock-text">Katalog</span>
                </NavLink>
                <NavLink class="dock-item central-action" href="/intelligence" title="Globalne AI">
                    <div class="central-action-inner">
                        <NexusIcon Name="robot" Size="20" />
                    </div>
                    <span class="dock-text">AI</span>
                </NavLink>
                <NavLink class="dock-item" href="/my-books" title="Moje">
                    <NexusIcon Name="book-open" Size="20" />
                    <span class="dock-text">Moje</span>
                </NavLink>
                <NavLink class="dock-item" href="/profile" title="Konto">
                    <NexusIcon Name="user" Size="20" />
                    <span class="dock-text">Konto</span>
                </NavLink>
            </nav>
        </Authorized>
    </AuthorizeView>

    <main class="hub-main">
        <div class="hub-content">
            @Body
        </div>
    </main>
</div>

@code {
    [Inject] private AuthenticationStateProvider AuthStateProvider { get; set; } = default!;
    [Inject] private IIdentityService IdentityService { get; set; } = default!;
    [Inject] private NavigationManager NavigationManager { get; set; } = default!;
    [Inject] private IThemeService ThemeService { get; set; } = default!;

    private bool _isSyncing = false;
    private bool _isMobileMenuOpen = false;
    private bool _isFullyLoaded = false;

    protected override async Task OnInitializedAsync()
    {
        ThemeService.OnThemeChanged += HandleThemeChanged;

        if (_isSyncing) return;
        
        var authState = await AuthStateProvider.GetAuthenticationStateAsync();
        if (!authState.User.Identity?.IsAuthenticated ?? true)
        {
            _isSyncing = true;
            // Try to sync with server cookie
            await IdentityService.GetProfileAsync();
        }
    }

    private void HandleThemeChanged(ThemeMode mode)
    {
        InvokeAsync(StateHasChanged);
    }

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            _isFullyLoaded = true;
            StateHasChanged();
        }
    }

    private void ToggleMobileMenu()
    {
        _isMobileMenuOpen = !_isMobileMenuOpen;
    }

    private void CloseMobileMenu()
    {
        _isMobileMenuOpen = false;
    }

    private async Task HandleLogout()
    {
        CloseMobileMenu();
        await IdentityService.LogoutAsync();
        NavigationManager.NavigateTo("/account/logout-form", true);
    }

    public void Dispose()
    {
        ThemeService.OnThemeChanged -= HandleThemeChanged;
        GC.SuppressFinalize(this);
    }
}