<template>
  <header class="chat-header">
    <!-- 左侧：侧边栏切换和标题 -->
    <div class="header-left">
      <button
        v-if="showSidebarToggle"
        class="toggle-sidebar-btn"
        title="切换侧边栏 (Ctrl+B)"
        @click="$emit('toggle-sidebar')"
      >
        <Menu :size="20" />
      </button>

      <div class="conversation-info">
        <h1 class="title">{{ title }}</h1>
        <span v-if="messageCount > 0" class="message-count">
          {{ messageCount }} 条消息
        </span>
      </div>
    </div>

    <!-- 中间：模型选择（可选） -->
    <div class="header-center">
      <button class="model-selector" @click="showModelMenu = !showModelMenu">
        <Sparkles :size="16" />
        <span>{{ currentModel }}</span>
        <ChevronDown :size="14" />
      </button>

      <Transition name="dropdown">
        <div v-if="showModelMenu" class="model-menu">
          <button
            v-for="model in models"
            :key="model.id"
            class="model-option"
            :class="{ active: model.id === currentModelId }"
            @click="selectModel(model.id, model.name)"
          >
            <div class="model-info">
              <span class="model-name">{{ model.name }}</span>
              <span class="model-desc">{{ model.description }}</span>
            </div>
            <Check
              v-if="model.id === currentModelId"
              :size="16"
              class="check-icon"
            />
          </button>
        </div>
      </Transition>
    </div>

    <!-- 右侧：操作按钮 -->
    <div class="header-right">
      <!-- 对话大小切换 -->
      <button
        class="header-btn"
        :title="isWideMode ? '标准视图' : '宽屏视图'"
        @click="$emit('toggle-wide-mode')"
      >
        <Maximize2 v-if="!isWideMode" :size="18" />
        <Minimize2 v-else :size="18" />
      </button>

      <!-- 清空对话 -->
      <button
        class="header-btn"
        title="清空对话"
        :disabled="messageCount === 0"
        @click="handleClear"
      >
        <Trash2 :size="18" />
      </button>

      <!-- 导出对话 -->
      <button
        class="header-btn"
        title="导出对话"
        :disabled="messageCount === 0"
        @click="$emit('export')"
      >
        <Download :size="18" />
      </button>

      <!-- 更多操作 -->
      <button
        class="header-btn"
        title="更多选项"
        @click="showMoreMenu = !showMoreMenu"
      >
        <MoreHorizontal :size="18" />
      </button>

      <Transition name="dropdown">
        <div v-if="showMoreMenu" class="more-menu">
          <button class="menu-item" @click="handleShare">
            <ExternalLink :size="16" />
            <span>分享对话</span>
          </button>
          <button class="menu-item" @click="handlePin">
            <Pin :size="16" />
            <span>{{ isPinned ? "取消置顶" : "置顶对话" }}</span>
          </button>
          <button class="menu-item" @click="handleArchive">
            <Archive :size="16" />
            <span>归档对话</span>
          </button>
          <div class="menu-divider"></div>
          <button class="menu-item" @click="handleSettings">
            <Settings :size="16" />
            <span>对话设置</span>
          </button>
        </div>
      </Transition>
    </div>
  </header>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import {
  Menu,
  Sparkles,
  ChevronDown,
  Check,
  Maximize2,
  Minimize2,
  Trash2,
  Download,
  MoreHorizontal,
  ExternalLink,
  Pin,
  Archive,
  Settings,
} from "@/components/icons";
import { useSettingsStore } from "@/stores/settings.ts";
import { chatApi } from "@/services/api.ts";

const props = withDefaults(
  defineProps<{
    title?: string;
    messageCount?: number;
    showSidebarToggle?: boolean;
    isWideMode?: boolean;
    isPinned?: boolean;
    currentModelId?: string;
  }>(),
  {
    title: "新对话",
    messageCount: 0,
    showSidebarToggle: true,
    isWideMode: true,
    isPinned: false,
    currentModelId: "gpt-4",
  },
);

const emit = defineEmits<{
  "toggle-sidebar": [];
  "toggle-wide-mode": [];
  clear: [];
  export: [];
  share: [];
  pin: [];
  archive: [];
  settings: [];
  "select-model": [modelId: string];
  "conversation-settings": [];
}>();

const showModelMenu = ref(false);
const showMoreMenu = ref(false);
const settingsStore = useSettingsStore();

