<template>
    <button v-if="msgEnhanceEnable === 1" class="pc-polish-chip" type="button" :disabled="loading" @click="handleClick">
        <img :src="loading ? loadingIcon : icon" :class="['pc-polish-chip-icon', { 'is-loading': loading }]" alt="" />
        <span>{{ t('文本润色') }}</span>
    </button>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { v4 as uuidv4 } from 'uuid';
import AIDeskCoreInstance, { StoreName } from '@tencentcloud/ai-desk-core';
import toast from '../../../../utils/toast';
import textPolishIcon from '../../../Mobile/Chat/ChatInput/assets/textPolish.svg';
import textGeneratingIcon from '../../../Mobile/Chat/ChatInput/assets/textGenerating.png';

const props = defineProps<{
    sessionId: string;
    getSourceText: () => string;
}>();

const emit = defineEmits<{
    (e: 'polished', text: string): void;
    (e: 'polishing-change', polishing: boolean): void;
}>();

const { t } = useI18n();
const icon = textPolishIcon;
const loadingIcon = textGeneratingIcon;

const loading = ref(false);
const currentEnhanceId = ref('');
const msgEnhanceEnable = ref(0);

watch(loading, (value) => {
    emit('polishing-change', value);
});

const handleClick = async () => {
    if (loading.value || !props.sessionId) {
        return;
    }

    const msgContent = props.getSourceText();
    if (!msgContent.trim()) {
        toast.info(t('没有文本'));
        return;
    }

    const enhanceId = uuidv4();
    currentEnhanceId.value = enhanceId;
    loading.value = true;

    try {
        const result = await AIDeskCoreInstance.chatService.AIMessagePolish({
            sessionId: props.sessionId,
            msgContent,
            enhanceId,
        });

        if (currentEnhanceId.value !== enhanceId || result?.enhanceId !== enhanceId) {
            return;
        }

        emit('polished', result?.enhancedMsgContent ?? '');
    } catch (error) {
        console.error(error);
        toast.error(t('润色失败'));
    } finally {
        currentEnhanceId.value = '';
        loading.value = false;
    }
};

const onMsgEnhanceEnableUpdated = (v: number) => {
    msgEnhanceEnable.value = v;
};

onMounted(() => {
    AIDeskCoreInstance.coreStore.watch(StoreName.APP_SETTING, {
        msgEnhanceEnable: onMsgEnhanceEnableUpdated,
    });
});

onUnmounted(() => {
    AIDeskCoreInstance.coreStore.unwatch(StoreName.APP_SETTING, {
        msgEnhanceEnable: onMsgEnhanceEnableUpdated,
    });
    currentEnhanceId.value = '';
});
</script>

<style scoped>
.pc-polish-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 32px;
    padding: 0 14px;
    border: 1px solid #E7E8EA;
    border-radius: 16px;
    background: #fff;
    color: #222;
    font-size: 13px;
    line-height: 18px;
    cursor: pointer;
}

.pc-polish-chip:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.pc-polish-chip-icon {
    width: 16px;
    height: 16px;
    display: block;
}

.pc-polish-chip-icon.is-loading {
    animation: pc-polish-chip-spin 1s linear infinite;
}

@keyframes pc-polish-chip-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}
</style>
