// AUTOMATION PLATFORM — shared UI helpers
// AuHero: standard hero banner shown at top of every tab view
// AuSubNav: standard pill-button sub-navigation for sub-platforms
const Thelp = window.ArbiterTokens;

function AuHero({ accent, bg, title, description, actions, mono = false }) {
  const au = window.__au;
  const accentColor = accent || au.lime;
  const bgColor = bg || au.limeBg;
  return (
    <div style={{
      ...au.card,
      borderLeft: `3px solid ${accentColor}`,
      background: bgColor,
    }}>
      <div style={{ padding: '12px 16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '16px' }}>
        <div style={{ flex: 1 }}>
          <div style={{
            fontSize: '12px', fontWeight: 700,
            color: accentColor,
            textTransform: 'uppercase', letterSpacing: '0.08em',
            fontFamily: mono ? Thelp.font.mono : Thelp.font.family,
          }}>◆ {title}</div>
          {description && (
            <div style={{
              fontSize: '11px',
              color: Thelp.color.text.secondary,
              marginTop: '4px', lineHeight: 1.55,
            }}>{description}</div>
          )}
        </div>
        {actions && (
          <div style={{ display: 'flex', gap: '6px', flexShrink: 0 }}>{actions}</div>
        )}
      </div>
    </div>
  );
}

function AuSubNav({ views, active, onChange, accent }) {
  const au = window.__au;
  const accentColor = accent || au.lime;
  return (
    <div style={{
      display: 'flex', gap: '4px', padding: '6px',
      background: Thelp.color.bg.secondary,
      border: `1px solid ${Thelp.color.border.light}`,
      borderRadius: '8px', marginBottom: '16px', flexWrap: 'wrap',
    }}>
      {views.map(v => {
        const isActive = active === v.id;
        return (
          <button key={v.id} onClick={() => onChange(v.id)} style={{
            padding: '6px 12px', fontSize: '11px', fontWeight: isActive ? 700 : 500,
            borderRadius: '6px', border: 'none', cursor: 'pointer',
            background: isActive ? accentColor : 'transparent',
            color: isActive ? '#fff' : Thelp.color.text.secondary,
            fontFamily: Thelp.font.family, transition: 'all .15s',
            whiteSpace: 'nowrap',
          }}>{v.label}</button>
        );
      })}
    </div>
  );
}

window.AuHero = AuHero;
window.AuSubNav = AuSubNav;