function EventGlyph({ kind, size = 20 }) {
  // Simple SVG glyphs (kept minimal per house style)
  const s = size;
  const stroke = 'currentColor';
  switch (kind) {
    case 'prompt': return (
      <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={stroke} strokeWidth="1.4">
        <path d="M4 6h16M4 12h12M4 18h8" />
      </svg>
    );
    case 'reference': return (
      <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={stroke} strokeWidth="1.4">
        <rect x="4" y="4" width="16" height="16" rx="1" />
        <path d="M4 15l5-5 4 4 3-3 4 4" />
      </svg>
    );
    case 'image': return (
      <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={stroke} strokeWidth="1.4">
        <rect x="3" y="5" width="18" height="14" rx="1" />
        <circle cx="9" cy="10" r="1.6" />
        <path d="M3 17l6-6 5 5 3-3 4 4" />
      </svg>
    );
    case 'video': return (
      <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={stroke} strokeWidth="1.4">
        <rect x="3" y="5" width="14" height="14" rx="1" />
        <path d="M17 9l4-2v10l-4-2z" />
      </svg>
    );
    case 'audio': return (
      <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={stroke} strokeWidth="1.4">
        <path d="M4 15V9h4l6-4v14l-6-4H4z" />
      </svg>
    );
    case 'edit': return (
      <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={stroke} strokeWidth="1.4">
        <path d="M4 20h4l10-10-4-4L4 16v4z" />
        <path d="M14 6l4 4" />
      </svg>
    );
    case 'commit': return (
      <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={stroke} strokeWidth="1.4">
        <circle cx="12" cy="12" r="4" />
        <path d="M12 2v6M12 16v6" />
      </svg>
    );
    case 'license': return (
      <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke={stroke} strokeWidth="1.4">
        <path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z" />
      </svg>
    );
    default: return null;
  }
}

function EventBadge({ event, showTime = true, compact = false }) {
  const { t } = useI18n();
  const meta = window.EVENT_KIND_META[event.kind] || { label: event.kind };
  const whoBadge = event.who === 'ai' ? <span className="badge badge-ai">{t('common.actorAI')}</span>
                 : event.who === 'human' ? <span className="badge badge-human">{t('common.actorHuman')}</span>
                 : <span className="badge">{t('common.actorChain')}</span>;
  return (
    <div className="row gap-16" style={{ alignItems:'flex-start' }}>
      <div style={{
        width: 36, height: 36, borderRadius: 6,
        background: event.who === 'ai' ? 'var(--seal-soft)' : event.who === 'human' ? 'var(--verified-soft)' : 'var(--paper-3)',
        color: event.who === 'ai' ? 'var(--seal-2)' : event.who === 'human' ? 'var(--verified)' : 'var(--ink)',
        display:'flex', alignItems:'center', justifyContent:'center', flexShrink: 0
      }}>
        <EventGlyph kind={event.kind} />
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div className="row gap-8" style={{ flexWrap:'wrap' }}>
          <span className="tiny">{meta.label}</span>
          {whoBadge}
          {event.model && <span className="tiny">· {event.model}</span>}
          {event.count && <span className="tiny">· {event.count} files</span>}
        </div>
        <div className="mt-8" style={{ fontSize: 15, color:'var(--ink)' }}>{event.label}</div>
        {!compact && (
          <div className="mt-8 row gap-16" style={{ flexWrap:'wrap' }}>
            <span className="hash" style={{ fontSize: 12 }}>
              <ShortHash hash={event.hash} len={8} />
            </span>
            {showTime && <span className="tiny">{fmtTimeUTC(event.ts)}</span>}
          </div>
        )}
      </div>
    </div>
  );
}

window.EventBadge = EventBadge;
window.EventGlyph = EventGlyph;