/**
 * Conversation Sidebar Component
 * 类似ChatGPT的会话侧边栏组件
 */

const ConversationSidebar = {
    template: `
        <div class="conversation-sidebar" :class="{ collapsed: isCollapsed }">
            <!-- 头部：New Chat按钮 -->
            <div class="sidebar-header">
                <button class="new-chat-btn" @click="createNewConversation">
                    <el-icon><plus /></el-icon>
                    <span v-if="!isCollapsed">New Chat</span>
                </button>
                <button class="toggle-btn" @click="toggleSidebar">
                    <el-icon><arrow-left v-if="!isCollapsed" /><arrow-right v-else /></el-icon>
                </button>
            </div>
            
            <!-- 搜索框 -->
            <div class="search-box" v-if="!isCollapsed">
                <el-input
                    v-model="searchQuery"
                    placeholder="搜索会话..."
                    prefix-icon="search"
                    clearable
                    size="small"
                />
            </div>
            
            <!-- 会话列表 -->
            <div class="conversation-list" v-if="!isCollapsed">
                <!-- 今日会话 -->
                <div class="list-section" v-if="todayConversations.length > 0">
                    <div class="section-title">今天</div>
                    <div
                        v-for="conv in todayConversations"
                        :key="conv.conversation_id"
                        class="conversation-item"
                        :class="{ active: currentConversationId === conv.conversation_id }"
                        @click="selectConversation(conv)"
                    >
                        <div class="item-icon">
                            <el-icon><chat-dot-round /></el-icon>
                        </div>
                        <div class="item-content">
                            <div class="item-title">{{ conv.title }}</div>
                            <div class="item-meta">
                                <span class="gene-family" v-if="conv.gene_family">{{ conv.gene_family }}</span>
                                <span class="message-count">{{ conv.message_count }}条消息</span>
                            </div>
                            <div class="item-preview">{{ conv.last_message }}</div>
                        </div>
                        <div class="item-actions" @click.stop>
                            <el-dropdown trigger="click">
                                <el-icon><more /></el-icon>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item @click="renameConversation(conv)">
                                            <el-icon><edit /></el-icon>重命名
                                        </el-dropdown-item>
                                        <el-dropdown-item @click="archiveConversation(conv)">
                                            <el-icon><folder /></el-icon>归档
                                        </el-dropdown-item>
                                        <el-dropdown-item divided @click="deleteConversation(conv)" type="danger">
                                            <el-icon><delete /></el-icon>删除
                                        </el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </div>
                    </div>
                </div>
                
                <!-- 昨日会话 -->
                <div class="list-section" v-if="yesterdayConversations.length > 0">
                    <div class="section-title">昨天</div>
                    <div
                        v-for="conv in yesterdayConversations"
                        :key="conv.conversation_id"
                        class="conversation-item"
                        :class="{ active: currentConversationId === conv.conversation_id }"
                        @click="selectConversation(conv)"
                    >
                        <div class="item-icon">
                            <el-icon><chat-dot-round /></el-icon>
                        </div>
                        <div class="item-content">
                            <div class="item-title">{{ conv.title }}</div>
                            <div class="item-meta">
                                <span class="gene-family" v-if="conv.gene_family">{{ conv.gene_family }}</span>
                                <span class="message-count">{{ conv.message_count }}条</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 更早会话 -->
                <div class="list-section" v-if="olderConversations.length > 0">
                    <div class="section-title">过去7天</div>
                    <div
                        v-for="conv in olderConversations"
                        :key="conv.conversation_id"
                        class="conversation-item"
                        :class="{ active: currentConversationId === conv.conversation_id }"
                        @click="selectConversation(conv)"
                    >
                        <div class="item-icon">
                            <el-icon><chat-dot-round /></el-icon>
                        </div>
                        <div class="item-content">
                            <div class="item-title">{{ conv.title }}</div>
                            <div class="item-meta">
                                <span class="gene-family" v-if="conv.gene_family">{{ conv.gene_family }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 空状态 -->
                <div v-if="filteredConversations.length === 0" class="empty-state">
                    <el-icon><chat-line-round /></el-icon>
                    <p>暂无会话</p>
                    <p class="hint">点击上方"New Chat"开始新的基因家族分析</p>
                </div>
            </div>
            
            <!-- 底部：用户信息 -->
            <div class="sidebar-footer" v-if="!isCollapsed">
                <div class="user-info">
                    <el-avatar :size="32" :icon="UserFilled" />
                    <span class="username">{{ userId }}</span>
                </div>
            </div>
        </div>
    `,
    
    props: {
        userId: {
            type: String,
            default: 'xia-lab'
        },
        apiBaseUrl: {
            type: String,
            default: 'http://localhost:8000/api'
        }
    },
    
    data() {
        return {
            isCollapsed: false,
            searchQuery: '',
            conversations: [],
            currentConversationId: null,
            loading: false,
            // 图标
            Plus: ElementPlusIconsVue.Plus,
            ArrowLeft: ElementPlusIconsVue.ArrowLeft,
            ArrowRight: ElementPlusIconsVue.ArrowRight,
            ChatDotRound: ElementPlusIconsVue.ChatDotRound,
            ChatLineRound: ElementPlusIconsVue.ChatLineRound,
            More: ElementPlusIconsVue.More,
            Edit: ElementPlusIconsVue.Edit,
            Folder: ElementPlusIconsVue.Folder,
            Delete: ElementPlusIconsVue.Delete,
            UserFilled: ElementPlusIconsVue.UserFilled,
        }
    },
    
    computed: {
        filteredConversations() {
            if (!this.searchQuery) return this.conversations;
            const query = this.searchQuery.toLowerCase();
            return this.conversations.filter(conv => 
                conv.title.toLowerCase().includes(query) ||
                (conv.gene_family && conv.gene_family.toLowerCase().includes(query)) ||
                conv.last_message.toLowerCase().includes(query)
            );
        },
        
        todayConversations() {
            const today = new Date().toDateString();
            return this.filteredConversations.filter(conv => {
                const convDate = new Date(conv.updated_at).toDateString();
                return convDate === today;
            });
        },
        
        yesterdayConversations() {
            const yesterday = new Date(Date.now() - 86400000).toDateString();
            return this.filteredConversations.filter(conv => {
                const convDate = new Date(conv.updated_at).toDateString();
                return convDate === yesterday;
            });
        },
        
        olderConversations() {
            const yesterday = new Date(Date.now() - 86400000).toDateString();
            return this.filteredConversations.filter(conv => {
                const convDate = new Date(conv.updated_at).toDateString();
                return convDate < yesterday;
            });
        }
    },
    
    mounted() {
        this.loadConversations();
        // 定时刷新
        this.refreshInterval = setInterval(() => {
            this.loadConversations();
        }, 30000); // 30秒刷新一次
    },
    
    beforeUnmount() {
        if (this.refreshInterval) {
            clearInterval(this.refreshInterval);
        }
    },
    
    methods: {
        async loadConversations() {
            try {
                this.loading = true;
                const response = await fetch(`${this.apiBaseUrl}/conversations/list/${this.userId}`);
                if (response.ok) {
                    const data = await response.json();
                    this.conversations = data.conversations || [];
                }
            } catch (error) {
                console.error('Failed to load conversations:', error);
                // 使用模拟数据
                this.conversations = this.getMockConversations();
            } finally {
                this.loading = false;
            }
        },
        
        getMockConversations() {
            // 模拟数据，用于测试
            return [
                {
                    conversation_id: 'conv_001',
                    title: 'At.WRKY基因家族分析',
                    gene_family: 'WRKY',
                    species: 'At',
                    message_count: 12,
                    last_message: '系统发育树已生成完成',
                    updated_at: new Date().toISOString()
                },
                {
                    conversation_id: 'conv_002',
                    title: 'Os.TCP进化分析',
                    gene_family: 'TCP',
                    species: 'Os',
                    message_count: 5,
                    last_message: '正在构建进化树...',
                    updated_at: new Date(Date.now() - 3600000).toISOString()
                },
                {
                    conversation_id: 'conv_003',
                    title: 'HMMER参数配置咨询',
                    message_count: 8,
                    last_message: 'E-value建议设置为1e-5',
                    updated_at: new Date(Date.now() - 86400000).toISOString()
                }
            ];
        },
        
        toggleSidebar() {
            this.isCollapsed = !this.isCollapsed;
            this.$emit('toggle', this.isCollapsed);
        },
        
        async createNewConversation() {
            try {
                const response = await fetch(`${this.apiBaseUrl}/conversations/create`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        user_id: this.userId,
                        title: '新会话 ' + new Date().toLocaleTimeString()
                    })
                });
                
                if (response.ok) {
                    const data = await response.json();
                    this.currentConversationId = data.conversation_id;
                    this.$emit('new-conversation', data);
                    await this.loadConversations();
                }
            } catch (error) {
                console.error('Failed to create conversation:', error);
                // 创建本地会话
                const newConv = {
                    conversation_id: 'conv_' + Date.now(),
                    title: '新会话',
                    message_count: 0,
                    last_message: '',
                    updated_at: new Date().toISOString()
                };
                this.conversations.unshift(newConv);
                this.currentConversationId = newConv.conversation_id;
                this.$emit('new-conversation', newConv);
            }
        },
        
        selectConversation(conv) {
            this.currentConversationId = conv.conversation_id;
            this.$emit('select-conversation', conv);
        },
        
        async renameConversation(conv) {
            const newTitle = prompt('请输入新标题:', conv.title);
            if (newTitle && newTitle !== conv.title) {
                try {
                    await fetch(`${this.apiBaseUrl}/conversations/update-title`, {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({
                            conversation_id: conv.conversation_id,
                            title: newTitle
                        })
                    });
                    conv.title = newTitle;
                } catch (error) {
                    console.error('Failed to rename:', error);
                    conv.title = newTitle; // 本地更新
                }
            }
        },
        
        async archiveConversation(conv) {
            try {
                await fetch(`${this.apiBaseUrl}/conversations/archive`, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        conversation_id: conv.conversation_id
                    })
                });
                await this.loadConversations();
            } catch (error) {
                console.error('Failed to archive:', error);
            }
        },
        
        async deleteConversation(conv) {
            if (confirm(`确定要删除会话 "${conv.title}" 吗？`)) {
                try {
                    await fetch(`${this.apiBaseUrl}/conversations/delete`, {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({
                            conversation_id: conv.conversation_id
                        })
                    });
                    await this.loadConversations();
                    if (this.currentConversationId === conv.conversation_id) {
                        this.currentConversationId = null;
                        this.$emit('select-conversation', null);
                    }
                } catch (error) {
                    console.error('Failed to delete:', error);
                }
            }
        }
    }
};

// 导出组件
if (typeof module !== 'undefined' && module.exports) {
    module.exports = { ConversationSidebar };
}