// APM design tokens — three themes (cream / light / dark) + density
// Tokens loaded into CSS custom properties via <ThemeProvider> at root.

const APM_THEMES = {
  cream: {
    name: 'Cream',
    // Surfaces
    '--apm-bg':           '#F6F1EA',
    '--apm-bg-2':         '#FBF7F1',
    '--apm-bg-sunken':    '#EFE9DF',
    '--apm-card':         '#FFFFFF',
    '--apm-card-2':       '#FDFAF4',
    '--apm-overlay':      'rgba(30, 27, 24, 0.45)',

    // Ink
    '--apm-ink':          '#1E1B18',
    '--apm-ink-2':        '#3A352F',
    '--apm-muted':        '#6B6259',
    '--apm-muted-2':      '#8A8077',
    '--apm-disabled':     '#C7BDB0',

    // Lines + dividers
    '--apm-line':         '#E7DFD4',
    '--apm-line-2':       '#D8CFC1',
    '--apm-line-strong':  '#B5A993',

    // Brand + accent
    '--apm-accent':       '#C55A3C',
    '--apm-accent-soft':  '#FBECE5',
    '--apm-accent-ink':   '#8E3A24',

    // Semantic
    '--apm-ok':           '#4A7C59',
    '--apm-ok-soft':      '#E5EFE5',
    '--apm-warn':         '#D49B3F',
    '--apm-warn-soft':    '#FBEFD6',
    '--apm-risk':         '#A63A3A',
    '--apm-risk-soft':    '#F4DEDE',
    '--apm-info':         '#5B6F8F',
    '--apm-info-soft':    '#E5EAF2',

    // Phase colors (gates)
    '--apm-phase-intake': '#94A3B8',
    '--apm-phase-design': '#93C5FD',
    '--apm-phase-it':     '#FCD34D',
    '--apm-phase-sec':    '#FCD34D',
    '--apm-phase-hipaa':  '#FCA5A5',
    '--apm-phase-cost':   '#D4A373',
    '--apm-phase-raqa':   '#B5838D',
    '--apm-phase-uat':    '#7DD3FC',
    '--apm-phase-go':     '#86EFAC',
    '--apm-phase-active': '#4A7C59',
    '--apm-phase-arch':   '#9CA3AF',

    '--apm-shadow-sm':    '0 1px 2px rgba(30,27,24,0.04)',
    '--apm-shadow-md':    '0 4px 16px rgba(30,27,24,0.08)',
    '--apm-shadow-lg':    '0 12px 40px rgba(30,27,24,0.14)',
  },

  light: {
    name: 'Light',
    '--apm-bg':           '#FAFAF9',
    '--apm-bg-2':         '#FFFFFF',
    '--apm-bg-sunken':    '#F1F1EE',
    '--apm-card':         '#FFFFFF',
    '--apm-card-2':       '#FBFBFA',
    '--apm-overlay':      'rgba(20, 22, 28, 0.45)',

    '--apm-ink':          '#1A1A1A',
    '--apm-ink-2':        '#2E2E2E',
    '--apm-muted':        '#6B6B6B',
    '--apm-muted-2':      '#8B8B8B',
    '--apm-disabled':     '#C7C7C5',

    '--apm-line':         '#E5E5E0',
    '--apm-line-2':       '#D4D4CF',
    '--apm-line-strong':  '#A8A8A3',

    '--apm-accent':       '#C55A3C',
    '--apm-accent-soft':  '#FBECE5',
    '--apm-accent-ink':   '#8E3A24',

    '--apm-ok':           '#3F7150',
    '--apm-ok-soft':      '#E2EBE2',
    '--apm-warn':         '#C58A2E',
    '--apm-warn-soft':    '#FAEBC9',
    '--apm-risk':         '#9B3434',
    '--apm-risk-soft':    '#F2D9D9',
    '--apm-info':         '#52668A',
    '--apm-info-soft':    '#E0E6EF',

    '--apm-phase-intake': '#94A3B8',
    '--apm-phase-design': '#93C5FD',
    '--apm-phase-it':     '#FCD34D',
    '--apm-phase-sec':    '#FCD34D',
    '--apm-phase-hipaa':  '#FCA5A5',
    '--apm-phase-cost':   '#D4A373',
    '--apm-phase-raqa':   '#B5838D',
    '--apm-phase-uat':    '#7DD3FC',
    '--apm-phase-go':     '#86EFAC',
    '--apm-phase-active': '#4A7C59',
    '--apm-phase-arch':   '#9CA3AF',

    '--apm-shadow-sm':    '0 1px 2px rgba(0,0,0,0.04)',
    '--apm-shadow-md':    '0 4px 16px rgba(0,0,0,0.06)',
    '--apm-shadow-lg':    '0 12px 40px rgba(0,0,0,0.10)',
  },

  dark: {
    name: 'Dark',
    '--apm-bg':           '#15140F',
    '--apm-bg-2':         '#1B1A14',
    '--apm-bg-sunken':    '#0E0D0A',
    '--apm-card':         '#1F1E18',
    '--apm-card-2':       '#26241D',
    '--apm-overlay':      'rgba(0, 0, 0, 0.65)',

    '--apm-ink':          '#F2EDE3',
    '--apm-ink-2':        '#D9D2C5',
    '--apm-muted':        '#9A9285',
    '--apm-muted-2':      '#7A7368',
    '--apm-disabled':     '#4A453E',

    '--apm-line':         '#2E2C24',
    '--apm-line-2':       '#3A372E',
    '--apm-line-strong':  '#5A554A',

    '--apm-accent':       '#E07959',
    '--apm-accent-soft':  '#3B1F16',
    '--apm-accent-ink':   '#F7C4B0',

    '--apm-ok':           '#7BB58A',
    '--apm-ok-soft':      '#1B2A20',
    '--apm-warn':         '#E5B566',
    '--apm-warn-soft':    '#2D2418',
    '--apm-risk':         '#D87A7A',
    '--apm-risk-soft':    '#2D1A1A',
    '--apm-info':         '#9CB1D2',
    '--apm-info-soft':    '#1B2030',

    '--apm-phase-intake': '#6B7989',
    '--apm-phase-design': '#5891D1',
    '--apm-phase-it':     '#C6A23A',
    '--apm-phase-sec':    '#C6A23A',
    '--apm-phase-hipaa':  '#C97676',
    '--apm-phase-cost':   '#A57E54',
    '--apm-phase-raqa':   '#8E5D67',
    '--apm-phase-uat':    '#5BA3CB',
    '--apm-phase-go':     '#5C9C72',
    '--apm-phase-active': '#5C9C72',
    '--apm-phase-arch':   '#6B6B6B',

    '--apm-shadow-sm':    '0 1px 2px rgba(0,0,0,0.4)',
    '--apm-shadow-md':    '0 4px 16px rgba(0,0,0,0.5)',
    '--apm-shadow-lg':    '0 12px 40px rgba(0,0,0,0.6)',
  },
};

