<script setup>
import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue'
import { chatRoomsAPI, providersAPI, agentsAPI } from '../utils/api.js'
import MessageBubble from '../components/MessageBubble.vue'

// ============ Sidebar tab state ============
const sidebarTab = ref('rooms') // 'agents' | 'rooms' | 'roomAgents'

// ============ Agent pool state ============
const agentPool = ref([])
const agentPoolLoading = ref(false)
const showAgentModal = ref(false) // 控制弹窗显示
const editingAgent = ref(null) // null | 'new' | agent object
const agentForm = ref({})
const agentSaving = ref(false)

// Computed models from selected provider
const availableModels = computed(() => {
  const providerList = Array.isArray(providers.value) ? providers.value : []
  if (!agentForm.value.provider_id) {
    return providerList.flatMap(p => (p.models || [p.default_model]).map(m => `${p.name}: ${m}`))
  } else {
    const p = providerList.find(p => p.id === agentForm.value.provider_id)
    if (p) return (p.models || [p.default_model]).map(m => `${p.name}: ${m}`)
  }
  return []
})

// Model display value for dropdown
const modelDisplayValue = computed({
  get() {
    if (!agentForm.value.model) return ''
    const found = availableModels.value.find(m => m.endsWith(`: ${agentForm.value.model}`))
    return found || agentForm.value.model
  },
  set(val) {
    agentForm.value.model = val.includes(': ') ? val.split(': ')[1] : val
  }
})

// ============ Room list state ============
const rooms = ref([])
const roomsLoading = ref(false)
const providers = ref([])
const showCreate = ref(false)
const creating = ref(false)
const newRoom = ref({ title: '', task: '', max_rounds: 5, agent_ids: [] })
const showAddToRoom = ref(false)

// ============ Selected room state ============
const selectedId = ref(null)
const room = ref(null)
const messages = ref([])
const messagesLoading = ref(false)
const streaming = ref(false)
const streamingMessages = ref({}) // Track in-progress streaming messages
const error = ref('')
const messagesContainer = ref(null)
const isNearBottom = ref(true)  // 是否接近底部

// Room agent editing
const editingRoomAgent = ref(null)
const roomAgentForm = ref({})
const roomAgentSaving = ref(false)

let abortController = null

const statusMap = {
  idle: { label: '就绪', class: 'status-idle' },
  running: { label: '进行中', class: 'status-running' },
  paused: { label: '已暂停', class: 'status-paused' },
  completed: { label: '已完成', class: 'status-completed' },
  error: { label: '错误', class: 'status-error' }
}

const roomAgents = computed(() => room.value?.agents || [])
const canEditRoom = computed(() => room.value?.status !== 'running' && !streaming.value)

// Group messages by round number for better visual organization
const groupedMessages = computed(() => {
  const groups = []
  let currentGroup = []
  let currentRound = null
  
  for (const msg of messages.value) {
    const round = msg.round_number || 0
    if (round !== currentRound) {
      if (currentGroup.length > 0) {
        groups.push(currentGroup)
      }
      currentGroup = [msg]
      currentRound = round
    } else {
      currentGroup.push(msg)
    }
  }
  if (currentGroup.length > 0) {
    groups.push(currentGroup)
  }
  return groups
})

// ============ Agent Pool ============

async function loadAgentPool() {
  agentPoolLoading.value = true
  try {
    const res = await agentsAPI.list()
    agentPool.value = res.data || []
  } catch (e) {
    console.error('Failed to load agents:', e)
  } finally {
    agentPoolLoading.value = false
  }
}

function onProviderChange() {
  const p = providers.value.find(p => p.id === agentForm.value.provider_id)
  agentForm.value.model = p ? p.default_model : ''
}

function startCreateAgent() {
  // 先重置状态，再设置新值
  showAgentModal.value = false
  editingAgent.value = null
  
  nextTick(() => {
    agentForm.value = {
      name: '', role: '', provider_id: null, model: '',
      system_prompt: 'You are a helpful AI assistant.', color: randomColor()
    }
    editingAgent.value = 'new'
    showAgentModal.value = true
  })
}

function startEditAgent(agent) {
  showAgentModal.value = false
  editingAgent.value = null
  
  nextTick(() => {
    agentForm.value = { ...agent }
    editingAgent.value = agent
    showAgentModal.value = true
  })
}

function cancelAgentEdit() {
  showAgentModal.value = false
  nextTick(() => {
    editingAgent.value = null
    agentForm.value = {}
  })
}

async function saveAgent() {
  if (!agentForm.value.name) return
  agentSaving.value = true
  try {
    if (editingAgent.value === 'new') {
      await agentsAPI.create(agentForm.value)
    } else {
      await agentsAPI.update(editingAgent.value.id, agentForm.value)
    }
    cancelAgentEdit()
    await loadAgentPool()
  } catch (e) {
    console.error('Failed to save agent:', e)
  } finally {
    agentSaving.value = false
  }
}

async function deleteAgentFromPool(agent) {
  if (!confirm(`删除 Agent「${agent.name}」？它将仅从 Agent 池中移除，已加入房间的副本不受影响。`)) return
  try {
    await agentsAPI.delete(agent.id)
    cancelAgentEdit()
    await loadAgentPool()
  } catch (e) {
    console.error('Failed to delete agent:', e)
  }
}

// ============ Room list ============

async function loadRooms() {
  roomsLoading.value = true
  try {
    const res = await chatRoomsAPI.list()
    rooms.value = res.data?.items || []
  } catch (e) {
    console.error('Failed to load rooms:', e)
  } finally {
    roomsLoading.value = false
  }
}

