@page "/demo/sufi-blazor/nav-menu"

<PageTitle>@(L["Menu:Demo:NavMenu"] + " - " + L["Menu:Demo:SufiBlazorDemo"])</PageTitle>

<DemoLayout>
    <SbHeading Level="1">@L["Menu:Demo:NavMenu"]</SbHeading>
    <SbText Color="SbColor.Muted">@L["Demo:NavMenuDescription"]</SbText>

    <SbDivider />

    <DemoSection Title="@L["Demo:BasicNavMenu"]" SourceCode="@basicCode">
        <ExampleContent>
            <SbNavMenu>
                <ul style="list-style: none; padding: 0; margin: 0;">
                    <li style="padding: var(--sb-space-2); border-bottom: 1px solid var(--sb-color-border);">
                        <a href="/dashboard" style="text-decoration: none; color: inherit;">Dashboard</a>
                    </li>
                    <li style="padding: var(--sb-space-2); border-bottom: 1px solid var(--sb-color-border);">
                        <a href="/products" style="text-decoration: none; color: inherit;">Products</a>
                    </li>
                    <li style="padding: var(--sb-space-2); border-bottom: 1px solid var(--sb-color-border);">
                        <a href="/orders" style="text-decoration: none; color: inherit;">Orders</a>
                    </li>
                    <li style="padding: var(--sb-space-2);">
                        <a href="/settings" style="text-decoration: none; color: inherit;">Settings</a>
                    </li>
                </ul>
            </SbNavMenu>
        </ExampleContent>
    </DemoSection>

    <DemoSection Title="@L["Demo:WithCollapsedState"]" SourceCode="@collapsedCode" RelatedCode="@collapsedCodeBehind">
        <ExampleContent>
            <SbStack Gap="4">
                <SbButton OnClick="ToggleCollapsed">
                    @(_collapsed ? L["Demo:NavMenuExpandMenu"] : L["Demo:NavMenuCollapseMenu"])
                </SbButton>
                
                <SbNavMenu @bind-Collapsed="_collapsed">
                    <ul style="list-style: none; padding: 0; margin: 0;">
                        <li style="padding: var(--sb-space-3); border-bottom: 1px solid var(--sb-color-border); display: flex; align-items: center; gap: var(--sb-space-2);">
                            <SbIcon Name="home" Size="SbSize.Sm" />
                            @if (!_collapsed)
                            {
                                <span>Home</span>
                            }
                        </li>
                        <li style="padding: var(--sb-space-3); border-bottom: 1px solid var(--sb-color-border); display: flex; align-items: center; gap: var(--sb-space-2);">
                            <SbIcon Name="users" Size="SbSize.Sm" />
                            @if (!_collapsed)
                            {
                                <span>Users</span>
                            }
                        </li>
                        <li style="padding: var(--sb-space-3); border-bottom: 1px solid var(--sb-color-border); display: flex; align-items: center; gap: var(--sb-space-2);">
                            <SbIcon Name="file" Size="SbSize.Sm" />
                            @if (!_collapsed)
                            {
                                <span>Documents</span>
                            }
                        </li>
                        <li style="padding: var(--sb-space-3); display: flex; align-items: center; gap: var(--sb-space-2);">
                            <SbIcon Name="settings" Size="SbSize.Sm" />
                            @if (!_collapsed)
                            {
                                <span>Settings</span>
                            }
                        </li>
                    </ul>
                </SbNavMenu>
            </SbStack>
        </ExampleContent>
    </DemoSection>

    <DemoSection Title="@L["Demo:SidebarStyle"]" SourceCode="@sidebarCode" RelatedCode="@sidebarCodeBehind">
        <ExampleContent>
            <div style="display: flex; height: 400px; border: 1px solid var(--sb-color-border); border-radius: var(--sb-radius-md);">
                <div style="@GetSidebarStyle()">
                    <SbNavMenu @bind-Collapsed="_sidebarCollapsed">
                        <div style="padding: var(--sb-space-2); border-bottom: 1px solid var(--sb-color-border);">
                            <SbButton Size="SbSize.Sm" Variant="SbButtonVariant.Ghost" Style="padding: 0; width: 28px;" OnClick="@(() => _sidebarCollapsed = !_sidebarCollapsed)">
                                <StartIcon>
                                    <SbIcon Name="@(_sidebarCollapsed ? "chevron-right" : "chevron-left")" />
                                </StartIcon>
                            </SbButton>
                        </div>
                        <ul style="list-style: none; padding: var(--sb-space-2); margin: 0;">
                            @foreach (var item in _navItems)
                            {
                                <li style="margin-bottom: var(--sb-space-1);">
                                    <a href="@item.Href" 
                                       style="display: flex; align-items: center; gap: var(--sb-space-2); padding: var(--sb-space-2); border-radius: var(--sb-radius-sm); text-decoration: none; color: inherit; transition: background 0.2s;"
                                       onmouseover="this.style.background='var(--sb-color-primary-100)'" 
                                       onmouseout="this.style.background='transparent'">
                                        <SbIcon Name="@item.Icon" Size="SbSize.Sm" />
                                        @if (!_sidebarCollapsed)
                                        {
                                            <span>@item.Text</span>
                                        }
                                    </a>
                                </li>
                            }
                        </ul>
                    </SbNavMenu>
                </div>
                
                <div style="flex: 1; padding: var(--sb-space-4);">
                    <SbHeading Level="2">@L["Demo:NavMenuMainContentArea"]</SbHeading>
                    <SbText Color="SbColor.Muted">@L["Demo:NavMenuSidebarToggleHint"]</SbText>
                </div>
            </div>
        </ExampleContent>
    </DemoSection>

    <DemoSection Title="@L["Demo:WithActiveStates"]" SourceCode="@activeCode" RelatedCode="@activeCodeBehind">
        <ExampleContent>
            <SbStack Gap="4">
                <SbText Size="SbSize.Sm" Color="SbColor.Muted">@string.Format(L["Demo:NavMenuCurrentLabel"], _currentPage)</SbText>
                
                <SbNavMenu>
                    <ul style="list-style: none; padding: 0; margin: 0;">
                        @foreach (var pageName in _pages)
                        {
                            var isActive = _currentPage == pageName;
                            <li style="@($"padding: var(--sb-space-2); border-bottom: 1px solid var(--sb-color-border); background: {(isActive ? "var(--sb-color-primary-100)" : "transparent")}; font-weight: {(isActive ? "var(--sb-font-weight-semibold)" : "var(--sb-font-weight-normal)")}")">
                                <a href="#" @onclick="@(() => SetCurrentPage(pageName))" @onclick:preventDefault style="text-decoration: none; color: inherit; display: block;">
                                    @pageName
                                </a>
                            </li>
                        }
                    </ul>
                </SbNavMenu>
            </SbStack>
        </ExampleContent>
    </DemoSection>

    <DemoSection Title="@L["Demo:CustomAriaLabel"]" SourceCode="@ariaCode">
        <ExampleContent>
            <SbNavMenu AriaLabel="@L["Demo:MainNavigation"]">
                <ul style="list-style: none; padding: 0; margin: 0;">
                    <li style="padding: var(--sb-space-2); border-bottom: 1px solid var(--sb-color-border);">
                        <a href="/" style="text-decoration: none; color: inherit;">Home</a>
                    </li>
                    <li style="padding: var(--sb-space-2); border-bottom: 1px solid var(--sb-color-border);">
                        <a href="/about" style="text-decoration: none; color: inherit;">About</a>
                    </li>
                    <li style="padding: var(--sb-space-2);">
                        <a href="/contact" style="text-decoration: none; color: inherit;">Contact</a>
                    </li>
                </ul>
            </SbNavMenu>
        </ExampleContent>
    </DemoSection>

    <SbDivider />

    <SbAlert Severity="SbAlertSeverity.Info">
        @((MarkupString)L["Demo:NavMenuNote"].Value)
    </SbAlert>

    <SbDivider />

    <DocViewer DocName="SbNavMenu" />
