<script setup lang="ts">
import type { Ref } from 'vue'
import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { storeToRefs } from 'pinia'
import { NAutoComplete, NButton, NInput, useDialog, useMessage, NModal, NConfigProvider, NCard } from 'naive-ui'
import html2canvas from 'html2canvas'
import { Message } from './components'
import { useScroll } from './hooks/useScroll'
import { useChat } from './hooks/useChat'
import { useCopyCode } from './hooks/useCopyCode'
import { useUsingContext } from './hooks/useUsingContext'
import HeaderComponent from './components/Header/index.vue'
import { HoverButton, SvgIcon, MinePannel, InfoForm, VipPannel, MaskPannel, Share } from '@/components/common'
import { useBasicLayout } from '@/hooks/useBasicLayout'
import {
    useChatStore,
    useAppStore,
    usePromptStore,
    useAuthStore,
    useUserMemberStore,
    useCompanyStore,
    useUserStore
} from '@/store'
import { fetchChatAPIProcess, fetchGetUserFileds } from '@/api'
import { t } from '@/locales'
import { useTheme } from '@/hooks/useTheme'
import { emitter } from '@/plugins'
import maskIcon from '@/assets/png-mianju.png'
import maskDarkIcon from '@/assets/png-mianju-dark.png'
import { fetchGetMask } from '@/api'

let controller = new AbortController()

const openLongReply = import.meta.env.VITE_GLOB_OPEN_LONG_REPLY === 'true'

const route = useRoute()
const router = useRouter()
const dialog = useDialog()
const ms = useMessage()

const chatStore = useChatStore()

useCopyCode()

const { isMobile } = useBasicLayout()
const { addChat, updateChat, updateChatSome, getChatByUuidAndIndex } = useChat()
const { scrollRef, scrollToBottom, scrollToBottomIfAtBottom } = useScroll()
const { usingContext, toggleUsingContext } = useUsingContext()

const { uuid } = route.params as { uuid: string }

const dataSources = computed(() => chatStore.getChatByUuid(+uuid))
const conversationList = computed(() => dataSources.value.filter(item => !item.inversion && !!item.conversationOptions))

const prompt = ref<string>('')
const loading = ref<boolean>(false)
const inputRef = ref<Ref | null>(null)

// 添加PromptStore
const promptStore = usePromptStore()

// 使用storeToRefs，保证store修改后，联想部分能够重新渲染
const { promptList: promptTemplate } = storeToRefs<any>(promptStore)

const { user } = storeToRefs<any>(useAuthStore())

// 未知原因刷新页面，loading 状态不会重置，手动重置
dataSources.value.forEach((item, index) => {
    if (item.loading) updateChatSome(+uuid, index, { loading: false })
})

const iconId = ref(0)
const histroyData = computed(() => chatStore.getHistoryByUuid(+uuid))
const maskId = computed(() => {
    return histroyData.value?.maskId
})
if (histroyData.value?.maskId) {
    fetchGetMask(histroyData.value?.maskId).then((res: any) => {
        iconId.value = res.iconId
    })
}

const userMemberStore = useUserMemberStore()
function handleSubmit() {
    if (company.value.id === 1) {
        if (!userMemberStore.isVip()) {
            const inversions = dataSources.value.filter(item => {
                return item.inversion
            })
            if (import.meta.env.VITE_ORG_MODE !== 'true' && inversions.length > 0 && inversions.length % 3 === 0) {
                showVipTips.value = true
            }
        }
    }

    onConversation()
}

