<template>
    <header class="site-header">
        <div class="header-inner">
            <div class="logo" @click="$router.push('/')">
                <img alt="RunForge" src="/logo.svg" height="40">
                <span class="title">RunForge</span>
            </div>
            <div class="nav-actions" :style="{ color: props.color }">
                <div class="nav-links">
                    <a-button
                        type="text"
                        class="nav-btn nav-link"
                        aria-label="文档中心"
                        @click="$router.push('/doc')"
                    >
                        <icon-file class="nav-btn-icon" />
                        <span class="nav-btn-label">文档中心</span>
                    </a-button>
                    <a-button
                        type="text"
                        class="nav-btn nav-link"
                        aria-label="下载中心"
                        @click="$router.push('/download')"
                    >
                        <icon-download class="nav-btn-icon" />
                        <span class="nav-btn-label">下载中心</span>
                    </a-button>
                </div>
                <a-button
                    v-if="!user"
                    type="text"
                    class="nav-btn nav-auth"
                    aria-label="用户登录"
                    @click="$router.push('/login')"
                >
                    <icon-user class="nav-btn-icon" />
                    <span class="nav-btn-label nav-btn-label--full">用户登录</span>
                    <span class="nav-btn-label nav-btn-label--short">登录</span>
                </a-button>
                <a-dropdown v-else trigger="click" position="br">
                    <button type="button" class="user-trigger" :style="{ color: props.color }">
                        <a-avatar class="user-avatar" :size="30">
                            <img alt="avatar" :src="user.avatar" />
                        </a-avatar>
                        <span class="username">{{ user.username }}</span>
                        <icon-down class="user-trigger-caret" />
                    </button>
                    <template #content>
                        <a-doption @click="$router.push('/user')">
                            <icon-user /> 个人中心
                        </a-doption>
                        <a-doption @click="logout">
                            <icon-export /> 退出登录
                        </a-doption>
                    </template>
                </a-dropdown>
            </div>
        </div>
    </header>
</template>

<script setup>
import { useUserStore } from '@/store/modules/user'
import { onMounted, ref } from 'vue'
import { Message, Modal } from '@arco-design/web-vue'
import { setPwaThemeColor } from '@/utils/pwaTheme'

const props = defineProps({
    color: {
        type: String,
        default: 'black'
    }
})

const user = ref('')
onMounted(() => setPwaThemeColor('#78e6bd'))

const getuser = async () => {
    const userStore = useUserStore()
    const userInfo = await userStore.getInfo()
    if (userInfo?.avatar && userInfo?.username && userInfo?.uuid && userInfo?.session)
        user.value = userInfo
}

const logout = () => {
    Modal.confirm({
        title: '退出登录',
        content: '您即将退出登录，是否继续？',
        onOk: () => {
            const userStore = useUserStore()
            userStore.logout()
            Message.success('退出成功!')
            setTimeout(() => { window.location.reload() }, 1000)
        }
    })
}

getuser()
</script>

<style scoped lang="less">
@import '@/styles/store-theme.less';

@header-mobile-nav-size: 36px;
@header-mobile-icon-size: 20px;

.site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: clamp(12px, 2vh, 16px) 0;
    box-sizing: border-box;
    user-select: none;
    -webkit-app-region: drag;
}

.site-header :deep(button),
.site-header :deep(a),
.site-header :deep(.arco-dropdown),
.logo {
    -webkit-app-region: no-drag;
}

@media (display-mode: window-controls-overlay) {
    .site-header {
        right: auto;
        width: env(titlebar-area-width, 100%);
        padding-top: max(clamp(12px, 2vh, 16px), env(titlebar-area-height, 0px));
    }
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(12px, 2vw, 24px);
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding-inline: @store-page-padding-x;
    box-sizing: border-box;
}

.logo {
    display: flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
    min-width: 0;
}

.logo .title {
    font-size: 1.5em;
    margin: 5px 8px;
    white-space: nowrap;
    line-height: 1;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 1;
    min-width: 0;
    margin-left: auto;

    :deep(.arco-btn.nav-btn) {
        height: 38px;
        padding: 0 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        line-height: 1;
        color: inherit;
    }

    :deep(.arco-dropdown) {
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
    }
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 4px 12px;
}

.nav-btn-icon {
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
    line-height: 1;
}

.nav-btn-label {
    white-space: nowrap;
}

.nav-btn {
    font-size: 15px;
}

.mobile-nav-icon-btn() {
    width: @header-mobile-nav-size;
    min-width: @header-mobile-nav-size;
    height: @header-mobile-nav-size;
    padding: 0;
    border-radius: 50%;
    background: fade(#fff, 58%);
    border: 1px solid fade(#1b3022, 12%);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px fade(#1b3022, 5%);
}

.mobile-nav-icon-normalize() {
    width: @header-mobile-icon-size;
    height: @header-mobile-icon-size;
    font-size: @header-mobile-icon-size;
    line-height: 1;
    margin: 0;

    svg {
        width: @header-mobile-icon-size;
        height: @header-mobile-icon-size;
    }
}

.nav-auth .nav-btn-label--short {
    display: none;
}

.user-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: min(42vw, 200px);
    height: 38px;
    padding: 0 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    border-radius: 8px;
    transition: background-color 0.2s;
    box-sizing: border-box;
    flex-shrink: 0;
}

.user-trigger:hover {
    background: rgba(27, 48, 34, 0.06);
}

.username {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: @app-breakpoint-lg) {
    .logo .title {
        font-size: 1.25em;
        margin: 4px 6px;
    }

    .nav-actions {
        gap: 8px;
        flex-shrink: 0;
    }

    .nav-links {
        gap: 8px;
        padding: 0;
        background: none;
        border: none;
        box-shadow: none;
        backdrop-filter: none;
    }

    .nav-btn-label {
        display: none !important;
    }

    .nav-btn-icon {
        display: inline-flex;
        .mobile-nav-icon-normalize();
    }

    :deep(.arco-btn.nav-btn.nav-link),
    :deep(.arco-btn.nav-btn.nav-auth) {
        .mobile-nav-icon-btn();
    }

    :deep(.arco-btn.nav-btn .arco-icon) {
        .mobile-nav-icon-normalize();
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    :deep(.arco-btn.nav-btn:hover) {
        background: fade(#fff, 72%);
    }

    .username {
        display: none;
    }

    .user-trigger-caret {
        display: none;
    }

    .user-trigger {
        .mobile-nav-icon-btn();
        max-width: none;
        justify-content: center;
    }

    .user-trigger:hover {
        background: fade(#fff, 72%);
    }

    :deep(.user-avatar) {
        width: @header-mobile-icon-size !important;
        height: @header-mobile-icon-size !important;
        line-height: @header-mobile-icon-size !important;
    }
}

@media (max-width: @app-breakpoint-sm) {
    .logo .title {
        display: none;
    }
}
</style>
