// Temas KomprApp — varias paletas, cada una con light+dark.
// Todo se cuelga directamente de `window` para evitar problemas de closure
// con babel-standalone si las versiones cacheadas y nuevas conviven.

(function () {
  const FONT_DISPLAY = '"Outfit", "Inter", system-ui, sans-serif';
  const FONT_BODY    = '"Outfit", "Inter", system-ui, sans-serif';
  const FONT_MONO    = '"JetBrains Mono", ui-monospace, monospace';
  const RADIUS = { sm: 14, md: 20, lg: 28, xl: 36, pill: 999 };

  const BASES = [
    {
      id: 'bubblegum', name: 'Bubblegum', sub: 'Cian · Violeta · Sticker',
      accent: '#5EEAD4', accentInk: '#0F2C28',
      accent2: '#A78BFA', accent3: '#FDBA74',
      danger: '#F472B6',
      lightBg: '#F2EEFB', lightBorder: '#E2DCF5',
      darkBg: '#0F0B1F', darkBgAlt: '#16112E', darkBgCard: '#1B1538',
      darkBgSheet: '#16112E', darkBorder: '#2D2554',
      shadowColor: 'rgba(167,139,250,0.4)',
      shadowSoftColor: 'rgba(167,139,250,0.3)',
      darkInk: '#1A1538',
    },
    {
      id: 'kraft', name: 'Kraft', sub: 'Naranja · Marrón · Grocery',
      accent: '#FB8500', accentInk: '#3D1A00',
      accent2: '#C68A47', accent3: '#52B788',
      danger: '#E63946',
      lightBg: '#FFE6BF', lightBorder: '#F1D6A8',
      darkBg: '#241509', darkBgAlt: '#2E1B0E', darkBgCard: '#3A2412',
      darkBgSheet: '#2E1B0E', darkBorder: '#5A3A1F',
      shadowColor: 'rgba(251,133,0,0.35)',
      shadowSoftColor: 'rgba(61,40,23,0.18)',
      darkInk: '#3D2817',
    },
    {
      id: 'ocean', name: 'Ocean', sub: 'Cian profundo · Marina',
      accent: '#06B6D4', accentInk: '#082F49',
      accent2: '#0EA5E9', accent3: '#FBBF24',
      danger: '#F43F5E',
      lightBg: '#ECFEFF', lightBorder: '#BAE6FD',
      darkBg: '#082F49', darkBgAlt: '#0C4A6E', darkBgCard: '#0E5A86',
      darkBgSheet: '#0C4A6E', darkBorder: '#155E75',
      shadowColor: 'rgba(6,182,212,0.35)',
      shadowSoftColor: 'rgba(8,47,73,0.2)',
      darkInk: '#082F49',
    },
    {
      id: 'forest', name: 'Forest', sub: 'Verde · Lima · Eco',
      accent: '#22C55E', accentInk: '#052E16',
      accent2: '#84CC16', accent3: '#F59E0B',
      danger: '#EF4444',
      lightBg: '#F0FDF4', lightBorder: '#BBF7D0',
      darkBg: '#052E16', darkBgAlt: '#0F2E1F', darkBgCard: '#16432B',
      darkBgSheet: '#0F2E1F', darkBorder: '#166534',
      shadowColor: 'rgba(34,197,94,0.35)',
      shadowSoftColor: 'rgba(5,46,22,0.2)',
      darkInk: '#052E16',
    },
    {
      id: 'sunset', name: 'Sunset', sub: 'Rosa · Coral · Amarillo',
      accent: '#F472B6', accentInk: '#500724',
      accent2: '#FB7185', accent3: '#FBBF24',
      danger: '#DC2626',
      lightBg: '#FFF1F2', lightBorder: '#FECDD3',
      darkBg: '#1F0917', darkBgAlt: '#2C0E1F', darkBgCard: '#3A132A',
      darkBgSheet: '#2C0E1F', darkBorder: '#831843',
      shadowColor: 'rgba(244,114,182,0.4)',
      shadowSoftColor: 'rgba(80,7,36,0.18)',
      darkInk: '#500724',
    },
  ];

  function buildPalette(base, isDark) {
    if (isDark) {
      return {
        bg:           base.darkBg,
        bgAlt:        base.darkBgAlt,
        bgCard:       base.darkBgCard,
        bgSheet:      base.darkBgSheet,
        ink:          '#F8FAFC',
        inkSub:       '#CBD5E1',
        inkMuted:     '#94A3B8',
        border:       base.darkBorder,
        borderStrong: base.accent2,
        accent:       base.accent,
        accentInk:    base.accentInk,
        accent2:      base.accent2,
        accent3:      base.accent3,
        success:      base.accent,
        successBg:    'rgba(255,255,255,0.08)',
        danger:       base.danger,
        shadow:       '0 8px 24px -8px ' + base.shadowColor,
        shadowSoft:   '0 2px 8px -2px rgba(0,0,0,0.5)',
        navBg:        base.darkBgAlt,
        navInk:       '#F8FAFC',
        navAccent:    base.accent2,
      };
    }
    return {
      bg:           base.lightBg,
      bgAlt:        '#FFFFFF',
      bgCard:       '#FFFFFF',
      bgSheet:      '#FFFFFF',
      ink:          base.darkInk,
      inkSub:       '#64748B',
      inkMuted:     '#94A3B8',
      border:       base.lightBorder,
      borderStrong: base.darkInk,
      accent:       base.accent,
      accentInk:    base.accentInk,
      accent2:      base.accent2,
      accent3:      base.accent3,
      success:      '#10B981',
      successBg:    '#D1FAE5',
      danger:       base.danger,
      shadow:       '0 8px 24px -8px ' + base.shadowColor,
      shadowSoft:   '0 2px 8px -2px ' + base.shadowSoftColor,
      navBg:        'rgba(255,255,255,0.75)',
      navInk:       base.darkInk,
      navAccent:    base.accent2,
    };
  }

  // Construye y registra todos los temas en window.THEMES.
  window.THEMES = {};
  for (let i = 0; i < BASES.length; i++) {
    const base = BASES[i];
    window.THEMES[base.id] = {
      id: base.id, name: base.name, sub: base.sub,
      fontDisplay: FONT_DISPLAY, fontBody: FONT_BODY, fontMono: FONT_MONO,
      radius: RADIUS,
      accent: base.accent, accent2: base.accent2, accent3: base.accent3,
      light: buildPalette(base, false),
      dark:  buildPalette(base, true),
    };
  }

  // Tema por defecto: kraft (grocery cálido) — coincide con el logo KomprApp.
  window.THEME = window.THEMES.kraft;

  // getTheme acepta themeId opcional. Lee SIEMPRE de window.THEMES (no closure)
  // para que cualquier reload o re-evaluación use los temas vigentes.
  window.getTheme = function (dark, themeId) {
    const all = window.THEMES || {};
    const t = all[themeId] || all.kraft || window.THEME;
    return Object.assign({}, t, { c: dark ? t.dark : t.light, dark: !!dark });
  };

  // Inject Google Fonts una vez
  if (typeof document !== 'undefined' && !document.getElementById('shoplist-fonts')) {
    const link = document.createElement('link');
    link.id = 'shoplist-fonts';
    link.rel = 'stylesheet';
    link.href = 'https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap';
    document.head.appendChild(link);
  }
})();