// Guardian AI teammate — shared components that surface Guardian
// as a named workspace member, not a feature.

function GMAIAvatar({ size = 24 }) {
  return (
    <span className="avatar" style={{
      width: size, height: size,
      background: 'var(--signal-ai)',
      color: '#FFFFFF',
      fontSize: Math.max(10, Math.round(size * 0.42)),
    }}>
      <GMI.sparkle style={{ width: size * 0.48, height: size * 0.48 }}/>
    </span>
  );
}

// Compact AI suggestion strip — the Mesh-simple form
function GMAIStripSimple({ icon, children, cta, onCta }) {
  return (
    <div className="ai-suggestion-strip">
      <div className="ai-suggestion-icon">{icon || <GMI.sparkle />}</div>
      <div className="ai-suggestion-body">{children}</div>
      {cta && (
        <button className="btn btn--ghost btn--tiny" onClick={onCta}>
          {cta} <GMI.arrowRight />
        </button>
      )}
    </div>
  );
}

// Full AI triage card — Guardian-rich form, used in Inbox detail
function GMAITriageCard({ rec, onApprove, onDismiss }) {
  // Streaming effect — type out the headline
  const [shown, setShown] = React.useState('');
  React.useEffect(() => {
    let i = 0;
    setShown('');
    const id = setInterval(() => {
      i++;
      setShown(rec.headline.slice(0, i));
      if (i >= rec.headline.length) clearInterval(id);
    }, 14);
    return () => clearInterval(id);
  }, [rec.headline]);

  return (
    <div className="ib-ai-card">
      <div className="ib-ai-eyebrow">
        <GMI.sparkle style={{ width: 12, height: 12 }}/>
        Guardian AI — Recommended
      </div>
      <div className="ib-ai-rec">
        <strong>Recommendation.</strong>{' '}
        {shown}
        {shown.length < rec.headline.length && <span className="ai-caret">▍</span>}
      </div>
      {rec.facts && (
        <div style={{ marginBottom: 14 }}>
          {rec.facts.map((f, i) => (
            <div key={i} style={{
              display: 'flex', gap: 8, alignItems: 'flex-start',
              fontSize: 12.5, color: 'rgba(245,244,242,0.7)', padding: '4px 0',
            }}>
              <span style={{ color: 'var(--signal-ai)', opacity: 0.9, marginTop: 6 }}>•</span>
              <span>{f}</span>
            </div>
          ))}
        </div>
      )}
      {rec.policy && (
        <div className="ib-ai-policy">
          <GMI.shieldOutline style={{ width: 14, height: 14, opacity: 0.7 }}/>
          <span>{rec.policy}</span>
        </div>
      )}
      <div className="ib-ai-actions">
        <button className="btn btn--primary" onClick={onApprove}>
          <GMI.check /> Apply recommendation
        </button>
        <button className="btn btn--ghost" onClick={onDismiss}>Dismiss</button>
      </div>
    </div>
  );
}

window.GMAIAvatar = GMAIAvatar;
window.GMAIStripSimple = GMAIStripSimple;
window.GMAITriageCard = GMAITriageCard;