@inject AccountService AccountService
@inject AuthenticationStateProvider AuthStateProvider
@inject AppState AppState
@implements IDisposable
@rendermode InteractiveServer

<div class="top-row ps-3 navbar navbar-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="">💰 Budgeteer</a>
    </div>
</div>

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

<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
    <nav class="nav flex-column">
        <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> Dashboard
            </NavLink>
        </div>

        <div class="nav-item px-3">
            <NavLink class="nav-link" href="accounts">
                <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Accounts
            </NavLink>
        </div>

        <div class="nav-item px-3">
            <NavLink class="nav-link" href="transactions">
                <span class="bi bi-arrow-left-right-nav-menu" aria-hidden="true"></span> Transactions
            </NavLink>
        </div>

        <div class="nav-item px-3">
            <NavLink class="nav-link" href="categories">
                <span class="bi bi-tag-nav-menu" aria-hidden="true"></span> Categories
            </NavLink>
        </div>

        <div class="nav-item px-3">
            <NavLink class="nav-link" href="settings">
                <span class="bi bi-gear-nav-menu" aria-hidden="true"></span> Settings
            </NavLink>
        </div>

        <div class="nav-item px-3 mt-auto">
            <NavLink class="nav-link" href="logout">
                <span class="bi bi-box-arrow-right-nav-menu" aria-hidden="true"></span> Logout
            </NavLink>
        </div>
    </nav>

    @if (accounts is not null && accounts.Count > 0)
    {
        <div class="nav-balances px-3">
            <div class="balances-header">Balances</div>
            @foreach (var account in accounts)
            {
                <div class="balance-item">
                    <div class="balance-color" style="background-color: @account.Color;"></div>
                    <div class="balance-details">
                        <span class="balance-name">@account.Name</span>
                        <span class="balance-amount @(account.CurrentBalance >= 0 ? "text-success" : "text-danger")">
                            @account.FormatAmount(account.CurrentBalance)
                        </span>
                    </div>
                </div>
            }
        </div>
    }
</div>

@code {
    private List<Account>? accounts;

    protected override async Task OnInitializedAsync()
    {
        AppState.OnAccountsChanged += HandleAccountsChanged;

        var authState = await AuthStateProvider.GetAuthenticationStateAsync();
        var userId = authState.User.FindFirst(System.Security.Claims.ClaimTypes.NameIdentifier)?.Value;

        if (userId is not null)
        {
            accounts = await AccountService.GetAccountsAsync(userId);
        }
    }

    private async void HandleAccountsChanged()
    {
        var authState = await AuthStateProvider.GetAuthenticationStateAsync();
        var userId = authState.User.FindFirst(System.Security.Claims.ClaimTypes.NameIdentifier)?.Value;

        if (userId is not null)
        {
            accounts = await AccountService.GetAccountsAsync(userId);
            await InvokeAsync(StateHasChanged);
        }
    }

    public void Dispose()
    {
        AppState.OnAccountsChanged -= HandleAccountsChanged;
    }
}