<template>
    <div class="h-full bgmr relative hidden">
        <div v-if="hasMessages" class="fixed top-20 pl-20 flex-items-center gap-6 pointer" @click="hasMessages = false">
            <el-icon class="fs-16">
                <Back />
            </el-icon>
            <span class="fs-12 fw-600">返回</span>
        </div>
        <div v-else class="fixed top-20 px-10 right-10 flex-items-center gap-6 pointer" @click="historyDrawerVisible = true">
            <el-button>
                <el-icon class="fs-16">
                    <AlarmClock />
                </el-icon>
                <span class="fs-12 fw-600">历史任务</span>
            </el-button>
        </div>
        <section v-if="!hasMessages">
            <div class="mt-60 flex-col items-center">
                <div class="flex-center wh-44 round-8 color-fff bg-jb">
                    <el-icon class="fs-24">
                        <MagicStick />
                    </el-icon>
                </div>
                <div class="fs-26 lh-42 fw-700 color-000 mt-18">想做什么视频?</div>
            </div>
            <div class="flex-col bg-fff round-16 model2 p-20 boxshaw">
                <el-input v-model="prompt" :rows="10" type="textarea" resize="none" placeholder="发送给 Agent" />
                <div class="flex-between pt-16">
                    <AgentPromptTools />
                    <div class="border-eee flex bg-fff round-100 p-6 gap-10 pl-16 minw-110 pointer hoverbth"
                        @click="hasMessages = true">
                        开始创作
                        <div class="wh-24 color-fff round flex-center bg-jb">
                            <el-icon>
                                <Top />
                            </el-icon>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex-center mt-16">
                <div class="flex-center gap-10">
                    <el-button class="flex-center h-40 px-20 round-100 border-none boxshaw" @click="goProductVideo">
                        用商品拍一条营销视频
                    </el-button>
                    <el-button class="flex-center h-40 px-20 round-100 border-none boxshaw"
                        @click="applySuggestion('参考样片写分镜脚本')">
                        参考样片写分镜脚本
                    </el-button>
                </div>
            </div>
        </section>


        <section v-else class="h-full flex-col">
            <div ref="chatScrollRef" class="flex-1 over-y-auto pb-200 hide-scroll" @scroll="handleChatScroll">
                <div class="chat-inner">
                    <div v-for="value in 10">
                        <div class="flex justify-end mt-20">
                            <div class="flex-col items-end">
                                <div class="flex-items-center gap-10">
                                    <div class="user-bubble h-46 px-20 flex-center round-14 fw-700 color-000">
                                        {{ submittedTopic }}
                                    </div>
                                    <span class="avatar flex-center wh-32 round color-fff fs-12 fw-700">AD</span>
                                </div>
                                <div class="flex-items-center gap-6 mt-8 fs-12 color-888">
                                    <span>今天 09:27</span>
                                    <el-icon>
                                        <CopyDocument />
                                    </el-icon>
                                </div>
                            </div>
                        </div>

                        <div class="mt-40 flex-items-center gap-20">
                            <span class="flex-center wh-46 round border-eee bg-fff">
                                <el-icon class="status-icon fs-24">
                                    <MagicStick />
                                </el-icon>
                            </span>
                            <span class="color-999">Agent 任务已取消。</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="chat-composer-wrap absolute left-0 right-0 bottom-20"
                :class="{ 'is-compact': isComposerCompact }">
                <div v-if="isComposerCompact" class="flex-center mb-8">
                    <el-button class="back-bottom h-34 px-18 round-8 bg-fff fs-12" @click="scrollToBottom">
                        <el-icon>
                            <ArrowDown />
                        </el-icon>
                        <span>回到底部</span>
                    </el-button>
                </div>
                <div ref="composerBoxRef" class="composer-box flex-col bg-fff round-16 border-eee boxshaw"
                    @focusin="handleComposerActive" @pointerdown="handleComposerActive">
                    <div class="input-row flex gap-20 px-14 pt-14">
                        <UploadFile :width="isComposerCompact ? 40 : 44" />
                        <el-input v-model="prompt" class="flex-1 boxno" type="textarea" resize="none" :rows="3"
                            :placeholder="isComposerCompact ? '输入你的创作想法' : '输入你的创作想法、脚本或画面要求'" @focus="handleInputFocus"
                            @blur="handleInputBlur" />
                    </div>
                    <div class="composer-actions flex-between px-14">
                        <div class="flex-items-center flex-wrap">
                            <AgentPromptTools />
                        </div>
                        <div class="send-btn flex-center wh-40 p-0 color-fff pointer border-none round fs-20 mb-10 bg-jb"
                            @click="sendMessage">
                            <el-icon>
                                <Top />
                            </el-icon>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <AgentHistoryDrawer v-model="historyDrawerVisible" />
    </div>
</template>

<script setup lang="ts">
import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { AlarmClock, ArrowDown, Back, CopyDocument, MagicStick, Top } from '@element-plus/icons-vue';
import UploadFile from '@/components/Upload/index.vue'
import AgentHistoryDrawer from './components/AgentHistoryDrawer.vue';
import AgentPromptTools from './components/AgentPromptTools.vue';

