<script setup lang="ts">
/**
 * Badge — Nexus V2 Status- und Label-Badge
 *
 * Erweitert: zusätzliche nexus-token-basierte Varianten für
 * Agenten-Rollen, Status-Pills und Prioritäten.
 * Original shadcn-Varianten bleiben erhalten.
 */
import type { HTMLAttributes } from 'vue'
import { cva, type VariantProps } from 'class-variance-authority'
import { cn } from '@/lib/utils'

const badgeVariants = cva(
  'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
  {
    variants: {
      variant: {
        // Original shadcn
        default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
        secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
        destructive: 'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
        outline: 'text-foreground',

        // Nexus V2 — Token-basierte Varianten (Farben aus nexus-tokens.css)
        work: 'nexus-badge-work',
        think: 'nexus-badge-think',
        blocked: 'nexus-badge-blocked',
        queue: 'nexus-badge-queue',
        done: 'nexus-badge-done',
        review: 'nexus-badge-review',
        iris: 'nexus-badge-iris',
        bao: 'nexus-badge-bao',
        agent: 'nexus-badge-agent',
        priorityHigh: 'nexus-badge-prio-high',
        priorityMed: 'nexus-badge-prio-med',
        priorityLow: 'nexus-badge-prio-low',
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  },
)

interface Props {
  variant?: NonNullable<VariantProps<typeof badgeVariants>['variant']>
  class?: HTMLAttributes['class']
}

const props = withDefaults(defineProps<Props>(), {
  variant: 'default',
})
</script>

<template>
  <span :class="cn(badgeVariants({ variant }), props.class)">
    <slot />
  </span>
</template>

<style scoped>
/* Nexus V2 Token-basierte Badge-Varianten */
.nexus-badge-work {
  border-color: rgba(61, 220, 151, .25);
  background: rgba(34, 197, 94, .12);
  color: var(--st-work);
}

.nexus-badge-think {
  border-color: rgba(52, 214, 245, .25);
  background: rgba(52, 214, 245, .1);
  color: var(--st-think);
}

.nexus-badge-blocked {
  border-color: rgba(251, 113, 133, .25);
  background: rgba(244, 63, 94, .12);
  color: var(--st-block);
}

.nexus-badge-queue {
  border-color: rgba(251, 191, 36, .25);
  background: rgba(251, 191, 36, .12);
  color: var(--st-queue);
}

.nexus-badge-done {
  border-color: rgba(34, 197, 94, .25);
  background: rgba(34, 197, 94, .12);
  color: var(--st-work);
}

.nexus-badge-review {
  border-color: rgba(249, 115, 22, .25);
  background: rgba(249, 115, 22, .12);
  color: var(--clr-review);
}

.nexus-badge-iris {
  border-color: rgba(147, 51, 234, .25);
  background: rgba(147, 51, 234, .12);
  color: var(--clr-iris);
}

.nexus-badge-bao {
  border-color: rgba(59, 130, 246, .25);
  background: rgba(59, 130, 246, .12);
  color: var(--clr-bao);
}

.nexus-badge-agent {
  border-color: rgba(16, 185, 129, .2);
  background: rgba(16, 185, 129, .12);
  color: var(--clr-agent);
}

.nexus-badge-prio-high {
  border-color: var(--st-block);
  background: transparent;
  color: var(--st-block);
}

.nexus-badge-prio-med {
  border-color: var(--st-queue);
  background: transparent;
  color: var(--st-queue);
}

.nexus-badge-prio-low {
  border-color: var(--a-blue);
  background: transparent;
  color: var(--a-blue);
}
</style>
