/* ============================================================
   Safa Othman — TWEAKS APP
   Mounts the Tweaks panel and applies three expressive,
   feel-reshaping controls: Signal color · Motion · Display type.
   ============================================================ */
const { useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor } = window;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#C6F24E",
  "motion": "balanced",
  "display": "grotesque"
}/*EDITMODE-END*/;

// Each signal color carries its whole family: pressed state, dark
// ink for text on the accent, glow, and the rgb tuple the aurora +
// cursor read.
const ACCENTS = {
  "#C6F24E": { press: "#A8D636", ink: "#0B0D08", rgb: "198, 242, 78"  }, // Signal Lime
  "#4ED6F2": { press: "#2FB9D6", ink: "#04181D", rgb: "78, 214, 242"  }, // Electric Cyan
  "#FF7A3D": { press: "#E85F22", ink: "#1F0A02", rgb: "255, 122, 61"  }, // Molten Orange
  "#B98CFF": { press: "#9E6BF0", ink: "#140726", rgb: "185, 140, 255" }  // Ultra Violet
};

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

  // ---- Signal color ----
  React.useEffect(() => {
    const fam = ACCENTS[t.accent] || ACCENTS["#C6F24E"];
    const root = document.documentElement;
    root.style.setProperty('--accent', t.accent);
    root.style.setProperty('--accent-press', fam.press);
    root.style.setProperty('--accent-ink', fam.ink);
    root.style.setProperty('--accent-rgb', fam.rgb);
    root.style.setProperty('--accent-glow', `rgba(${fam.rgb}, 0.22)`);
  }, [t.accent]);

  // ---- Motion intensity ----
  React.useEffect(() => {
    document.body.setAttribute('data-motion', t.motion);
  }, [t.motion]);

  // ---- Display typeface ----
  React.useEffect(() => {
    document.documentElement.setAttribute('data-display', t.display);
  }, [t.display]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Signal" />
      <TweakColor
        label="Accent color"
        value={t.accent}
        options={Object.keys(ACCENTS)}
        onChange={(v) => setTweak('accent', v)}
      />

      <TweakSection label="Atmosphere" />
      <TweakRadio
        label="Motion"
        value={t.motion}
        options={['calm', 'balanced', 'kinetic']}
        onChange={(v) => setTweak('motion', v)}
      />

      <TweakSection label="Type" />
      <TweakRadio
        label="Display"
        value={t.display}
        options={['grotesque', 'editorial', 'geometric']}
        onChange={(v) => setTweak('display', v)}
      />
    </TweaksPanel>
  );
}

(function mount() {
  const el = document.getElementById('tweaks-root');
  if (!el || !window.useTweaks) { return setTimeout(mount, 60); }
  ReactDOM.createRoot(el).render(<App />);
})();