<template>
  <div class="metric-bar">
    <div class="metric-bar__head">
      <span class="metric-bar__label">{{ label }}</span>
      <span class="metric-bar__value" :class="{ 'metric-bar__value--muted': muted }">
        {{ displayValue }}<template v-if="showMax"> / {{ max }}</template>
      </span>
    </div>
    <div class="metric-bar__track">
      <div class="metric-bar__fill" :class="`metric-bar__fill--${tone}`" :style="{ width: pct + '%' }"></div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  label: { type: String, required: true },
  value: { type: Number, required: true },
  max: { type: Number, default: 100 },
  tone: { type: String, default: 'brand', validator: v => ['brand', 'success', 'warning', 'danger', 'info'].includes(v) },
  showMax: { type: Boolean, default: true },
  muted: { type: Boolean, default: false },
  precision: { type: Number, default: 1 }
})

const pct = computed(() => props.max > 0 ? Math.min(100, Math.max(0, (props.value / props.max) * 100)) : 0)
const displayValue = computed(() => Number(props.value).toFixed(props.precision))
</script>

<style scoped>
.metric-bar { margin-bottom: 10px; }
.metric-bar__head { display: flex; justify-content: space-between; margin-bottom: 4px; font-size: 12px; }
.metric-bar__label { color: var(--color-text, #18212f); font-weight: 500; }
.metric-bar__value { color: var(--color-text, #18212f); font-weight: 600; font-variant-numeric: tabular-nums; }
.metric-bar__value--muted { color: var(--color-text-muted, #8a97a8); font-weight: 400; }
.metric-bar__track { height: 5px; background: var(--table-border, #f3f6f9); border-radius: 3px; overflow: hidden; }
.metric-bar__fill { height: 100%; border-radius: 3px; transition: width var(--motion-fast, 160ms ease); }
.metric-bar__fill--brand { background: var(--color-brand, #2b1f99); }
.metric-bar__fill--success { background: var(--color-success, #2e9d65); }
.metric-bar__fill--warning { background: var(--color-warning, #c98219); }
.metric-bar__fill--danger { background: var(--color-danger, #c94a4a); }
.metric-bar__fill--info { background: var(--color-info, #4c6f91); }
</style>
