<template>
  <div class="sidebar-header">
    <div class="brand">
      <span class="brand-icon">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
          <rect x="3" y="11" width="18" height="10" rx="2"></rect>
          <circle cx="12" cy="5" r="2"></circle>
          <path d="M12 7v4"></path>
          <line x1="8" y1="16" x2="8" y2="16"></line>
          <line x1="16" y1="16" x2="16" y2="16"></line>
        </svg>
      </span>
      <span v-show="!collapsed" class="brand-text">
        制度文件管理学习<br/>AI智能体
      </span>
    </div>

    <div class="header-divider">
      <button 
        class="collapse-btn"
        @click="$emit('toggle')"
        :title="collapsed ? '展开侧边栏' : '收起侧边栏'"
        type="button"
      >
        <svg 
          width="12" 
          height="12" 
          viewBox="0 0 24 24" 
          fill="none" 
          stroke="currentColor" 
          stroke-width="2.5" 
          stroke-linecap="round" 
          stroke-linejoin="round"
        >
          <polyline :points="collapsed ? '9 18 15 12 9 6' : '15 18 9 12 15 6'"></polyline>
        </svg>
      </button>
    </div>
  </div>
</template>

<script setup>
defineProps({
  collapsed: {
    type: Boolean,
    default: false
  }
})

defineEmits(['toggle'])
</script>

<style scoped>
.sidebar-header {
  padding-bottom: 0;
}

.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--space-md) var(--space-sm);
}

.brand-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--color-primary);
  flex-shrink: 0;
}

.brand-icon svg {
  width: 100%;
  height: 100%;
}

.brand-text {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

.header-divider {
  position: relative;
  height: 0;
  margin: var(--space-sm) 0;
  border-top: 1px solid var(--border-sidebar);
}

.collapse-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  border: 1px solid var(--border-sidebar);
  background: var(--bg-sidebar, var(--bg-page));
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
}

.collapse-btn:hover {
  color: var(--text-primary);
  border-color: var(--color-primary);
  background: var(--bg-card);
}
</style>