@*
    EN: Marketing layout — Industrial sidebar + TopBar + Content area.
    VI: Layout Marketing — Sidebar công nghiệp + TopBar + Vùng nội dung.
    Design: pencil-design/src/pages/tMarketing/desktop/
*@
@inherits LayoutComponentBase
@implements IDisposable
@inject NavigationManager NavigationManager
@inject IJSRuntime JS
@inject WebClientTpos.Client.Services.AuthService AuthSvc
@inject WebClientTpos.Client.Services.ThemeStateService ThemeState
@using WebClientTpos.Client.Services

@* EN: Theme providers moved to App.razor (FRONT-W-06) — MarketingDark theme set via ThemeStateService.OnInitialized. *@
@* VI: Theme providers đã chuyển về App.razor (FRONT-W-06) — theme MarketingDark được đặt qua ThemeStateService.OnInitialized. *@

<div class="mkt-layout">
    @* ═══ SIDEBAR / THANH ĐIỀU HƯỚNG ═══ *@
    <aside class="mkt-sidebar @(_sidebarOpen ? "mkt-sidebar--open" : "")">
        @* Logo *@
        <div class="mkt-sidebar__logo">
            <div class="mkt-sidebar__logo-icon">M</div>
            <span class="mkt-sidebar__logo-text">tMARKETING</span>
            <button class="mkt-sidebar-close" @onclick="CloseSidebar" title="Đóng menu">
                <i data-lucide="x"></i>
            </button>
        </div>

        @* Navigation / Điều hướng *@
        <nav class="mkt-sidebar__nav">
            <NavLink href="/marketing" class="mkt-nav-item" Match="NavLinkMatch.All" ActiveClass="mkt-nav-item--active">
                <span class="mkt-nav-num">01</span>
                <span>HUB</span>
            </NavLink>
            <NavLink href="/marketing/livechat" class="mkt-nav-item" ActiveClass="mkt-nav-item--active">
                <span class="mkt-nav-num">02</span>
                <span>CHAT</span>
            </NavLink>
            <NavLink href="/marketing/customers" class="mkt-nav-item" ActiveClass="mkt-nav-item--active">
                <span class="mkt-nav-num">03</span>
                <span>CRM</span>
            </NavLink>
            <NavLink href="/marketing/content" class="mkt-nav-item" ActiveClass="mkt-nav-item--active">
                <span class="mkt-nav-num">04</span>
                <span>AI STUDIO</span>
            </NavLink>
            <NavLink href="/marketing/analytics" class="mkt-nav-item" ActiveClass="mkt-nav-item--active">
                <span class="mkt-nav-num">05</span>
                <span>ANALYTICS</span>
            </NavLink>
            <NavLink href="/marketing/chatbot" class="mkt-nav-item" ActiveClass="mkt-nav-item--active">
                <span class="mkt-nav-num">06</span>
                <span>CHATBOT</span>
            </NavLink>
            <NavLink href="/marketing/ai-chatbot" class="mkt-nav-item" ActiveClass="mkt-nav-item--active">
                <span class="mkt-nav-num">07</span>
                <span>AI BOT</span>
            </NavLink>
        </nav>

        @* Stats card / Thẻ thống kê *@
        <div class="mkt-sidebar__stats">
            <div class="mkt-sidebar__stats-header">
                <i data-lucide="bar-chart-2"></i>
                <span>REACH TODAY</span>
            </div>
            <div class="mkt-sidebar__stats-value">45.2K</div>
        </div>

        @* User profile / Hồ sơ người dùng *@
        <div class="mkt-sidebar__user">
            <div class="mkt-user-avatar">AD</div>
            <span class="mkt-user-name">ADMIN</span>
            <button @onclick="Logout" title="Đăng xuất">
                <i data-lucide="chevron-right"></i>
            </button>
        </div>
    </aside>

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

    @* ═══ MAIN AREA / VÙNG NỘI DUNG ═══ *@
    <main class="mkt-main">
        @* Mobile-only header bar — sits in doc flow above page content *@
        <div class="mkt-mobile-bar">
            <button class="mkt-mobile-toggle" @onclick="ToggleSidebar">
                <i data-lucide="menu"></i>
            </button>
            @if (_searchOpen)
            {
                <div class="mkt-mobile-search" style="display:flex;">
                    <i data-lucide="search"></i>
                    <input type="text" placeholder="Tìm kiếm..." @bind="SearchQuery" />
                </div>
                <button class="mkt-mobile-search-btn" style="display:flex;" @onclick="ToggleSearch">
                    <i data-lucide="x"></i>
                </button>
            }
            else
            {
                <span class="mkt-mobile-bar__title">tMARKETING</span>
                <button class="mkt-mobile-search-btn" style="display:flex;" @onclick="ToggleSearch">
                    <i data-lucide="search"></i>
                </button>
            }
        </div>
        @Body
    </main>
</div>

@code {
    private bool _sidebarOpen = false;
    private bool _searchOpen = false;
    private string SearchQuery { get; set; } = string.Empty;

    protected override void OnInitialized()
    {
        // EN: Switch to MarketingDark theme while this layout is active (FRONT-W-06).
        // VI: Chuyển sang theme MarketingDark khi layout này đang hoạt động (FRONT-W-06).
        ThemeState.SetTheme(AppTheme.MarketingDark, isDarkMode: true);
    }

    public void Dispose()
    {
        // EN: Restore default theme when leaving marketing layout (FRONT-W-06).
        // VI: Khôi phục theme mặc định khi rời layout marketing (FRONT-W-06).
        ThemeState.RestoreDefault();
    }

    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
        try { await JS.InvokeVoidAsync("lucide.createIcons"); } catch { }
    }

    private void ToggleSidebar() => _sidebarOpen = !_sidebarOpen;
    private void CloseSidebar() => _sidebarOpen = false;
    private void ToggleSearch() => _searchOpen = !_searchOpen;

    // EN: Properly clear auth state on logout instead of just navigating
    // VI: Xóa auth state đúng cách khi đăng xuất thay vì chỉ điều hướng
    private async Task Logout()
    {
        await AuthSvc.LogoutAsync();
        NavigationManager.NavigateTo("/auth/login", forceLoad: true);
    }
}
