/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakSlider */

const NB_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "goldHue":  70,
  "seam":     "throughline",
  "warmth":   "plaster"
}/*EDITMODE-END*/;

// OKLCH gold across a tasteful hue range. Low chroma keeps it captured-light,
// not brand-fill. Only hue moves.
function applyGold(hue) {
  const root = document.documentElement;
  // 50 = amber, 70 = honey gold, 85 = pale citrine
  root.style.setProperty('--gold',      `oklch(0.75 0.070 ${hue})`);
  root.style.setProperty('--gold-soft', `oklch(0.88 0.040 ${hue})`);
  root.style.setProperty('--gold-deep', `oklch(0.56 0.085 ${hue})`);
}

function NuriaTweaks() {
  const [t, setTweak] = useTweaks(NB_TWEAK_DEFAULTS);
  const root = document.documentElement;

  // Apply each tweak as a DOM-level effect
  React.useEffect(() => { root.setAttribute('data-warmth', t.warmth); }, [t.warmth]);
  React.useEffect(() => { root.setAttribute('data-seam',   t.seam);   }, [t.seam]);
  React.useEffect(() => { applyGold(t.goldHue); }, [t.goldHue]);

  return (
    <TweaksPanel title="Tweaks">

      <TweakSection label="Light" />
      <TweakRadio
        label="Surface"
        value={t.warmth}
        options={['plaster', 'pearl', 'bone']}
        onChange={(v) => setTweak('warmth', v)}
      />
      <TweakSlider
        label="Gold hue"
        value={t.goldHue}
        min={45} max={90} step={1}
        unit="°"
        onChange={(v) => setTweak('goldHue', v)}
      />

      <TweakSection label="Seam" />
      <TweakRadio
        label="Presence"
        value={t.seam}
        options={['whisper', 'throughline', 'signature']}
        onChange={(v) => setTweak('seam', v)}
      />

    </TweaksPanel>
  );
}

const __nbMount = document.createElement('div');
document.body.appendChild(__nbMount);
ReactDOM.createRoot(__nbMount).render(<NuriaTweaks />);