// Primitives.jsx — Meridian shared building blocks
//
// Naming convention: DS-prefixed primitives match the iOS/Android
// codebase (ios/DesignSystem and android/designsystem). M-prefixed
// aliases are preserved for backwards compatibility with older code.
//
// This file exports the token object `M` plus:
//   DSButton, DSChip     — renamed from MButton, MChip
//   MEyebrow             — typography utility, no DS equivalent in codebase
//   MSectionTitle        — typography utility, no DS equivalent
//   MStatusDot           — small utility; the DS version lives inside DSChip
//   MSparkline           — superseded by DSValueChart, kept for legacy callsites
//
// Other primitives live in their own files:
//   DSCard            → DSCard.jsx           (also: DSValueRow, DSParameterTile, DSStatCard)

const M = {
  ink: '#0E1220', inkSoft: '#353A4A', inkMuted: '#6A7083', inkFaint: '#9BA0B0',
  rule: '#E3E3DC', ruleSoft: '#EEEDE6',
  canvas: '#F4F3EC', surface: '#FFFFFF', surfaceAlt: '#FAF9F3',
  axis: '#1E3AED', axisDark: '#1428B0', axisSoft: '#E6EAFF',
  success: '#2E7D5B', warning: '#B7791F', crisis: '#B42A2A',
  sans: "'Inter', system-ui, -apple-system, sans-serif",
  mono: "'JetBrains Mono', ui-monospace, monospace",
};

// ── DSButton ─────────────────────────────────────────────────────
function DSButton({ variant = 'primary', size = 'md', full, children, onClick, style, type = 'button', disabled = false }) {
  const base = {
    border: 'none', cursor: disabled ? 'default' : 'pointer', borderRadius: 10,
    font: `500 ${size==='sm'?13:14}px/1 ${M.sans}`,
    letterSpacing: '-0.005em',
    padding: size==='sm' ? '8px 12px' : '12px 18px',
    width: full ? '100%' : 'auto',
    opacity: disabled ? 0.55 : 1,
    transition: 'transform 120ms cubic-bezier(.2,.8,.2,1), background 120ms cubic-bezier(.2,.8,.2,1)',
  };
  const variants = {
    primary:   { background: M.axis, color: '#fff', border: 'none' },
    secondary: { background: M.surface, color: M.ink, border: `1px solid ${M.rule}` },
    ghost:     { background: 'transparent', color: M.axis, border: 'none' },
    dark:      { background: M.ink, color: '#fff', border: 'none' },
    danger:    { background: M.crisis, color: '#fff', border: 'none' },
  };
  return (
    <button type={type} disabled={disabled} onClick={onClick} style={{ ...base, ...variants[variant], ...style }}
      onMouseDown={(e)=>{ if (!disabled) e.currentTarget.style.transform='translateY(1px)'; }}
      onMouseUp={(e)=>e.currentTarget.style.transform='translateY(0)'}
      onMouseLeave={(e)=>e.currentTarget.style.transform='translateY(0)'}
    >{children}</button>
  );
}

// ── DSChip ───────────────────────────────────────────────────────
function DSChip({ children, dot, variant = 'default', style }) {
  const variants = {
    default: { background: M.surface, color: M.inkSoft, border: `1px solid ${M.rule}` },
    accent:  { background: M.axisSoft, color: M.axisDark, border: '1px solid transparent' },
    dark:    { background: M.ink, color: '#fff', border: `1px solid ${M.ink}` },
    success: { background: '#EBF3EE', color: '#1E5A41', border: `1px solid #C5DCB5` },
    warning: { background: M.warning + '14', color: M.warning, border: `1px solid ${M.warning}33` },
  };
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '6px 10px', borderRadius: 999,
      font: `500 12px/1 ${M.sans}`, ...variants[variant], ...style,
    }}>
      {dot && <span style={{ width: 6, height: 6, borderRadius: 999, background: dot }} />}
      {children}
    </span>
  );
}

// ── MEyebrow / MSectionTitle ─────────────────────────────────────
// Typography utilities — kept M-prefixed; no DS equivalent in codebase.
function MEyebrow({ children, color = M.inkMuted, style }) {
  return <div style={{
    font: `500 11px/1 ${M.sans}`, color,
    letterSpacing: '0.06em', textTransform: 'uppercase',
    ...style,
  }}>{children}</div>;
}

function MSectionTitle({ children, action }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', padding: '0 4px', marginBottom: 10 }}>
      <div style={{ font: `500 13px/1 ${M.sans}`, color: M.ink }}>{children}</div>
      {action && <div style={{ font: `400 12px/1 ${M.sans}`, color: M.axis, cursor: 'pointer' }}>{action}</div>}
    </div>
  );
}

// ── MStatusDot ──────────────────────────────────────────────────
function MStatusDot({ color = M.success, size = 6 }) {
  return <span style={{ display: 'inline-block', width: size, height: size, borderRadius: 999, background: color }} />;
}

Object.assign(window, {
  M,
  DSButton, DSChip,
  MEyebrow, MSectionTitle, MStatusDot,
  // Back-compat aliases for the rename — remove in a future cleanup.
  MButton: DSButton,
  MChip:   DSChip,
});