const { createApp, ref, onMounted } = Vue;

const app = createApp({
    setup() {
        const prompt = ref('');
        const generating = ref(false);
        const refining = ref(false);
        const currentImage = ref(null);
        const historyList = ref([]);
        const presets = ['清明节', '春节', '国庆十一', '端午节', '中秋节', '绿色出行', '低碳生活', '未来科技充电站'];
        
        // Load history
        const loadHistory = async () => {
            try {
                const res = await axios.get('/haibao/history');
                historyList.value = res.data;
                // If history exists, show the latest one as current
                if (historyList.value.length > 0 && !currentImage.value) {
                    currentImage.value = historyList.value[0];
                }
            } catch (e) {
                console.error('Failed to load history', e);
                ElementPlus.ElMessage.error('加载历史记录失败');
            }
        };

        // Refine Prompt
        const handleRefine = async () => {
            if (!prompt.value.trim()) {
                ElementPlus.ElMessage.warning('请先输入一些关键词');
                return;
            }
            
            refining.value = true;
            const originalPrompt = prompt.value;
            let isFirstChunk = true;
            
            try {
                const response = await fetch('/haibao/refine', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ prompt: originalPrompt })
                });

                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }

                const reader = response.body.getReader();
                const decoder = new TextDecoder();

                while (true) {
                    const { value, done } = await reader.read();
                    if (done) break;
                    
                    const text = decoder.decode(value, { stream: true });
                    
                    if (isFirstChunk) {
                        prompt.value = '';
                        isFirstChunk = false;
                    }
                    prompt.value += text;
                }
                
                ElementPlus.ElMessage.success('创意扩写完成');
            } catch (e) {
                console.error('Refine failed', e);
                ElementPlus.ElMessage.error('扩写失败: ' + e.message);
            } finally {
                refining.value = false;
            }
        };
        
        // Generate
        const handleGenerate = async () => {
            if (!prompt.value.trim()) {
                ElementPlus.ElMessage.warning('请输入提示词');
                return;
            }
            
            generating.value = true;
            try {
                const res = await axios.post('/haibao/generate', {
                    prompt: prompt.value
                });
                
                currentImage.value = res.data;
                ElementPlus.ElMessage.success('生成成功');
                // Insert new item to history locally to avoid delay
                historyList.value.unshift(res.data);
            } catch (e) {
                console.error('Generation failed', e);
                ElementPlus.ElMessage.error('生成失败: ' + (e.response?.data?.detail || e.message));
            } finally {
                generating.value = false;
            }
        };
        
        // Use preset
        const usePreset = (text) => {
            prompt.value = text;
        };
        
        // View history item
        const viewHistory = (item) => {
            currentImage.value = item;
            window.scrollTo({ top: 0, behavior: 'smooth' });
        };
        
        // Copy Scheme
        const copyScheme = async () => {
            if (!currentImage.value || !currentImage.value.scheme_content) return;
            try {
                await navigator.clipboard.writeText(currentImage.value.scheme_content);
                ElementPlus.ElMessage.success('文案已复制到剪贴板');
            } catch (err) {
                console.error('Failed to copy text: ', err);
                ElementPlus.ElMessage.error('复制失败，请手动复制');
            }
        };

        onMounted(() => {
            loadHistory();
        });
        
        return {
            prompt,
            generating,
            currentImage,
            historyList,
            presets,
            handleGenerate,
            handleRefine,
            usePreset,
            viewHistory,
            copyScheme
        };
    }
});

app.use(ElementPlus);
app.mount('#app');