async function onConversation() {
    let message = prompt.value

    if (loading.value) return

    if (!message || message.trim() === '') return

    controller = new AbortController()

    addChat(+uuid, {
        dateTime: new Date().toLocaleString(),
        text: message,
        inversion: true,
        error: false,
        conversationOptions: null,
        requestOptions: { prompt: message, options: null }
    })
    scrollToBottom()

    loading.value = true
    prompt.value = ''

    let options: Chat.ConversationRequest = {}
    const lastContext = conversationList.value[conversationList.value.length - 1]?.conversationOptions

    if (lastContext && usingContext.value) options = { ...lastContext }

    addChat(+uuid, {
        dateTime: new Date().toLocaleString(),
        text: '',
        loading: true,
        inversion: false,
        error: false,
        conversationOptions: null,
        requestOptions: { prompt: message, options: { ...options } }
    })
    scrollToBottom()

    try {
        let lastText = ''
        const fetchChatAPIOnce = async () => {
            await fetchChatAPIProcess<Chat.ConversationResponse>({
                url: (Number(company.value?.id) || 0) > 0 ? `/org/${company.value.id}/ask` : null,
                prompt: message,
                options,
                signal: controller.signal,
                onDownloadProgress: ({ event }) => {
                    const xhr = event.target
                    const { responseText } = xhr
                    // Always process the final line
                    const lastIndex = responseText.lastIndexOf('\n', responseText.length - 2)
                    let chunk = responseText
                    if (lastIndex !== -1) chunk = responseText.substring(lastIndex)
                    try {
                        const data = JSON.parse(chunk)
                        updateChat(+uuid, dataSources.value.length - 1, {
                            dateTime: new Date().toLocaleString(),
                            text: lastText + (data.text ?? ''),
                            inversion: false,
                            error: false,
                            loading: true,
                            conversationOptions: { conversationId: data.conversationId, parentMessageId: data.id },
                            requestOptions: { prompt: message, options: { ...options } }
                        })

                        if (openLongReply && data.detail.choices[0].finish_reason === 'length') {
                            options.parentMessageId = data.id
                            lastText = data.text
                            message = ''
                            return fetchChatAPIOnce()
                        }

                        scrollToBottomIfAtBottom()
                    } catch (error) {
                        //
                    }
                }
            })
            updateChatSome(+uuid, dataSources.value.length - 1, { loading: false })
        }

        await fetchChatAPIOnce()
    } catch (error: any) {
        const errorMessage = error?.message ?? t('common.wrong')

        if (error.message === 'canceled') {
            updateChatSome(+uuid, dataSources.value.length - 1, {
                loading: false
            })
            scrollToBottomIfAtBottom()
            return
        }

        const currentChat = getChatByUuidAndIndex(+uuid, dataSources.value.length - 1)

        if (currentChat?.text && currentChat.text !== '') {
            updateChatSome(+uuid, dataSources.value.length - 1, {
                text: `${currentChat.text}\n[${errorMessage}]`,
                error: false,
                loading: false
            })
            return
        }

        updateChat(+uuid, dataSources.value.length - 1, {
            dateTime: new Date().toLocaleString(),
            text: errorMessage,
            inversion: false,
            error: true,
            loading: false,
            conversationOptions: null,
            requestOptions: { prompt: message, options: { ...options } }
        })
        scrollToBottomIfAtBottom()
    } finally {
        loading.value = false
    }
}

async function onRegenerate(index: number) {
    if (loading.value) return

    controller = new AbortController()

    const { requestOptions } = dataSources.value[index]

    let message = requestOptions?.prompt ?? ''

    let options: Chat.ConversationRequest = {}

    if (requestOptions.options) options = { ...requestOptions.options }

    loading.value = true

    updateChat(+uuid, index, {
        dateTime: new Date().toLocaleString(),
        text: '',
        inversion: false,
        error: false,
        loading: true,
        conversationOptions: null,
        requestOptions: { prompt: message, options: { ...options } }
    })

    try {
        let lastText = ''
        const fetchChatAPIOnce = async () => {
            await fetchChatAPIProcess<Chat.ConversationResponse>({
                url: (Number(company.value?.id) || 0) > 0 ? `/org/${company.value.id}/ask` : null,
                prompt: message,
                options,
                signal: controller.signal,
                onDownloadProgress: ({ event }) => {
                    const xhr = event.target
                    const { responseText } = xhr
                    // Always process the final line
                    const lastIndex = responseText.lastIndexOf('\n', responseText.length - 2)
                    let chunk = responseText
                    if (lastIndex !== -1) chunk = responseText.substring(lastIndex)
                    try {
                        const data = JSON.parse(chunk)
                        updateChat(+uuid, index, {
                            dateTime: new Date().toLocaleString(),
                            text: lastText + (data.text ?? ''),
                            inversion: false,
                            error: false,
                            loading: true,
                            conversationOptions: { conversationId: data.conversationId, parentMessageId: data.id },
                            requestOptions: { prompt: message, options: { ...options } }
                        })

                        if (openLongReply && data.detail.choices[0].finish_reason === 'length') {
                            options.parentMessageId = data.id
                            lastText = data.text
                            message = ''
                            return fetchChatAPIOnce()
                        }
                    } catch (error) {
                        //
                    }
                }
            })

            updateChatSome(+uuid, index, { loading: false })
        }
        await fetchChatAPIOnce()
    } catch (error: any) {
        if (error.message === 'canceled') {
            updateChatSome(+uuid, index, {
                loading: false
            })
            return
        }

        const errorMessage = error?.message ?? t('common.wrong')

        updateChat(+uuid, index, {
            dateTime: new Date().toLocaleString(),
            text: errorMessage,
            inversion: false,
            error: true,
            loading: false,
            conversationOptions: null,
            requestOptions: { prompt: message, options: { ...options } }
        })
    } finally {
        loading.value = false
    }
}