const prompt = ref('');
const router = useRouter();
const submittedTopic = ref('美颜');
const messagesCount = ref(0);
const hasMessages = ref(false)
const historyDrawerVisible = ref(false);
const chatScrollRef = ref<HTMLElement>();
const composerBoxRef = ref<HTMLElement>();
const isInputFocused = ref(false);
const isComposerActive = ref(false);
const isNearBottom = ref(true);
const isComposerCompact = computed(() => !isNearBottom.value && !isInputFocused.value && !isComposerActive.value);

const sendMessage = () => {
    const value = prompt.value.trim();
    submittedTopic.value = value || submittedTopic.value;
    messagesCount.value = 1;
    prompt.value = '';
    nextTick(scrollToBottom);
};

const applySuggestion = (value: string) => {
    prompt.value = value;
    sendMessage();
};

const goProductVideo = () => {
    router.push('/agent/product-video');
};

const handleChatScroll = () => {
    if (!chatScrollRef.value) {
        return;
    }
    const { scrollHeight, scrollTop, clientHeight } = chatScrollRef.value;
    const distanceToBottom = scrollHeight - scrollTop - clientHeight;
    isNearBottom.value = distanceToBottom < 60;
};

const scrollToBottom = () => {
    if (!chatScrollRef.value) {
        return;
    }
    isNearBottom.value = true;
    chatScrollRef.value.scrollTo({
        top: chatScrollRef.value.scrollHeight,
        behavior: 'smooth',
    });
};

const handleInputFocus = () => {
    isInputFocused.value = true;
};

const handleInputBlur = () => {
    isInputFocused.value = false;
    nextTick(handleChatScroll);
};

const handleComposerActive = () => {
    isComposerActive.value = true;
};

const handleDocumentPointerDown = (event: PointerEvent) => {
    const target = event.target;
    if (!(target instanceof Node)) {
        return;
    }
    isComposerActive.value = Boolean(composerBoxRef.value?.contains(target));
    nextTick(handleChatScroll);
};

onMounted(() => {
    document.addEventListener('pointerdown', handleDocumentPointerDown);
    nextTick(handleChatScroll);
});

onBeforeUnmount(() => {
    document.removeEventListener('pointerdown', handleDocumentPointerDown);
});
</script>

<style scoped lang="scss">
.bg-jb {
    background: linear-gradient(135deg, #7b33ff 0%, #9d19ff 100%);
}

.model2 {
    margin: 26px 15%;

    :deep(.el-textarea__inner) {
        border: none;
        box-shadow: none;
        background-color: #f8f8fa;
        border-radius: 12px;
    }
}

.boxshaw {
    box-shadow: 0 0 10px #00000009;

    &:hover {
        box-shadow: 0 0 16px #00000016;
    }
}

.hoverbth {
    &:hover {
        box-shadow: 0 0 0 1px rgba(var(--main-color), 0.6);
    }
}

.chat-inner {
    max-width: 1100px;
    min-height: 520px;
    margin: auto;
}

.user-bubble {
    background-color: rgba(var(--main-color), 0.1);
}

.avatar {
    background-color: #7b33ff;
}

.chat-composer-wrap {
    width: 1100px;
    margin: auto;
    transition: width .24s ease, transform .24s ease;
}

.boxno {
    :deep(.el-textarea__inner) {
        box-shadow: none;
        transition: min-height .24s ease, padding .24s ease;
    }
}

.composer-box {
    transition: border-radius .24s ease, box-shadow .24s ease;
}

.input-row {
    transition: padding .24s ease, gap .24s ease;
}

.composer-actions {
    transition: opacity .2s ease, padding .24s ease;
}

.compact-tools {
    display: none;
}

.back-bottom {
    border-color: #dfe7f2;
    box-shadow: 0 2px 10px rgba(20, 38, 70, .1);
}

.chat-composer-wrap.is-compact .composer-box {
    flex-direction: row;
    align-items: center;
    border-radius: 18px;
}

.chat-composer-wrap.is-compact .input-row {
    flex: 1;
    align-items: center;
    gap: 16px;
    padding: 8px 0 8px 14px;
}

.chat-composer-wrap.is-compact .boxno {
    :deep(.el-textarea__inner) {
        min-height: 36px !important;
        height: 36px !important;
        padding: 8px 0;
        overflow: hidden;
    }
}

.chat-composer-wrap.is-compact .composer-actions {
    flex: 0 0 auto;
    padding: 0 8px 0 0;
}

.chat-composer-wrap.is-compact .composer-actions>.flex-items-center:first-child {
    display: none;
}

.chat-composer-wrap.is-compact .compact-tools {
    display: flex;
}

.chat-composer-wrap.is-compact .send-btn {
    width: 44px;
    height: 44px;
    margin-bottom: 0;
    color: #9aaac0;
    background: #e8eef6;
}

.chat-composer-wrap.is-compact .send-btn.bg-jb {
    background: #e8eef6;
}

.send-btn {
    opacity: 0.8;

    &:hover {
        opacity: 1;
    }
}

</style>
