<script setup lang="ts">
/**
 * ResourceMeter — labeled utilization bar (CPU, RAM, disk, network).
 * tone="auto" colors by threshold: green <70%, amber <90%, red ≥90%.
 */
import { computed } from 'vue'

const props = withDefaults(
  defineProps<{
    label: string
    icon?: string
    value?: number
    sub?: string
    tone?: 'auto' | 'ok' | 'warn' | 'danger' | 'accent'
  }>(),
  { value: 0, tone: 'auto' },
)

const pct = computed(() => Math.max(0, Math.min(100, props.value)))

const resolvedTone = computed(() => {
  if (props.tone !== 'auto') return props.tone
  return pct.value >= 90 ? 'danger' : pct.value >= 70 ? 'warn' : 'ok'
})
</script>

<template>
  <div :class="['cc-meter', 'cc-meter--' + resolvedTone]">
    <div class="cc-meter__top">
      <span class="cc-meter__label">{{ label }}</span>
      <span class="cc-meter__val">
        {{ pct }}%<span v-if="sub" class="cc-meter__sub">{{ sub }}</span>
      </span>
    </div>
    <div class="cc-meter__track">
      <div class="cc-meter__fill" :style="{ width: pct + '%' }" />
    </div>
  </div>
</template>

<style>
.cc-meter { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cc-meter__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cc-meter__label { font-size: var(--text-xs); color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }
.cc-meter__val { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.cc-meter__sub { color: var(--text-muted); font-weight: 400; margin-left: 4px; }
.cc-meter__track { height: 6px; border-radius: var(--radius-pill); background: var(--surface-active); overflow: hidden; }
.cc-meter__fill { height: 100%; border-radius: var(--radius-pill); transition: width var(--dur-slow) var(--ease-out), background var(--dur-base); }
.cc-meter--accent .cc-meter__fill { background: var(--accent); }
.cc-meter--ok .cc-meter__fill { background: var(--status-online); }
.cc-meter--warn .cc-meter__fill { background: var(--status-warn); }
.cc-meter--danger .cc-meter__fill { background: var(--status-offline); }
</style>
