// SETTINGS PLATFORM — shared tokens (slate/steel accent · "the control plane")
const Ts = window.ArbiterTokens;

const stg = {
  // Accent — steel slate (administrative, neutral, enterprise)
  steel: '#475569',
  steelDeep: '#334155',
  steelLight: '#94A3B8',
  steelBg: 'rgba(71,85,105,0.06)',
  steelBorder: 'rgba(71,85,105,0.22)',

  // Functional accents
  blue:    '#2563EB', blueBg:    'rgba(37,99,235,0.08)',
  emerald: '#059669', emeraldBg: 'rgba(5,150,105,0.08)',
  amber:   '#D97706', amberBg:   'rgba(217,119,6,0.08)',
  crimson: '#B91C1C', crimsonBg: 'rgba(185,28,28,0.08)',
  violet:  '#7C3AED', violetBg:  'rgba(124,58,237,0.08)',
  teal:    '#0D9488', tealBg:    'rgba(13,148,136,0.08)',
  pink:    '#DB2777', pinkBg:    'rgba(219,39,119,0.08)',
  slate:   '#64748B', slateBg:   'rgba(100,116,139,0.06)',

  // Compliance / status bg for badges
  ok:      '#059669', okBg:      'rgba(5,150,105,0.10)',
  warn:    '#D97706', warnBg:    'rgba(217,119,6,0.10)',
  fail:    '#B91C1C', failBg:    'rgba(185,28,28,0.10)',

  container: { flex: 1, overflow: 'auto', background: Ts.color.bg.primary },
  header: {
    padding: '16px 24px', borderBottom: `1px solid ${Ts.color.border.light}`,
    background: Ts.color.bg.card, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    flexShrink: 0,
  },
  headerTitle: { display: 'flex', alignItems: 'center', gap: '12px' },
  icon: {
    width: '32px', height: '32px', borderRadius: '6px',
    background: 'linear-gradient(135deg, #475569 0%, #334155 100%)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    fontSize: '16px', fontWeight: 700, color: '#fff',
  },
  title: { fontSize: '18px', fontWeight: 700, color: Ts.color.text.primary, letterSpacing: '-0.02em' },
  subtitle: { fontSize: '12px', color: Ts.color.text.tertiary, marginTop: '1px' },

  tabs: {
    display: 'flex', gap: '0', borderBottom: `1px solid ${Ts.color.border.light}`,
    background: Ts.color.bg.secondary, padding: '0 24px',
    flexShrink: 0,
  },
  tab: {
    padding: '10px 16px', fontSize: '12px', fontWeight: 500,
    color: Ts.color.text.tertiary, cursor: 'pointer', border: 'none', background: 'none',
    borderBottom: '2px solid transparent', fontFamily: Ts.font.family,
    transition: 'all 0.15s', marginBottom: '-1px', whiteSpace: 'nowrap',
  },
  tabActive: { color: '#334155', borderBottom: '2px solid #334155', fontWeight: 600 },
  body: { padding: '20px 24px' },

  // Layout helpers
  stripKpi: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(160px, 100%), 1fr))', gap: '10px', marginBottom: '16px' },
  stripAuto: (min) => ({ display: 'grid', gridTemplateColumns: `repeat(auto-fit, minmax(min(${min}px, 100%), 1fr))`, gap: '10px', marginBottom: '16px' }),
  cardGrid: (min) => ({ display: 'grid', gridTemplateColumns: `repeat(auto-fit, minmax(min(${min}px, 100%), 1fr))`, gap: '12px' }),
  split: (min) => ({ display: 'grid', gridTemplateColumns: `repeat(auto-fit, minmax(min(${min}px, 100%), 1fr))`, gap: '16px' }),

  // Cards
  card: {
    background: Ts.color.bg.card, border: `1px solid ${Ts.color.border.light}`,
    borderRadius: Ts.radius.lg, overflow: 'hidden', marginBottom: '16px',
  },
  cardH: {
    padding: '10px 16px', borderBottom: `1px solid ${Ts.color.border.light}`,
    fontSize: '12px', fontWeight: 600, color: Ts.color.text.primary,
    display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '8px',
  },
  cardBody: { padding: '16px' },
  sectionLabel: { fontSize: '10px', fontWeight: 700, color: Ts.color.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: '8px' },

  // Stats
  stat: { display: 'flex', flexDirection: 'column', gap: '2px', padding: '12px 16px', background: Ts.color.bg.secondary, borderRadius: '6px', border: `1px solid ${Ts.color.border.light}` },
  statLabel: { fontSize: '10px', fontWeight: 600, color: Ts.color.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.08em' },
  statValue: { fontSize: '22px', fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1.1, color: Ts.color.text.primary },
  statDelta: { fontSize: '10px', fontWeight: 500, marginTop: '2px' },

  // Form components
  field: { display: 'flex', flexDirection: 'column', gap: '4px', marginBottom: '12px' },
  fieldLabel: { fontSize: '11px', fontWeight: 600, color: Ts.color.text.secondary, letterSpacing: '0.02em' },
  fieldHint: { fontSize: '10px', color: Ts.color.text.tertiary, marginTop: '1px' },
  input: {
    padding: '8px 12px', borderRadius: '6px', border: `1px solid ${Ts.color.border.medium}`,
    fontSize: '12px', color: Ts.color.text.primary, background: Ts.color.bg.card,
    fontFamily: Ts.font.family, outline: 'none', width: '100%', boxSizing: 'border-box',
  },
  inputMono: {
    padding: '8px 12px', borderRadius: '6px', border: `1px solid ${Ts.color.border.medium}`,
    fontSize: '12px', color: Ts.color.text.primary, background: Ts.color.bg.secondary,
    fontFamily: Ts.font.mono, outline: 'none', width: '100%', boxSizing: 'border-box',
  },
  select: {
    padding: '8px 12px', borderRadius: '6px', border: `1px solid ${Ts.color.border.medium}`,
    fontSize: '12px', color: Ts.color.text.primary, background: Ts.color.bg.card,
    fontFamily: Ts.font.family, outline: 'none', width: '100%', cursor: 'pointer',
  },

  // Buttons
  btnPrimary: { padding: '7px 14px', borderRadius: '6px', background: '#334155', border: 'none', color: '#fff', fontSize: '12px', fontWeight: 700, cursor: 'pointer', fontFamily: Ts.font.family, whiteSpace: 'nowrap' },
  btnSecondary: { padding: '6px 12px', borderRadius: '6px', border: `1px solid ${Ts.color.border.medium}`, background: Ts.color.bg.card, fontSize: '11px', fontWeight: 600, color: Ts.color.text.secondary, cursor: 'pointer', fontFamily: Ts.font.family, whiteSpace: 'nowrap' },
  btnGhost: { padding: '4px 10px', borderRadius: '5px', border: 'none', background: 'transparent', fontSize: '11px', fontWeight: 500, color: '#334155', cursor: 'pointer', fontFamily: Ts.font.family },
  btnDanger: { padding: '6px 12px', borderRadius: '6px', border: `1px solid ${'rgba(185,28,28,0.3)'}`, background: 'rgba(185,28,28,0.06)', fontSize: '11px', fontWeight: 600, color: '#B91C1C', cursor: 'pointer', fontFamily: Ts.font.family },

  // Tag / pill
  tag: { display: 'inline-flex', alignItems: 'center', padding: '2px 8px', borderRadius: '10px', fontSize: '10px', fontWeight: 600 },
  pill: { display: 'inline-flex', alignItems: 'center', padding: '3px 10px', borderRadius: '12px', fontSize: '11px', fontWeight: 500, gap: '4px' },

  // Table
  tableWrap: { overflowX: 'auto' },
  tableFixed: { width: '100%', borderCollapse: 'collapse', fontSize: '12px' },
  th: { fontSize: '10px', fontWeight: 600, color: Ts.color.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.08em', padding: '8px 12px', textAlign: 'left', background: Ts.color.bg.secondary, borderBottom: `1px solid ${Ts.color.border.light}`, whiteSpace: 'nowrap' },
  td: { fontSize: '12px', color: Ts.color.text.primary, padding: '10px 12px', borderBottom: `1px solid ${Ts.color.border.light}`, verticalAlign: 'middle' },

  // Toggle switch (pure CSS)
  toggle: (on) => ({
    position: 'relative', width: '36px', height: '20px', borderRadius: '10px',
    background: on ? '#059669' : '#CBD5E1', cursor: 'pointer', transition: 'background 0.2s',
    display: 'inline-block', flexShrink: 0,
  }),
  toggleKnob: (on) => ({
    position: 'absolute', top: '2px', left: on ? '18px' : '2px',
    width: '16px', height: '16px', borderRadius: '50%', background: '#fff',
    transition: 'left 0.2s', boxShadow: '0 1px 2px rgba(0,0,0,0.15)',
  }),

  // Status pills
  statusPill: (kind) => {
    const map = {
      ok:       { bg: 'rgba(5,150,105,0.10)',  color: '#059669' },
      warn:     { bg: 'rgba(217,119,6,0.10)',  color: '#D97706' },
      fail:     { bg: 'rgba(185,28,28,0.10)',  color: '#B91C1C' },
      pending:  { bg: 'rgba(71,85,105,0.08)',  color: '#475569' },
      info:     { bg: 'rgba(37,99,235,0.10)',  color: '#2563EB' },
      beta:     { bg: 'rgba(124,58,237,0.10)', color: '#7C3AED' },
    };
    return { ...map[kind] || map.pending };
  },

  // List row (settings list items)
  rowItem: {
    display: 'grid', gridTemplateColumns: '1fr auto', gap: '14px', alignItems: 'center',
    padding: '12px 16px', borderBottom: `1px solid ${Ts.color.border.light}`,
  },
  rowLabel: { fontSize: '13px', fontWeight: 600, color: Ts.color.text.primary },
  rowHint: { fontSize: '11px', color: Ts.color.text.tertiary, marginTop: '2px', lineHeight: 1.5 },

  // Scoring helpers
  severityColor: (s) => s === 'critical' ? '#B91C1C' : s === 'high' ? '#D97706' : s === 'medium' ? '#2563EB' : '#475569',

  num: (n) => n == null ? '—' : n.toLocaleString(),
};

// Small utility components we reuse across Settings panes
function SettingsToggle({ on, onChange, label, hint }) {
  return (
    <div style={stg.rowItem}>
      <div>
        <div style={stg.rowLabel}>{label}</div>
        {hint && <div style={stg.rowHint}>{hint}</div>}
      </div>
      <div onClick={() => onChange && onChange(!on)} style={stg.toggle(on)}>
        <div style={stg.toggleKnob(on)} />
      </div>
    </div>
  );
}

function SettingsRow({ label, hint, children }) {
  return (
    <div style={stg.rowItem}>
      <div>
        <div style={stg.rowLabel}>{label}</div>
        {hint && <div style={stg.rowHint}>{hint}</div>}
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>{children}</div>
    </div>
  );
}

function SectionCard({ title, action, children }) {
  return (
    <div style={stg.card}>
      <div style={stg.cardH}>
        <span>{title}</span>
        {action}
      </div>
      <div>{children}</div>
    </div>
  );
}

window.__stg = stg;
window.SettingsToggle = SettingsToggle;
window.SettingsRow = SettingsRow;
window.SettingsSectionCard = SectionCard;