<script setup lang="ts">
import type { Agent, ChatSession, GroupChat } from '@/composables/useChat'

defineProps<{
  collapsed: boolean
  chatAgents: Agent[]
  selectedAgent: Agent | null
  chatSessions: ChatSession[]
  groupChats: GroupChat[]
}>()

const emit = defineEmits<{
  (e: 'openAgentSelector', mode: 'single' | 'group'): void
  (e: 'selectAgent', agent: Agent): void
  (e: 'selectSession', session: ChatSession): void
}>()

const formatRelativeTime = (date: Date) => {
  const now = new Date()
  const diff = now.getTime() - date.getTime()
  const hours = Math.floor(diff / 3600000)
  const days = Math.floor(diff / 86400000)

  if (hours < 1) return '刚刚'
  if (hours < 24) return `${hours}小时前`
  if (days < 7) return `${days}天前`
  return date.toLocaleDateString('zh-CN')
}
</script>

<template>
  <div
    class="flex-shrink-0 border-l border-white/[0.06] bg-[#0c0c0f] transition-all duration-300 ease-in-out overflow-hidden"
    :class="collapsed ? 'w-0 opacity-0' : 'w-72 opacity-100'"
  >
    <div class="w-72 h-full flex flex-col">
      <!-- 侧边栏头部 -->
      <div class="p-4 border-b border-white/[0.06]">
        <div class="flex items-center gap-2 text-white font-semibold">
          <svg class="w-5 h-5 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
          </svg>
          <span>AI Hub</span>
        </div>
      </div>

      <!-- 新建对话按钮 -->
      <div class="p-3">
        <div class="flex gap-2">
          <button
            @click="emit('openAgentSelector', 'single')"
            class="flex-1 flex items-center justify-center gap-2 px-3 py-2.5 bg-orange-500 hover:bg-orange-400 rounded-lg text-white text-sm font-medium transition-all duration-200"
          >
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
            </svg>
            <span>新建对话</span>
          </button>
          <button
            @click="emit('openAgentSelector', 'group')"
            class="flex-1 flex items-center justify-center gap-2 px-3 py-2.5 bg-dark-700 hover:bg-dark-600 border border-dark-500 rounded-lg text-white/80 text-sm font-medium transition-all duration-200"
          >
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
            </svg>
            <span>新建群聊</span>
          </button>
        </div>
      </div>

      <!-- AI 助手选择 -->
      <div class="px-3 pb-3">
        <div class="text-xs text-white/40 uppercase tracking-wider mb-2 px-1">选择 AI 助手</div>
        <div class="space-y-1">
          <button
            v-for="agent in chatAgents"
            :key="agent.id"
            @click="emit('selectAgent', agent)"
            class="w-full flex items-center gap-2 px-3 py-2 rounded-lg transition-all duration-200"
            :class="selectedAgent?.id === agent.id
              ? 'bg-orange-500/15 text-orange-400'
              : 'text-white/60 hover:bg-white/5 hover:text-white'"
          >
            <span class="text-base">{{ agent.avatar }}</span>
            <span class="text-sm truncate">{{ agent.name }}</span>
            <span
              v-if="agent.status === 'online'"
              class="w-1.5 h-1.5 rounded-full bg-emerald-400 ml-auto"
            ></span>
          </button>
        </div>
      </div>

      <!-- 群聊列表 -->
      <div class="flex-1 overflow-y-auto px-3 pb-3">
        <div class="text-xs text-white/40 uppercase tracking-wider mb-2 px-1">群聊</div>
        <div class="space-y-1">
          <button
            v-for="group in groupChats"
            :key="group.id"
            class="w-full text-left px-3 py-2.5 rounded-lg hover:bg-white/5 transition-all duration-200 group"
          >
            <div class="flex items-center gap-2">
              <svg class="w-4 h-4 text-white/30 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
              </svg>
              <span class="text-sm text-white/70 group-hover:text-white truncate">{{ group.name }}</span>
            </div>
            <div class="text-xs text-white/30 mt-1 pl-6">{{ group.members.length }} members</div>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>
