<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'">
                <div class="icon-container">
                    <el-input
                        style="width: 130px"
                        placeholder="搜索"
                        class="search-input"
                        readonly
                        @click="handleSearch"
                    >
                        <template #prefix>
                            <el-icon class="el-input__icon"><search /></el-icon>
                        </template>
                        <template #suffix>
                            <span class="search-input-suffix-text"> Ctrl K </span>
                        </template>
                    </el-input>

                    <el-tooltip
                        :content="settingsStore.isDark ? '切换到日间模式' : '切换到夜间模式'"
                        effect="dark"
                        placement="bottom"
                    >
                        <div class="icon-wrapper theme-toggle" @click="handleThemeToggle">
                            <Icon size="18">
                                <SunnyOutline v-if="settingsStore.isDark" />
                                <Moon v-else />
                            </Icon>
                        </div>
                    </el-tooltip>
                    <div class="icon-wrapper">
                        <Icon size="18">
                            <ScanOutline />
                        </Icon>
                    </div>
                    <div class="icon-wrapper">
                        <Icon size="18">
                            <NotificationsOutline />
                        </Icon>
                    </div>
                </div>

                <!-- <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
                placement="bottom-end"
                @command="handleCommand"
                class="avatar-container right-menu-item hover-effect"
            >
                <div class="avatar-wrapper">
                    <img :src="userStore.avatar" class="user-avatar" />
                    <span class="user-nickname"> {{ userStore.nickName }} </span>
                    <Icon size="18">
                        <ChevronDown />
                    </Icon>
                </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-item> </el-dropdown-item> -->

                        <div class="user-info">
                            <img :src="userStore.avatar" class="user-avatar" />
                            <div class="user-info-text">
                                <div>
                                    <span>李思思</span>
                                    <el-tag type="success">管理员</el-tag>
                                </div>

                                <div>Admin_@soho.com</div>
                            </div>
                        </div>

                        <div class="user-info-item">
                            <div class="user-info-item-text">
                                <div style="display: flex; align-items: center; gap: 6px">
                                    <Icon size="18"> <PersonOutline /> </Icon>
                                    <span> 个人中心 </span>
                                </div>

                                <Icon size="18">
                                    <ChevronForward />
                                </Icon>
                            </div>
                            <div class="user-info-item-text">
                                <div style="display: flex; align-items: center; gap: 6px">
                                    <Icon size="18"> <LockClosedOutline /> </Icon>
                                    <span> 修改密码 </span>
                                </div>

                                <Icon size="18">
                                    <ChevronForward />
                                </Icon>
                            </div>
                        </div>

                        <div class="logout-item">
                            <div class="logout-item-text" @click="logout">
                                <Icon size="18"> <ExitOutline /> </Icon>
                                <span> 退出登录 </span>
                            </div>
                        </div>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue'
import { ElMessageBox } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import {
    Moon,
    ScanOutline,
    SunnyOutline,
    NotificationsOutline,
    ChevronDown,
    PersonOutline,
    LockClosedOutline,
    ChevronForward,
    ExitOutline,
} from '@vicons/ionicons5'
import { initThemeTransitionCSS } from '@/utils/themeTransition'
import { Icon } from '@vicons/utils'
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'
            })
        })
        .catch(() => {})
}

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

function toggleTheme() {
    settingsStore.toggleTheme()
}

// 处理主题切换（带动画）
function handleThemeToggle(event) {
    settingsStore.toggleThemeWithAnimation(event)
}

const handleSearch = () => {
    console.log('handleSearch')
    // 这里后续会打开搜索框
}

// 监听全局 Ctrl+K 快捷键
const handleKeyDown = (e) => {
    if (e.ctrlKey && e.key === 'k') {
        e.preventDefault()
        e.stopPropagation()
        handleSearch()
    }
}

onMounted(() => {
    window.addEventListener('keydown', handleKeyDown)
    // 初始化主题切换动画 CSS
    initThemeTransitionCSS()
})

onUnmounted(() => {
    window.removeEventListener('keydown', handleKeyDown)
})
</script>

