<script setup lang="ts">
/**
 * Display decoded mode params string as labeled badges/chips.
 *
 * Parses the compact mode params string and renders each parameter
 * as a human-readable chip.
 */
const props = defineProps<{
  modeParams: string
}>()

interface ParamChip {
  code: string
  label: string
  value: string
  color: string
}

const chips = computed((): ParamChip[] => {
  if (!props.modeParams) return []

  try {
    const parsed = parseModeParams(props.modeParams)
    const result: ParamChip[] = []

    result.push({ code: 'D', label: 'Duree', value: `${parsed.duration_days}j`, color: 'primary' })
    result.push({ code: 'M', label: 'Majorite', value: `${parsed.majority_pct}%`, color: 'info' })
    result.push({ code: 'B', label: 'Base', value: String(parsed.base_exponent), color: 'neutral' })
    result.push({ code: 'G', label: 'Gradient', value: String(parsed.gradient_exponent), color: 'neutral' })

    if (parsed.constant_base > 0) {
      result.push({ code: 'C', label: 'Constante', value: String(parsed.constant_base), color: 'warning' })
    }
    if (parsed.smith_exponent !== null) {
      result.push({ code: 'S', label: 'Smith', value: String(parsed.smith_exponent), color: 'success' })
    }
    if (parsed.techcomm_exponent !== null) {
      result.push({ code: 'T', label: 'TechComm', value: String(parsed.techcomm_exponent), color: 'purple' })
    }

    return result
  } catch {
    return []
  }
})
</script>

<template>
  <div class="flex flex-wrap items-center gap-2">
    <span class="font-mono text-xs font-bold text-primary mr-1">{{ modeParams }}</span>
    <UBadge
      v-for="chip in chips"
      :key="chip.code"
      :color="(chip.color as any)"
      variant="subtle"
      size="xs"
    >
      {{ chip.label }}: {{ chip.value }}
    </UBadge>
  </div>
</template>