async function loadProviders() {
  try {
    const res = await providersAPI.list()
    providers.value = res.data?.providers || []
  } catch (e) {
    console.error('Failed to load providers:', e)
  }
}

async function createRoom() {
  if (!newRoom.value.title || !newRoom.value.task) return
  creating.value = true
  try {
    // Build agents list from selected agent_ids
    const agents = newRoom.value.agent_ids
      .map(id => agentPool.value.find(a => a.id === id))
      .filter(Boolean)
      .map(a => ({ agent_id: a.id }))

    const res = await chatRoomsAPI.create({
      title: newRoom.value.title,
      task: newRoom.value.task,
      max_rounds: newRoom.value.max_rounds,
      agents
    })
    showCreate.value = false
    resetNewRoom()
    await loadRooms()
    const created = res.data
    if (created?.id) selectRoom(created.id)
  } catch (e) {
    console.error('Failed to create room:', e)
  } finally {
    creating.value = false
  }
}

function resetNewRoom() {
  newRoom.value = { title: '', task: '', max_rounds: 5, agent_ids: [] }
}

function toggleAgentInNewRoom(agentId) {
  const idx = newRoom.value.agent_ids.indexOf(agentId)
  if (idx >= 0) {
    newRoom.value.agent_ids.splice(idx, 1)
  } else {
    newRoom.value.agent_ids.push(agentId)
  }
}

async function deleteRoom(id) {
  if (!confirm('确定删除此聊天室？')) return
  try {
    await chatRoomsAPI.delete(id)
    if (selectedId.value === id) {
      selectedId.value = null
      room.value = null
      messages.value = []
    }
    await loadRooms()
  } catch (e) {
    console.error('Failed to delete room:', e)
  }
}

// ============ Select room ============

async function selectRoom(id) {
  if (streaming.value) {
    if (abortController) abortController.abort()
    streaming.value = false
  }
  streamingMessages.value = {}
  selectedId.value = id
  sidebarTab.value = 'roomAgents'
  error.value = ''
  editingRoomAgent.value = null
  messagesLoading.value = true
  try {
    const [roomRes, msgRes] = await Promise.all([
      chatRoomsAPI.get(id),
      chatRoomsAPI.getMessages(id)
    ])
    room.value = roomRes.data
    messages.value = msgRes.data?.messages || []
    if (msgRes.data?.room) room.value = msgRes.data.room
    await nextTick()
    forceScrollToBottom()  // 选择聊天室时强制滚动到底部
  } catch (e) {
    console.error('Failed to load room:', e)
    error.value = '加载失败'
  } finally {
    messagesLoading.value = false
  }
}

function scrollToBottom() {
  if (!isNearBottom.value) return
  if (messagesContainer.value) {
    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
  }
}

// 智能滚动：检测是否接近底部
function checkNearBottom() {
  if (!messagesContainer.value) return
  const { scrollTop, scrollHeight, clientHeight } = messagesContainer.value
  const distanceFromBottom = scrollHeight - scrollTop - clientHeight
  isNearBottom.value = distanceFromBottom <= 100
}

// 滚动事件处理
function handleScroll() {
  checkNearBottom()
}

// 强制滚动到底部（启动聊天室时使用）
function forceScrollToBottom() {
  nextTick(() => {
    if (messagesContainer.value) {
      messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
      isNearBottom.value = true
    }
  })
}

// ============ SSE Streaming ============

