// ProMTK — Enterprise Design Tokens with Dark/Light mode + CSS variables
// All colors exposed as CSS vars so a simple [data-theme="light"] attribute on
// document root flips the entire palette live.

const themes = {
  dark: {
    bg: '#0B0A14',
    bg1: '#0F0D1B',
    bg2: '#12101F',
    bg3: '#1A1730',
    bg4: '#221E3D',
    bg5: '#2A2548',
    line: 'rgba(255,255,255,0.08)',
    lineStrong: 'rgba(255,255,255,0.14)',
    fg: '#F5F3FF',
    fg2: '#B8B4D1',
    fg3: '#8B87A8',
    fg4: '#5A5775',
    chipBg: 'rgba(255,255,255,0.05)',
    inputBg: 'rgba(255,255,255,0.04)',
    overlay: 'rgba(0,0,0,0.6)',
    deviceFrame: '#0B0A14',
    glass: 'rgba(26,23,48,0.72)',
  },
  light: {
    bg: '#F5F3FA',
    bg1: '#EEEAF4',
    bg2: '#FFFFFF',
    bg3: '#FFFFFF',
    bg4: '#F8F5FE',
    bg5: '#F0EBFC',
    line: 'rgba(20,16,60,0.08)',
    lineStrong: 'rgba(20,16,60,0.14)',
    fg: '#15122B',
    fg2: '#3D365C',
    fg3: '#6B6588',
    fg4: '#9E9AB4',
    chipBg: 'rgba(20,16,60,0.05)',
    inputBg: 'rgba(20,16,60,0.03)',
    overlay: 'rgba(20,16,60,0.4)',
    deviceFrame: '#E8E4F2',
    glass: 'rgba(255,255,255,0.78)',
  }
};

// Constants shared across themes
const pmBase = {
  brand: '#7C5CFF',
  brandDeep: '#5B3FE8',
  brandSoft: '#A98DFF',
  brand2: '#B24BFF',
  gradient: 'linear-gradient(135deg, #7C5CFF 0%, #B24BFF 100%)',
  gradientSoft: 'linear-gradient(135deg, rgba(124,92,255,0.18) 0%, rgba(178,75,255,0.14) 100%)',
  gradientGlow: 'radial-gradient(60% 50% at 50% 0%, rgba(124,92,255,0.35), rgba(124,92,255,0) 70%)',
  gradientEnterprise: 'linear-gradient(135deg, #1E1B4B 0%, #4C1D95 50%, #7C3AED 100%)',

  ok: '#10B981',
  okSoft: 'rgba(16,185,129,0.14)',
  warn: '#F59E0B',
  warnSoft: 'rgba(245,158,11,0.14)',
  danger: '#EF4444',
  dangerSoft: 'rgba(239,68,68,0.14)',
  info: '#3B82F6',
  infoSoft: 'rgba(59,130,246,0.14)',

  water: '#06B6D4',
  gas: '#F97316',
  power: '#EAB308',
  internet: '#A855F7',
  mtk: '#7C5CFF',
  parking: '#10B981',
  heat: '#EF4444',

  r1: 10, r2: 14, r3: 18, r4: 22, r5: 28, r6: 36,

  shadow1: '0 1px 2px rgba(15,10,45,0.08)',
  shadow2: '0 6px 18px rgba(15,10,45,0.12)',
  shadow3: '0 16px 40px rgba(15,10,45,0.18)',
  glow: '0 0 0 1px rgba(124,92,255,0.25), 0 20px 60px -20px rgba(124,92,255,0.55)',

  font: `"Inter","SF Pro Display",-apple-system,"Segoe UI",system-ui,sans-serif`,
  mono: `"JetBrains Mono","SF Mono",ui-monospace,monospace`,
};

// Compose the active token object — reads from CSS var at runtime via getters
const pmTokens = new Proxy({}, {
  get(_, key) {
    if (key in pmBase) return pmBase[key];
    // Themed colors — pick from current theme based on [data-theme]
    const mode = (typeof document !== 'undefined' && document.documentElement.dataset.theme) || 'dark';
    const theme = themes[mode] || themes.dark;
    return theme[key];
  }
});