const currentModel = ref(localStorage.getItem("modelSelect") || "");
const models: any = ref([]);

onMounted(() => {
  chatApi.getModels().then((res: any) => {
    models.value = res;
    if (!localStorage.getItem("modelSelect")) {
      currentModel.value = models.value[0]["name"] || "";
      localStorage.setItem("modelSelect", currentModel.value);
    }
  });
});

function selectModel(modelId: string, modelName: string) {
  localStorage.setItem("modelSelect", modelName);
  const model = models.value?.find((m: any) => m.id === modelId);
  if (model) {
    currentModel.value = model.name;
    emit("select-model", modelId);
  }
  showModelMenu.value = false;
}

function handleClear() {
  if (confirm("确定要清空当前对话吗？此操作不可恢复。")) {
    emit("clear");
  }
}

function handleShare() {
  showMoreMenu.value = false;
  emit("share");
}

function handlePin() {
  showMoreMenu.value = false;
  emit("pin");
}

function handleArchive() {
  showMoreMenu.value = false;
  emit("archive");
}

// 点击外部关闭菜单
function handleClickOutside(event: MouseEvent) {
  const target = event.target as HTMLElement;
  if (!target.closest(".model-selector") && !target.closest(".model-menu")) {
    showModelMenu.value = false;
  }
  if (!target.closest(".header-btn") && !target.closest(".more-menu")) {
    showMoreMenu.value = false;
  }
}

function handleSettings() {
  showMoreMenu.value = false;
  settingsStore.openConversationSettingsModal();
}

if (typeof window !== "undefined") {
  document.addEventListener("click", handleClickOutside);
}
</script>

<style lang="scss" scoped>
.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 20px;
  background: white;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;

  .dark & {
    background: #1e1e2e;
    border-bottom-color: #2d2d3d;
  }
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.toggle-sidebar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s ease;

  &:hover {
    background: #f3f4f6;
    color: #374151;

    .dark & {
      background: #2d2d3d;
      color: #e5e7eb;
    }
  }
}

.conversation-info {
  display: flex;
  flex-direction: column;
}

.title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;

  .dark & {
    color: #f3f4f6;
  }
}

.message-count {
  font-size: 12px;
  color: #9ca3af;
}

.header-center {
  position: relative;
}

.model-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: white;
  color: #374151;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;

  .dark & {
    background: #2d2d3d;
    border-color: #374151;
    color: #e5e7eb;
  }

  &:hover {
    border-color: #3b82f6;
  }

  svg:first-child {
    color: #8b5cf6;
  }
}

.model-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 280px;
  padding: 8px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  z-index: 100;

  .dark & {
    background: #1e1e2e;
    border-color: #2d2d3d;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  }
}

.model-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 14px;
  border: none;
  border-radius: 10px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;

  &:hover {
    background: #f3f4f6;

    .dark & {
      background: #2d2d3d;
    }
  }

  &.active {
    background: rgba(59, 130, 246, 0.1);

    .model-name {
      color: #3b82f6;
    }
  }
}

.model-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.model-name {
  font-size: 14px;
  font-weight: 500;
  color: #1f2937;

  .dark & {
    color: #f3f4f6;
  }
}

.model-desc {
  font-size: 12px;
  color: #9ca3af;
}

.check-icon {
  color: #3b82f6;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
}

.header-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s ease;

  &:hover:not(:disabled) {
    background: #f3f4f6;
    color: #374151;

    .dark & {
      background: #2d2d3d;
      color: #e5e7eb;
    }
  }

  &:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
}

.more-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  padding: 8px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  z-index: 100;

  .dark & {
    background: #1e1e2e;
    border-color: #2d2d3d;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  }
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #374151;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;

  .dark & {
    color: #e5e7eb;
  }

  &:hover {
    background: #f3f4f6;

    .dark & {
      background: #2d2d3d;
    }
  }

  svg {
    color: #6b7280;
  }
}

.menu-divider {
  height: 1px;
  margin: 6px 0;
  background: #e2e8f0;

  .dark & {
    background: #374151;
  }
}

// 下拉动画
.dropdown-enter-active,
.dropdown-leave-active {
  transition: all 0.2s ease;
}

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

.header-center .dropdown-enter-from,
.header-center .dropdown-leave-to {
  transform: translateX(-50%) translateY(-8px);
}
</style>
