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

defineProps<{
  selectedAgent: Agent | null
  chatModels: ChatModel[]
  selectedModel: ChatModel | null
  showModelDropdown: boolean
  sidebarCollapsed: boolean
}>()

const emit = defineEmits<{
  (e: 'toggleDropdown'): void
  (e: 'selectModel', model: ChatModel): void
  (e: 'toggleSidebar'): void
}>()
</script>

<template>
  <div class="h-16 px-4 flex items-center justify-between border-b border-white/[0.06] bg-[#0c0c0f]/80 backdrop-blur-xl">
    <!-- 左侧：当前AI信息 -->
    <div class="flex items-center gap-3">
      <div v-if="selectedAgent" class="flex items-center gap-3">
        <div
          class="w-9 h-9 rounded-xl flex items-center justify-center text-lg shadow-lg"
          :style="{ backgroundColor: selectedAgent.accentColor + '15', color: selectedAgent.accentColor }"
        >
          {{ selectedAgent.avatar }}
        </div>
        <div>
          <div class="text-sm font-semibold text-white tracking-wide">{{ selectedAgent?.name || 'Chat' }}</div>
          <div class="text-[11px] flex items-center gap-1.5">
            <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
            <span class="text-white/40">Online</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 中间：空白 -->
    <div class="flex-1"></div>

    <!-- 右侧：模型选择和折叠按钮 -->
    <div class="flex items-center gap-3">
      <!-- 模型选择下拉框 -->
      <div class="relative model-dropdown" v-if="chatModels.length > 0">
        <button
          @click="emit('toggleDropdown')"
          class="flex items-center gap-2 px-3 py-1.5 rounded-lg border border-white/[0.08] bg-[#1a1a24] hover:border-orange-500/30 transition-all duration-200"
        >
          <div class="flex items-center gap-2">
            <span class="text-base">{{ getModelIcon(selectedModel?.provider || '') }}</span>
            <span class="text-sm text-white">{{ selectedModel?.name || 'Select Model' }}</span>
          </div>
          <span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
          <svg class="w-3.5 h-3.5 text-white/40" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
          </svg>
        </button>

        <!-- 下拉菜单 -->
        <Transition name="dropdown">
          <div
            v-if="showModelDropdown"
            class="absolute right-0 top-full mt-2 w-64 bg-[#1a1a24] border border-white/[0.08] rounded-xl shadow-2xl shadow-black/50 overflow-hidden z-50"
          >
            <div class="p-2">
              <div class="text-xs text-white/40 px-2 py-1 mb-1">Select Chat Model</div>
              <button
                v-for="model in chatModels"
                :key="model.id"
                @click="emit('selectModel', model)"
                class="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-150"
                :class="selectedModel?.id === model.id
                  ? 'bg-orange-500/15 border border-orange-500/30'
                  : 'hover:bg-white/5'"
              >
                <span class="text-lg">{{ getModelIcon(model.provider) }}</span>
                <div class="flex-1 text-left">
                  <div class="text-sm text-white">{{ model.name }}</div>
                  <div class="text-xs text-white/40">{{ model.provider }} · {{ model.model }}</div>
                </div>
                <span class="w-2 h-2 rounded-full bg-emerald-400"></span>
              </button>
            </div>
          </div>
        </Transition>
      </div>
      <!-- 没有模型时的提示 -->
      <div v-else class="text-xs text-white/30 px-2 flex items-center gap-2">
        <span class="w-2 h-2 rounded-full bg-white/20"></span>
        No models
      </div>

      <button
        @click="emit('toggleSidebar')"
        class="p-2.5 rounded-xl hover:bg-white/[0.06] text-white/35 hover:text-white/80 transition-all duration-200"
        :title="sidebarCollapsed ? '展开侧边栏' : '收起侧边栏'"
      >
        <svg class="w-[18px] h-[18px] transition-transform duration-300" :class="sidebarCollapsed ? '' : 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>
  </div>
</template>

<style scoped>
.dropdown-enter-active,
.dropdown-leave-active {
  transition: all 0.2s ease;
}

.dropdown-enter-from,
.dropdown-leave-to {
  opacity: 0;
  transform: translateY(-8px);
}
</style>