// Inject global styles + CSS variable theme definitions
if (typeof document !== 'undefined' && !document.getElementById('pm-global-styles')) {
  const buildVars = (t) => Object.entries(t).map(([k, v]) => `--pm-${k}: ${v};`).join('\n');
  const s = document.createElement('style');
  s.id = 'pm-global-styles';
  s.textContent = `
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

    :root[data-theme="dark"], [data-theme="dark"] { ${buildVars(themes.dark)} color-scheme: dark; }
    :root[data-theme="light"], [data-theme="light"] { ${buildVars(themes.light)} color-scheme: light; }
    :root { ${buildVars(themes.dark)} }

    .pm-scroll { scrollbar-width: none; }
    .pm-scroll::-webkit-scrollbar { display: none; }
    .pm-tap { transition: transform .12s cubic-bezier(.2,.7,.3,1), background .15s, box-shadow .2s, border-color .15s; }
    .pm-tap:active { transform: scale(.97); }
    .pm-tap-soft { transition: transform .12s, background .15s, box-shadow .2s; }
    .pm-tap-soft:active { transform: scale(.985); }

    /* Theme transitions on colour-bearing properties */
    .pm-themed, .pm-themed * { transition: background-color .35s ease, border-color .35s ease, color .35s ease; }

    @keyframes pm-shimmer { 0% { background-position: -200% 0 } 100% { background-position: 200% 0 } }
    @keyframes pm-float { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }
    @keyframes pm-float-slow { 0%, 100% { transform: translateY(0) translateX(0) } 50% { transform: translateY(-4px) translateX(3px) } }
    @keyframes pm-pulse-ring { 0% { transform: scale(.9); opacity: .8 } 100% { transform: scale(2.2); opacity: 0 } }
    @keyframes pm-spin { to { transform: rotate(360deg) } }
    @keyframes pm-pop { 0% { transform: scale(.4); opacity: 0 } 60% { transform: scale(1.15); opacity: 1 } 100% { transform: scale(1) } }
    .pm-spin { animation: pm-spin .8s linear infinite; }
    @keyframes pm-breathe { 0%, 100% { opacity: .6; transform: scale(1) } 50% { opacity: 1; transform: scale(1.04) } }
    @keyframes pm-slide-up { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: translateY(0) } }
    @keyframes pm-slide-right { from { opacity: 0; transform: translateX(-14px) } to { opacity: 1; transform: translateX(0) } }
    @keyframes pm-fade-in { from { opacity: 0 } to { opacity: 1 } }
    @keyframes pm-marquee { 0% { transform: translateX(0) } 100% { transform: translateX(-50%) } }
    @keyframes pm-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(124,92,255,.5) } 50% { box-shadow: 0 0 0 12px rgba(124,92,255,0) } }
    @keyframes pm-count-up { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: translateY(0) } }
    @keyframes pm-bar-grow { from { transform: scaleY(0); opacity: 0 } to { transform: scaleY(1); opacity: 1 } }
    @keyframes pm-draw-line { from { stroke-dashoffset: 1000 } to { stroke-dashoffset: 0 } }
    @keyframes pm-ripple { 0% { transform: scale(.6); opacity: 1 } 100% { transform: scale(3.5); opacity: 0 } }
    @keyframes pm-progress-slide { 0% { width: 0 } 100% { width: var(--p) } }
    @keyframes pm-grid-move { 0% { background-position: 0 0 } 100% { background-position: 60px 60px } }
    @keyframes pm-tick { 0% { stroke-dasharray: 0 100 } 100% { stroke-dasharray: 100 0 } }
    @keyframes pm-heart { 0%, 100% { transform: scale(1) } 40% { transform: scale(1.15) } }

    .pm-enter { animation: pm-slide-up .5s cubic-bezier(.2,.7,.3,1) both; }
    .pm-fade { animation: pm-fade-in .4s ease both; }
    .pm-stagger > * { animation: pm-slide-up .45s cubic-bezier(.2,.7,.3,1) both; }
    .pm-stagger > *:nth-child(1) { animation-delay: .02s }
    .pm-stagger > *:nth-child(2) { animation-delay: .06s }
    .pm-stagger > *:nth-child(3) { animation-delay: .1s }
    .pm-stagger > *:nth-child(4) { animation-delay: .14s }
    .pm-stagger > *:nth-child(5) { animation-delay: .18s }
    .pm-stagger > *:nth-child(6) { animation-delay: .22s }
    .pm-stagger > *:nth-child(7) { animation-delay: .26s }
    .pm-stagger > *:nth-child(8) { animation-delay: .3s }
  `;
  document.head.appendChild(s);
  // Default to dark theme on root
  if (!document.documentElement.dataset.theme) {
    document.documentElement.dataset.theme = 'dark';
  }
}

// Helper to switch theme + re-render hooks
function pmSetTheme(mode) {
  document.documentElement.dataset.theme = mode;
  window.dispatchEvent(new CustomEvent('pm-theme-change', { detail: mode }));
}

window.pmTokens = pmTokens;
window.pmBase = pmBase;
window.pmThemes = themes;
window.pmSetTheme = pmSetTheme;