// Shared UI primitives for Dynamo Authoring.
// Buttons + pills come from the global stylesheet; this file owns components
// with behaviour: SuggestionCard, ValidationPill, MediaSlot, FourAnswerEditor, etc.

// ── StatusPill ──────────────────────────────────────────────────────────────
function StatusPill({ status, size = 'sm', iconOnly = false }) {
  const cfg = {
    accepted: { cls: 'accepted', label: 'Accepted', icon: <I.Check size={11} /> },
    proposed: { cls: 'proposed', label: 'Proposed', icon: <I.Sparkle size={11} /> },
    issues:   { cls: 'issues',   label: 'Issues',   icon: <I.AlertTriangle size={11} /> },
    pending:  { cls: 'pending',  label: 'Pending',  icon: <I.Clock size={11} /> },
    error:    { cls: 'error',    label: 'Error',    icon: <I.AlertCircle size={11} /> },
    ready:    { cls: 'accepted', label: 'Ready',    icon: <I.Check size={11} /> },
    ingesting:{ cls: 'proposed', label: 'Ingesting', icon: <I.Loader size={11} className="spin" /> },
    queued:   { cls: 'pending',  label: 'Queued',   icon: <I.Clock size={11} /> },
    failed:   { cls: 'error',    label: 'Failed',   icon: <I.AlertCircle size={11} /> },
  }[status] || { cls: '', label: status, icon: null };
  if (iconOnly) {
    // Inline, chromeless status glyph. The icon itself carries the meaning
    // via the *-text token (deeper than the badge --success/--warning so it
    // clears 7+:1 contrast on any background, light or tinted accent). No
    // box, no shadow — keeps modules cards quiet.
    const iconColor = {
      accepted:  'var(--success-text)',
      proposed:  'var(--accent-text)',
      issues:    'var(--warning-text)',
      pending:   'var(--text-muted)',
      error:     'var(--error-text)',
      ready:     'var(--success-text)',
      ingesting: 'var(--accent-text)',
      queued:    'var(--text-muted)',
      failed:    'var(--error-text)',
    }[status] || 'var(--text-muted)';
    // Re-render the cfg icon at a slightly larger inline size for legibility.
    const SizedIcon = React.cloneElement(cfg.icon, { size: 14 });
    return (
      <span title={cfg.label}
        style={{
          width: 14, height: 14, color: iconColor, flexShrink: 0,
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        }}>
        {SizedIcon}
      </span>
    );
  }
  return (
    <span className={`pill ${cfg.cls}`}>
      {cfg.icon}{cfg.label}
    </span>
  );
}

// ── ValidationPill ──────────────────────────────────────────────────────────
function ValidationPill({ count, level = 'warning', onClick }) {
  const cfg = level === 'error'
    ? { cls: 'error', icon: <I.AlertCircle size={12} />, label: count === 1 ? '1 blocker' : `${count} blockers` }
    : level === 'success' || count === 0
      ? { cls: 'accepted', icon: <I.Check size={12} />, label: 'All clear' }
      : { cls: 'issues', icon: <I.AlertTriangle size={12} />, label: count === 1 ? '1 issue' : `${count} issues` };
  return (
    <button className={`pill ${cfg.cls} focusable`} onClick={onClick}
            style={{ height: 24, padding: '0 9px', fontSize: 12, cursor: 'default', border: 0 }}>
      {cfg.icon}{cfg.label}
    </button>
  );
}

// ── SaveIndicator ───────────────────────────────────────────────────────────
function SaveIndicator({ state = 'saved', timestamp }) {
  if (state === 'saving') {
    return <span style={{ fontSize: 12, color: 'var(--text-faint)', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
      <I.Loader size={12} className="spin" /> Saving…
    </span>;
  }
  return <span style={{ fontSize: 12, color: 'var(--text-faint)', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
    <I.Check size={12} /> Saved {timestamp}
  </span>;
}

// ── AiBadge ─────────────────────────────────────────────────────────────────
function AiBadge({ size = 'sm', label = 'AI', title }) {
  return (
    <span className="pill ai" title={title || 'AI-generated · click for provenance'}
          style={{ height: size === 'lg' ? 22 : 18, padding: '0 6px', fontSize: 10.5,
                   fontWeight: 600, letterSpacing: '.02em' }}>
      <I.Sparkle size={10} />{label}
    </span>
  );
}

// ── LayoutTypeChip ──────────────────────────────────────────────────────────
function LayoutTypeChip({ type, size = 'md' }) {
  const meta = (window.LAYOUT_TYPES || []).find(t => t.id === type) || { label: type, icon: 'Hash' };
  const Icon = I[meta.icon] || I.Hash;
  return (
    <span className="chip" style={{ height: size === 'lg' ? 26 : 22 }}>
      <Icon size={12} />{type}
    </span>
  );
}

Object.assign(window, { StatusPill, ValidationPill, SaveIndicator, AiBadge, LayoutTypeChip });