// Density — controls vertical rhythm & control sizes
const APM_DENSITY = {
  comfy: {
    '--apm-sp-1':  '4px',
    '--apm-sp-2':  '8px',
    '--apm-sp-3':  '12px',
    '--apm-sp-4':  '16px',
    '--apm-sp-5':  '20px',
    '--apm-sp-6':  '24px',
    '--apm-sp-8':  '32px',
    '--apm-sp-10': '40px',
    '--apm-row-h': '40px',
    '--apm-input-h': '38px',
    '--apm-card-pad': '24px',
    '--apm-page-pad': '36px',
    '--apm-page-top': '44px',
    '--apm-inner-gap': '18px',
    '--apm-row-pad': '14px',
    '--apm-section-gap': '32px',
  },
  regular: {
    '--apm-sp-1':  '3px',
    '--apm-sp-2':  '7px',
    '--apm-sp-3':  '10px',
    '--apm-sp-4':  '14px',
    '--apm-sp-5':  '17px',
    '--apm-sp-6':  '21px',
    '--apm-sp-8':  '28px',
    '--apm-sp-10': '35px',
    '--apm-row-h': '36px',
    '--apm-input-h': '35px',
    '--apm-card-pad': '20px',
    '--apm-page-pad': '30px',
    '--apm-page-top': '36px',
    '--apm-inner-gap': '15px',
    '--apm-row-pad': '11px',
    '--apm-section-gap': '26px',
  },
  comfortable: {
    '--apm-sp-1':  '4px',
    '--apm-sp-2':  '8px',
    '--apm-sp-3':  '12px',
    '--apm-sp-4':  '16px',
    '--apm-sp-5':  '20px',
    '--apm-sp-6':  '24px',
    '--apm-sp-8':  '32px',
    '--apm-sp-10': '40px',
    '--apm-row-h': '40px',
    '--apm-input-h': '38px',
    '--apm-card-pad': '24px',
    '--apm-page-pad': '36px',
    '--apm-page-top': '44px',
    '--apm-inner-gap': '18px',
    '--apm-row-pad': '14px',
    '--apm-section-gap': '32px',
  },
  compact: {
    '--apm-sp-1':  '3px',
    '--apm-sp-2':  '6px',
    '--apm-sp-3':  '9px',
    '--apm-sp-4':  '12px',
    '--apm-sp-5':  '15px',
    '--apm-sp-6':  '18px',
    '--apm-sp-8':  '24px',
    '--apm-sp-10': '30px',
    '--apm-row-h': '32px',
    '--apm-input-h': '32px',
    '--apm-card-pad': '16px',
    '--apm-page-pad': '24px',
    '--apm-page-top': '28px',
    '--apm-inner-gap': '12px',
    '--apm-row-pad': '9px',
    '--apm-section-gap': '20px',
  },
};