function handleExport() {
    if (loading.value) return

    const d = dialog.warning({
        title: t('chat.exportImage'),
        content: t('chat.exportImageConfirm'),
        positiveText: t('common.yes'),
        negativeText: t('common.no'),
        onPositiveClick: async () => {
            try {
                d.loading = true
                const ele = document.getElementById('image-wrapper')
                const canvas = await html2canvas(ele as HTMLDivElement, {
                    useCORS: true
                })
                const imgUrl = canvas.toDataURL('image/png')
                const tempLink = document.createElement('a')
                tempLink.style.display = 'none'
                tempLink.href = imgUrl
                tempLink.setAttribute('download', 'chat-shot.png')
                if (typeof tempLink.download === 'undefined') tempLink.setAttribute('target', '_blank')

                document.body.appendChild(tempLink)
                tempLink.click()
                document.body.removeChild(tempLink)
                window.URL.revokeObjectURL(imgUrl)
                d.loading = false
                ms.success(t('chat.exportSuccess'))
                Promise.resolve()
            } catch (error: any) {
                ms.error(t('chat.exportFailed'))
            } finally {
                d.loading = false
            }
        }
    })
}

function handleDelete(index: number) {
    if (loading.value) return

    dialog.warning({
        title: t('chat.deleteMessage'),
        content: t('chat.deleteMessageConfirm'),
        positiveText: t('common.yes'),
        negativeText: t('common.no'),
        onPositiveClick: () => {
            chatStore.deleteChatByUuid(+uuid, index)
        }
    })
}

function handleClear() {
    if (loading.value) return

    dialog.warning({
        title: t('chat.clearChat'),
        content: t('chat.clearChatConfirm'),
        positiveText: t('common.yes'),
        negativeText: t('common.no'),
        onPositiveClick: () => {
            chatStore.clearChatByUuid(+uuid)
        }
    })
}

function handleEnter(event: KeyboardEvent) {
    if (!isMobile.value) {
        if (event.key === 'Enter' && !event.shiftKey) {
            event.preventDefault()
            handleSubmit()
        }
    } else {
        if (event.key === 'Enter' && event.ctrlKey) {
            event.preventDefault()
            handleSubmit()
        }
    }
}

function handleFocus() {
    // userStore.checkLogin()
    if (!user) {
        inputRef.value.blur()
        dialog.warning({
            title: t('common.tips'),
            content: t('auth.loginPrompt'),
            positiveText: t('common.yes'),
            negativeText: t('common.no'),
            onPositiveClick: () => {
                router.push({ name: 'login' })
            }
        })
    }
}

function handleStop() {
    if (loading.value) {
        controller.abort()
        loading.value = false
    }
}

// 可优化部分
// 搜索选项计算，这里使用value作为索引项，所以当出现重复value时渲染异常(多项同时出现选中效果)
// 理想状态下其实应该是key作为索引项,但官方的renderOption会出现问题，所以就需要value反renderLabel实现
const searchOptions = computed(() => {
    if (prompt.value.startsWith('/')) {
        return promptTemplate.value
            .filter((item: { key: string }) => item.key.toLowerCase().includes(prompt.value.substring(1).toLowerCase()))
            .map((obj: { value: any }) => {
                return {
                    label: obj.value,
                    value: obj.value
                }
            })
    } else {
        return []
    }
})

// value反渲染key
const renderOption = (option: { label: string }) => {
    for (const i of promptTemplate.value) {
        if (i.value === option.label) return [i.key]
    }
    return []
}

