@*
    EN: Admin back-office layout — Sidebar + TopBar + Content area.
    VI: Layout quản trị — Sidebar + TopBar + Vùng nội dung.
    Design: pencil-design/src/pages/tPOS/admin/admin-dashboard.pen
*@
@inherits LayoutComponentBase
@inject NavigationManager NavigationManager
@inject IJSRuntime JS

<MudThemeProvider IsDarkMode="true" Theme="_theme" />
<MudPopoverProvider />
<MudDialogProvider />
<MudSnackbarProvider />

<div class="admin-layout">
    @* ═══ SIDEBAR ═══ *@
    <aside class="admin-sidebar @(_sidebarOpen ? "admin-sidebar--open" : "")">
        @* Logo *@
        <div class="admin-sidebar__logo">
            <div class="admin-sidebar__logo-icon">G</div>
            <div class="admin-sidebar__logo-text">
                <span class="admin-sidebar__logo-name">GoodGo Admin</span>
                <span class="admin-sidebar__logo-sub">Management Console</span>
            </div>
        </div>

        @* Navigation *@
        <nav class="admin-sidebar__nav">
            @* TỔNG QUAN *@
            <span class="admin-nav-label">Tổng quan</span>
            <NavLink href="/admin" class="admin-nav-item" Match="NavLinkMatch.All" ActiveClass="admin-nav-item--active">
                <i data-lucide="layout-dashboard"></i>
                <span>Dashboard</span>
            </NavLink>

            @* CỬA HÀNG *@
            <span class="admin-nav-label">Cửa hàng</span>
            <NavLink href="/admin/stores" class="admin-nav-item" ActiveClass="admin-nav-item--active">
                <i data-lucide="store"></i>
                <span>Quản lý cửa hàng</span>
            </NavLink>
            <NavLink href="/admin/products" class="admin-nav-item admin-nav-item--sub" ActiveClass="admin-nav-item--active">
                <i data-lucide="package"></i>
                <span>Sản phẩm & Menu</span>
            </NavLink>
            <NavLink href="/admin/staff" class="admin-nav-item admin-nav-item--sub" ActiveClass="admin-nav-item--active">
                <i data-lucide="users"></i>
                <span>Nhân sự</span>
            </NavLink>
            <NavLink href="/admin/inventory" class="admin-nav-item admin-nav-item--sub" ActiveClass="admin-nav-item--active">
                <i data-lucide="warehouse"></i>
                <span>Kho hàng</span>
            </NavLink>
            <NavLink href="/admin/system/devices" class="admin-nav-item admin-nav-item--sub" ActiveClass="admin-nav-item--active">
                <i data-lucide="monitor"></i>
                <span>Thiết bị</span>
            </NavLink>

            @* KINH DOANH *@
            <span class="admin-nav-label">Kinh doanh</span>
            <NavLink href="/admin/customers" class="admin-nav-item" ActiveClass="admin-nav-item--active">
                <i data-lucide="heart"></i>
                <span>Khách hàng & Loyalty</span>
            </NavLink>
            <NavLink href="/admin/finance/revenue" class="admin-nav-item" ActiveClass="admin-nav-item--active">
                <i data-lucide="bar-chart-2"></i>
                <span>Báo cáo & Phân tích</span>
            </NavLink>
            <NavLink href="/admin/finance" class="admin-nav-item" ActiveClass="admin-nav-item--active">
                <i data-lucide="wallet"></i>
                <span>Tài chính</span>
            </NavLink>

            @* HỆ THỐNG *@
            <span class="admin-nav-label">Hệ thống</span>
            <NavLink href="/admin/roles" class="admin-nav-item" ActiveClass="admin-nav-item--active">
                <i data-lucide="shield"></i>
                <span>Phân quyền</span>
            </NavLink>
            <NavLink href="/admin/system/audit" class="admin-nav-item" ActiveClass="admin-nav-item--active">
                <i data-lucide="settings"></i>
                <span>Cài đặt</span>
            </NavLink>
        </nav>

        @* User profile *@
        <div class="admin-sidebar__user">
            <div class="admin-user-avatar">VH</div>
            <div class="admin-user-info">
                <span class="admin-user-name">Velik Ho</span>
                <span class="admin-user-role">Owner</span>
            </div>
            <button @onclick="Logout" title="Đăng xuất">
                <i data-lucide="log-out"></i>
            </button>
        </div>
    </aside>

    @* Mobile overlay *@
    @if (_sidebarOpen)
    {
        <div class="admin-sidebar-overlay" @onclick="CloseSidebar"></div>
    }

    @* ═══ MAIN AREA ═══ *@
    <main class="admin-main">
        @Body
    </main>
</div>

@code {
    private bool _sidebarOpen = false;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        // EN: Re-init Lucide icons after every render (Blazor navigation replaces DOM)
        // VI: Khởi tạo lại Lucide icons sau mỗi lần render (Blazor navigation thay đổi DOM)
        try { await JS.InvokeVoidAsync("lucide.createIcons"); } catch { /* ignore if lucide not loaded */ }
    }

    private void ToggleSidebar() => _sidebarOpen = !_sidebarOpen;
    private void CloseSidebar() => _sidebarOpen = false;
    private void Logout() => NavigationManager.NavigateTo("/login");

    private MudTheme _theme = new()
    {
        PaletteDark = new PaletteDark()
        {
            Primary = "#FF5C00",
            PrimaryContrastText = "#FFFFFF",
            AppbarBackground = "#1A1A1D",
            AppbarText = "#FFFFFF",
            Background = "#0A0A0B",
            Surface = "#1A1A1D",
            TextPrimary = "#FFFFFF",
            TextSecondary = "#ADADB0",
            ActionDefault = "#FFFFFF",
            LinesDefault = "#1F1F23"
        }
    };
}