async function startRoom() {
  if (!selectedId.value || streaming.value) return
  streaming.value = true
  error.value = ''
  abortController = new AbortController()

  try {
    const token = localStorage.getItem('access_token')
    const url = chatRoomsAPI.start(selectedId.value)
    const response = await fetch(url, {
      method: 'POST',
      headers: { 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json' },
      signal: abortController.signal
    })
    if (!response.ok) {
      const err = await response.json().catch(() => ({}))
      throw new Error(err.message || `HTTP ${response.status}`)
    }
    const reader = response.body.getReader()
    const decoder = new TextDecoder()
    let buffer = ''
    while (true) {
      const { done, value } = await reader.read()
      if (value) buffer += decoder.decode(value, { stream: true })
      if (done) break
      const lines = buffer.split('\n')
      buffer = lines.pop() || ''
      let currentEvent = ''
      for (const line of lines) {
        if (line.startsWith('event: ')) currentEvent = line.slice(7).trim()
        else if (line.startsWith('data: ')) {
          try { handleSSEEvent(currentEvent, JSON.parse(line.slice(6))) } catch (e) {}
        }
      }
    }
  } catch (e) {
    if (e.name !== 'AbortError') error.value = e.message
  } finally {
    streaming.value = false
    if (selectedId.value) {
      const res = await chatRoomsAPI.get(selectedId.value)
      room.value = res.data
      await loadRooms()
    }
  }
}

function handleSSEEvent(event, data) {
  switch (event) {
    // Streaming events
    case 'message_start': {
      streamingMessages.value[data.id] = {
        id: data.id,
        room_id: data.room_id,
        role: data.role,
        sender_name: data.sender_name,
        sender_color: data.sender_color,
        round_number: data.round_number,
        content: '',
        text: '',
        process_steps: [{ id: 'step-0', index: 0, type: 'text', content: '' }],
        streaming: true
      }
      break
    }
    case 'message_chunk': {
      const msg = streamingMessages.value[data.id]
      if (msg) {
        msg.content += data.content
        msg.text += data.content
        msg.process_steps[0].content = data.accumulated
      }
      break
    }
    case 'message_end': {
      const msg = streamingMessages.value[data.id]
      if (msg) {
        msg.streaming = false
        msg.token_count = data.token_count
        // Move from streaming to complete messages
        delete streamingMessages.value[data.id]
        messages.value.push(msg)
        forceScrollToBottom()  // 聊天室消息结束时强制滚动
      }
      break
    }
    // Legacy complete message event
    case 'message': {
      // Remove any streaming version of this message
      delete streamingMessages.value[data.id]
      // Add complete message
      messages.value.push(data)
      forceScrollToBottom()  // 聊天室消息结束时强制滚动
      break
    }
    case 'room_started': room.value = { ...room.value, status: 'running' }; break
    case 'room_completed': room.value = { ...room.value, status: 'completed' }; break
    case 'room_paused': room.value = { ...room.value, status: 'paused' }; break
    case 'round_start': room.value = { ...room.value, current_round: data.round }; break
    case 'agent_error': error.value = `Agent ${data.agent} 出错: ${data.error}`; break
    case 'error': error.value = data.content || '未知错误'; break
  }
}

async function stopRoom() {
  try {
    if (abortController) { abortController.abort(); abortController = null }
    await chatRoomsAPI.stop(selectedId.value)
    room.value = { ...room.value, status: 'paused' }
    streaming.value = false
    streamingMessages.value = {}
  } catch (e) { console.error('Failed to stop room:', e) }
}

async function resetRoom() {
  if (!confirm('确定重置？将清除所有消息')) return
  try {
    await chatRoomsAPI.reset(selectedId.value)
    messages.value = []
    streamingMessages.value = {}
    const res = await chatRoomsAPI.get(selectedId.value)
    room.value = res.data
  } catch (e) { console.error('Failed to reset room:', e) }
}

// ============ Room Agent Management ============

async function addAgentToRoom(agentFromPool) {
  if (!canEditRoom.value) return
  try {
    await chatRoomsAPI.addAgent(selectedId.value, { agent_id: agentFromPool.id })
    const res = await chatRoomsAPI.get(selectedId.value)
    room.value = res.data
  } catch (e) {
    console.error('Failed to add agent:', e)
  }
}

function startEditRoomAgent(agent) {
  editingRoomAgent.value = agent
  roomAgentForm.value = { ...agent }
}

function cancelRoomAgentEdit() {
  editingRoomAgent.value = null
  roomAgentForm.value = {}
}

async function saveRoomAgent() {
  roomAgentSaving.value = true
  try {
    await chatRoomsAPI.updateAgent(selectedId.value, editingRoomAgent.value.id, roomAgentForm.value)
    cancelRoomAgentEdit()
    const res = await chatRoomsAPI.get(selectedId.value)
    room.value = res.data
  } catch (e) {
    console.error('Failed to save room agent:', e)
  } finally {
    roomAgentSaving.value = false
  }
}

async function deleteRoomAgent(agent) {
  if (!confirm(`从房间移除 Agent「${agent.name}」？`)) return
  try {
    await chatRoomsAPI.deleteAgent(selectedId.value, agent.id)
    cancelRoomAgentEdit()
    const res = await chatRoomsAPI.get(selectedId.value)
    room.value = res.data
  } catch (e) {
    console.error('Failed to remove agent:', e)
  }
}

function randomColor() {
  const colors = ['#2563eb', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899', '#06b6d4', '#84cc16']
  return colors[Math.floor(Math.random() * colors.length)]
}

watch(messages, () => { nextTick(scrollToBottom) }, { deep: true })

// 启动聊天室时强制滚动
watch(streaming, (val) => {
  if (val) forceScrollToBottom()
})

onMounted(() => {
  loadAgentPool()
  loadRooms()
  loadProviders()
})

onUnmounted(() => {
  if (abortController) abortController.abort()
})
</script>

<template>
  <div class="page-container chat-rooms">
    <div class="rooms-layout">
      <!-- Left sidebar -->
      <aside class="rooms-sidebar">
        <!-- Tab bar -->
        <div class="sidebar-tabs">
          <button class="tab-btn" :class="{ active: sidebarTab === 'rooms' }" @click="sidebarTab = 'rooms'">
            💬 聊天室
          </button>
          <button class="tab-btn" :class="{ active: sidebarTab === 'agents' }" @click="sidebarTab = 'agents'">
            🤖 Agent 池
          </button>
        </div>

        <!-- Agent Pool tab -->
        <div v-if="sidebarTab === 'agents'" class="sidebar-tab-content">
          <div class="sidebar-header">
            <button class="btn-new-conv" @click="startCreateAgent">+ 新建 Agent</button>
          </div>
          <div v-if="agentPoolLoading" class="sidebar-loading"><div class="spinner-small"></div></div>
          <div v-else-if="agentPool.length === 0" class="sidebar-empty">暂无 Agent</div>
          <div v-else class="pool-list">
            <div v-for="agent in agentPool" :key="agent.id"
              class="pool-item"
              @click="startEditAgent(agent)"
            >
              <span class="agent-dot" :style="{ background: agent.color }">{{ agent.name.charAt(0) }}</span>
              <div class="agent-info">
                <span class="agent-name" :style="{ color: agent.color }">{{ agent.name }}</span>
                <span v-if="agent.role" class="agent-role">{{ agent.role }}</span>
                <span class="agent-model">{{ agent.model || 'default' }}</span>
              </div>
            </div>
          </div>
        </div>

        <!-- Room list tab -->
        <div v-if="sidebarTab === 'rooms'" class="sidebar-tab-content">
          <div class="sidebar-header">
            <button class="btn-new-conv" @click="showCreate = true">+ 新建聊天室</button>
          </div>
          <div v-if="roomsLoading" class="sidebar-loading"><div class="spinner-small"></div></div>
          <div v-else-if="rooms.length === 0" class="sidebar-empty">暂无聊天室</div>
          <div v-else class="room-list">
            <div v-for="r in rooms" :key="r.id" class="room-item" :class="{ active: selectedId === r.id }" @click="selectRoom(r.id)">
              <div class="room-item-header">
                <span class="room-item-title">{{ r.title }}</span>
                <span class="status-dot" :class="statusMap[r.status]?.class" :title="statusMap[r.status]?.label"></span>
              </div>
              <div class="room-item-meta">
                <span class="meta-text">
                  <span v-for="a in (r.agents || []).slice(0, 4)" :key="a.id" class="mini-dot" :style="{ background: a.color }" :title="a.name"></span>
                  {{ r.agents?.length || 0 }} Agents
                </span>
                <span class="meta-text">{{ r.current_round }}/{{ r.max_rounds }}</span>
                <div class="room-item-actions" @click.stop>
                  <button @click="deleteRoom(r.id)" class="btn-icon-sm" title="删除">
                    <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Room agents tab (shown when a room is selected) -->
        <div v-if="sidebarTab === 'roomAgents' && room" class="sidebar-tab-content">
          <div class="sidebar-header sidebar-header-row">
            <button class="btn-back" @click="sidebarTab = 'rooms'; selectedId = null; room = null">←</button>
            <span class="sidebar-title">{{ room.title }}</span>
            <button v-if="canEditRoom" class="btn-add-agent-sm" @click="showAddToRoom = true" title="添加 Agent">+</button>
          </div>
          <div class="room-agent-list">
            <div v-for="agent in roomAgents" :key="agent.id"
              class="agent-row"
              :class="{ editing: editingRoomAgent?.id === agent.id }"
              @click="startEditRoomAgent(agent)"
            >
              <span class="agent-dot" :style="{ background: agent.color }">{{ agent.name.charAt(0) }}</span>
              <div class="agent-info">
                <span class="agent-name" :style="{ color: agent.color }">{{ agent.name }}</span>
                <span v-if="agent.role" class="agent-role">{{ agent.role }}</span>
                <span class="agent-model">{{ agent.model || 'default' }}</span>
              </div>
              <button v-if="canEditRoom" class="btn-del-agent" @click.stop="deleteRoomAgent(agent)">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
              </button>
            </div>
            <div v-if="roomAgents.length === 0" class="no-agents">
              <p>暂无 Agent</p>
            </div>
          </div>
          <!-- Room agent edit form -->
          <div v-if="editingRoomAgent" class="agent-form">
            <div class="agent-form-header">
              <span>编辑房间 Agent</span>
              <button class="btn-close-xs" @click="cancelRoomAgentEdit">&times;</button>
            </div>
            <div class="agent-form-body">
              <div class="form-row"><input v-model="roomAgentForm.name" placeholder="名称" class="fi" /><input type="color" v-model="roomAgentForm.color" class="fi-color" /></div>
              <div class="form-row">
                <select v-model="roomAgentForm.provider_id" class="fi">
                  <option :value="null">默认 Provider</option>
                  <option v-for="p in providers" :key="p.id" :value="p.id">{{ p.name }}</option>
                </select>
              </div>
              <div class="form-row"><input v-model="roomAgentForm.model" placeholder="模型" class="fi" /></div>
              <div class="form-row"><textarea v-model="roomAgentForm.system_prompt" rows="2" placeholder="系统提示词" class="fi"></textarea></div>
              <div class="form-row" style="justify-content: flex-end; gap: 0.4rem;">
                <button class="btn-xs btn-secondary" @click="cancelRoomAgentEdit">取消</button>
                <button class="btn-xs btn-primary" @click="saveRoomAgent" :disabled="!roomAgentForm.name || roomAgentSaving">{{ roomAgentSaving ? '...' : '保存' }}</button>
              </div>
            </div>
          </div>
          <div class="sidebar-room-info">
            <div class="info-item"><span class="info-label">任务</span><p class="info-value">{{ room.task }}</p></div>
            <div class="info-item"><span class="info-label">轮次</span><p class="info-value">{{ room.max_rounds }}</p></div>
          </div>
        </div>
      </aside>

      <!-- Right content -->
      <main class="rooms-content">
        <div v-if="!room" class="empty-content">
          <div class="empty-icon">
            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
              <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle>
              <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
            </svg>
          </div>
          <p>选择一个聊天室或创建新的</p>
        </div>

        <div v-else class="room-detail">
          <div class="room-toolbar">
            <div class="toolbar-info">
              <h3>{{ room.title }}</h3>
              <div class="toolbar-badges">
                <span class="status-badge" :class="statusMap[room.status]?.class">{{ statusMap[room.status]?.label }}</span>
                <span class="round-badge" v-if="room.current_round > 0">R{{ room.current_round }}/{{ room.max_rounds }}</span>
              </div>
            </div>
            <div class="toolbar-actions">
              <button v-if="!streaming && room.status !== 'running'" class="btn-ctrl btn-start" @click="startRoom">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
                {{ room.status === 'paused' ? '继续' : '开始' }}
              </button>
              <button v-if="streaming || room.status === 'running'" class="btn-ctrl btn-stop" @click="stopRoom">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="4" width="4" height="16"></rect><rect x="14" y="4" width="4" height="16"></rect></svg>
                停止
              </button>
              <button v-if="room.status !== 'running' && messages.length > 0" class="btn-ctrl btn-reset" @click="resetRoom">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"></polyline><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path></svg>
                重置
              </button>
            </div>
          </div>
          <div v-if="error" class="error-bar">{{ error }}<button @click="error = ''">&times;</button></div>
          <div class="chat-messages" ref="messagesContainer" @scroll="handleScroll">
            <div v-if="messagesLoading" class="loading-messages"><div class="spinner-small"></div><span>加载中...</span></div>
            <div v-else-if="messages.length === 0 && Object.keys(streamingMessages).length === 0" class="chat-empty"><p>点击「开始」启动多 Agent 对话</p></div>
            <div v-else>
              <div v-for="(roundMsgs, rIdx) in groupedMessages" :key="rIdx">
                <div class="round-divider" v-if="rIdx > 0">
                  <span class="round-divider-line"></span>
                  <span class="round-divider-label">第 {{ roundMsgs[0].round_number }} 轮</span>
                  <span class="round-divider-line"></span>
                </div>
                <div class="round-group">
                  <div class="round-header" v-if="roundMsgs[0].round_number">
                    <span class="round-header-icon">💬</span>
                    <span class="round-header-text">第 {{ roundMsgs[0].round_number }} 轮对话</span>
                  </div>
                  <MessageBubble v-for="msg in roundMsgs" :key="msg.id" :message="msg" :deletable="false" />
                </div>
              </div>
              <!-- Streaming messages -->
              <template v-if="Object.keys(streamingMessages).length > 0">
                <div class="round-divider" v-if="messages.length > 0">
                  <span class="round-divider-line"></span>
                  <span class="round-divider-label">进行中...</span>
                  <span class="round-divider-line"></span>
                </div>
                <div class="round-group">
                  <MessageBubble 
                    v-for="(msg, idx) in Object.values(streamingMessages)" 
                    :key="msg.id + '-' + idx" 
                    :message="msg" 
                    :deletable="false"
                    class="streaming-message"
                  />
                </div>
              </template>
            </div>
            <div v-if="streaming" class="streaming-hint"><div class="spinner-sm"></div><span>Agent 正在思考...</span></div>
          </div>
        </div>
      </main>
    </div>

    <!-- Create room modal -->
    <div v-if="showCreate" class="modal-overlay" @click.self="showCreate = false">
      <div class="modal">
        <div class="modal-head"><h3>新建聊天室</h3><button class="btn-close" @click="showCreate = false">&times;</button></div>
        <div class="modal-body">
          <div class="fg"><label>标题</label><input v-model="newRoom.title" placeholder="项目架构设计讨论" /></div>
          <div class="fg"><label>任务描述</label><textarea v-model="newRoom.task" rows="3" placeholder="描述需要 Agent 讨论的问题..."></textarea></div>
          <div class="fg"><label>最大轮次</label><input v-model.number="newRoom.max_rounds" type="number" min="1" max="20" /></div>
          <div class="agents-select">
            <label class="agents-select-label">选择 Agent</label>
            <div v-if="agentPool.length === 0" class="no-agents-hint">请先在左侧 Agent 池中创建 Agent</div>
            <div v-else class="agents-checkboxes">
              <label v-for="a in agentPool" :key="a.id" class="agent-checkbox" :class="{ checked: newRoom.agent_ids.includes(a.id) }">
                <input type="checkbox" :value="a.id" v-model="newRoom.agent_ids" />
                <span class="agent-dot" :style="{ background: a.color }">{{ a.name.charAt(0) }}</span>
                <span class="agent-checkbox-name" :style="{ color: a.color }">{{ a.name }}</span>
                <span class="agent-checkbox-model">{{ a.model || 'default' }}</span>
              </label>
            </div>
          </div>
        </div>
        <div class="modal-foot">
          <button class="btn-secondary" @click="showCreate = false">取消</button>
          <button class="btn-primary" @click="createRoom" :disabled="!newRoom.title || !newRoom.task || newRoom.agent_ids.length === 0 || creating">{{ creating ? '创建中...' : '创建' }}</button>
        </div>
      </div>
    </div>

    <!-- Add agent to room modal -->
    <div v-if="showAddToRoom" class="modal-overlay" @click.self="showAddToRoom = false">
      <div class="modal">
        <div class="modal-head"><h3>添加 Agent 到房间</h3><button class="btn-close" @click="showAddToRoom = false">&times;</button></div>
        <div class="modal-body">
          <div v-if="agentPool.length === 0" class="no-agents-hint">请先在左侧 Agent 池中创建 Agent</div>
          <div v-else class="agents-checkboxes">
            <div v-for="a in agentPool" :key="a.id" class="agent-pick-row" @click="addAgentToRoom(a); showAddToRoom = false">
              <span class="agent-dot" :style="{ background: a.color }">{{ a.name.charAt(0) }}</span>
              <span class="agent-checkbox-name" :style="{ color: a.color }">{{ a.name }}</span>
              <span class="agent-checkbox-model">{{ a.model || 'default' }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Agent create/edit modal -->
    <div v-if="showAgentModal" class="modal-overlay" @click.self="cancelAgentEdit">
      <div class="modal">
        <div class="modal-head"><h3>{{ editingAgent === 'new' ? '新建 Agent' : '编辑 Agent' }}</h3><button class="btn-close" @click="cancelAgentEdit">&times;</button></div>
        <div class="modal-body">
          <div class="fg"><label>名称</label><input v-model="agentForm.name" placeholder="如: 架构师" /></div>
          <div class="fg"><label>角色</label><input v-model="agentForm.role" placeholder="如: 架构师、开发者、审查员" /></div>
          <div class="fg-row">
            <div class="fg" style="flex: 1;">
              <label>Provider</label>
              <select v-model="agentForm.provider_id" @change="onProviderChange">
                <option :value="null">默认 Provider</option>
                <option v-for="p in providers" :key="p.id" :value="p.id">{{ p.name }}</option>
              </select>
            </div>
            <div class="fg fg-color">
              <label>颜色</label>
              <div class="color-picker-wrap">
                <input type="color" v-model="agentForm.color" class="color-input" />
              </div>
            </div>
          </div>
          <div class="fg">
            <label>模型</label>
            <select v-model="modelDisplayValue">
              <option value="">自动选择</option>
              <option v-for="m in availableModels" :key="m" :value="m">{{ m }}</option>
            </select>
          </div>
          <div class="fg"><label>系统提示词</label><textarea v-model="agentForm.system_prompt" rows="3" placeholder="定义 Agent 的角色和行为..."></textarea></div>
        </div>
        <div class="modal-foot">
          <button v-if="editingAgent !== 'new'" class="btn-danger" @click="deleteAgentFromPool(editingAgent)">删除</button>
          <div style="flex: 1;"></div>
          <button class="btn-secondary" @click="cancelAgentEdit">取消</button>
          <button class="btn-primary" @click="saveAgent" :disabled="!agentForm.name || agentSaving">{{ agentSaving ? '保存中...' : '保存' }}</button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* Layout */
.page-container { padding: 0 !important; overflow: hidden; height: 100% !important; min-height: 0; display: flex; flex-direction: column; }
.chat-rooms { height: 100% !important; }
.rooms-layout { display: flex; gap: 1rem; height: 100%; flex: 1; min-height: 0; }

/* ===== Left Sidebar ===== */
.rooms-sidebar { width: 22%; min-width: 240px; max-width: 320px; background: var(--bg-primary); border: 1px solid var(--border-light); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; }

/* Tab bar */
.sidebar-tabs { display: flex; border-bottom: 1px solid var(--border-light); flex-shrink: 0; background: var(--bg-secondary); }
.tab-btn { flex: 1; min-width: 0; padding: 0.6rem 0.4rem; background: none; border: none; border-bottom: 2px solid transparent; font-size: 0.72rem; color: var(--text-secondary); cursor: pointer; transition: all 0.2s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tab-btn:hover { color: var(--text-primary); background: var(--bg-hover); }
.tab-btn.active { color: var(--accent-primary); border-bottom-color: var(--accent-primary); background: var(--accent-primary-light); }
.tab-room-btn { flex: 1 1 auto; min-width: 0; max-width: 100px; }

/* Tab content */
.sidebar-tab-content { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }

/* Shared section styles */
.sidebar-section { display: flex; flex-direction: column; overflow: hidden; border-bottom: 1px solid var(--border-light); }
.sidebar-section:last-child { border-bottom: none; }

/* Pool & room list scrollable */
.pool-list, .room-list, .room-agent-list { flex: 1; overflow-y: auto; }
.pool-list { padding: 0.3rem 0.5rem; }
.room-agent-list { padding: 0.3rem 0.5rem; }

.sidebar-header { padding: 0.75rem; border-bottom: 1px solid var(--border-light); }
.sidebar-header-row { display: flex; justify-content: space-between; align-items: center; }
.btn-back { background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1rem; padding: 0 0.3rem 0 0; line-height: 1; }
.btn-back:hover { color: var(--accent-primary); }
.sidebar-title { font-size: 0.8rem; font-weight: 700; color: var(--text-primary); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-new-conv { width: 100%; padding: 0.5rem; background: var(--accent-primary); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.85rem; font-weight: 500; transition: all 0.2s; }
.btn-new-conv:hover { background: var(--accent-primary-hover); }
.btn-add-agent-sm { width: 26px; height: 26px; background: var(--accent-primary); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 1rem; font-weight: 600; display: flex; align-items: center; justify-content: center; transition: all 0.2s; flex-shrink: 0; }
.btn-add-agent-sm:hover { background: var(--accent-primary-hover); }

.sidebar-loading, .sidebar-empty { display: flex; align-items: center; justify-content: center; padding: 1.5rem; color: var(--text-secondary); font-size: 0.8rem; }

/* Agent pool list */
.pool-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.6rem; border-radius: 10px; cursor: pointer; transition: all 0.2s ease; border: 1px solid transparent; }
.pool-item:hover, .pool-item.editing { background: var(--bg-secondary); border-color: var(--border-light); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.room-item { padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--border-light); cursor: pointer; transition: all 0.15s; }
.room-item:hover { background: var(--bg-hover); }
.room-item.active { background: var(--accent-primary-light); border-left: 3px solid var(--accent-primary); }
.room-item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.2rem; }
.room-item-title { font-size: 0.78rem; font-weight: 500; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.status-idle { background: var(--text-secondary); }
.status-running { background: #22c55e; animation: pulse 1.5s ease-in-out infinite; }
.status-paused { background: #f59e0b; }
.status-completed { background: #3b82f6; }
.status-error { background: #ef4444; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.room-item-meta { display: flex; align-items: center; gap: 0.75rem; font-size: 0.7rem; color: var(--text-secondary); }
.meta-text { display: flex; align-items: center; gap: 3px; }
.mini-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.room-item-actions { margin-left: auto; }
.btn-icon-sm { background: transparent; border: none; cursor: pointer; padding: 2px; border-radius: 3px; color: var(--text-secondary); transition: all 0.15s; display: flex; align-items: center; }
.btn-icon-sm:hover { color: #ef4444; background: rgba(239,68,68,0.1); }

/* Shared agent row */
.agent-row, .pool-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.6rem; border-radius: 10px; cursor: pointer; transition: all 0.2s ease; border: 1px solid transparent; }
.agent-row:hover, .agent-row.editing { background: var(--bg-secondary); border-color: var(--border-light); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.agent-dot { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; color: white; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.15); transition: transform 0.2s ease; }
.agent-row:hover .agent-dot, .pool-item:hover .agent-dot { transform: scale(1.1); }
.agent-info { flex: 1; min-width: 0; }
.agent-name { font-size: 0.8rem; font-weight: 600; display: block; }
.agent-role { font-size: 0.65rem; color: var(--text-secondary); display: block; margin-top: 1px; }
.agent-model { font-size: 0.6rem; color: var(--text-secondary); display: block; margin-top: 1px; opacity: 0.7; }
.btn-del-agent { background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 2px; opacity: 0; transition: all 0.15s; }
.agent-row:hover .btn-del-agent { opacity: 1; }
.btn-del-agent:hover { color: #ef4444; }
.no-agents { text-align: center; padding: 0.8rem 0; color: var(--text-secondary); font-size: 0.75rem; }
.no-agents p { margin: 0; }

/* Room agent list */

/* Sidebar inline form */
.btn-close-xs { background: none; border: none; font-size: 1.1rem; cursor: pointer; color: var(--text-secondary); padding: 0; line-height: 1; transition: color 0.15s; }
.btn-close-xs:hover { color: var(--text-primary); }
.form-row { margin-bottom: 0.5rem; display: flex; gap: 0.4rem; }
.fi { width: 100%; padding: 0.45rem 0.6rem; border: 1px solid var(--border-light); border-radius: 8px; background: var(--bg-primary); color: var(--text-primary); font-size: 0.8rem; transition: all 0.2s ease; }
.fi:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1); }
.fi-color { width: 32px !important; height: 32px; padding: 2px !important; border-radius: 6px; cursor: pointer; flex-shrink: 0; }
textarea.fi { resize: vertical; min-height: 50px; }

/* Sidebar room info */
.sidebar-room-info { border-top: 1px solid var(--border-light); padding: 0.5rem 0.6rem; flex-shrink: 0; }
.info-item { margin-bottom: 0.2rem; }
.info-label { font-size: 0.6rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
.info-value { font-size: 0.75rem; color: var(--text-primary); margin: 0.1rem 0 0; line-height: 1.4; }

/* ===== Right Content ===== */
.rooms-content { flex: 1; background: var(--bg-primary); border: 1px solid var(--border-light); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.empty-content { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-secondary); }
.empty-content .empty-icon { opacity: 0.4; margin-bottom: 0.75rem; }
.empty-content p { font-size: 0.9rem; }

.room-detail { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.room-toolbar { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 1rem; border-bottom: 1px solid var(--border-light); flex-shrink: 0; }
.toolbar-info { flex: 1; min-width: 0; }
.toolbar-info h3 { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toolbar-badges { display: flex; gap: 0.5rem; align-items: center; margin-top: 2px; }
.status-badge { font-size: 0.65rem; padding: 0.1rem 0.4rem; border-radius: 8px; font-weight: 600; }
.round-badge { font-size: 0.65rem; color: var(--text-secondary); }

.toolbar-actions { display: flex; gap: 0.4rem; align-items: center; }
.btn-ctrl { display: flex; align-items: center; gap: 0.3rem; padding: 0.35rem 0.75rem; border: none; border-radius: 6px; font-size: 0.8rem; cursor: pointer; font-weight: 500; }
.btn-start { background: #22c55e; color: white; }
.btn-start:hover { background: #16a34a; }
.btn-stop { background: #ef4444; color: white; }
.btn-stop:hover { background: #dc2626; }
.btn-reset { background: var(--bg-secondary); color: var(--text-secondary); border: 1px solid var(--border-light); }
.btn-reset:hover { border-color: var(--accent-primary); color: var(--accent-primary); }

.error-bar { padding: 0.5rem 1rem; background: rgba(239,68,68,0.1); color: #ef4444; font-size: 0.8rem; display: flex; justify-content: space-between; align-items: center; }
.error-bar button { background: none; border: none; color: #ef4444; cursor: pointer; font-size: 1.2rem; }

.chat-messages { flex: 1; overflow-y: auto; padding: 0.75rem; }
.chat-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); font-size: 0.85rem; }
.loading-messages { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; color: var(--text-secondary); font-size: 0.85rem; }
.spinner-small { width: 24px; height: 24px; border: 3px solid var(--border-light); border-top-color: var(--accent-primary); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 0.5rem; }
.spinner-sm { width: 16px; height: 16px; border: 2px solid var(--border-light); border-top-color: var(--accent-primary); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.streaming-hint { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem; color: var(--text-secondary); font-size: 0.8rem; }

/* Round group styling */
.round-group { display: flex; flex-direction: column; gap: 0.5rem; }

.round-header { 
  display: flex; 
  align-items: center; 
  gap: 0.5rem; 
  padding: 0.5rem 0.75rem; 
  background: var(--bg-secondary); 
  border-radius: 8px; 
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-weight: 600;
}
.round-header-icon { font-size: 0.85rem; }
.round-header-text { opacity: 0.8; }

.round-divider { 
  display: flex; 
  align-items: center; 
  gap: 0.75rem; 
  margin: 1.25rem 0; 
  padding: 0 0.5rem;
}
.round-divider-line { 
  flex: 1; 
  height: 1px; 
  background: linear-gradient(90deg, transparent, var(--border-light), transparent); 
}
.round-divider-label { 
  font-size: 0.7rem; 
  color: var(--text-tertiary); 
  background: var(--bg-secondary); 
  padding: 0.2rem 0.6rem; 
  border-radius: 10px; 
  border: 1px solid var(--border-light);
  font-weight: 600;
  white-space: nowrap;
}

/* Streaming message animation */
.streaming-message {
  opacity: 0.85;
  animation: streamingPulse 2s ease-in-out infinite;
}

@keyframes streamingPulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 0.7; }
}

.streaming-message :deep(.avatar) {
  animation: avatarPulse 1.5s ease-in-out infinite;
}

@keyframes avatarPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* ===== Buttons ===== */
.btn-xs { padding: 0.2rem 0.5rem; font-size: 0.7rem; border-radius: 4px; border: none; cursor: pointer; }
.btn-xs.btn-primary { background: var(--accent-primary); color: white; }
.btn-xs.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-xs.btn-secondary { background: var(--bg-secondary); color: var(--text-secondary); border: 1px solid var(--border-light); }
.btn-xs.btn-danger { background: var(--danger-bg, rgba(239,68,68,0.1)); color: #ef4444; }
.btn-primary { padding: 0.5rem 1rem; background: var(--accent-primary); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 0.85rem; transition: all 0.2s; }
.btn-primary:hover { background: var(--accent-primary-hover); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-secondary { padding: 0.5rem 1rem; background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border-light); border-radius: 6px; cursor: pointer; font-size: 0.85rem; }
.btn-danger { padding: 0.5rem 1rem; background: var(--danger-bg, rgba(239,68,68,0.1)); color: #ef4444; border: 1px solid rgba(239,68,68,0.3); border-radius: 6px; cursor: pointer; font-size: 0.85rem; }
.btn-danger:hover { background: rgba(239,68,68,0.2); }

/* ===== Modal ===== */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal { background: var(--bg-primary); border-radius: 16px; width: 480px; max-width: 95vw; max-height: 85vh; overflow-y: auto; }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-light); }
.modal-head h3 { margin: 0; font-size: 1rem; }
.btn-close { background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--text-secondary); padding: 0; line-height: 1; }
.modal-body { padding: 1.25rem; }
.modal-foot { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 1rem 1.25rem; border-top: 1px solid var(--border-light); }

.fg { margin-bottom: 1.25rem; }
.fg label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.5px; }
.fg input, .fg textarea, .fg select { width: 100%; padding: 0.6rem 0.875rem; border: 1px solid var(--border-light); border-radius: 10px; background: var(--bg-secondary); color: var(--text-primary); font-size: 0.875rem; box-sizing: border-box; transition: all 0.2s ease; }
.fg input:focus, .fg textarea:focus, .fg select:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); }
.fg textarea { resize: vertical; min-height: 80px; }
.fg-row { display: flex; gap: 0.75rem; margin-bottom: 1.25rem; }
.fg-color { width: 70px; flex-shrink: 0; }
.fg-color label { margin-bottom: 0.4rem; display: block; }
.color-picker-wrap { position: relative; display: flex; align-items: center; justify-content: center; height: 42px; padding: 4px 10px; border: 1px solid var(--border-light); border-radius: 10px; background: var(--bg-secondary); transition: all 0.2s ease; }
.color-picker-wrap:hover { border-color: var(--accent-primary); }
.color-input { width: 32px !important; height: 32px !important; padding: 0 !important; border: none !important; border-radius: 6px; cursor: pointer; background: none; flex-shrink: 0; }

/* Agent selection in create room modal */
.agents-select { margin-top: 0.5rem; }
.agents-select-label { font-size: 0.8rem; font-weight: 600; color: var(--text-primary); display: block; margin-bottom: 0.5rem; }
.no-agents-hint { color: var(--text-secondary); font-size: 0.8rem; padding: 0.5rem 0; }
.agents-checkboxes { display: flex; flex-direction: column; gap: 0.4rem; max-height: 200px; overflow-y: auto; padding: 0.25rem; }
.agent-checkbox { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.75rem; border-radius: 10px; cursor: pointer; transition: all 0.2s ease; border: 1px solid transparent; }
.agent-checkbox:hover { background: var(--bg-secondary); border-color: var(--border-light); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.agent-checkbox.checked { background: var(--accent-primary-light); border-color: var(--accent-primary); }
.agent-checkbox input { display: none; }
.agent-checkbox-name { font-size: 0.85rem; font-weight: 600; }
.agent-checkbox-model { font-size: 0.7rem; color: var(--text-secondary); margin-left: auto; }

/* Agent pick row in add-to-room modal */
.agent-pick-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.8rem; border-radius: 10px; cursor: pointer; transition: all 0.2s ease; border: 1px solid transparent; }
.agent-pick-row:hover { background: var(--bg-secondary); border-color: var(--border-light); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
</style>