const placeholder = computed(() => {
    if (isMobile.value) return t('chat.placeholderMobile')
    return t('chat.placeholder')
})

const buttonDisabled = computed(() => {
    return loading.value || !prompt.value || prompt.value.trim() === ''
})

const footerClass = computed(() => {
    let classes = ['p-4']
    if (isMobile.value) classes = ['sticky', 'left-0', 'bottom-0', 'right-0', 'p-2', 'pr-3', 'overflow-hidden']
    return classes
})

onMounted(() => {
    scrollToBottom()
    if (inputRef.value && !isMobile.value) inputRef.value?.focus()
})

onUnmounted(() => {
    if (loading.value) controller.abort()
})

const { isDark } = useTheme()

const appStore = useAppStore()
const showMine = ref(false)
function goMine() {
    if (isMobile.value) {
        router.push({
            name: 'mine'
        })
    } else {
        showMine.value = true
    }
}

watch(isMobile, val => {
    showMine.value = false
    // showVip.value = false
})

const userStore = useUserStore()
const userInfo = computed(() => {
    return userStore.userInfo
})
const showInfo = ref(false)
onMounted(() => {
    emitter.on('changeMineShow', res => {
        console.log(res)
        showMine.value = !!res
    })
    emitter.on('vipShowChat', res => {
        showVip.value = !!res
        if (!res) {
            showVipTips.value = !!res
        }
    })
    emitter.on('changeMask', res => {
        if (isMobile.value) {
            router.push({
                name: 'mask'
            })
        } else {
            showMask.value = true
        }
    })
    emitter.on('changeShare', res => {
        showShareModal.value = true
    })
    emitter.on('backChat', res => {
        showInfo.value = false
    })
    fetchGetUserFileds(userInfo.value.id, company.value.id).then((res: any) => {
        if (res.code === 0) {
            dialog.create({
                title: `《${res.form.name}》需要您的帮助`,
                content: '是否立即填写？',
                positiveText: '立即填写',
                negativeText: '不填写',
                iconPlacement: 'top',
                showIcon: false,
                closable: false,
                onPositiveClick: () => {
                    if (isMobile.value) {
                        router.push({
                            name: 'info'
                        })
                    } else {
                        showInfo.value = true
                    }
                },
                onNegativeClick: () => {}
            })
        }
    })
})
const showMask = ref(false)

const showVip = ref(false)
const showVipTips = ref(false)
function goVip() {
    emitter.emit('changeVipShow', true)
}

function handleAdd() {
    if (isMobile.value) {
        router.push({
            name: 'mask'
        })
    } else {
        showMask.value = true
    }
}

const showShareModal = ref(false)

const companyStore = useCompanyStore()
const company = computed(() => {
    return companyStore.company
})
</script>

