// DSAIBadge.jsx — Meridian · §28.3 cross-surface "AI-generated" badge
//
//   AXIS-12 spec: a fixed, non-interactive label that marks any surface,
//   row, or value as AI-generated. Built on top of DSChip variant="accent"
//   with a fixed leading 4-point sparkle. Rules that DON'T bend:
//       · text reads "AI-generated" verbatim — never abbreviated
//       · never dismissible, never interactive (no onClick, no chevron)
//       · always carries the leading sparkle glyph
//
//   Sizes:
//       'default'  — 11px, axisSoft fill / axisDark text. The standard mark.
//       'compact'  — 10px, same palette. For dense rows / inline metadata.
//       'inverse'  — white text on a translucent ink fill, for on-dark heroes.
//
//   Depends on the shared `M` token object + DSChip (window globals from
//   Primitives.jsx). `Sparkle` is exported so other surfaces can reuse the
//   exact same glyph.

// ── Sparkle ──────────────────────────────────────────────────────
// A filled 4-point star (concave diamond). Decorative — the badge owns
// announcement, so this is aria-hidden.
function Sparkle({ size = 11, color = 'currentColor' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden="true"
         style={{ display: 'block', flexShrink: 0 }}>
      {/* 4-point star: tips at N/E/S/W, waist pulled toward centre */}
      <path
        d="M12 2 C12.7 7.2 16.8 11.3 22 12 C16.8 12.7 12.7 16.8 12 22 C11.3 16.8 7.2 12.7 2 12 C7.2 11.3 11.3 7.2 12 2 Z"
        fill={color}
      />
    </svg>
  );
}

// ── DSAIBadge ────────────────────────────────────────────────────
function DSAIBadge({ size = 'default' }) {
  const SIZES = {
    default: {
      fontSize: 11, glyph: 11, padding: '4px 9px', gap: 5,
      fill: M.axisSoft, text: M.axisDark, border: '1px solid transparent',
    },
    compact: {
      fontSize: 10, glyph: 9.5, padding: '3px 7px', gap: 4,
      fill: M.axisSoft, text: M.axisDark, border: '1px solid transparent',
    },
    inverse: {
      fontSize: 11, glyph: 11, padding: '4px 9px', gap: 5,
      fill: 'rgba(255,255,255,0.16)', text: '#FFFFFF',
      border: '1px solid rgba(255,255,255,0.28)',
    },
  };
  const s = SIZES[size] || SIZES.default;

  return (
    <DSChip
      variant="accent"
      style={{
        gap: s.gap,
        padding: s.padding,
        background: s.fill,
        color: s.text,
        border: s.border,
        font: `500 ${s.fontSize}px/1 ${M.sans}`,
        letterSpacing: '0.01em',
        cursor: 'default',
        userSelect: 'none',
        whiteSpace: 'nowrap',
      }}
    >
      <Sparkle size={s.glyph} color={s.text} />
      AI-generated
    </DSChip>
  );
}

Object.assign(window, {
  DSAIBadge,
  Sparkle,
});