<template>
  <div class="file-tree">
    <div v-if="files.length === 0" class="file-tree__empty">
      <FolderOpenOutlined style="font-size: 24px; color: var(--text-placeholder)" />
      <p>暂无文件</p>
    </div>
    <div v-else class="file-tree__list">
      <div
        v-for="file in files"
        :key="file.path"
        :class="['file-tree__item', { 'file-tree__item--active': selectedPath === file.path }]"
        @click="selectedPath = file.path; $emit('select', file.path)"
      >
        <component :is="getFileIcon(file.status)" class="file-tree__icon" :class="[`file-tree__icon--${file.status}`]" />
        <span class="file-tree__name">{{ file.name }}</span>
        <span v-if="file.status" :class="['file-tree__badge', `file-tree__badge--${file.status}`]">
          {{ getStatusLabel(file.status) }}
        </span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, type Component } from 'vue'
import {
  FolderOpenOutlined,
  FileOutlined,
  FileAddOutlined,
  EditOutlined,
  DeleteOutlined,
} from '@ant-design/icons-vue'

export interface FileEntry {
  path: string
  name: string
  status?: 'added' | 'modified' | 'deleted'
}

defineProps<{
  files: FileEntry[]
}>()

defineEmits<{
  select: [path: string]
}>()

const selectedPath = ref('')

function getFileIcon(status?: string): Component {
  switch (status) {
    case 'added': return FileAddOutlined
    case 'deleted': return DeleteOutlined
    case 'modified': return EditOutlined
    default: return FileOutlined
  }
}

function getStatusLabel(status?: string): string {
  switch (status) {
    case 'added': return 'A'
    case 'deleted': return 'D'
    case 'modified': return 'M'
    default: return ''
  }
}
</script>

<style scoped>
.file-tree {
  height: 100%;
  overflow-y: auto;
  background: var(--bg-primary);
}

.file-tree__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: var(--space-2);
  color: var(--text-placeholder);
  font-size: var(--font-sm);
}

.file-tree__list {
  padding: var(--space-1);
}

.file-tree__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
  font-size: var(--font-sm);
}

.file-tree__item:hover {
  background: var(--bg-tertiary);
}

.file-tree__item--active {
  background: var(--color-primary-light);
}

.file-tree__icon {
  font-size: 14px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.file-tree__icon--added {
  color: var(--color-success);
}

.file-tree__icon--modified {
  color: var(--color-warning);
}

.file-tree__icon--deleted {
  color: var(--color-error);
}

.file-tree__name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-primary);
}

.file-tree__badge {
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.file-tree__badge--added {
  color: var(--color-success);
  background: var(--color-success-light);
}

.file-tree__badge--modified {
  color: var(--color-warning);
  background: var(--color-warning-light);
}

.file-tree__badge--deleted {
  color: var(--color-error);
  background: var(--color-error-light);
}
</style>
