/* tweaks.jsx — typography/accent tweaks for AltiPro
   Renders a floating Tweaks panel (hidden until the toolbar toggles edit mode). */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "typeSystem": "operator",
  "displayWeight": 600,
  "emphasisStyle": "saffron",
  "uppercase": false,
  "italicEmphasis": false,
  "palette": "altipro"
}/*EDITMODE-END*/;

/* Color palettes. Each maps to the --burgundy / --saffron / --off-white / --ink
   CSS vars used throughout. The variable NAMES are kept for back-compat;
   each palette just swaps the values. */
const PALETTES = {
  altipro: {
    label: 'AltiPro Brand',
    note: 'Dark navy peak + alpine green arc — sampled from the actual logo.',
    swatches: ['#1B2A3E', '#2E8B57', '#F5F3EE', '#14181F'],
    vars: {
      '--burgundy':        '#1B2A3E',
      '--burgundy-deep':   '#0E1A2A',
      '--burgundy-soft':   '#2E4360',
      '--saffron':         '#2E8B57',
      '--saffron-deep':    '#206A40',
      '--saffron-soft':    '#4DAE7B',
      '--off-white':       '#F5F3EE',
      '--bone':            '#ECE9E1',
      '--paper':           '#FAF9F5',
      '--ink':             '#14181F',
      '--ink-soft':        '#2A2F38',
    }
  },
  redbrand: {
    label: 'AltiPro Red (alt)',
    note: 'Deep adventure red + warm gold — alternative if you want fire vs ice.',
    swatches: ['#C42127', '#F0A828', '#F7F4ED', '#15110E'],
    vars: {
      '--burgundy':        '#C42127',
      '--burgundy-deep':   '#8E1418',
      '--burgundy-soft':   '#E04A4F',
      '--saffron':         '#F0A828',
      '--saffron-deep':    '#C8841C',
      '--saffron-soft':    '#F5C56B',
      '--off-white':       '#F7F4ED',
      '--bone':            '#EDE7DA',
      '--paper':           '#FBF9F3',
      '--ink':             '#15110E',
      '--ink-soft':        '#2A2520',
    }
  },
  sherpa: {
    label: 'Sherpa Heritage',
    note: 'Burgundy + saffron + cream — the previous palette.',
    swatches: ['#5C1A26', '#E8A33D', '#F5F1EA', '#14110E'],
    vars: {
      '--burgundy':        '#5C1A26',
      '--burgundy-deep':   '#3D0F18',
      '--burgundy-soft':   '#7A2A38',
      '--saffron':         '#E8A33D',
      '--saffron-deep':    '#C8841C',
      '--saffron-soft':    '#F2C078',
      '--off-white':       '#F5F1EA',
      '--bone':            '#EDE5D6',
      '--paper':           '#FAF7F0',
      '--ink':             '#14110E',
      '--ink-soft':        '#2A2520',
    }
  },
  glacier: {
    label: 'Glacier / Ink',
    note: 'Near-monochrome — black + bone + a single signal red.',
    swatches: ['#D7263D', '#9CA9B3', '#F4F2EE', '#0A0A0B'],
    vars: {
      '--burgundy':        '#D7263D',
      '--burgundy-deep':   '#9A1928',
      '--burgundy-soft':   '#E55A6C',
      '--saffron':         '#9CA9B3',
      '--saffron-deep':    '#6F7C86',
      '--saffron-soft':    '#C0CAD2',
      '--off-white':       '#F4F2EE',
      '--bone':            '#E2DFDA',
      '--paper':           '#FAF9F6',
      '--ink':             '#0A0A0B',
      '--ink-soft':        '#1F1F22',
    }
  },
};

const TYPE_SYSTEMS = {
  operator: {
    label: 'Operator',
    note: 'Industrial expedition-poster. Condensed display, clean body.',
    vars: {
      '--font-display':     "'Big Shoulders Display', Impact, sans-serif",
      '--font-sans':        "'Inter Tight', 'Helvetica Neue', sans-serif",
      '--font-mono':        "'JetBrains Mono', 'SF Mono', monospace",
      '--display-weight':   '600',
      '--display-tracking': '-0.02em',
      '--display-leading':  '0.88',
      '--italic-style':     'normal',
      '--emph-weight':      '700',
    }
  },
  documentarian: {
    label: 'Documentarian',
    note: 'Editorial expedition journal. Serif with optical italic.',
    vars: {
      '--font-display':     "'Newsreader', 'Times New Roman', serif",
      '--font-sans':        "'Inter Tight', 'Helvetica Neue', sans-serif",
      '--font-mono':        "'JetBrains Mono', 'SF Mono', monospace",
      '--display-weight':   '500',
      '--display-tracking': '-0.025em',
      '--display-leading':  '0.95',
      '--italic-style':     'italic',
      '--emph-weight':      '500',
    }
  },
  fieldlog: {
    label: 'Field Log',
    note: 'Mono-driven. Topo-map / climbers logbook feel.',
    vars: {
      '--font-display':     "'JetBrains Mono', 'SF Mono', monospace",
      '--font-sans':        "'Inter Tight', 'Helvetica Neue', sans-serif",
      '--font-mono':        "'JetBrains Mono', 'SF Mono', monospace",
      '--display-weight':   '500',
      '--display-tracking': '-0.04em',
      '--display-leading':  '0.95',
      '--italic-style':     'normal',
      '--emph-weight':      '600',
    }
  },
  editorial: {
    label: 'Editorial (original)',
    note: 'High-contrast magazine serif with painted italic — the previous look.',
    vars: {
      '--font-display':     "'Instrument Serif', 'Times New Roman', serif",
      '--font-sans':        "'Inter Tight', 'Helvetica Neue', sans-serif",
      '--font-mono':        "'JetBrains Mono', 'SF Mono', monospace",
      '--display-weight':   '400',
      '--display-tracking': '-0.01em',
      '--display-leading':  '0.95',
      '--italic-style':     'italic',
      '--emph-weight':      '400',
    }
  }
};

