@using Indotalent.ConfigBackEnd.Extensions
@using Indotalent.ConfigBackEnd.Interfaces
@using Indotalent.Infrastructure.Authentication
@using Indotalent.Infrastructure.Authorization.Identity
@using Indotalent.Shared.Consts
@using Microsoft.AspNetCore.Components.Authorization
@inherits LayoutComponentBase
@inject NavigationManager NavigationManager
@inject ICurrentUserService CurrentUserService

<MudThemeProvider />
<MudDialogProvider />
<MudSnackbarProvider />
<MudPopoverProvider />




<MudLayout>
    <AuthorizeView>
        <MudAppBar Elevation="1">
            <MudSpacer />
            <MudMenu Icon="@Icons.Material.Filled.MoreVert"
                     Color="Color.Inherit"
                     Dense="true"
                     ActivationEvent="@MouseEvent.LeftClick"
                     AnchorOrigin="Origin.BottomLeft"
                     TransformOrigin="Origin.TopLeft"
                     PopoverClass="custom-menu-popover">

                <MudMenuItem OnClick="GoToProfile"
                             Icon="@Icons.Material.Filled.Person"
                             IconColor="Color.Primary">
                    Profile
                </MudMenuItem>

                <MudMenuItem OnClick="GoToTenantSelection"
                             Icon="@Icons.Material.Filled.Business"
                             IconColor="Color.Info">
                    Change Tenant
                </MudMenuItem>

                <MudMenuItem OnClick="Logout"
                             Icon="@Icons.Material.Filled.Logout"
                             IconColor="Color.Error"
                             Class="red-text-item">
                    <MudText Color="Color.Error">Logout</MudText>
                </MudMenuItem>

            </MudMenu>
        </MudAppBar>

        <MudDrawer @bind-Open="_drawerOpen"
                   Elevation="0"
                   Variant="@DrawerVariant.Mini"
                   OpenMiniOnHover="false"
                   MiniWidth="80px"
                   Width="280px"
                   Class="v6-drawer">

            <MudIconButton Icon="@(_drawerOpen? Icons.Material.Rounded.ChevronLeft : Icons.Material.Rounded.ChevronRight)"
                           OnClick="@DrawerToggle"
                           Class="v6-toggle-btn"
                           Size="Size.Small" />

            <MudDrawerHeader Class="pa-6 mb-2">
                <div class="d-flex align-center">
                    <MudIcon Icon="@Icons.Material.Filled.Apps" Size="Size.Medium" Color="Color.Primary" />
                    @if (_drawerOpen)
                    {
                        <MudText Typo="Typo.h5" Class="ml-3" Style="font-weight:900">@GlobalConsts.AppInitial</MudText>
                    }
                </div>
            </MudDrawerHeader>


            <MudNavMenu Class="v6-nav">
                @* Member & Admin *@
                <AuthorizeView Roles="@($"{ApplicationRoles.Admin},{ApplicationRoles.Member}")" Context="commonAuth">
                    <Authorized>
                        <MudNavLink Href="/home" Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Home">@(_drawerOpen ? "Home" : "")</MudNavLink>
                        <MudNavLink Href="/profile" Icon="@Icons.Material.Filled.AccountCircle">@(_drawerOpen ? "Profile" : "")</MudNavLink>
                        <MudNavLink Href="/account/tenant-selection" Icon="@Icons.Material.Filled.Business">@(_drawerOpen ? "Change Tenant" : "")</MudNavLink>
                        <MudNavLink Href="/leave" Icon="@Icons.Material.Filled.EventAvailable">@(_drawerOpen ? "Leave Management" : "")</MudNavLink>
                        <MudNavLink Href="/performance" Icon="@Icons.Material.Filled.Speed">@(_drawerOpen ? "Performance" : "")</MudNavLink>
                        <MudNavLink Href="/organization" Icon="@Icons.Material.Filled.AccountTree">@(_drawerOpen ? "Organization" : "")</MudNavLink>
                        <MudNavLink Href="/payroll" Icon="@Icons.Material.Filled.CurrencyExchange">@(_drawerOpen ? "Payroll" : "")</MudNavLink>
                    </Authorized>
                </AuthorizeView>

                @* Tenant Admin Only *@
                <AuthorizeView Roles="@ApplicationRoles.TenantAdmin" Context="tenantAdminAuth">
                    <Authorized>
                        <MudNavLink Href="/setting" Icon="@Icons.Material.Filled.Settings">@(_drawerOpen ? "App Settings" : "")</MudNavLink>
                    </Authorized>
                </AuthorizeView>

                @* Admin Only *@
                <AuthorizeView Roles="@ApplicationRoles.Admin" Context="adminAuth">
                    <Authorized>
                        <MudNavLink Href="/multitenant" Icon="@Icons.Material.Filled.CorporateFare">@(_drawerOpen ? "Multitenant" : "")</MudNavLink>
                        <MudNavLink Href="/serilogs" Icon="@Icons.Material.Filled.HistoryEdu">@(_drawerOpen ? "System Logs" : "")</MudNavLink>
                        <MudNavLink Href="/appsettings/json" Icon="@Icons.Material.Filled.SettingsEthernet">@(_drawerOpen ? "System Settings" : "")</MudNavLink>
                    </Authorized>
                </AuthorizeView>
            </MudNavMenu>

            <div class="v6-footer d-flex align-center @(_drawerOpen ? "" : "justify-center")">
                <MudBadge Color="Color.Success" Overlap="true" Dot="true" Bordered="true" Placement="Placement.BottomRight">
                    <MudAvatar Color="Color.Primary" Size="Size.Medium">@CurrentUserService.FullName.ToInitial()</MudAvatar>
                </MudBadge>
                @if (_drawerOpen)
                {
                    <div class="ml-3">
                        <MudText Typo="Typo.caption" Style="font-weight:700; display: block; color: #1e293b;">@CurrentUserService.FullName</MudText>
                        <MudText Typo="Typo.caption" Style="color: #64748b; font-size: 10px;">Online</MudText>
                    </div>
                }
            </div>
        </MudDrawer>
    </AuthorizeView>



    <MudMainContent Style="background-color: #f1f5f9;">
        <MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pa-3 md-pa-6 lg-pa-8 pt-3 pb-12">
            @Body
        </MudContainer>
    </MudMainContent>
