NavMenu.razor

@implements IDisposable

@inject NavigationManager NavigationManager
@inject UserContextService UserContext
@inject ThemeService ThemeService
@inject IJSRuntime JSRuntime


<div class="top-row ps-3 navbar navbar-dark">
    <div class="container-fluid d-flex justify-content-between align-items-center">
        <a class="navbar-brand" href="">Aquiis.SimpleStart</a>
        <div class="d-flex gap-2">
            <button class="btn btn-link p-0" @onclick="ToggleTheme" title="Toggle theme">
                <i class="bi @GetThemeIcon()" style="font-size: 1.4rem;"></i>
            </button>
        </div>
    </div>
</div>

<input type="checkbox" title="Navigation menu" class="navbar-toggler" />

<div class="nav-scrollable">
    <nav class="nav flex-column">
        
        <OrganizationAuthorizeView Roles="Owner,Administrator">
            <div class="nav-item px-3">
                <NavLink class="nav-link" href="administration/settings/application" Match="NavLinkMatch.All">
                    <div><span class="bi bi-window-dock" aria-hidden="true"></span>Application</div>
                </NavLink>
            </div>
            <div class="nav-item px-3">
                <NavLink class="nav-link" href="@($"administration/organizations/{OrganizationId}")">
                    <div><span class="bi bi-building" aria-hidden="true"></span>Organization</div>
                </NavLink>
            </div>
        </OrganizationAuthorizeView>

        <OrganizationAuthorizeView Roles="Owner,Administrator,PropertyManager">
            <hr class="nav-separator" />
            <div class="nav-item px-3">
                <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                    <div><span class="bi bi-speedometer" aria-hidden="true"></span>Dashboard</div>
                </NavLink>
            </div>
            <div class="nav-item px-3">
                <NavLink class="nav-link" href="calendar">
                    <div><span class="bi bi-calendar-fill" aria-hidden="true"></span>Calendar</div>
                </NavLink>
            </div>
            <div class="nav-item px-3">
                <NavLink class="nav-link" href="propertymanagement/properties">
                    <div><span class="bi bi-house-fill" aria-hidden="true"></span>Properties</div>
                </NavLink>
            </div>
            <div class="nav-item px-3">
                <NavLink class="nav-link" href="propertymanagement/repairs">
                    <div><span class="bi bi-tools" aria-hidden="true"></span>Repairs</div>
                </NavLink>
            </div>
            <div class="nav-item px-3">
                <NavLink class="nav-link" href="reports">
                    <div><span class="bi bi-file-earmark-bar-graph" aria-hidden="true"></span>Reports</div>
                </NavLink>
            </div>
        </OrganizationAuthorizeView>
        
        <OrganizationAuthorizeView Roles="User">
            <hr class="nav-separator" />
            <div class="nav-item px-3">
                <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                    <div><span class="bi bi-speedometer" aria-hidden="true"></span>Dashboard</div>
                </NavLink>
            </div>
            <div class="nav-item px-3">
                <NavLink class="nav-link" href="propertymanagement/properties">
                    <div><span class="bi bi-house-fill" aria-hidden="true"></span>Properties</div>
                </NavLink>
            </div>
        </OrganizationAuthorizeView>

        <AuthorizeView>
            <Authorized>
                <div class="nav-item px-3">
                    <NavLink class="nav-link" href="Account/Manage">
                        <span class="bi bi-person-fill-nav-menu" aria-hidden="true"></span> @context.User.Identity?.Name
                    </NavLink>
                </div>
                <div class="nav-item px-3">
                    <form action="Account/Logout" method="post">
                        <AntiforgeryToken />
                        <input type="hidden" name="ReturnUrl" value="@currentUrl" />
                        <button type="submit" class="nav-link">
                            <span class="bi bi-arrow-bar-left-nav-menu" aria-hidden="true"></span> Logout
                        </button>
                    </form>
                </div>
                <div class="nav-item px-3">
                    <div class="dropdown">
                        <button class="nav-link dropdown-toggle" type="button" id="brandThemeDropdown" 
                                @onclick="ToggleBrandThemeDropdown" 
                                @onclick:stopPropagation="true">
                            <span class="bi bi-palette-fill-nav-menu" aria-hidden="true"></span> Theme: @FormatBrandThemeName(ThemeService.CurrentBrandTheme)
                        </button>
                        @if (showBrandThemeDropdown)
                        {
                            <ul class="dropdown-menu show" style="position: relative;">
                                @foreach (var theme in AvailableBrandThemes)
                                {
                                    <li>
                                        <button class="dropdown-item @(ThemeService.CurrentBrandTheme == theme ? "active" : "")" 
                                                type="button"
                                                @onclick="() => SelectBrandTheme(theme)"
                                                @onclick:stopPropagation="true">
                                            @FormatBrandThemeName(theme)
                                        </button>
                                    </li>
                                }
                            </ul>
                        }
                    </div>
                </div>
            </Authorized>
            <NotAuthorized>
                <div class="nav-item px-3">
                    <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                        <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
                    </NavLink>
                </div>
                <div class="nav-item px-3">
                    <NavLink class="nav-link" href="Account/Register">
                        <span class="bi bi-person-nav-menu" aria-hidden="true"></span> Register
                    </NavLink>
                </div>
                <div class="nav-item px-3">
                    <NavLink class="nav-link" href="Account/Login">
                        <span class="bi bi-person-badge-nav-menu" aria-hidden="true"></span> Login
                    </NavLink>
                </div>
                <div class="nav-item px-3">
                    <div class="dropdown">
                        <button class="nav-link dropdown-toggle" type="button" 
                                @onclick="ToggleBrandThemeDropdown"
                                @onclick:stopPropagation="true">
                            <span class="bi bi-palette-fill-nav-menu" aria-hidden="true"></span> Theme: @FormatBrandThemeName(ThemeService.CurrentBrandTheme)
                        </button>
                        @if (showBrandThemeDropdown)
                        {
                            <ul class="dropdown-menu show" style="position: relative;">
                                @foreach (var theme in AvailableBrandThemes)
                                {
                                    <li>
                                        <button class="dropdown-item @(ThemeService.CurrentBrandTheme == theme ? "active" : "")" 
                                                type="button"
                                                @onclick="() => SelectBrandTheme(theme)"
                                                @onclick:stopPropagation="true">
                                            @FormatBrandThemeName(theme)
                                        </button>
                                    </li>
                                }
                            </ul>
                        }
                    </div>
                </div>
            </NotAuthorized>
        </AuthorizeView>
    </nav>
