const T = window.ArbiterTokens;

// War Room dark theme — override tokens for the command center
const W = {
  bg: { primary: '#0B0F1A', secondary: '#111827', tertiary: '#1A2035', card: '#141B2D', elevated: '#1E2740' },
  border: { subtle: 'rgba(255,255,255,0.06)', medium: 'rgba(255,255,255,0.1)', accent: 'rgba(37,99,235,0.3)' },
  text: { primary: '#F1F3F8', secondary: '#94A3C4', tertiary: '#5A6A8A', muted: '#3D4D6A' },
  red: { base: '#EF4444', muted: '#7F1D1D', bg: 'rgba(239,68,68,0.08)', text: '#FCA5A5' },
  green: { base: '#22C55E', muted: '#14532D', bg: 'rgba(34,197,94,0.08)', text: '#86EFAC' },
  amber: { base: '#F59E0B', muted: '#78350F', bg: 'rgba(245,158,11,0.08)', text: '#FCD34D' },
  blue: { base: '#3B82F6', muted: '#1E3A5F', bg: 'rgba(59,130,246,0.08)', text: '#93C5FD' },
  purple: { base: '#A855F7', muted: '#3B0764', bg: 'rgba(168,85,247,0.08)', text: '#D8B4FE' },
  cyan: { base: '#06B6D4', muted: '#164E63', bg: 'rgba(6,182,212,0.08)', text: '#67E8F9' },
  font: T.font,
};

const wr = {
  // Layout
  container: { flex: 1, overflow: 'auto', background: W.bg.primary, color: W.text.primary },
  header: {
    padding: '16px 24px', borderBottom: `1px solid ${W.border.subtle}`,
    background: W.bg.secondary, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
  },
  headerTitle: {
    display: 'flex', alignItems: 'center', gap: '12px',
  },
  warIcon: {
    width: '32px', height: '32px', borderRadius: '6px',
    background: 'linear-gradient(135deg, #EF4444 0%, #B91C1C 100%)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    fontSize: '16px', fontWeight: 700, color: '#fff',
  },
  title: { fontSize: '18px', fontWeight: 700, color: W.text.primary, letterSpacing: '-0.02em' },
  subtitle: { fontSize: '12px', color: W.text.tertiary, marginTop: '1px' },
  tabs: {
    display: 'flex', gap: '0', borderBottom: `1px solid ${W.border.subtle}`,
    background: W.bg.secondary, padding: '0 24px',
  },
  tab: {
    padding: '10px 16px', fontSize: '12px', fontWeight: 500,
    color: W.text.tertiary, cursor: 'pointer', border: 'none', background: 'none',
    borderBottom: '2px solid transparent', fontFamily: T.font.family,
    transition: 'all 0.15s', marginBottom: '-1px', textTransform: 'uppercase',
    letterSpacing: '0.06em',
  },
  tabActive: { color: W.red.text, borderBottom: `2px solid ${W.red.base}` },
  body: { padding: '20px 24px' },
  // Cards
  card: {
    background: W.bg.card, border: `1px solid ${W.border.subtle}`,
    borderRadius: '8px', overflow: 'hidden', marginBottom: '16px',
  },
  cardH: {
    padding: '10px 16px', borderBottom: `1px solid ${W.border.subtle}`,
    fontSize: '11px', fontWeight: 600, color: W.text.secondary,
    textTransform: 'uppercase', letterSpacing: '0.08em',
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
  },
  cardBody: { padding: '12px 16px' },
  // Utilities
  tag: {
    display: 'inline-flex', alignItems: 'center', padding: '2px 8px',
    borderRadius: '10px', fontSize: '10px', fontWeight: 600, letterSpacing: '0.04em',
  },
  stat: {
    display: 'flex', flexDirection: 'column', gap: '2px',
    padding: '12px 16px', background: W.bg.tertiary, borderRadius: '6px',
  },
  statLabel: { fontSize: '10px', fontWeight: 600, color: W.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.08em' },
  statValue: { fontSize: '22px', fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1.1 },
  row: {
    padding: '8px 16px', borderBottom: `1px solid ${W.border.subtle}`,
    display: 'flex', alignItems: 'center', gap: '10px', fontSize: '13px',
    transition: 'background 0.1s', cursor: 'default',
  },
  barTrack: { flex: 1, height: '6px', borderRadius: '3px', background: 'rgba(255,255,255,0.06)' },
  barFill: { height: '100%', borderRadius: '3px', transition: 'width 0.5s ease' },
  meterContainer: { width: '100%', height: '8px', borderRadius: '4px', background: 'rgba(255,255,255,0.06)', overflow: 'hidden' },
  // Buttons
  btn: {
    padding: '5px 12px', borderRadius: '6px', border: `1px solid ${W.border.medium}`,
    background: W.bg.elevated, fontSize: '11px', fontWeight: 600,
    color: W.text.secondary, cursor: 'pointer', fontFamily: T.font.family,
    textTransform: 'uppercase', letterSpacing: '0.06em',
  },
  btnDanger: { background: 'rgba(239,68,68,0.1)', borderColor: 'rgba(239,68,68,0.3)', color: W.red.text },
  // Confidence meter
  confidenceDot: (level) => ({
    width: '8px', height: '8px', borderRadius: '50%',
    background: level >= 80 ? W.green.base : level >= 50 ? W.amber.base : W.red.base,
  }),
};

window.W = W;
window.wr = wr;