// DSSourceBadge.jsx — Meridian value-origin attribution badge
//
// A small chip that attributes a logged parameter value (or journal entry)
// to its origin. Used in parameter-history rows and review-sheet rows so
// users can distinguish where data came from.
//
// Two tonal groups, matching the two ways data enters Axis:
//   User origin       — flat inkMuted fill, white text
//     manual          ·  typed by the user
//     journal         ✎  extracted from a journal entry the user wrote
//     predefined      ★  set up during onboarding / from a template
//
//   Automated origin  — axisSoft fill, axisDark text
//     synced          ↻  pulled from a connected platform (Oura, Apple Health)
//     document        📄 OCR'd from a doc the user uploaded
//     experiment      ▶  produced by a running experiment
//     audioTranscribed 🎙 transcribed from Ambient Voice Input (AXIS-5 §3.8)
//
// Props:
//   variant   'manual' | 'journal' | 'predefined' |
//             'synced' | 'document' | 'experiment' | 'audioTranscribed'
//             required
//   size      'default' | 'compact'    default 'default'
//   label     string                   optional override (e.g. "Synced from Oura")

const DSSourceBadge_VARIANTS = {
  // ── User origin · inkMuted fill ──────────────────────────────
  manual:           { group: 'user',      glyph: '·',  label: 'Manual',           compactLabel: 'Manual' },
  journal:          { group: 'user',      glyph: '✎',  label: 'Journal entry',    compactLabel: 'Journal' },
  predefined:       { group: 'user',      glyph: '★',  label: 'Predefined',       compactLabel: 'Predefined' },
  // ── Automated origin · axisSoft fill ─────────────────────────
  synced:           { group: 'automated', glyph: '↻',  label: 'Synced',           compactLabel: 'Synced' },
  document:         { group: 'automated', glyph: '📄', label: 'Document',         compactLabel: 'Doc' },
  experiment:       { group: 'automated', glyph: '▶',  label: 'From experiment',  compactLabel: 'Experiment' },
  audioTranscribed: { group: 'automated', glyph: '🎙', label: 'Audio-transcribed', compactLabel: 'Audio' },
};

function DSSourceBadge({ variant, size = 'default', label }) {
  const v = DSSourceBadge_VARIANTS[variant];
  if (!v) {
    if (typeof console !== 'undefined') console.warn(`DSSourceBadge: unknown variant "${variant}"`);
    return null;
  }
  const isCompact = size === 'compact';
  const text = label ?? (isCompact ? v.compactLabel : v.label);
  const isUser = v.group === 'user';

  return (
    <span
      role="img"
      aria-label={`Source: ${text}`}
      style={{
        display: 'inline-flex',
        alignItems: 'center',
        gap: isCompact ? 4 : 6,
        padding: isCompact ? '3px 7px' : '4px 9px',
        borderRadius: 999,
        background: isUser ? M.inkMuted : M.axisSoft,
        color: isUser ? '#FFFFFF' : M.axisDark,
        border: isUser ? '1px solid transparent' : '1px solid transparent',
        font: `500 ${isCompact ? 10 : 11}px/1 ${M.sans}`,
        letterSpacing: '0.01em',
        whiteSpace: 'nowrap',
        // tabular spacing keeps the glyph column aligned across rows
        fontFeatureSettings: '"tnum"',
        userSelect: 'none',
      }}
    >
      <span aria-hidden="true" style={{
        font: `500 ${isCompact ? 10 : 11}px/1 ${M.sans}`,
        opacity: 0.92,
      }}>{v.glyph}</span>
      <span>{text}</span>
    </span>
  );
}

// Expose for sibling babel scripts
window.DSSourceBadge = DSSourceBadge;
window.DSSourceBadge_VARIANTS = DSSourceBadge_VARIANTS;