// theme-v2.jsx — evolved "Midnight v2" token builder for Lista v2.
// Same bones (Space Grotesk + IBM Plex Sans, token-driven engine, glass/solid,
// dark/light) but a noticeably richer feel: aurora glass wallpaper, gradient
// accent, squircle checks, softer elevation with an inner sheen.
// Token shape is a superset of v1 so sheets.jsx / settings.jsx keep working.
// Exposes window.buildMidnight2 + window.MIDNIGHT2_ACCENTS.

(function () {
  const hx = (h) => { h = h.replace('#', ''); return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)]; };
  const f2 = (x) => ('0' + Math.round(Math.max(0, Math.min(255, x))).toString(16)).slice(-2);
  const toHex = (r, g, b) => '#' + f2(r) + f2(g) + f2(b);
  const mix = (a, b, t) => { const A = hx(a), B = hx(b); return toHex(A[0] + (B[0] - A[0]) * t, A[1] + (B[1] - A[1]) * t, A[2] + (B[2] - A[2]) * t); };
  const rgba = (h, a) => { const c = hx(h); return `rgba(${c[0]},${c[1]},${c[2]},${a})`; };
  const hueOf = (h) => {
    const [r, g, b] = hx(h).map((x) => x / 255);
    const mx = Math.max(r, g, b), mn = Math.min(r, g, b);
    if (mx === mn) return 0;
    const d = mx - mn;
    let H;
    if (mx === r) H = ((g - b) / d) % 6; else if (mx === g) H = (b - r) / d + 2; else H = (r - g) / d + 4;
    return (Math.round(H * 60) + 360) % 360;
  };

  window.MIDNIGHT2_ACCENTS = ['#2f6fe0', '#1f9d6b', '#7b5bd6', '#e0723e'];

  window.buildMidnight2 = function ({ mode = 'Dark', accent = '#7b5bd6', sharp = false, density = 'Cozy', finish = 'Glass' }) {
    const dark = mode === 'Dark';
    const glass = finish === 'Glass';
    const accentEff = dark ? mix(accent, '#ffffff', 0.24) : accent;
    // duotone partners for the gradient + wallpaper
    const g2 = mix(accent, dark ? '#1fd4c0' : '#22c4ac', 0.5);
    const g3 = mix(accent, dark ? '#e05fa8' : '#d0589a', 0.42);
    const accentGrad = `linear-gradient(135deg, ${accentEff} 0%, ${mix(accentEff, g2, 0.65)} 100%)`;

    const radius = sharp
      ? { card: 12, row: 9, pill: 10, chip: 7, stepper: 8, check: 7 }
      : { card: 26, row: 16, pill: 999, chip: 13, stepper: 14, check: 11 };

    const space = density === 'Compact'
      ? { rowPadY: 9, rowPadX: 14, gap: 2, check: 24 }
      : { rowPadY: 13, rowPadX: 16, gap: 4, check: 27 };

    const solidDark = {
      canvas: '#0b0e14', surface: '#141924', surfaceAlt: '#1b2130',
      text: '#f0f3f9', textMuted: '#9ba7b8', textFaint: '#5f6b7c',
      border: '#242c3b', divider: '#1f2734',
      accent: accentEff, accentSoft: rgba(accentEff, 0.15), accentText: '#0a1322',
      checkRing: '#39424f', danger: '#e57a68', track: '#242c3b',
    };
    const solidLight = {
      canvas: '#e8ebf2', surface: '#ffffff', surfaceAlt: '#f1f4f9',
      text: '#131722', textMuted: '#596474', textFaint: '#98a2b1',
      border: '#e4e9f0', divider: '#edf0f5',
      accent: accentEff, accentSoft: mix(accent, '#ffffff', 0.9), accentText: '#ffffff',
      checkRing: '#ccd4df', danger: '#d9534f', track: '#e2e7ef',
    };

    // aurora wallpapers — three hues drifting from the corners
    const wallDark =
      `radial-gradient(120% 90% at 8% 4%, ${rgba(accent, 0.58)} 0%, transparent 56%),` +
      `radial-gradient(105% 75% at 94% 10%, ${rgba(g2, 0.46)} 0%, transparent 54%),` +
      `radial-gradient(130% 100% at 50% 112%, ${rgba(g3, 0.40)} 0%, transparent 58%),` +
      `linear-gradient(165deg, #131a2c 0%, #0f1524 48%, #0b101c 100%)`;
    const wallLight =
      `radial-gradient(130% 95% at 10% 2%, ${rgba(accent, 0.36)} 0%, transparent 54%),` +
      `radial-gradient(115% 100% at 94% 96%, ${rgba(g2, 0.34)} 0%, transparent 52%),` +
      `radial-gradient(100% 80% at 82% 8%, ${rgba(g3, 0.20)} 0%, transparent 48%),` +
      `linear-gradient(155deg, #eef2f9 0%, #e7edf6 55%, #ebf0f8 100%)`;
    const glassDark = {
      canvas: wallDark, surface: 'rgba(28,36,52,0.40)', surfaceAlt: 'rgba(60,70,92,0.36)',
      text: '#f4f7fc', textMuted: '#b7c1d0', textFaint: '#8894a4',
      border: 'rgba(255,255,255,0.15)', divider: 'rgba(255,255,255,0.08)',
      accent: accentEff, accentSoft: rgba(accentEff, 0.24), accentText: '#0a1322',
      checkRing: 'rgba(255,255,255,0.38)', danger: '#f08a78', track: 'rgba(255,255,255,0.14)',
    };
    const glassLight = {
      canvas: wallLight, surface: 'rgba(255,255,255,0.58)', surfaceAlt: 'rgba(255,255,255,0.44)',
      text: '#0f1520', textMuted: '#465163', textFaint: '#778496',
      border: 'rgba(255,255,255,0.75)', divider: 'rgba(20,30,55,0.08)',
      accent: accentEff, accentSoft: rgba(accent, 0.16), accentText: '#ffffff',
      checkRing: 'rgba(40,52,76,0.28)', danger: '#d9534f', track: 'rgba(40,60,100,0.12)',
    };

    const color = glass ? (dark ? glassDark : glassLight) : (dark ? solidDark : solidLight);

    // elevation: layered ambient shadow + crisp top sheen + faint inner glow
    const sheen = dark
      ? 'inset 0 1px 0 rgba(255,255,255,0.10), inset 0 0 24px rgba(255,255,255,0.02)'
      : 'inset 0 1px 0 rgba(255,255,255,0.95), inset 0 0 24px rgba(255,255,255,0.28)';
    const shadow = glass
      ? (dark
          ? { card: `0 4px 14px rgba(0,0,0,.22), 0 16px 48px rgba(0,0,0,.4), ${sheen}`, pop: `0 24px 64px rgba(0,0,0,.54), ${sheen}`, addbar: 'none', fab: `0 8px 26px ${rgba(accent, 0.45)}` }
          : { card: `0 3px 10px rgba(35,55,95,.08), 0 14px 40px rgba(35,55,95,.15), ${sheen}`, pop: `0 20px 52px rgba(35,55,95,.22), ${sheen}`, addbar: 'none', fab: `0 8px 24px ${rgba(accent, 0.38)}` })
      : (dark
          ? { card: '0 14px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,0.04)', pop: '0 16px 44px rgba(0,0,0,.6)', addbar: '0 -1px 0 #1f2734', fab: `0 8px 26px ${rgba(accent, 0.4)}` }
          : { card: '0 1px 2px rgba(20,32,56,.05), 0 12px 30px rgba(20,32,56,.08)', pop: '0 10px 32px rgba(20,32,56,.15)', addbar: '0 -1px 0 #edf0f5', fab: `0 8px 22px ${rgba(accent, 0.34)}` });

    const cardBorder = `1px solid ${glass ? color.border : (dark ? color.border : '#eceff5')}`;
    const checkedBg = glass
      ? (dark ? 'rgba(255,255,255,0.045)' : 'rgba(255,255,255,0.32)')
      : (dark ? 'rgba(255,255,255,0.025)' : color.surfaceAlt);

    return {
      id: 'midnight2', name: 'Midnight v2', mode: dark ? 'dark' : 'light',
      glass, statusIcons: color.text,
      font: { head: '"Space Grotesk", system-ui, sans-serif', body: '"IBM Plex Sans", system-ui, sans-serif' },
      radius, space, color, shadow,
      effects: { blur: glass ? (dark ? 'blur(28px) saturate(170%) brightness(1.05)' : 'blur(24px) saturate(185%)') : 'none' },
      cardBorder, checkedBg,
      chromeBg: glass ? 'transparent' : color.canvas,
      headerWeight: 700, titleSpacing: '-0.015em',
      // v2 extras
      accentGrad,
      accentGlow: rgba(accent, dark ? 0.5 : 0.36),
      // abstract-backdrop orb colors (used by the Backdrop layer)
      orbs: dark
        ? [rgba(accentEff, 0.52), rgba(g2, 0.44), rgba(g3, 0.38)]
        : [rgba(accent, 0.42), rgba(g2, 0.34), rgba(g3, 0.26)],
      // glass-ribbon artwork backdrop (dark mode) — hue-rotated to follow the accent.
      // The source image's dominant hue is ≈262° (blue-violet).
      backdropImage: dark ? 'bg-ribbons.jpg' : null,
      backdropHue: hueOf(accent) - 262,
    };
  };
})();