<script setup lang="ts">
/** Badge — compact status/label chip. Tone drives fg/soft-bg/border; `solid` fills. */
import { computed } from 'vue'
import Icon from './Icon.vue'
import StatusDot from './StatusDot.vue'

const props = withDefaults(
  defineProps<{
    tone?: 'neutral' | 'accent' | 'online' | 'offline' | 'warn' | 'info' | 'starting' | 'wiping'
    solid?: boolean
    dot?: boolean
    pulse?: boolean
    icon?: string
    size?: 'md' | 'lg'
    mono?: boolean
    uppercase?: boolean
  }>(),
  { tone: 'neutral', solid: false, dot: false, pulse: false, size: 'md', mono: false, uppercase: false },
)

const NEUTRAL: [string, string, string] = ['var(--text-secondary)', 'var(--surface-raised-2)', 'var(--border-default)']
const TONES: Record<string, [string, string, string]> = {
  neutral: NEUTRAL,
  accent: ['var(--accent-text)', 'var(--accent-soft)', 'var(--accent-border)'],
  online: ['var(--status-online)', 'var(--status-online-soft)', 'var(--status-online-border)'],
  offline: ['var(--status-offline)', 'var(--status-offline-soft)', 'var(--status-offline-border)'],
  warn: ['var(--status-warn)', 'var(--status-warn-soft)', 'var(--status-warn-border)'],
  info: ['var(--status-info)', 'var(--status-info-soft)', 'var(--status-info-border)'],
  starting: ['var(--status-starting)', 'var(--status-starting-soft)', 'var(--status-starting-border)'],
  wiping: ['var(--status-wiping)', 'var(--status-wiping-soft)', 'var(--status-wiping-border)'],
}

const styleObj = computed(() => {
  const [fg, soft, border] = TONES[props.tone] ?? NEUTRAL
  return props.solid
    ? { background: fg, color: 'var(--surface-canvas)', boxShadow: 'none' }
    : { background: soft, color: fg, boxShadow: `inset 0 0 0 1px ${border}` }
})
</script>

<template>
  <span
    class="cc-badge"
    :class="[size === 'lg' && 'cc-badge--lg', mono && 'cc-badge--mono', uppercase && 'cc-badge--uppercase']"
    :style="styleObj"
  >
    <StatusDot v-if="dot" :tone="tone" :size="6" :pulse="pulse" />
    <Icon v-if="icon" :name="icon" :size="size === 'lg' ? 13 : 12" :stroke-width="2.5" />
    <slot />
  </span>
</template>

<style>
.cc-badge {
  display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px;
  font-family: var(--font-sans); font-weight: 600; font-size: var(--text-xs); line-height: 1;
  border-radius: var(--radius-sm); white-space: nowrap; letter-spacing: 0.005em;
}
.cc-badge--lg { height: 24px; padding: 0 10px; font-size: var(--text-sm); }
.cc-badge--mono { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.cc-badge--uppercase { text-transform: uppercase; letter-spacing: var(--tracking-wider); font-size: var(--text-2xs); }
</style>
