<template>
  <el-tooltip :content="tooltipText" placement="top-end">
    <div class="token-stats" :class="{ 'is-warning': isWarning, 'is-danger': isDanger }">
      <span class="token-stats__meta">
        <span class="token-stats__label">上下文</span>
        <span class="token-stats__dot" :style="{ background: progressColor }" />
        <span class="token-stats__value">{{ percent }}%</span>
        <span class="token-stats__detail">{{ formatNum(usedTokens) }}/{{ formatNum(maxTokens) }}</span>
        <el-icon v-if="estimated" class="token-stats__estimate" title="本地估算">
          <QuestionFilled />
        </el-icon>
      </span>
      <el-button
        v-if="canCompact"
        size="small"
        link
        class="token-stats__action"
        :loading="compactionInFlight"
        @click.stop="$emit('compact')"
      >
        {{ compactionInFlight ? '压缩中' : '压缩' }}
      </el-button>
    </div>
  </el-tooltip>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { QuestionFilled } from '@element-plus/icons-vue';

const props = defineProps<{
  usedTokens: number;
  maxTokens: number;
  percent: number;
  thresholdPercent?: number;
  estimated?: boolean;
  compactionInFlight?: boolean;
}>();

defineEmits<{ (e: 'compact'): void }>();

const canCompact = computed(() => props.usedTokens > 0);
const warningThreshold = computed(() => {
  const threshold = props.thresholdPercent ?? 80;
  return Math.round(threshold * 0.75);
});
const isWarning = computed(() => props.percent >= warningThreshold.value);
const isDanger = computed(() => props.percent >= (props.thresholdPercent ?? 80));

const progressColor = computed(() => {
  const threshold = props.thresholdPercent ?? 80;
  if (props.percent >= threshold) return '#f56c6c';
  if (props.percent >= threshold * 0.75) return '#e6a23c';
  return '#409eff';
});

const tooltipText = computed(() => {
  const parts = [
    `已使用 ${formatNum(props.usedTokens)} / ${formatNum(props.maxTokens)} tokens`,
    `占比 ${props.percent}%`,
  ];
  if (props.thresholdPercent) parts.push(`自动压缩阈值 ${props.thresholdPercent}%`);
  if (props.estimated) parts.push('当前为本地估算');
  return parts.join('\n');
});

function formatNum(n: number): string {
  if (n >= 1000) return (n / 1000).toFixed(1) + 'K';
  return String(n);
}
</script>

<style scoped>
.token-stats {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 5px 8px 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(64, 158, 255, 0.14);
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  font-size: 12px;
  color: var(--el-text-color-secondary);
  transition: all 0.2s ease;
}

.token-stats:hover {
  border-color: rgba(64, 158, 255, 0.28);
  box-shadow: 0 8px 20px rgba(17, 24, 39, 0.06);
}

.token-stats.is-warning {
  border-color: rgba(230, 162, 60, 0.24);
}

.token-stats.is-danger {
  border-color: rgba(245, 108, 108, 0.28);
}

.token-stats__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.token-stats__label {
  font-weight: 600;
  color: var(--el-text-color-regular);
}

.token-stats__dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.08);
}

.token-stats__value {
  font-weight: 700;
  color: var(--el-text-color-primary);
}

.token-stats__detail {
  color: var(--el-text-color-secondary);
}

.token-stats__estimate {
  color: var(--el-text-color-placeholder);
  font-size: 12px;
}

.token-stats__action {
  padding: 0 4px;
}
</style>
