<template>
    <aside class="pc-side-nav">
        <div class="pc-side-nav__top">
            <button type="button" class="pc-side-nav__item pc-side-nav__item--active" :aria-label="t('会话')">
                <span class="pc-side-nav__icon pc-side-nav__icon--mask"
                    :style="{ '-webkit-mask-image': `url(&quot;${chatIcon}&quot;)`, 'mask-image': `url(&quot;${chatIcon}&quot;)` }"
                    aria-hidden="true"></span>
                <span class="pc-side-nav__label">{{ t('会话') }}</span>
            </button>
        </div>

        <div class="pc-side-nav__bottom">
            <t-popup v-model="settingsVisible" placement="right-bottom" trigger="click"
                overlay-class-name="pc-side-nav-settings-popup" :overlay-inner-style="popupOverlayStyle"
                :on-visible-change="handleSettingsVisibleChange">
                <button type="button" class="pc-side-nav__item" :aria-label="t('设置')">
                    <span class="pc-side-nav__icon pc-side-nav__icon--mask"
                        :style="{ '-webkit-mask-image': `url(&quot;${settingsIcon}&quot;)`, 'mask-image': `url(&quot;${settingsIcon}&quot;)` }"
                        aria-hidden="true"></span>
                    <span class="pc-side-nav__label">{{ t('设置') }}</span>
                </button>

                <template #content>
                    <div class="pc-side-nav-menu">
                        <button type="button" class="pc-side-nav-menu__item" @click="handleProfileClick">
                            <span class="pc-side-nav-menu__label">{{ t('个人信息') }}</span>
                        </button>
                        <button type="button" class="pc-side-nav-menu__item" @click="handleChangePasswordClick">
                            <span class="pc-side-nav-menu__label">{{ t('修改密码') }}</span>
                        </button>

                        <t-popup placement="right-top" trigger="hover" overlay-class-name="pc-side-nav-lang-popup"
                            :overlay-inner-style="popupOverlayStyle">
                            <button type="button" class="pc-side-nav-menu__item">
                                <span class="pc-side-nav-menu__label">{{ t('设置语言') }}</span>
                                <span class="pc-side-nav-menu__value">{{ currentLocaleLabel }}</span>
                                <svg class="pc-side-nav-menu__arrow" viewBox="0 0 12 12" fill="none"
                                    xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                    <path d="M4.5 2.5 8 6l-3.5 3.5" stroke="#86909C" stroke-width="1.4"
                                        stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                            </button>

                            <template #content>
                                <div class="pc-side-nav-menu">
                                    <button v-for="opt in localeOptions" :key="opt.value" type="button"
                                        class="pc-side-nav-menu__item"
                                        :class="{ 'is-selected': opt.value === currentLocale }"
                                        @click="handleLocaleSelect(opt.value)">
                                        <span class="pc-side-nav-menu__label">{{ opt.label }}</span>
                                        <span v-if="opt.value === currentLocale"
                                            class="pc-side-nav-menu__check">✓</span>
                                    </button>
                                </div>
                            </template>
                        </t-popup>
                    </div>
                </template>
            </t-popup>
        </div>

        <ProfileDialog v-model:visible="profileVisible" />
        <ChangePasswordDialog v-model:visible="changePasswordVisible" />
    </aside>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import AIDeskCoreInstance from '@tencentcloud/ai-desk-core';
import { getLocale, LOCALE_OPTIONS, setLocale, type AppLocale } from '../../../../locales';
import toast from '../../../../utils/toast';
import { parseUnknownError } from '../../../../utils/parseUnknownError';
import ProfileDialog from '../ProfileDialog/index.vue';
import ChangePasswordDialog from '../ChangePasswordDialog/index.vue';
import chatIcon from './chat.svg';
import settingsIcon from './settings.svg';

const { t } = useI18n();

const settingsVisible = ref(false);
const profileVisible = ref(false);
const changePasswordVisible = ref(false);
const currentLocale = ref<AppLocale>(getLocale());

const popupOverlayStyle = {
    padding: 0,
    background: '#fff',
    borderRadius: '10px',
    border: 'none',
    boxShadow: '0 6px 24px rgba(0, 0, 0, 0.12)',
    overflow: 'hidden',
};

const localeLabelMap: Record<AppLocale, string> = {
    'zh-CN': '中文',
    'en-US': 'English',
};

const localeOptions = computed(() => {
    return LOCALE_OPTIONS.map((value) => ({
        value,
        label: localeLabelMap[value],
    }));
});

const currentLocaleLabel = computed(() => localeLabelMap[currentLocale.value]);

const handleSettingsVisibleChange = (val: boolean) => {
    settingsVisible.value = val;
};

const handleProfileClick = () => {
    settingsVisible.value = false;
    profileVisible.value = true;
};

const handleChangePasswordClick = () => {
    settingsVisible.value = false;
    changePasswordVisible.value = true;
};

const handleLocaleSelect = async (value: AppLocale) => {
    try {
        await AIDeskCoreInstance.appSettingService.changeLanguage(value === 'zh-CN' ? 'zh' : 'en');
        currentLocale.value = value;
        setLocale(value);
        settingsVisible.value = false;
    } catch (error) {
        console.error(error);
        toast.error(parseUnknownError(error));
    }
};
</script>

<style scoped>
.pc-side-nav {
    width: 72px;
    flex-shrink: 0;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    box-sizing: border-box;
    border-right: 1px solid #f0f0f0;
}

.pc-side-nav__top,
.pc-side-nav__bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.pc-side-nav__item {
    width: 56px;
    padding: 8px 0;
    background: transparent;
    border: none;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    color: #4E5969;
    transition: background 0.15s, color 0.15s;
}

.pc-side-nav__item:hover {
    background: #F2F3F5;
}

.pc-side-nav__item--active {
    color: #316EF5;
    background: #E8F0FF;
}

.pc-side-nav__item--active:hover {
    background: #E8F0FF;
}

.pc-side-nav__icon {
    width: 22px;
    height: 22px;
}

.pc-side-nav__icon--mask {
    display: inline-block;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.pc-side-nav__label {
    font-size: 12px;
    line-height: 18px;
}
</style>

<style>
.pc-side-nav-settings-popup,
.pc-side-nav-lang-popup {
    z-index: 1500;
}

.pc-side-nav-menu {
    width: 180px;
    padding: 6px;
    background: #fff;
    border-radius: 10px;
    box-sizing: border-box;
}

.pc-side-nav-menu__item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

.pc-side-nav-menu__item:hover {
    background: #F7F8FA;
}

.pc-side-nav-menu__item.is-selected .pc-side-nav-menu__label {
    color: #316EF5;
}

.pc-side-nav-menu__label {
    flex: 1;
    font-size: 14px;
    line-height: 20px;
    color: #1D2129;
}

.pc-side-nav-menu__value {
    font-size: 13px;
    color: #86909C;
    line-height: 20px;
}

.pc-side-nav-menu__arrow {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.pc-side-nav-menu__check {
    color: #316EF5;
    font-size: 14px;
}
</style>
