<!--
  PillStatus — canonical bridge for Figma published `Pill Status`
  (fileKey YbsPRUVmNdsbN40NNwh1Gn, componentSet 5672:140617).

  CANONICAL-028 (2026-05-29): reconciled 1:1 to the published 8-variant set
  (Status × Active). Tokens extracted from the SoT via Figma MCP
  get_design_context + get_variable_defs + pixel-sampled dot colours:

    Status     Active=True (hue)                    Active=False (muted)
    On-air     bg=--red @18% · border/dot/text=--red
    Preview    bg=--brand @18% · border/dot/text=--brand
    Analyzing  bg=--blue @18% · border/dot/text=--blue
    Inactive   bg=--line-deep @18% · border/dot/text=--color-grey-7
    (all False)  bg=--bg-layer3 · border=--line-deep · dot=--color-grey-7 · text=--text-tips

  Notes:
  - Active=True bg is the raw hue at 18% opacity (Figma rgba(hue,0.18)),
    reproduced via color-mix over the token — NOT the solid --msg-bg-* tokens.
  - Inactive Active=True bg uses --line-deep (#353535) @18%, while its
    border/dot/text use --color-grey-7 (#7b7b7b); these differ per the SoT.
  - Active=False dot is --color-grey-7 (#7b7b7b, pixel-confirmed) while the
    label/count text is the lighter --text-tips (#9e9e9e).
  - All tokens are theme-aware (default :root=dark, [data-theme=light]=light).
  - Render-verification coverage is a CANONICAL-017 follow-up (owned elsewhere).
-->
<script setup lang="ts">
import { computed } from 'vue'
import Pill from '../components/Pill/Pill.vue'

type Status = 'On-air' | 'Preview' | 'Analyzing' | 'Inactive'

const props = withDefaults(defineProps<{
  status?: Status
  active?: boolean
  count?: number | string
}>(), {
  status: 'On-air',
  active: true,
  count: undefined,
})

/** Per-status hue token (Active=True). */
const HUE: Record<Status, string> = {
  'On-air': 'var(--red)',
  Preview: 'var(--brand)',
  Analyzing: 'var(--blue)',
  Inactive: 'var(--color-grey-7)',
}

/** Active=True background base token (hue, except Inactive uses --line-deep). */
const BG_BASE: Record<Status, string> = {
  'On-air': 'var(--red)',
  Preview: 'var(--brand)',
  Analyzing: 'var(--blue)',
  Inactive: 'var(--line-deep)',
}

const tokens = computed(() => {
  if (props.active) {
    const hue = HUE[props.status]
    return {
      bgCss: `color-mix(in srgb, ${BG_BASE[props.status]} 18%, transparent)`,
      borderCss: hue,
      dotCss: hue,
      textCss: hue,
    }
  }
  // Active=False — identical muted scheme across all statuses.
  return {
    bgCss: 'var(--bg-layer3)',
    borderCss: 'var(--line-deep)',
    dotCss: 'var(--color-grey-7)',
    textCss: 'var(--text-tips)',
  }
})

const figmaAttrs = computed(() => ({
  'data-figma-component': 'Pill Status',
  'data-figma-status': props.status,
  'data-figma-active': String(props.active),
}))

const hasCount = computed(() => props.count !== undefined && props.count !== null && props.count !== '')
</script>

<template>
  <Pill
    v-bind="figmaAttrs"
    :bg-css="tokens.bgCss"
    :border-css="tokens.borderCss"
    :dot-css="tokens.dotCss"
    :text-css="tokens.textCss"
  >
    <slot>{{ status }}</slot>
    <template v-if="hasCount" #count>{{ count }}</template>
  </Pill>
</template>
