<template>
  <div :class="['chat-sidebar', { 'chat-sidebar--collapsed': collapsed }]">
    <div v-if="!collapsed" class="chat-sidebar__content">
      <div class="chat-sidebar__header">
        <a-button type="primary" block size="small" @click="handleCreate">
          <template #icon><PlusOutlined /></template>
          新建对话
        </a-button>
      </div>
      <div class="chat-sidebar__list">
        <a-empty v-if="conversations.length === 0" description="暂无对话" :image-style="{ height: '40px' }" />
        <div
          v-for="conv in conversations"
          :key="conv.id"
          class="chat-sidebar__item"
          :class="{ 'chat-sidebar__item--active': conv.id === currentId }"
          @click="handleSelect(conv.id)"
        >
          <MessageOutlined class="chat-sidebar__item-icon" />
          <span class="chat-sidebar__item-title">{{ conv.title }}</span>
          <span
            v-if="conv.is_board"
            class="chat-sidebar__board-badge"
            title="此对话包含私董会讨论"
          >私董会</span>
          <span class="chat-sidebar__item-time">{{ formatRelativeTime(conv.updated_at) }}</span>
          <a-popconfirm
            title="确定删除此对话？"
            ok-text="删除"
            cancel-text="取消"
            @confirm.stop="handleDelete(conv.id)"
            @click.stop
          >
            <button
              class="chat-sidebar__item-delete"
              title="删除对话"
              aria-label="删除对话"
              @click.stop
            >
              <DeleteOutlined />
            </button>
          </a-popconfirm>
        </div>
      </div>
    </div>
    <button class="chat-sidebar__toggle" @click="collapsed = !collapsed" :title="collapsed ? '展开' : '折叠'">
      <RightOutlined v-if="collapsed" />
      <LeftOutlined v-else />
    </button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Button as AButton, Empty as AEmpty, Popconfirm as APopconfirm } from 'ant-design-vue'
import {
  PlusOutlined,
  MessageOutlined,
  LeftOutlined,
  RightOutlined,
  DeleteOutlined,
} from '@ant-design/icons-vue'
import type { IConversation } from '@/api/types'

interface IProps {
  conversations: IConversation[]
  currentId: string | null
}

defineProps<IProps>()

const emit = defineEmits<{
  create: []
  select: [id: string]
  delete: [id: string]
}>()

const collapsed = ref(false)

function handleCreate(): void {
  emit('create')
}

function handleSelect(id: string): void {
  emit('select', id)
}

function handleDelete(id: string): void {
  emit('delete', id)
}

function formatRelativeTime(dateStr: string): string {
  const date = new Date(dateStr)
  const now = new Date()
  const diffMs = now.getTime() - date.getTime()
  const diffMin = Math.floor(diffMs / 60000)

  if (diffMin < 1) return '刚刚'
  if (diffMin < 60) return `${diffMin}分钟前`

  const diffHour = Math.floor(diffMin / 60)
  if (diffHour < 24) return `${diffHour}小时前`

  const diffDay = Math.floor(diffHour / 24)
  if (diffDay < 7) return `${diffDay}天前`

  return date.toLocaleDateString('zh-CN')
}
</script>

<style scoped>
.chat-sidebar {
  display: flex;
  height: 100%;
  background: var(--bg-primary);
  border-right: 1px solid var(--border-color-split);
  transition: width var(--transition-normal);
}

.chat-sidebar--collapsed {
  width: 36px;
}

.chat-sidebar:not(.chat-sidebar--collapsed) {
  width: 240px;
}

.chat-sidebar__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-sidebar__header {
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-color-split);
}

/* Fix: dark theme — primary button has light bg (--color-primary=#fbfbfa)
 * in dark mode, so default white text is invisible. Force dark text in
 * dark theme to keep "新建对话" readable. */
.chat-sidebar__header :deep(.ant-btn-primary) {
  color: var(--text-inverse);
}

[data-theme="dark"] .chat-sidebar__header :deep(.ant-btn-primary) {
  color: #1a1a1a;
}

[data-theme="dark"] .chat-sidebar__header :deep(.ant-btn-primary:hover),
[data-theme="dark"] .chat-sidebar__header :deep(.ant-btn-primary:focus) {
  color: #1a1a1a;
}

.chat-sidebar__list {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2);
}

.chat-sidebar__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.chat-sidebar__item:hover {
  background: var(--bg-tertiary);
}

.chat-sidebar__item--active {
  background: var(--color-primary-light);
}

.chat-sidebar__item--active:hover {
  background: var(--color-primary-light);
}

.chat-sidebar__item-icon {
  color: var(--text-placeholder);
  font-size: var(--font-sm);
  flex-shrink: 0;
}

.chat-sidebar__item--active .chat-sidebar__item-icon {
  color: var(--color-primary);
}

.chat-sidebar__item-title {
  flex: 1;
  font-size: var(--font-sm);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 私董会会话徽章 — 使用紫色 accent-board 标识，使用 token 避免硬编码 */
.chat-sidebar__board-badge {
  flex-shrink: 0;
  font-size: var(--font-xs);
  font-weight: var(--font-weight-medium);
  line-height: 18px;
  padding: 0 6px;
  border-radius: 4px;
  background: var(--accent-board-bg);
  color: var(--accent-board);
  border: 1px solid var(--accent-board-soft);
  user-select: none;
}

.chat-sidebar__item-time {
  font-size: var(--font-xs);
  color: var(--text-placeholder);
  flex-shrink: 0;
}

.chat-sidebar__item-delete {
  /* 用 opacity + pointer-events 替代 display:none/flex，按钮始终占据空间，
   * 避免 hover 时 flex 布局重排导致列表项抖动。 */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-placeholder);
  cursor: pointer;
  flex-shrink: 0;
  font-size: var(--font-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}

.chat-sidebar__item:hover .chat-sidebar__item-delete {
  opacity: 1;
  pointer-events: auto;
}

.chat-sidebar__item-delete:hover {
  background: var(--color-error-bg, rgba(255, 77, 79, 0.1));
  color: var(--color-error, #ff4d4f);
}

.chat-sidebar__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 100%;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--transition-fast);
  border-radius: 0;
}

.chat-sidebar__toggle:hover {
  color: var(--text-primary);
  background: var(--bg-tertiary);
}
</style>
