/* SEO · helpers partilhados entre vistas (Babel scope-safe).
   Tudo o que é usado em mais que um ficheiro JSX vive aqui e é exposto em window. */

const seoSeverityColor = {
  critical: 'var(--danger)',
  medium:   'var(--warning)',
  low:      'var(--success)',
};
const seoSeverityLabel = {
  critical: 'Crítico', medium: 'Médio', low: 'Baixo',
};
const seoSeverityDot = {
  critical: '🔴', medium: '🟡', low: '🟢',
};

const SeoBadge = ({ severity, mini }) => (
  <span style={{
    display: 'inline-flex', alignItems: 'center', gap: 5,
    padding: mini ? '1px 6px' : '2px 8px',
    borderRadius: 999,
    fontSize: mini ? 10 : 10.5,
    fontFamily: 'var(--font-mono)',
    background: `color-mix(in oklch, ${seoSeverityColor[severity]} 14%, transparent)`,
    color: seoSeverityColor[severity],
    border: `1px solid color-mix(in oklch, ${seoSeverityColor[severity]} 28%, transparent)`,
    fontWeight: 600,
  }}>
    <span style={{ width: 5, height: 5, borderRadius: '50%', background: seoSeverityColor[severity] }} />
    {seoSeverityLabel[severity]}
  </span>
);

const SeoTypeBadge = ({ type }) => (
  <span className="font-mono" style={{
    padding: '1px 7px', fontSize: 10,
    background: 'var(--surface-muted)',
    color: 'var(--text-muted)',
    borderRadius: 4, border: '1px solid var(--border)',
    whiteSpace: 'nowrap',
  }}>{type}</span>
);

const SeoBreadcrumb = ({ view, onBack, onHome }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11.5, color: 'var(--text-muted)', fontFamily: 'var(--font-mono)' }}>
    <button onClick={onBack} style={{ color: 'var(--text-muted)' }}
      onMouseEnter={e => e.currentTarget.style.color = 'var(--text)'}
      onMouseLeave={e => e.currentTarget.style.color = 'var(--text-muted)'}>
      Marketing
    </button>
    <span style={{ opacity: 0.5 }}>›</span>
    <button onClick={onBack} style={{ color: 'var(--text-muted)' }}
      onMouseEnter={e => e.currentTarget.style.color = 'var(--text)'}
      onMouseLeave={e => e.currentTarget.style.color = 'var(--text-muted)'}>
      Sub-agentes
    </button>
    <span style={{ opacity: 0.5 }}>›</span>
    <button onClick={onHome} style={{ color: view === 'resumo' ? 'var(--text)' : 'var(--text-muted)' }}>SEO</button>
    {view !== 'resumo' && (
      <>
        <span style={{ opacity: 0.5 }}>›</span>
        <span style={{ color: 'var(--text)' }}>
          {view === 'sites' && 'Sites'}
          {view === 'queue' && 'Para aprovar'}
          {view === 'history' && 'Histórico'}
          {view === 'config' && 'Configuração'}
        </span>
      </>
    )}
  </div>
);

const Sparkline = ({ values, width = 120, height = 28, color = 'var(--ai-500)' }) => {
  if (!values || values.length === 0) return null;
  const max = Math.max(...values), min = Math.min(...values);
  const range = max - min || 1;
  const step = width / (values.length - 1);
  const pts = values.map((v, i) => `${(i * step).toFixed(1)},${(height - ((v - min) / range) * height).toFixed(1)}`).join(' ');
  return (
    <svg width={width} height={height} style={{ display: 'block' }}>
      <polyline fill="none" stroke={color} strokeWidth="1.5" points={pts} />
    </svg>
  );
};

Object.assign(window, {
  seoSeverityColor, seoSeverityLabel, seoSeverityDot,
  SeoBadge, SeoTypeBadge, SeoBreadcrumb, Sparkline,
});