// Shared data-trust primitives. Keep these dependency-free: pages load this file as a
// plain Babel script and can use the same fail-closed states in demo and API modes.
const PulseMetricValue = ({ value, availability = 'verified', format = null }) => {
  const usable = availability === 'verified' || availability === 'supported';
  if (!usable || value === null || value === undefined || value === '') return <span data-testid="metric-value" data-status={availability}>N/A</span>;
  return <span data-testid="metric-value" data-status={availability}>{format ? format(value) : value}</span>;
};

const PulseDataStatusBadge = ({ status = 'unverified', timestamp = null }) => {
  const labels = { verified: 'Verified', partial: 'Partial', stale: 'Stale', failed: 'Failed', queued: 'Queued', running: 'Refreshing', unverified: 'Not verified', demo: 'Demo / QA', awaiting_url: 'Awaiting URL' };
  return <span data-testid="data-status" data-status={status} className={`chip ${['failed', 'stale'].includes(status) ? 'danger' : ''}`} title={timestamp ? `Last verified ${timestamp}` : undefined}>{labels[status] || status}</span>;
};

const pulseInitials = name => String(name || '?').trim().split(/\s+/).map(part => part[0]).join('').slice(0, 2).toUpperCase() || '?';
const PulseProfileAvatar = ({ src = '', name = '', size = 40, onError = null }) => {
  const [failed, setFailed] = React.useState(false);
  const safe = src && !/thumbnail|post[-_]?image|content[-_]?media/i.test(src) && !failed;
  const style = { width: size, height: size, borderRadius: Math.min(16, Math.round(size * .2)), objectFit: 'cover', display: 'grid', placeItems: 'center', flexShrink: 0 };
  if (!safe) return <div data-testid="profile-avatar" aria-label={`${name || 'Creator'} avatar fallback`} style={{ ...style, background: 'var(--brand-500)', color: '#fff', fontWeight: 800 }}>{pulseInitials(name)}</div>;
  return <img data-testid="profile-avatar" src={src} alt={`${name || 'Creator'} profile avatar`} style={style} onError={event => { setFailed(true); onError?.(event); }}/>
};

const PulseContentMedia = ({ src = '', alt = '', children = null }) => (
  <div data-testid="content-media" style={{ position: 'relative' }}>
    {src ? <img src={src} alt={alt} style={{ width: '100%', height: '100%', objectFit: 'contain' }} onError={event => { event.currentTarget.style.display = 'none'; }}/> : <PulseEmptyState title="No media returned" compact/>}
    {children}
  </div>
);

const PulseEmptyState = ({ title = 'No data', detail = '', compact = false }) => <div data-testid="empty-state" style={{ padding: compact ? 12 : 28, textAlign: 'center', color: 'var(--ink-500)', fontSize: 13 }}>{title}{detail ? <div style={{ marginTop: 4, fontSize: 12 }}>{detail}</div> : null}</div>;
const PulseErrorState = ({ status = '', onRetry = null }) => <div data-testid="error-state" role="alert" style={{ padding: 28, textAlign: 'center', color: 'var(--brand-500)' }}><strong>{status === 'unauthorized' ? 'Please sign in again' : status === 'forbidden' ? 'Access denied' : status === 'not_found' ? 'Not found' : 'Unable to load data'}</strong>{onRetry ? <div style={{ marginTop: 12 }}><button data-testid="retry-action" className="btn" onClick={onRetry}>Retry</button></div> : null}</div>;
const PulsePageGate = ({ apiStatus = {}, onRetry = null, children }) => {
  if (apiStatus.enabled && apiStatus.loading && !apiStatus.lastLoadedAt) return <PulseEmptyState title="Loading verified data…"/>;
  if (apiStatus.enabled && apiStatus.phase === 'error' && !apiStatus.lastLoadedAt) return <PulseErrorState status={apiStatus.errorCode} onRetry={onRetry}/>;
  return children;
};