</MudLayout>


@code {
    private bool _drawerOpen = true;

    private void DrawerToggle() => _drawerOpen = !_drawerOpen;
    private void GoToProfile() => NavigationManager.NavigateTo("/profile");
    private void GoToTenantSelection() => NavigationManager.NavigateTo("/account/tenant-selection");
    private void Logout() => NavigationManager.NavigateTo("/account/logout");
}

<style>
    .custom-menu-popover {
        min-width: 200px !important;
        margin-right: 16px !important;
    }

        .custom-menu-popover .mud-list-item {
            padding-left: 16px !important;
            padding-right: 16px !important;
        }

    .red-text-item {
        color: var(--mud-palette-error) !important;
    }
</style>

<style>
    .mud-input-control:has(.mud-input-adornment-start) {
        margin-top: 0 !important;
        height: 35px !important;
    }

        .mud-input-control:has(.mud-input-adornment-start) .mud-input-outlined-border {
            height: 35px !important;
        }

        .mud-input-control:has(.mud-input-adornment-start) input {
            padding-top: 0px !important;
            padding-bottom: 0px !important;
            height: 30px !important;
            font-size: 13px !important;
        }

        .mud-input-control:has(.mud-input-adornment-start) .mud-input-adornment {
            margin-top: 0 !important;
            margin-bottom: 0 !important;
            height: 35px !important;
        }

    div:has(> .mud-input-control:has(.mud-input-adornment-start)) > .mud-button-root {
        height: 35px !important;
        box-shadow: none !important;
    }
</style>

<style>
    .mud-input-outlined-border {
        border-radius: 4px !important;
    }

    .custom-select-dense .mud-input-control {
        margin-top: 0 !important;
    }

    .custom-select-dense .mud-input-slot {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
        padding-left: 8px !important;
        font-size: 12px !important;
    }
</style>

<style>
    .mud-drawer.v6-drawer {
        overflow: visible !important;
        z-index: 1350 !important;
        background-color: #f8fafc !important;
        border-right: 1px solid var(--mud-palette-divider) !important;
        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .v6-drawer .mud-drawer-content {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .v6-toggle-btn {
        position: absolute !important;
        right: -16px !important;
        top: 18px !important;
        z-index: 1400 !important;
        background-color: white !important;
        border: 1px solid var(--mud-palette-divider) !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        border-radius: 50% !important;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .v6-nav .mud-nav-link,
    .v6-nav .mud-nav-group {
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .v6-drawer.mud-drawer--mini .v6-nav .mud-nav-link,
    .v6-drawer.mud-drawer--mini .v6-nav .mud-nav-group-button {
        padding-left: 0px !important;
        padding-right: 0px !important;
        display: flex !important;
        justify-content: center !important;
        width: 80px !important;
    }

    .v6-drawer.mud-drawer--mini .v6-nav .mud-nav-link-icon,
    .v6-drawer.mud-drawer--mini .v6-nav .mud-nav-group-icon {
        margin-right: 0px !important;
        margin-inline-start: 0px !important;
        display: flex !important;
        justify-content: center !important;
    }

    .v6-nav .mud-nav-link {
        border-radius: 12px;
        margin: 4px 12px;
        color: #64748b;
    }

        .v6-nav .mud-nav-link.active {
            background-color: white !important;
            color: var(--mud-palette-primary) !important;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            font-weight: 600;
        }

    .v6-footer {
        margin-top: auto;
        padding: 16px;
        border-top: 1px solid var(--mud-palette-divider);
        background-color: #f8fafc;
        flex-shrink: 0;
    }

    .mud-badge-dot {
        border: 2px solid white !important;
    }

</style>