</DemoLayout>

@code {
    private bool _collapsed = false;
    private bool _sidebarCollapsed = false;
    private string _currentPage = "Dashboard";
    private List<string> _pages = new() { "Dashboard", "Products", "Orders", "Customers", "Reports", "Settings" };

    private List<NavItem> _navItems = new()
    {
        new NavItem { Text = "Dashboard", Icon = "home", Href = "/dashboard" },
        new NavItem { Text = "Analytics", Icon = "bar-chart", Href = "/analytics" },
        new NavItem { Text = "Projects", Icon = "folder", Href = "/projects" },
        new NavItem { Text = "Team", Icon = "users", Href = "/team" },
        new NavItem { Text = "Calendar", Icon = "calendar", Href = "/calendar" },
        new NavItem { Text = "Settings", Icon = "settings", Href = "/settings" }
    };

    private void ToggleCollapsed()
    {
        _collapsed = !_collapsed;
    }

    private void SetCurrentPage(string page)
    {
        _currentPage = page;
    }

    private string GetSidebarStyle()
    {
        var width = _sidebarCollapsed ? "60px" : "200px";
        return $"width: {width}; border-inline-end: 1px solid var(--sb-color-border); transition: width 0.3s; background: var(--sb-color-surface);";
    }

    private class NavItem
    {
        public string Text { get; set; } = "";
        public string Icon { get; set; } = "";
        public string Href { get; set; } = "";
    }

    private const string basicCode = @"<SbNavMenu>
    <ul>
        <li><a href=""/dashboard"">Dashboard</a></li>
        <li><a href=""/products"">Products</a></li>
        <li><a href=""/orders"">Orders</a></li>
        <li><a href=""/settings"">Settings</a></li>
    </ul>
</SbNavMenu>";

    private const string collapsedCodeBehind = @"private bool _collapsed = false;

private void ToggleCollapsed()
{
    _collapsed = !_collapsed;
}";

    private const string collapsedCode = @"<SbButton OnClick=""ToggleCollapsed"">
    @(_collapsed ? ""Expand"" : ""Collapse"") Menu
</SbButton>

<SbNavMenu @bind-Collapsed=""_collapsed"">
    <ul>
        <li>
            <SbIcon Name=""home"" Size=""SbSize.Sm"" />
            @if (!_collapsed) { <span>Home</span> }
        </li>
        <li>
            <SbIcon Name=""users"" Size=""SbSize.Sm"" />
            @if (!_collapsed) { <span>Users</span> }
        </li>
    </ul>
</SbNavMenu>";

    private const string sidebarCodeBehind = @"private bool _sidebarCollapsed = false;

private List<NavItem> _navItems = new()
{
    new NavItem { Text = ""Dashboard"", Icon = ""home"", Href = ""/dashboard"" },
    new NavItem { Text = ""Analytics"", Icon = ""bar-chart"", Href = ""/analytics"" }
};

private class NavItem
{
    public string Text { get; set; } = """";
    public string Icon { get; set; } = """";
    public string Href { get; set; } = """";
}";

    private const string sidebarCode = @"<div style=""display: flex; height: 400px;"">
    <SbNavMenu @bind-Collapsed=""_sidebarCollapsed"" 
              style=""width: @(_sidebarCollapsed ? ""60px"" : ""200px"")"">
        <ul>
            @foreach (var item in _navItems)
            {
                <li>
                    <a href=""@item.Href"">
                        <SbIcon Name=""@item.Icon"" />
                        @if (!_sidebarCollapsed) { <span>@item.Text</span> }
                    </a>
                </li>
            }
        </ul>
    </SbNavMenu>
    <div>Main Content</div>
</div>";

    private const string activeCodeBehind = @"private string _currentPage = ""Dashboard"";
private List<string> _pages = new() { ""Dashboard"", ""Products"", ""Orders"" };

private void SetCurrentPage(string page)
{
    _currentPage = page;
}";

    private const string activeCode = @"<SbNavMenu>
    <ul>
        @foreach (var page in _pages)
        {
            var isActive = _currentPage == page;
            <li style=""@(isActive ? ""background: primary"" : """")"">
                <a href=""#"" @onclick=""@(() => SetCurrentPage(page))"">@page</a>
            </li>
        }
    </ul>
</SbNavMenu>";

    private const string ariaCode = @"<SbNavMenu AriaLabel=""Main navigation"">
    <ul>
        <li><a href=""/"">Home</a></li>
        <li><a href=""/about"">About</a></li>
        <li><a href=""/contact"">Contact</a></li>
    </ul>
</SbNavMenu>";
}