<style lang='scss' scoped>
.navbar {
    height: 50px;
    overflow: hidden;
    position: relative;
    background: var(--navbar-bg);
    box-shadow: 0 2px 8px rgba(0, 168, 98, 0.1);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;

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

        &:hover {
            background: rgba(0, 0, 0, 0.025);
        }
    }

    .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;

        .icon-container {
            padding-right: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 18px;
            border-right: 1px solid #e0e0e0;
            transition: border-color 0.3s ease;
        }

        &:focus {
            outline: none;
        }

        .right-menu-item {
            display: inline-block;
            padding: 0 8px;
            height: 100%;
            font-size: 18px;
            color: #5a5e66;

            vertical-align: text-bottom;

            &.hover-effect {
                cursor: pointer;
                transition: background 0.3s;

                &:hover {
                    background: rgba(0, 0, 0, 0.025);
                }
            }

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

                svg {
                    transition: transform 0.3s;

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

        .avatar-container {
            margin-right: 0px;
            padding: 0 14px;
            padding-left: 18px;
            flex: 1;
            display: flex;
            align-items: center;

            .avatar-wrapper {
                display: flex;
                align-items: center;
                border-radius: 6px;
                padding: 4px;
                transition: all 0.3s ease;

                .user-avatar {
                    cursor: pointer;
                    width: 30px;
                    height: 30px;
                    margin-right: 8px;
                    border-radius: 50%;
                    border: 2px solid transparent;
                    transition: border-color 0.3s ease;
                }

                .user-nickname {
                    padding: 0 4px;
                    font-size: 14px;
                    font-weight: 500;
                    color: var(--navbar-text, #303133);
                    transition: color 0.3s ease;
                }

                i {
                    cursor: pointer;
                    position: absolute;
                    right: -20px;
                    top: 25px;
                    font-size: 12px;
                }
            }

            .avatar-wrapper:hover {
                background-color: rgba(0, 168, 98, 0.1);
                transition: all 0.3s ease;
            }
        }
    }
}

.user-info {
    padding: 14px 16px 14px 6px;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-family: 'PingFang SC', 'Microsoft YaHei', 'Arial', sans-serif;
    border-bottom: 1px dashed #f0f0f0;
    transition: border-color 0.3s ease;

    .user-info-text {
        margin-left: 6px;
        letter-spacing: 1px;

        div:first-child {
            margin-bottom: 6px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }
    }

    .user-avatar {
        width: 36px;
        height: 36px;
        margin-right: 8px;
        border-radius: 4px;
        border: 2px solid transparent;
        transition: border-color 0.3s ease;
    }

    .user-info-text div:last-child {
        color: #909599;
        font-size: 12px;
    }
}

.user-info-item {
    padding: 4px 0 14px 0;
    border-bottom: 1px dashed #f0f0f0;
    transition: border-color 0.3s ease;

    .user-info-item-text {
        padding: 12px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        transition: all 0.3s ease;
        border-radius: 6px;
        margin: 0 4px;
        color: var(--el-text-color-regular, #606266);

        :deep(svg) {
            color: inherit;
            transition: transform 0.3s ease;
        }

        &:hover {
            background-color: rgba(0, 168, 98, 0.1);
            color: var(--el-color-primary, #00a862);

            :deep(svg:last-child) {
                transform: translateX(2px);
            }
        }
    }
}

.logout-item {
    padding: 12px 0;
    display: flex;
    align-items: center;
    justify-content: center;

    .logout-item-text {
        padding: 8px 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        cursor: pointer;
        background-color: #f4f5f5;
        border-radius: 6px;
        color: #767c82;
        letter-spacing: 1px;
        transition: all 0.3s ease;
        font-size: 14px;

        :deep(svg) {
            color: inherit;
        }

        &:hover {
            background-color: rgba(245, 108, 108, 0.1);
            color: #f56c6c;
        }
    }
}

.icon-container :deep(.el-input) {
    --el-input-bg-color: #efeff5;
    --el-input-border: transparent;
    --el-input-border-radius: 6px;
    --el-input-hover-border: transparent;
    --el-input-focus-border: transparent;
    --el-input-transparent-border: transparent;
    --el-input-border-color: transparent;
    --el-input-hover-border-color: transparent;
    --el-input-focus-border-color: transparent;
    cursor: pointer;
    transition: all 0.3s ease;

    .el-input__wrapper {
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .el-input__inner {
        cursor: pointer;
        caret-color: transparent;
        transition: all 0.3s ease;
    }

    &:hover {
        .el-input__wrapper {
            background-color: rgba(0, 168, 98, 0.08);
        }
    }
}

.search-input-suffix-text {
    background-color: #fff;
    height: 25px;
    line-height: 25px;
    padding: 0 4px;
    border-radius: 6px;
    transition: all 0.3s ease;
    font-size: 11px;
    color: #909399;
}

.xicon {
    cursor: pointer;
}

.icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--navbar-text, #5a5e66);

    &:hover {
        transform: scale(1.1);
        background-color: rgba(0, 168, 98, 0.1);

        .xicon {
            color: #00a862;
        }
    }

    &.theme-toggle {
        position: relative;

        // 图标旋转动画
        :deep(svg) {
            transition: transform 0.3s ease;
            color: inherit;
        }

        &:hover {
            :deep(svg) {
                transform: rotate(15deg);
            }
        }
    }
}
</style>

<style lang='scss'>
// 全局样式，用于 Element Plus 的 popper（挂载在 body 下）
.el-dropdown__popper .el-dropdown__list {
    padding: 8px 14px !important;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

// 夜间模式下的导航栏样式
html.dark {
    .navbar {
        background: var(--navbar-bg);
        border-bottom: 1px solid var(--navbar-border, #252a2f);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);

        .right-menu {
            .icon-container {
                border-right-color: var(--navbar-border, #252a2f);
            }
        }

        .avatar-container {
            .avatar-wrapper {
                .user-nickname {
                    color: var(--navbar-text);
                }

                &:hover {
                    background-color: var(--navbar-hover);
                }
            }
        }
    }

    // 搜索框夜间模式样式
    .icon-container :deep(.el-input) {
        --el-input-bg-color: var(--search-bg, #1a1f24);
        --el-input-text-color: var(--search-text, #e4e7ed);
        --el-input-placeholder-color: var(--search-placeholder, #6b7280);

        .el-input__wrapper {
            background-color: var(--search-bg, #1a1f24);
            border: 1px solid var(--search-border, #252a2f);
            box-shadow: none;

            &:hover {
                background-color: var(--search-hover-bg, #1f2529);
                border-color: var(--el-color-primary);
            }
        }

        .el-input__inner {
            color: var(--search-text, #e4e7ed);

            &::placeholder {
                color: var(--search-placeholder, #6b7280);
            }
        }

        .el-input__icon {
            color: var(--search-placeholder, #6b7280);
        }
    }

    .search-input-suffix-text {
        background-color: var(--search-suffix-bg, #252a2f);
        color: var(--search-placeholder, #6b7280);
        border: 1px solid var(--search-border, #252a2f);
    }

    // 图标夜间模式样式
    .icon-wrapper {
        color: var(--navbar-text, #e4e7ed);

        &:hover {
            background-color: rgba(0, 168, 98, 0.15);
        }
    }

    // 下拉菜单夜间模式样式
    .el-dropdown__popper {
        background-color: var(--dropdown-bg, #1a1f24) !important;
        border: 1px solid var(--dropdown-border, #252a2f) !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;

        .el-dropdown-menu {
            background-color: transparent;
            border: none;
        }

        .el-dropdown-menu__item {
            color: var(--el-text-color-regular, #b3b9c4) !important;

            &:not(.is-disabled):hover,
            &:not(.is-disabled):focus {
                background-color: var(--dropdown-item-hover, #1f2529) !important;
                color: var(--el-color-primary, #00a862) !important;
            }
        }
    }

    // 用户信息区域夜间模式样式
    .user-info {
        border-bottom-color: var(--dropdown-divider, #252a2f);
        color: var(--el-text-color-primary, #e4e7ed);

        .user-info-text {
            div:first-child {
                span {
                    color: var(--el-text-color-primary, #e4e7ed);
                }
            }

            div:last-child {
                color: var(--el-text-color-regular, #b3b9c4);
            }
        }

        .user-avatar {
            border-color: var(--dropdown-border, #252a2f);
        }
    }

    .user-info-item {
        border-bottom-color: var(--dropdown-divider, #252a2f);

        .user-info-item-text {
            color: var(--el-text-color-regular, #b3b9c4);

            &:hover {
                background-color: var(--dropdown-item-hover, #1f2529);
                color: var(--el-color-primary, #00a862);
            }
        }
    }

    .logout-item {
        .logout-item-text {
            background-color: var(--dropdown-item-hover, #1f2529);
            color: var(--el-text-color-regular, #b3b9c4);

            &:hover {
                background-color: rgba(245, 108, 108, 0.15);
                color: #f56c6c;
            }
        }
    }
}
</style>
