@inherits LayoutComponentBase
@attribute [Authorize]
@using Microsoft.AspNetCore.Components.Authorization
@inject AuthenticationStateProvider AuthProvider
@inject IJSRuntime JS

<div class="app-shell">
    <nav class="topbar navbar navbar-expand-md navbar-dark topbar-gradient">
        <div class="container-fluid">
            <!-- Toggler: öffnet auf Mobil das Offcanvas #sideMenu -->
            <button class="navbar-toggler d-inline-flex d-md-none"
                    type="button"
                    data-bs-toggle="offcanvas"
                    data-bs-target="#sideMenu"
                    aria-controls="sideMenu"
                    aria-label="Menü">
                <span class="navbar-toggler-icon"></span>
            </button>

            <a class="navbar-brand ms-2">Werksverkauf Scanner</a>

            <AuthorizeView>
                <Authorized>
                    <div class="ms-auto d-none d-md-flex align-items-center gap-3">
                        <span class="text-white-50">@context.User.Identity?.Name</span>
                        <form method="post" action="/auth/logout" class="m-0">
                            <button type="submit" class="btn btn-sm btn-outline-light">Logout</button>
                        </form>
                    </div>
                </Authorized>
            </AuthorizeView>
        </div>
    </nav>

    <div class="body-row">
        <!-- DESKTOP-SIDEBAR (ab md sichtbar) -->
        <aside class="sidebar border-end d-none d-md-block">
            <div class="p-3">
                <ul class="nav flex-column gap-1">
                    <li class="nav-item">
                        <NavLink class="nav-link text-white" href="/" Match="NavLinkMatch.All">Start</NavLink>
                    </li>
                    <li class="nav-item">
                        <NavLink class="nav-link text-white" href="/inventur" Match="NavLinkMatch.Prefix">Inventur</NavLink>
                    </li>                    
                </ul>
            </div>
        </aside>

        <!-- MOBILE-OFFCANVAS (unter md als Overlay) -->
        <AuthorizeView>
            <Authorized>
                <div id="sideMenu"
                     class="offcanvas offcanvas-start d-md-none sidebar-offcanvas"
                     tabindex="-1"
                     aria-labelledby="sideMenuLabel">
                    <div class="offcanvas-header">
                        <h5 class="offcanvas-title text-white" id="sideMenuLabel">Menü</h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                    </div>

                    <div class="offcanvas-body p-3 d-flex flex-column">
                        <ul class="nav flex-column gap-1 mb-3">
                            <li class="nav-item">
                                <NavLink class="nav-link text-white" href="/" Match="NavLinkMatch.All"
                                         @onclick="CloseMenu">Start</NavLink>
                            </li>
                            <li class="nav-item">
                                <NavLink class="nav-link text-white" href="/inventur" Match="NavLinkMatch.Prefix"
                                         @onclick="CloseMenu">Inventur</NavLink>
                            </li>
                        </ul>

                        <div class="mt-auto pt-3 border-top border-light">
                            <div class="small text-white-50 mb-2">@context.User.Identity?.Name</div>
                            <form method="post" action="/auth/logout" class="m-0">
                                <button type="submit" class="btn btn-outline-light w-100" @onclick="CloseMenu">Logout</button>
                            </form>
                        </div>
                    </div>
                </div>
            </Authorized>
        </AuthorizeView>


        <main class="content d-flex flex-column">
            <div class="flex-grow-1 container-fluid p-3 p-md-4">
                @Body
            </div>
            <footer class="border-top py-2 text-center text-muted small bg-white">
                &copy; @DateTime.Now.Year Lambertz – ScannerPilot
            </footer>
        </main>
    </div>
</div>

@code {
    private async Task CloseMenu()
    {
        // Offcanvas schließen, Navigation des NavLink bleibt erhalten
        await JS.InvokeVoidAsync("hideOffcanvas", "#sideMenu");
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            var authState = await AuthProvider.GetAuthenticationStateAsync();
            var user = authState.User;

            if (user.Identity is { IsAuthenticated: true })
            {
                var username = user.Identity?.Name ?? "(unbekannt)";
                await JS.InvokeVoidAsync("localStorage.setItem", "scannerpilot.user", username);
            }
            else
            {
                await JS.InvokeVoidAsync("localStorage.removeItem", "scannerpilot.user");
            }
        }
    }
}
