<template>
  <div class="chat-view">
    <ChatSidebar
      :conversations="chatStore.conversations"
      :current-id="chatStore.currentConversationId"
      @create="chatStore.createConversation"
      @select="chatStore.selectConversation"
    />
    <div class="chat-view__main">
      <div v-if="!chatStore.currentConversationId" class="chat-view__empty">
        <a-empty description="选择一个对话或创建新对话开始聊天">
          <a-button type="primary" @click="chatStore.createConversation">
            <template #icon><PlusOutlined /></template>
            新建对话
          </a-button>
        </a-empty>
      </div>
      <template v-else>
        <div class="chat-view__messages" ref="messagesContainer">
          <div v-if="chatStore.currentMessages.length === 0" class="chat-view__welcome">
            <RobotOutlined class="chat-view__welcome-icon" />
            <h2>Fischer AgentKit</h2>
            <p>企业级 AI 智能体平台，输入消息开始对话</p>
          </div>
          <ChatMessage
            v-for="msg in chatStore.currentMessages"
            :key="msg.id"
            :message="msg"
          />
          <!-- Streaming steps -->
          <div v-if="chatStore.streamingSteps.length > 0" class="chat-view__steps">
            <a-typography-text type="secondary">
              <LoadingOutlined /> 处理中...
            </a-typography-text>
            <div v-for="(step, idx) in chatStore.streamingSteps" :key="idx" class="chat-view__step">
              <RightOutlined class="chat-view__step-icon" />
              <span>{{ step }}</span>
            </div>
          </div>
        </div>
        <ChatInput
          :disabled="chatStore.isLoading"
          @send="handleSend"
        />
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, nextTick, onMounted, onUnmounted } from 'vue'
import { Empty as AEmpty, Button as AButton, Typography as ATypography } from 'ant-design-vue'
import {
  PlusOutlined,
  RobotOutlined,
  LoadingOutlined,
  RightOutlined,
} from '@ant-design/icons-vue'
import { useChatStore } from '@/stores/chat'
import ChatSidebar from '@/components/chat/ChatSidebar.vue'
import ChatMessage from '@/components/chat/ChatMessage.vue'
import ChatInput from '@/components/chat/ChatInput.vue'

const ATypographyText = ATypography.Text

const chatStore = useChatStore()
const messagesContainer = ref<HTMLElement | null>(null)

onMounted(() => {
  chatStore.loadConversations()
  chatStore.connectWebSocket()
})

onUnmounted(() => {
  chatStore.disconnectWebSocket()
})

// Auto-scroll to bottom when new messages arrive
watch(
  () => chatStore.currentMessages.length,
  async () => {
    await nextTick()
    scrollToBottom()
  }
)

watch(
  () => chatStore.streamingSteps.length,
  async () => {
    await nextTick()
    scrollToBottom()
  }
)

function scrollToBottom(): void {
  if (messagesContainer.value) {
    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
  }
}

function handleSend(message: string): void {
  if (chatStore.isWsConnected) {
    chatStore.sendWsMessage(message)
  } else {
    chatStore.sendMessage(message)
  }
}
</script>

<style scoped>
.chat-view {
  display: flex;
  height: 100%;
  overflow: hidden;
}

.chat-view__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #f5f5f5;
}

.chat-view__empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-view__messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 0;
}

.chat-view__welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #999999;
}

.chat-view__welcome-icon {
  font-size: 48px;
  color: #1677ff;
  margin-bottom: 16px;
}

.chat-view__welcome h2 {
  color: #333333;
  font-size: 24px;
  margin-bottom: 8px;
}

.chat-view__welcome p {
  font-size: 14px;
  color: #999999;
}

.chat-view__steps {
  padding: 8px 16px;
  margin: 0 16px;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #f0f0f0;
}

.chat-view__step {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  font-size: 13px;
  color: #666666;
}

.chat-view__step-icon {
  font-size: 10px;
  color: #1677ff;
}
</style>