</div>

@code {
    private string? currentUrl;
    private string currentTheme = "light";
    private bool showBrandThemeDropdown = false;

    private string OrganizationId = string.Empty;

    // Available brand themes - add new themes here
    private readonly List<string> AvailableBrandThemes = new()
    {
        "bootstrap",
        "obsidian",
        "teal"
    };

    protected override async Task OnInitializedAsync()
    {
        currentUrl = NavigationManager.ToBaseRelativePath(NavigationManager.Uri);
        NavigationManager.LocationChanged += OnLocationChanged;
        ThemeService.OnThemeChanged += OnThemeChanged;
        ThemeService.OnBrandThemeChanged += OnBrandThemeChanged;
        currentTheme = ThemeService.CurrentTheme;
        
        var orgId = await UserContext.GetActiveOrganizationIdAsync();
        OrganizationId = orgId?.ToString() ?? string.Empty;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            try
            {
                // Read current DOM attributes that were set by theme.js initialization
                var domTheme = await JSRuntime.InvokeAsync<string>("eval", 
                    "document.documentElement.getAttribute('data-bs-theme') || localStorage.getItem('theme') || 'light'");
                var domBrandTheme = await JSRuntime.InvokeAsync<string>("eval", 
                    "document.documentElement.getAttribute('data-brand-theme') || localStorage.getItem('brandTheme') || 'bootstrap'");
                
                // Sync the service with the DOM state (which was set by theme.js)
                if (ThemeService.CurrentTheme != domTheme)
                {
                    ThemeService.SetTheme(domTheme);
                }
                
                if (ThemeService.CurrentBrandTheme != domBrandTheme)
                {
                    ThemeService.SetBrandTheme(domBrandTheme);
                }
                
                // Force UI refresh to reflect synced theme
                StateHasChanged();
                
                // Also ensure DOM attributes are still set (in case Blazor cleared them)
                await JSRuntime.InvokeVoidAsync("themeManager.setTheme", ThemeService.CurrentTheme);
                await JSRuntime.InvokeVoidAsync("themeManager.setBrandTheme", ThemeService.CurrentBrandTheme);
            }
            catch (Exception ex)
            {
                Console.WriteLine($"Error loading themes: {ex.Message}");
                // Fallback if localStorage not available
                ThemeService.SetTheme("light");
                ThemeService.SetBrandTheme("bootstrap");
                await JSRuntime.InvokeVoidAsync("themeManager.setTheme", "light");
                await JSRuntime.InvokeVoidAsync("themeManager.setBrandTheme", "bootstrap");
            }
        }
    }

    private async Task ToggleTheme()
    {
        try
        {
            ThemeService.ToggleTheme();
            currentTheme = ThemeService.CurrentTheme;
            // Save to localStorage and update DOM immediately
            await JSRuntime.InvokeVoidAsync("themeManager.setTheme", ThemeService.CurrentTheme);
            
            // Force a complete page refresh to apply theme changes immediately
            NavigationManager.Refresh(forceReload: false);
            
            Console.WriteLine($"Theme toggled to: {ThemeService.CurrentTheme}");
        }
        catch (Exception ex)
        {
            Console.WriteLine($"Error toggling theme: {ex.Message}");
        }
    }

    private async Task SelectBrandTheme(string brandTheme)
    {
        try
        {
            Console.WriteLine($"SelectBrandTheme called with: {brandTheme}");
            
            // Close dropdown first
            showBrandThemeDropdown = false;
            StateHasChanged();
            
            // Update service and JavaScript
            ThemeService.SetBrandTheme(brandTheme);
            await JSRuntime.InvokeVoidAsync("themeManager.setBrandTheme", brandTheme);
            
            Console.WriteLine($"Brand theme changed to: {ThemeService.CurrentBrandTheme}");
            
            // Force UI refresh
            NavigationManager.Refresh(forceReload: false);
        }
        catch (Exception ex)
        {
            Console.WriteLine($"Error changing brand theme: {ex.Message}");
            showBrandThemeDropdown = false;
            StateHasChanged();
        }
    }

    private void ToggleBrandThemeDropdown()
    {
        showBrandThemeDropdown = !showBrandThemeDropdown;
        Console.WriteLine($"Dropdown toggled: {showBrandThemeDropdown}");
        StateHasChanged();
    }

    private string FormatBrandThemeName(string theme)
    {
        return theme switch
        {
            "bootstrap" => "Bootstrap",
            "obsidian" => "Obsidian",
            "teal" => "Teal",
            _ => theme.Substring(0, 1).ToUpper() + theme.Substring(1)
        };
    }

    private string GetThemeIcon()
    {
        return currentTheme == "light" ? "bi-moon-fill" : "bi-sun-fill";
    }

    private void OnThemeChanged()
    {
        InvokeAsync(async () =>
        {
            try
            {
                currentTheme = ThemeService.CurrentTheme;
                // Re-apply theme when service notifies of change
                await JSRuntime.InvokeVoidAsync("themeManager.setTheme", ThemeService.CurrentTheme);
            }
            catch { }
            StateHasChanged();
        });
    }

    private void OnBrandThemeChanged()
    {
        InvokeAsync(async () =>
        {
            try
            {
                // Re-apply brand theme when service notifies of change
                await JSRuntime.InvokeVoidAsync("themeManager.setBrandTheme", ThemeService.CurrentBrandTheme);
            }
            catch { }
            StateHasChanged();
        });
    }

    private async void OnLocationChanged(object? sender, LocationChangedEventArgs e)
    {
        var newUrl = NavigationManager.ToBaseRelativePath(e.Location);
        
        // Only update if URL actually changed (prevents visual glitch on same-link clicks)
        if (newUrl == currentUrl)
            return;
            
        currentUrl = newUrl;
        
        // Re-apply current theme and brand theme after navigation
        try
        {
            await JSRuntime.InvokeVoidAsync("themeManager.setTheme", ThemeService.CurrentTheme);
            await JSRuntime.InvokeVoidAsync("themeManager.setBrandTheme", ThemeService.CurrentBrandTheme);
        }
        catch { }
        
        StateHasChanged();
    }

    public void Dispose()
    {
        NavigationManager.LocationChanged -= OnLocationChanged;
        ThemeService.OnThemeChanged -= OnThemeChanged;
        ThemeService.OnBrandThemeChanged -= OnBrandThemeChanged;
    }
}