<template>
    <t-popup v-model="popupVisible" trigger="click" placement="bottom-left" :overlay-inner-style="popupOverlayStyle"
        overlay-class-name="reception-limit-popup" :on-visible-change="handleVisibleChange">
        <div class="reception-limit-wrapper reception-limit-entry">
            <span class="reception-limit-text">
                {{ t('接待上限 {count}人', { count: displayReceptionLimit }) }}
            </span>
            <svg class="reception-limit-icon" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"
                aria-hidden="true">
                <path d="M8.5 1.7 10.3 3.5 4 9.8 1.7 10.3 2.2 8 8.5 1.7Z" stroke="#4E5969" stroke-width="1"
                    stroke-linecap="round" stroke-linejoin="round" />
            </svg>
        </div>
        <template #content>
            <div class="reception-limit-panel">
                <t-input-number v-model="receptionLimitDraft" :min="0" :max="999" :decimal-places="0"
                    :allow-input-over-limit="false" theme="row" size="medium" align="center" />
                <div class="reception-limit-tip">{{ t('修改后约3分钟生效') }}</div>
            </div>
        </template>
    </t-popup>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import AIDeskCoreInstance from '@tencentcloud/ai-desk-core';

const { t } = useI18n();

const receptionLimit = ref<number>(0);
const receptionLimitDraft = ref<number>(0);
const popupVisible = ref(false);

const displayReceptionLimit = computed(() =>
    receptionLimit.value < 0 ? 0 : receptionLimit.value,
);

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

const loadSeatReceptionLimit = async () => {
    try {
        const limit = await AIDeskCoreInstance.userInfoService.getSeatReceptionLimit();
        receptionLimit.value = typeof limit === 'number' && limit >= 0 ? limit : 0;
    } catch (e) {
        console.error('loadSeatReceptionLimit error', e);
        receptionLimit.value = 0;
    }
};

const handleVisibleChange = async (val: boolean) => {
    if (val) {
        receptionLimitDraft.value = displayReceptionLimit.value;
        popupVisible.value = true;
        return;
    }

    popupVisible.value = false;

    const nextValue = Number(receptionLimitDraft.value);
    const currentValue = displayReceptionLimit.value;

    if (
        Number.isFinite(nextValue)
        && nextValue >= 0
        && nextValue <= 999
        && nextValue !== currentValue
    ) {
        try {
            await AIDeskCoreInstance.userInfoService.updateSeatReceptionLimit(nextValue);
            receptionLimit.value = nextValue;
        } catch (e) {
            console.error('updateSeatReceptionLimit error', e);
        }
    }
};

onMounted(() => {
    loadSeatReceptionLimit();
});
</script>

<style lang="scss">
.reception-limit-wrapper {
    &.reception-limit-entry {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 6px;
        border-radius: 4px;
        cursor: pointer;
        color: #4E5969;
        font-size: 12px;
        line-height: 18px;
        user-select: none;
        transition: background 0.15s;

        &:hover {
            background: #F0F2F7;
        }
    }

    .reception-limit-text {
        color: #4E5969;
    }

    .reception-limit-icon {
        width: 12px;
        height: 12px;
        flex-shrink: 0;
    }
}

.reception-limit-popup {
    .reception-limit-panel {
        padding: 12px;
        width: 200px;
        box-sizing: border-box;

        .t-input-number {
            width: 100%;

            .t-input {
                font-size: 12px;
                border-radius: 8px;
                height: 30px;
                padding: 4px 6px;
            }

            .t-button {
                border-radius: 10px;

                &::after {
                    display: none;
                }
            }
        }
    }

    .reception-limit-tip {
        margin-top: 6px;
        font-size: 12px;
        line-height: 18px;
        color: #A5A9B0;
    }
}
</style>
