<template>
  <div class="command-history">
    <div class="command-history__header">
      <span>命令历史</span>
      <a-button type="link" size="small" @click="terminalStore.clearHistory()">
        清空
      </a-button>
    </div>
    <div class="command-history__list">
      <div
        v-for="(record, index) in terminalStore.recentCommands"
        :key="index"
        class="command-history__item"
        @click="$emit('select', record.command)"
      >
        <div class="command-history__item-header">
          <span
            :class="['command-history__exit-code', record.exit_code === 0 ? 'command-history__exit-code--success' : 'command-history__exit-code--error']"
          >
            {{ record.exit_code === 0 ? 'OK' : 'FAIL' }}
          </span>
          <span class="command-history__command">{{ record.command }}</span>
        </div>
        <div class="command-history__item-meta">
          <span>{{ formatTime(record.timestamp) }}</span>
          <span v-if="record.duration_ms" class="command-history__duration">
            {{ record.duration_ms }}ms
          </span>
        </div>
      </div>
      <div v-if="terminalStore.recentCommands.length === 0" class="command-history__empty">
        暂无命令历史
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Button as AButton } from 'ant-design-vue'
import { useTerminalStore } from '@/stores/terminal'

const terminalStore = useTerminalStore()

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

function formatTime(timestamp: number): string {
  try {
    const d = new Date(timestamp * 1000)
    return d.toLocaleTimeString('zh-CN')
  } catch {
    return ''
  }
}
</script>

<style scoped>
.command-history {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-primary);
}

.command-history__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-base);
  border-bottom: 1px solid var(--border-color);
}

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

.command-history__item {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin-bottom: var(--space-1);
  transition: background var(--transition-fast);
}

.command-history__item:hover {
  background: var(--color-primary-light);
}

.command-history__item-header {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.command-history__exit-code {
  font-size: var(--font-xs);
  font-weight: var(--font-weight-semibold);
}

.command-history__exit-code--success {
  color: var(--color-success);
}

.command-history__exit-code--error {
  color: var(--color-error);
}

.command-history__command {
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', Menlo, Consolas, monospace;
  font-size: var(--font-xs);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-history__item-meta {
  display: flex;
  gap: var(--space-2);
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-placeholder);
}

.command-history__duration {
  color: var(--color-primary);
}

.command-history__empty {
  text-align: center;
  padding: var(--space-6);
  color: var(--text-placeholder);
  font-size: var(--font-sm);
}
</style>