// Type tokens (constant across themes)
const APM_TYPE = {
  '--apm-font-display': '"DM Serif Display", ui-serif, Georgia, serif',
  '--apm-font-body':    '"Inter", ui-sans-serif, system-ui, -apple-system, sans-serif',
  '--apm-font-mono':    '"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace',

  '--apm-text-xs':   '11px',
  '--apm-text-sm':   '12.5px',
  '--apm-text-base': '14px',
  '--apm-text-md':   '15.5px',
  '--apm-text-lg':   '18px',
  '--apm-text-xl':   '22px',
  '--apm-text-2xl':  '28px',
  '--apm-text-3xl':  '36px',
  '--apm-text-4xl':  '48px',

  '--apm-radius-sm':  '4px',
  '--apm-radius':     '8px',
  '--apm-radius-lg':  '12px',
  '--apm-radius-xl':  '16px',
  '--apm-radius-2xl': '20px',
};

// ── Theme provider hook ──────────────────────────────────────────────
const ThemeContext = React.createContext(null);

const ThemeProvider = ({ theme = 'cream', density = 'comfortable', children }) => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const root = ref.current;
    if (!root) return;
    const tokens = { ...APM_TYPE, ...APM_THEMES[theme], ...APM_DENSITY[density] };
    Object.entries(tokens).forEach(([k, v]) => root.style.setProperty(k, v));
    root.style.background = 'var(--apm-bg)';
    root.style.color = 'var(--apm-ink)';
    root.style.fontFamily = 'var(--apm-font-body)';
    root.style.fontSize = 'var(--apm-text-base)';
  }, [theme, density]);

  return (
    <ThemeContext.Provider value={{ theme, density }}>
      <div ref={ref} data-apm-theme={theme} data-apm-density={density}
           style={{ minHeight: '100vh', WebkitFontSmoothing: 'antialiased' }}>
        {children}
      </div>
    </ThemeContext.Provider>
  );
};

const useTheme = () => React.useContext(ThemeContext);

// Phase color lookup helper
const APM_PHASE_VAR = {
  Intake: '--apm-phase-intake',
  Design: '--apm-phase-design',
  'IT Review': '--apm-phase-it',
  Security: '--apm-phase-sec',
  'HIPAA/PII': '--apm-phase-hipaa',
  'Cost & Ops': '--apm-phase-cost',
  'RA/QA': '--apm-phase-raqa',
  UAT: '--apm-phase-uat',
  'Go-Live': '--apm-phase-go',
  Active: '--apm-phase-active',
  'Support & Maint': '--apm-phase-active',
  Archived: '--apm-phase-arch',
};

Object.assign(window, { APM_THEMES, APM_DENSITY, APM_TYPE, ThemeProvider, useTheme, APM_PHASE_VAR });