<template>
    <div class="flex flex-col w-full h-full dark:bg-[#0F1014]">
        <HeaderComponent
            v-if="isMobile"
            :using-context="usingContext"
            @export="handleExport"
            @toggle-using-context="toggleUsingContext"
            @go-mine="goMine"
        />
        <main class="flex-1 overflow-hidden">
            <div id="scrollRef" ref="scrollRef" class="h-full overflow-hidden overflow-y-auto">
                <div
                    id="image-wrapper"
                    class="w-full max-w-screen-xl m-auto dark:bg-[#0F1014]"
                    :class="[isMobile ? 'p-2' : 'p-4']"
                >
                    <template v-if="!dataSources.length">
                        <div class="flex items-center justify-center mt-4 text-center text-neutral-300">
                            <SvgIcon icon="ri:bubble-chart-fill" class="mr-2 text-3xl" />
                            <span>Aha~</span>
                        </div>
                    </template>
                    <template v-else>
                        <div>
                            <Message
                                v-for="(item, index) of dataSources"
                                :key="index"
                                :date-time="item.dateTime"
                                :text="item.text"
                                :inversion="item.inversion"
                                :error="item.error"
                                :loading="item.loading"
                                :iconId="iconId"
                                :maskId="maskId"
                                @regenerate="onRegenerate(index)"
                                @delete="handleDelete(index)"
                            />
                            <div class="sticky bottom-0 left-0 flex justify-center">
                                <NButton v-if="loading" type="warning" @click="handleStop">
                                    <template #icon>
                                        <SvgIcon icon="ri:stop-circle-line" />
                                    </template>
                                    Stop Responding
                                </NButton>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
        </main>
        <footer :class="footerClass">
            <div class="w-full max-w-screen-xl m-auto">
                <div class="flex items-center justify-between space-x-2">
                    <HoverButton v-if="!isMobile && company.id === 0" @click="handleAdd">
                        <img class="w-[24px] h-[24px]" :src="isDark ? maskDarkIcon : maskIcon" alt="" />
                    </HoverButton>
                    <HoverButton @click="handleClear">
                        <span class="text-[24px] text-[#4f555e] dark:text-white">
                            <SvgIcon icon="ri:delete-bin-line" />
                        </span>
                    </HoverButton>
                    <HoverButton v-if="!isMobile" @click="handleExport">
                        <span class="text-[24px] text-[#4f555e] dark:text-white">
                            <SvgIcon icon="ri:download-2-line" />
                        </span>
                    </HoverButton>
                    <HoverButton v-if="!isMobile" @click="toggleUsingContext">
                        <span
                            class="text-[24px]"
                            :class="{ 'text-[#4b9e5f]': usingContext, 'text-[#a8071a]': !usingContext }"
                        >
                            <SvgIcon icon="ri:chat-history-line" />
                        </span>
                    </HoverButton>
                    <NAutoComplete v-model:value="prompt" :options="searchOptions" :render-label="renderOption">
                        <template #default="{ handleInput, handleBlur }">
                            <NInput
                                ref="inputRef"
                                v-model:value="prompt"
                                type="textarea"
                                :placeholder="placeholder"
                                :autosize="{ minRows: 1, maxRows: isMobile ? 4 : 8 }"
                                @input="handleInput"
                                @focus="handleFocus"
                                @blur="handleBlur"
                                @keypress="handleEnter"
                            />
                        </template>
                    </NAutoComplete>
                    <NButton type="primary" :disabled="buttonDisabled" @click="handleSubmit">
                        <template #icon>
                            <span class="dark:text-black">
                                <SvgIcon icon="ri:send-plane-fill" />
                            </span>
                        </template>
                    </NButton>
                </div>
            </div>
        </footer>

        <n-modal v-model:show="showMine" transform-origin="center">
            <n-card :bordered="false" class="!max-w-xl !rounded-xl" content-style="padding:0">
                <div class="pt-3 rounded-xl">
                    <mine-pannel></mine-pannel>
                </div>
            </n-card>
        </n-modal>

        <n-modal v-model:show="showInfo" transform-origin="center">
            <n-card :bordered="false" class="!max-w-xl !rounded-xl" content-style="padding:0">
                <div class="pt-3 rounded-xl">
                    <info-form></info-form>
                </div>
            </n-card>
        </n-modal>

        <n-modal v-model:show="showMask" transform-origin="center">
            <n-card :bordered="false" class="!max-w-md !rounded-xl" content-style="padding:0">
                <div class="!rounded-xl">
                    <mask-pannel class="!rounded-xl pt-8" @closeMask="showMask = false"></mask-pannel>
                </div>
            </n-card>
        </n-modal>

        <n-modal
            v-model:show="showVip"
            :block-scroll="false"
            transform-origin="center"
            class="max-w-md"
            style="width: 75%"
        >
            <n-card
                :bordered="false"
                class="!rounded-xl !max-h-[80vh] !overflow-hidden"
                content-style="padding:0;overflow:auto"
            >
                <div class="vipCard py-3 rounded-xl" :class="{ dark: isDark }">
                    <vip-pannel></vip-pannel>
                </div>
            </n-card>
        </n-modal>
        <NConfigProvider
            :theme-overrides="{
                Modal: {
                    boxShadow: 'none'
                }
            }"
        >
            <n-modal v-model:show="showVipTips" transform-origin="center">
                <img src="@/assets/png-tanchuang-huiyuan.png" @click="goVip" class="w-[80%] max-w-sm" alt="" />
            </n-modal>
        </NConfigProvider>

        <share v-model:show="showShareModal" />
    </div>
</template>

<style lang="less" scoped>
.vipCard {
    background: linear-gradient(180deg, #eefff7, #eefff7 180px, #fff 200px, #fff);

    &.dark {
        background: linear-gradient(180deg, #001727, #001727 180px, #0f1014 200px, #0f1014);
    }
}
</style>
