<template>
    <div class="navbar">
        <hamburger
            id="hamburger-container"
            :is-active="appStore.sidebar.opened"
            class="hamburger-container"
            @toggleClick="toggleSideBar"
        />
        <breadcrumb
            v-if="!settingsStore.topNav"
            id="breadcrumb-container"
            class="breadcrumb-container"
        />
        <top-nav v-if="settingsStore.topNav" id="topmenu-container" class="topmenu-container" />

        <div class="right-menu">
            <template v-if="appStore.device !== 'mobile'">
                <header-search id="header-search" class="right-menu-item" />

                <!-- <el-tooltip content="源码地址" effect="dark" placement="bottom">
          <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
        </el-tooltip>

        <el-tooltip content="文档地址" effect="dark" placement="bottom">
          <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
        </el-tooltip> -->

                <screenfull id="screenfull" class="right-menu-item hover-effect" />

                <!-- <el-tooltip content="主题模式" effect="dark" placement="bottom">
                    <div
                        class="right-menu-item hover-effect theme-switch-wrapper"
                        @click="toggleTheme"
                    >
                        <svg-icon v-if="settingsStore.isDark" icon-class="sunny" />
                        <svg-icon v-if="!settingsStore.isDark" icon-class="moon" />
                    </div>
                </el-tooltip> -->

                <el-tooltip content="布局大小" effect="dark" placement="bottom">
                    <size-select id="size-select" class="right-menu-item hover-effect" />
                </el-tooltip>
            </template>

            <el-dropdown
                @command="handleCommand"
                class="avatar-container right-menu-item hover-effect"
                trigger="hover"
            >
                <div class="avatar-wrapper">
                    <img :src="userStore.avatar" class="user-avatar" />
                    <span class="user-nickname"> {{ userStore.nickName }} </span>
                </div>
                <template #dropdown>
                    <el-dropdown-menu>
                        <router-link to="/user/profile">
                            <el-dropdown-item>个人中心</el-dropdown-item>
                        </router-link>
                        <el-dropdown-item command="setLayout" v-if="settingsStore.showSettings">
                            <span>布局设置</span>
                        </el-dropdown-item>
                        <el-dropdown-item divided command="logout">
                            <span>退出登录</span>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>

<script setup>
import { ElMessageBox } from 'element-plus'
import Breadcrumb from '@/components/Breadcrumb'
import TopNav from '@/components/TopNav'
import Hamburger from '@/components/Hamburger'
import Screenfull from '@/components/Screenfull'
import SizeSelect from '@/components/SizeSelect'
import HeaderSearch from '@/components/HeaderSearch'
import RuoYiGit from '@/components/RuoYi/Git'
import RuoYiDoc from '@/components/RuoYi/Doc'
import useAppStore from '@/store/modules/app'
import useUserStore from '@/store/modules/user'
import useSettingsStore from '@/store/modules/settings'

const appStore = useAppStore()
const userStore = useUserStore()
const settingsStore = useSettingsStore()

function toggleSideBar() {
    appStore.toggleSideBar()
}

function handleCommand(command) {
    switch (command) {
        case 'setLayout':
            setLayout()
            break
        case 'logout':
            logout()
            break
        default:
            break
    }
}

function logout() {
    ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            userStore.logOut().then(() => {
                // location.href = '/index'
                location.href = import.meta.env.VITE_APP_PUBLIC_PATH + '/index'
            })
        })
        .catch(() => {})
}

const emits = defineEmits(['setLayout'])
function setLayout() {
    emits('setLayout')
}

function toggleTheme() {
    settingsStore.toggleTheme()
}
</script>

<style lang="scss" scoped>
.navbar {
    height: 50px;
    overflow: hidden;
    position: relative;
    background: var(--navbar-bg);
    border-bottom: 1px solid var(--navbar-border, #f0f0f0);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
    backdrop-filter: blur(12px);

    .hamburger-container {
        line-height: 46px;
        height: 100%;
        float: left;
        cursor: pointer;
        transition: background 0.25s ease, transform 0.2s ease;
        -webkit-tap-highlight-color: transparent;

        &:hover {
            background: rgba(22, 119, 255, 0.08);
            transform: translateY(-1px);
        }
    }

    .breadcrumb-container {
        float: left;
    }

    .topmenu-container {
        position: absolute;
        left: 50px;
    }

    .errLog-container {
        display: inline-block;
        vertical-align: top;
    }

    .right-menu {
        float: right;
        height: 100%;
        line-height: 50px;
        display: flex;
        align-items: center;
        padding-right: 12px;

        &:focus {
            outline: none;
        }

        .right-menu-item {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0 10px;
            margin: 0 2px;
            height: 100%;
            font-size: 18px;
            color: #4b5563;
            vertical-align: middle;
            border-radius: 999px;
            transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease,
                box-shadow 0.2s ease;

            &.hover-effect {
                cursor: pointer;

                &:hover {
                    background: rgba(22, 119, 255, 0.08);
                    color: #1677ff;
                    transform: translateY(-1px);
                    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
                }
            }

            &.theme-switch-wrapper {
                display: inline-flex;
                align-items: center;

                svg {
                    transition: transform 0.25s ease;

                    &:hover {
                        transform: scale(1.1);
                    }
                }
            }
        }

        .avatar-container {
            margin-right: 0;
            padding-right: 0;

            .avatar-wrapper {
                position: relative;
                right: 0;
                margin-top: 0;
                display: inline-flex;
                align-items: center;
                gap: 8px;
                padding: 6px 12px;
                border-radius: 999px;
                background: rgba(17, 24, 39, 0.02);
                transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;

                .user-avatar {
                    cursor: pointer;
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                    border: 2px solid rgba(255, 255, 255, 0.9);
                    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
                }

                .user-nickname {
                    position: static;
                    font-size: 14px;
                    font-weight: 500;
                    color: #374151;
                    white-space: nowrap;
                }

                i {
                    display: none;
                }
            }

            &:hover .avatar-wrapper {
                background: rgba(22, 119, 255, 0.1);
                transform: translateY(-1px);
                box-shadow: 0 4px 10px rgba(15, 23, 42, 0.16);
            }
        }
    }
}
</style>
