// SDG home — Tweaks panel.
// Three expressive dials that reshape the feel of the page:
//   • Atmosphere — color world (Studio ink / Parchment / Blueprint)
//   • Voice      — headline typography character
//   • Accent     — which palette color carries the narrative

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "atmosphere": "studio",
  "voice": "bookplate",
  "accent": "brass"
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    document.body.dataset.atmosphere = t.atmosphere;
    document.body.dataset.voice      = t.voice;
    document.body.dataset.accent     = t.accent;
  }, [t.atmosphere, t.voice, t.accent]);

  const atmospheres = [
    { value: 'studio',    palette: ['#042a2b', '#e6ffdc', '#c8a45e'] },
    { value: 'parchment', palette: ['#f3ead1', '#2a2218', '#9c7d3f'] },
    { value: 'blueprint', palette: ['#0e2240', '#d6e6ff', '#95b1d8'] },
  ];

  const accents = [
    { value: 'brass',   color: '#c8a45e' },
    { value: 'crimson', color: '#b23a2e' },
    { value: 'cobalt',  color: '#3a6ea5' },
    { value: 'olive',   color: '#5b7a3d' },
  ];

  const PaletteChips = ({ label, value, options, onChange }) => (
    <TweakRow label={label}>
      <div className="twk-chips" role="radiogroup">
        {options.map((o) => {
          const colors = o.palette || [o.color];
          const [hero, ...rest] = colors;
          const on = o.value === value;
          return (
            <button key={o.value} type="button" className="twk-chip" role="radio"
                    aria-checked={on} data-on={on ? '1' : '0'}
                    aria-label={o.value} title={o.value}
                    style={{ background: hero }}
                    onClick={() => onChange(o.value)}>
              {rest.length > 0 && (
                <span>
                  {rest.slice(0, 4).map((c, j) => <i key={j} style={{ background: c }} />)}
                </span>
              )}
              {on && <svg viewBox="0 0 14 14" style={{
                position: 'absolute', top: 6, left: 6, width: 13, height: 13,
                filter: 'drop-shadow(0 1px 1px rgba(0,0,0,.3))'
              }}>
                <path d="M3 7.2 5.8 10 11 4.2" fill="none" strokeWidth="2.2"
                      strokeLinecap="round" strokeLinejoin="round"
                      stroke={isLight(hero) ? 'rgba(0,0,0,.78)' : '#fff'} />
              </svg>}
            </button>
          );
        })}
      </div>
    </TweakRow>
  );

  function isLight(hex) {
    const h = hex.replace('#', '');
    const x = h.length === 3 ? h.replace(/./g, c => c + c) : h.padEnd(6, '0');
    const n = parseInt(x.slice(0, 6), 16);
    const r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;
    return r * 299 + g * 587 + b * 114 > 148000;
  }

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Atmosphere" />
      <PaletteChips value={t.atmosphere} options={atmospheres}
                    label="Surface world"
                    onChange={(v) => setTweak('atmosphere', v)} />

      <TweakSection label="Headline voice" />
      <TweakRadio value={t.voice}
                  label="Character"
                  options={[
                    { value: 'bookplate', label: 'Bookplate' },
                    { value: 'manual',    label: 'Manual' },
                    { value: 'atlas',     label: 'Atlas' },
                  ]}
                  onChange={(v) => setTweak('voice', v)} />

      <TweakSection label="Accent" />
      <PaletteChips value={t.accent} options={accents}
                    label="Narrative color"
                    onChange={(v) => setTweak('accent', v)} />
    </TweaksPanel>
  );
}

const tweaksRoot = document.getElementById('tweaks-root');
if (tweaksRoot) ReactDOM.createRoot(tweaksRoot).render(<SDGTweaks />);