const EMPHASIS_COLORS = {
  saffron:    { color: 'var(--saffron)',  alt: 'var(--burgundy)' },
  burgundy:   { color: 'var(--burgundy)', alt: 'var(--burgundy-deep)' },
  ink:        { color: 'var(--ink)',      alt: 'var(--ink)' },
};

function applyTweaks(t) {
  const root = document.documentElement;
  const sys = TYPE_SYSTEMS[t.typeSystem] || TYPE_SYSTEMS.operator;
  Object.entries(sys.vars).forEach(([k, v]) => root.style.setProperty(k, v));

  // Palette
  const pal = PALETTES[t.palette] || PALETTES.altipro;
  Object.entries(pal.vars).forEach(([k, v]) => root.style.setProperty(k, v));

  // override weight from slider
  root.style.setProperty('--display-weight', String(t.displayWeight));

  // override italic style from explicit toggle (defaults to system if undefined)
  if (typeof t.italicEmphasis === 'boolean') {
    root.style.setProperty('--italic-style', t.italicEmphasis ? 'italic' : 'normal');
  }

  // uppercase display
  root.style.setProperty('--display-transform', t.uppercase ? 'uppercase' : 'none');

  // emphasis color
  const em = EMPHASIS_COLORS[t.emphasisStyle] || EMPHASIS_COLORS.saffron;
  root.style.setProperty('--emph-color', em.color);
  root.style.setProperty('--emph-color-alt', em.alt);
}

function TweaksApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => { applyTweaks(t); }, [t]);

  const sysInfo = TYPE_SYSTEMS[t.typeSystem] || TYPE_SYSTEMS.operator;
  const palInfo = PALETTES[t.palette] || PALETTES.altipro;

  return (
    <TweaksPanel>
      <TweakSection label="Palette" />
      <TweakColor
        label="Brand palette"
        value={palInfo.swatches}
        options={Object.values(PALETTES).map(p => p.swatches)}
        onChange={(v) => {
          const found = Object.entries(PALETTES).find(([_, p]) => p.swatches.join() === v.join());
          if (found) setTweak('palette', found[0]);
        }} />
      <div style={{ fontSize: 10.5, lineHeight: 1.4, color: 'rgba(41,38,27,.55)', padding: '0 2px' }}>
        {palInfo.label} — {palInfo.note}
      </div>

      <TweakSection label="Typography" />
      <TweakSelect
        label="Type system"
        value={t.typeSystem}
        options={Object.keys(TYPE_SYSTEMS).map(k => ({ value: k, label: TYPE_SYSTEMS[k].label }))}
        onChange={(v) => setTweak('typeSystem', v)} />
      <div style={{ fontSize: 10.5, lineHeight: 1.4, color: 'rgba(41,38,27,.55)', padding: '0 2px' }}>
        {sysInfo.note}
      </div>
      <TweakSlider
        label="Display weight" value={t.displayWeight}
        min={300} max={800} step={50}
        onChange={(v) => setTweak('displayWeight', v)} />
      <TweakToggle
        label="Italic emphasis" value={t.italicEmphasis}
        onChange={(v) => setTweak('italicEmphasis', v)} />
      <TweakToggle
        label="ALL CAPS headlines" value={t.uppercase}
        onChange={(v) => setTweak('uppercase', v)} />

      <TweakSection label="Emphasis Accent" />
      <TweakRadio
        label="Color"
        value={t.emphasisStyle}
        options={['saffron', 'burgundy', 'ink']}
        onChange={(v) => setTweak('emphasisStyle', v)} />
    </TweaksPanel>
  );
}

(function mount() {
  const el = document.createElement('div');
  el.id = 'tweaks-root';
  document.body.appendChild(el);
  ReactDOM.createRoot(el).render(<TweaksApp />);
})();