@using Dpz.Core.EnumLibrary
@inject Dpz.Core.Service.RepositoryService.IArticleService ArticleService
@inject IConfiguration Configuration

@{
    var menu = (MenuItem?)ViewBag.Menu;
    var articleTags = await ArticleService.GetAllTagsAsync(Context.RequestAborted);
    var currentTag = Context.Request.Query["tag"].ToString();
    string IsActive(MenuItem item) => menu == item ? "nav-menu__item--active" : "";
    string SubActive(MenuItem item) => menu == item ? "active" : "";
    string MoreActive() => menu is MenuItem.Albums or MenuItem.Code or MenuItem.Timeline or MenuItem.Friends ? "nav-menu__item--active" : "";
    string ArticleTagActive(string tag) => menu == MenuItem.Blog && currentTag == tag ? "active" : "";
}

<header class="site-header">
    <div class="container site-header__inner">

        <!-- 1. Left: Logo -->
        <div class="header-left">
            <a class="site-logo" href="/" data-pjax>
                <img src="~/favicon.png" alt="logo" class="site-logo__img"/>
                <span class="site-logo__text">叫我阿胖</span>
            </a>
        </div>

        <!-- 2. Center: Navigation Menu -->
        <div class="header-center">
            <nav class="nav-container">
                <ul class="nav-menu">
                    <li class="nav-menu__item @IsActive(MenuItem.Home)">
                        <a href="/" class="nav-menu__link" data-pjax>
                            <i class="fa fa-home fa-fw"></i>
                            <span class="nav-menu__text">
                                首页
                            </span>
                        </a>
                    </li>
                    <li class="nav-menu__item nav-menu__item--has-sub @IsActive(MenuItem.Blog)">
                        <a asp-action="Index" asp-controller="Article" class="nav-menu__link" data-pjax>
                            <i class="fa fa-file-text fa-fw"></i>
                            <span class="nav-menu__text">
                                文章
                            </span>
                            <i class="fa fa-angle-down nav-menu__arrow"></i>
                        </a>
                        <div class="nav-dropdown nav-dropdown--article">
                            <a asp-controller="Article" asp-action="Archive"
                               class="nav-dropdown__item @(menu == MenuItem.Blog && Context.Request.Path == "/article/archive.html" ? "active" : "")" data-pjax>
                                <i class="fa fa-archive"></i> 归档
                            </a>
                            @foreach (var tag in articleTags.Take(12))
                            {
                                <a asp-action="Index" asp-controller="Article" asp-route-tag="@tag"
                                   class="nav-dropdown__item @ArticleTagActive(tag)" data-pjax>
                                    <i class="fa-solid fa-layer-group"></i> @tag
                                </a>
                            }
                        </div>
                    </li>
                    <li class="nav-menu__item @IsActive(MenuItem.Mumble)">
                        <a asp-action="Index" asp-controller="Mumble" class="nav-menu__link" data-pjax>
                            <i class="fa fa-bullhorn fa-fw"></i>
                            <span class="nav-menu__text">
                                碎碎念
                            </span>
                        </a>
                    </li>
                    <li class="nav-menu__item @IsActive(MenuItem.Steam)">
                        <a asp-controller="Steam" asp-action="Index" class="nav-menu__link" data-pjax>
                            <i class="fa-brands fa-steam"></i>
                            <span class="nav-menu__text">
                                Steam
                            </span>
                        </a>
                    </li>
                    <li class="nav-menu__item @IsActive(MenuItem.Bookmark)">
                        <a asp-controller="Bookmark" asp-action="Index" class="nav-menu__link" data-pjax>
                            <i class="fa fa-bookmark fa-fw"></i>
                            <span class="nav-menu__text">
                                书签
                            </span>
                        </a>
                    </li>

                    <!-- Dropdown -->
                    <li class="nav-menu__item nav-menu__item--has-sub @MoreActive()">
                        <span class="nav-menu__link nav-menu__link--trigger">
                            <span class="nav-menu__text">更多</span>
                            <i class="fa fa-angle-down nav-menu__arrow"></i>
                        </span>
                        <div class="nav-dropdown">
                            <a asp-controller="Album" asp-action="GetAlbums"
                               class="nav-dropdown__item  @SubActive(MenuItem.Albums)" data-pjax>
                                <i class="fa-solid fa-photo-film"></i> 相册
                            </a>
                            <a asp-controller="Code" asp-action="Index" asp-route-path=""
                               class="nav-dropdown__item  @SubActive(MenuItem.Code)" data-pjax>
                                <i class="fa fa-code"></i> 网站源码
                            </a>
                            <a asp-controller="Timeline" asp-action="Index"
                               class="nav-dropdown__item  @SubActive(MenuItem.Timeline)" data-pjax>
                                <i class="fa fa-calendar"></i> 时间轴
                            </a>
                            <a asp-controller="Home" asp-action="Friends"
                               class="nav-dropdown__item  @SubActive(MenuItem.Friends)" data-pjax>
                                <i class="fa fa-address-book"></i> 友链
                            </a>
                            @if (User.Authenticated)
                            {
                                <a asp-controller="Video" asp-action="Index"
                                   class="nav-dropdown__item  @SubActive(MenuItem.Video)" data-pjax>
                                    <i class="fa fa-video"></i> 视频
                                </a>
                            }
                        </div>
                    </li>
                </ul>
            </nav>
        </div>

        <!-- 3. Right: User & Actions -->
        <div class="header-right">
            <!-- User Profile -->
            <div class="nav-user">
                @if (User.Authenticated)
                {
                    var userAvatar = User.FindFirst(nameof(VmUserInfo.Avatar))?.Value;
                    var memberHost = Configuration["Server:Issuer"];
                    <div class="nav-user__actions">
                        <a href="@(memberHost)/user" class="nav-user__link" title="个人中心">
                            <img src="@userAvatar" alt="Avatar" class="nav-user__avatar"/>
                        </a>
                        <form class="nav-user__logout-form" asp-controller="Account" asp-action="LogOut"
                              method="post" data-logout-form>
                            <button class="nav-user__logout-btn" type="submit" title="退出登录"
                                    aria-label="退出登录">
                                <i class="fa-solid fa-right-from-bracket" aria-hidden="true"></i>
                            </button>
                        </form>
                    </div>
                }
                else
                {
                    <div class="nav-user__login-btn" id="js-nav-login" title="登录" role="button">
                        <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2"
                             fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                            <circle cx="12" cy="7" r="4"></circle>
                        </svg>
                    </div>
                }
            </div>

            <!-- Mobile Toggle -->
            <button class="nav-toggle" aria-label="Menu" aria-expanded="false">
                <span class="nav-toggle__icon"></span>
            </button>
        </div>

    </div>
</header>

<!-- Mobile Menu Overlay -->
<div class="mobile-menu-overlay"></div>