<template>
    <div class="mobile-bottom-tabs">
        <div v-for="tab in tabs" :key="tab.path" class="tab-item" @click="handleTabClick(tab.path)">
            <div class="tab-icon-wrapper">
                <img :src="tab.icon" :alt="tab.label" class="tab-icon">
                <span v-if="tab.path === '/mobileDesk/sessionList' && unreadCount > 0" class="unread-badge">
                    {{ unreadCount }}
                </span>
            </div>
            <span>{{ tab.label }}</span>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router';
import MobileBottomTabsSession from '../../../../assets/icons/MobileBottomTabsSession.svg';
import MobileBottomTabsSessionRecord from '../../../../assets/icons/MobileBottomTabsSessionRecord.svg';
import MobileBottomTabsMy from '../../../../assets/icons/MobileBottomTabsMy.svg';
import { computed, onMounted, onUnmounted, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import AIDeskCoreInstance, { StoreName, type ISessionModel, type SESSION_TYPE } from '@tencentcloud/ai-desk-core';

const IMSessionList = ref<ISessionModel<SESSION_TYPE.IM>[]>([]);
const unreadCount = computed(() => IMSessionList.value.filter((session) => session.sessionData.sessionState === 'inProgress').reduce((total, session) => {
    return total + (session.sessionData.unreadCount ?? 0);
}, 0));

const route = useRoute();
const router = useRouter();
const { t } = useI18n();

onMounted(() => {
    AIDeskCoreInstance.coreStore.watch(StoreName.SESSION, {
        IMSessionList: onIMSessionListUpdated,
    });
});

onUnmounted(() => {
    AIDeskCoreInstance.coreStore.unwatch(StoreName.SESSION, {
        IMSessionList: onIMSessionListUpdated,
    });
});

const onIMSessionListUpdated = (list: ISessionModel<SESSION_TYPE.IM>[]) => {
    IMSessionList.value = list ?? [];
};


const tabs = computed(() => [
    {
        label: t('消息'),
        path: '/mobileDesk/sessionList',
        icon: MobileBottomTabsSession,
    },
    {
        label: t('服务记录'),
        path: '/mobileDesk/serviceRecord',
        icon: MobileBottomTabsSessionRecord,
    },
    {
        label: t('我的'),
        path: '/mobileDesk/mine',
        icon: MobileBottomTabsMy,
    },
]);

const handleTabClick = (path: string) => {
    if (route.path === path) {
        return;
    }

    router.push(path);
};
</script>

<style scoped>
.mobile-bottom-tabs {
    display: flex;
    align-items: center;
    height: 56px;
    background: #fff;
    border-top: 1px solid #e7e8ea;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.04);
    flex-shrink: 0;
}

.tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
    font-size: 12px;
    cursor: pointer;
    position: relative;
}

.tab-icon-wrapper {
    position: relative;
    display: inline-block;
}

.tab-icon {
    width: 20px;
    height: 20px;
    display: block;
}

.unread-badge {
    position: absolute;
    top: -6px;
    right: -14px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background-color: #ff4d4f;
    color: white;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 500;
    line-height: 16px;
    text-align: center;
    white-space: nowrap;
}
</style>