<script setup lang="ts">
import {computed} from "vue";
import {useRouter} from "vue-router";
import {useAuthStore} from "../store/modules/auth";

const route = useRouter();
const auth = useAuthStore();

const activeTab = computed(() => {
    const path = route.currentRoute.value.path;
    const query = route.currentRoute.value.query;

    // 根据路径和查询参数判断当前激活的标签
    if (path === "/" || path === "/home") {
        return "home";
    }
    if (path === "/server") {
        return "server";
    }
    if (path === "/setting") {
        return "setting";
    }
    if (path === "/sound") {
        return "sound";
    }
    if (path === "/video") {
        // 根据 tab 参数判断具体的视频子页面
        const tab = query.tab as string;
        if (tab === "ipAgent") return "ipAgent";
        if (tab === "videoGen") return "videoGen";
        if (tab === "videoTemplate") return "videoTemplate";
        if (tab === "videoMaterial") return "videoMaterial";
        if (tab === "videoAudioExtract") return "videoAudioExtract";
        // 默认返回 ipAgent
        return "ipAgent";
    }
    if (path === "/design") {
        return "design";
    }
    if (path === "/tool") {
        return "tool";
    }
    return "";
});

const isLoggedIn = computed(() => {
    return !!(auth.token && auth.user);
});

const goToSetting = () => {
    console.log('🔧 点击了设置按钮');
    route.push('/setting');
};

const doLogout = async () => {
    try {
        const result = await auth.logout();
        if (result.success) {
            await route.push('/login');
            return;
        }
        console.error('退出登录失败:', result.message);
    } catch (error) {
        console.error('退出登录失败:', error);
    }
};
</script>

<template>
    <div class="page-nav-container flex flex-col h-full">
        <div class="flex-grow space-y-1 px-1">
            <a
                class="page-nav-item block text-center py-2 rounded-lg transition-all"
                :class="activeTab === 'ipAgent' ? 'active' : ''"
                @click="$router.push('/video?tab=ipAgent')"
                href="javascript:;"
            >
                <div>
                    <i class="iconfont icon-robot text-lg"></i>
                </div>
                <div class="text-xs font-medium mt-1">{{ $t("首页") }}</div>
            </a>
            <a
                class="page-nav-item block text-center py-2 rounded-lg transition-all"
                :class="activeTab === 'videoTemplate' ? 'active' : ''"
                @click="$router.push('/video?tab=videoTemplate')"
                href="javascript:;"
            >
                <div>
                    <i class="iconfont icon-video-template text-lg"></i>
                </div>
                <div class="text-xs font-medium mt-1">{{ $t("形象") }}</div>
            </a>
            <a
                class="page-nav-item block text-center py-2 rounded-lg transition-all"
                :class="activeTab === 'videoMaterial' ? 'active' : ''"
                @click="$router.push('/video?tab=videoMaterial')"
                href="javascript:;"
            >
                <div>
                    <icon-image class="text-lg" />
                </div>
                <div class="text-xs font-medium mt-1">{{ $t("素材") }}</div>
            </a>
            <a
                class="page-nav-item block text-center py-2 rounded-lg transition-all"
                :class="activeTab === 'sound' ? 'active' : ''"
                @click="$router.push('/sound')"
                href="javascript:;"
            >
                <div>
                    <i class="iconfont icon-sound text-lg"></i>
                </div>
                <div class="text-xs font-medium mt-1">{{ $t("声音") }}</div>
            </a>
            <a
                class="page-nav-item block text-center py-2 rounded-lg transition-all"
                :class="activeTab === 'videoGen' ? 'active' : ''"
                @click="$router.push('/video?tab=videoGen')"
                href="javascript:;"
            >
                <div>
                    <i class="iconfont icon-video text-lg"></i>
                </div>
                <div class="text-xs font-medium mt-1">{{ $t("合成") }}</div>
            </a>
            <a
                class="page-nav-item block text-center py-2 rounded-lg transition-all"
                :class="activeTab === 'videoAudioExtract' ? 'active' : ''"
                @click="$router.push('/video?tab=videoAudioExtract')"
                href="javascript:;"
            >
                <div>
                    <i class="iconfont icon-cut text-lg"></i>
                </div>
                <div class="text-xs font-medium mt-1">{{ $t("提取") }}</div>
            </a>
            <a
                class="page-nav-item block text-center py-2 rounded-lg transition-all"
                :class="activeTab === 'design' ? 'active' : ''"
                @click="$router.push('/design')"
                href="javascript:;"
            >
                <div>
                    <icon-edit class="text-lg" />
                </div>
                <div class="text-xs font-medium mt-1">{{ $t("设计") }}</div>
            </a>
            <a
                class="page-nav-item block text-center py-2 rounded-lg transition-all"
                :class="activeTab === 'tool' ? 'active' : ''"
                v-if="0"
                @click="$router.push('/tool')"
                href="javascript:;"
            >
                <div>
                    <icon-tool class="text-lg" />
                </div>
                <div class="text-xs font-medium mt-1">{{ $t("工具箱") }}</div>
            </a>
            <a
                class="page-nav-item block text-center py-2 rounded-lg transition-all"
                :class="activeTab === 'server' ? 'active' : ''"
                @click="$router.push('/server')"
                href="javascript:;"
            >
                <div>
                    <i class="iconfont icon-server text-lg"></i>
                </div>
                <div class="text-xs font-medium mt-1">{{ $t("模型") }}</div>
            </a>
            <a
                class="page-nav-item block text-center py-2 rounded-lg transition-all"
                :class="activeTab === 'home' ? 'active' : ''"
                @click="$router.push('/home')"
                href="javascript:;"
            >
                <div>
                    <icon-question-circle class="text-lg" />
                </div>
                <div class="text-xs font-medium mt-1">{{ $t("帮助") }}</div>
            </a>
        </div>
        <div class="pb-1 px-1 space-y-1">
            <a
                class="page-nav-item block text-center py-3 rounded-lg transition-all"
                :class="activeTab === 'setting' ? 'active' : ''"
                @click="goToSetting"
                href="javascript:;"
            >
                <div>
                    <icon-settings class="text-2xl" />
                </div>
                <div class="text-sm font-medium mt-1">{{ $t("设置") }}</div>
            </a>
            <a
                v-if="isLoggedIn"
                class="page-nav-item block text-center py-2 rounded-lg transition-all"
                @click="doLogout"
                href="javascript:;"
            >
                <div>
                    <icon-export class="text-lg" />
                </div>
                <div class="text-xs font-medium mt-1">{{ $t("退出") }}</div>
            </a>
        </div>
    </div>
</template>

<style scoped>
.page-nav-container {
    background: linear-gradient(180deg, #1a1a1f 0%, #0f0f15 100%);
    border-right: 1px solid #303035;
}

.login-button-wrapper {
    border: 1px solid transparent;

    &.login-btn-unauthenticated {
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0.08) 100%);
        border: 1px solid rgba(59, 130, 246, 0.25);

        &:hover {
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.18) 0%, rgba(59, 130, 246, 0.12) 100%);
            border-color: rgba(59, 130, 246, 0.4);
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
        }
    }
}

.page-nav-item {
    color: #b8b8c8;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;

    &:hover {
        color: #ffffff;
        background-color: rgba(59, 130, 246, 0.1);
        border-color: rgba(59, 130, 246, 0.3);
    }

    &.active {
        color: #ffffff;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(59, 130, 246, 0.1) 100%);
        border-color: #3b82f6;
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
    }
}

:deep(.arco-tooltip-content) {
    background-color: rgba(0, 0, 0, 0.8);
}
</style>
