/* global React, useTweaks, TweaksPanel, TweakSection, TweakSelect, TweakRadio, TweakToggle */
const HERO_LABEL = { 'Command Center': 'a', 'Blueprint Schematic': 'b', 'Boot Sequence': 'c', 'Radar Scope': 'd', 'Data Stream': 'e' };
const HERO_REV = { a: 'Command Center', b: 'Blueprint Schematic', c: 'Boot Sequence', d: 'Radar Scope', e: 'Data Stream' };

// motion + grid persist across visits; hero + signal are randomized per load by site.js
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "motion": "Full",
  "grid": true
}/*EDITMODE-END*/;

function applyMotion(m) { document.body.classList.toggle('calm', m === 'Restrained'); }
function applyGrid(on) { document.body.classList.toggle('nogrid', !on); }
const A = () => window.AegisSite || {};

function Island() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  // hero + signal initialise from whatever site.js randomly applied this visit
  const [hero, setHero] = React.useState(() => HERO_REV[A().getHero && A().getHero()] || 'Command Center');
  const [signal, setSignal] = React.useState(() => (A().getSignal && A().getSignal()) || 'Cyan');

  React.useEffect(() => { A().setHero && A().setHero(HERO_LABEL[hero] || 'a'); }, [hero]);
  React.useEffect(() => { A().setSignal && A().setSignal(signal); }, [signal]);
  React.useEffect(() => { applyMotion(t.motion); }, [t.motion]);
  React.useEffect(() => { applyGrid(t.grid); }, [t.grid]);

  function shuffle() {
    const heroes = ['Command Center', 'Blueprint Schematic', 'Boot Sequence', 'Radar Scope', 'Data Stream'];
    const hues = ['Cyan', 'Azure', 'Violet', 'Jade', 'Amber'];
    setHero(heroes[Math.floor(Math.random() * heroes.length)]);
    setSignal(hues[Math.floor(Math.random() * hues.length)]);
  }

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Hero treatment" />
      <TweakSelect label="Layout" value={hero}
        options={['Command Center', 'Blueprint Schematic', 'Boot Sequence', 'Radar Scope', 'Data Stream']}
        onChange={setHero} />
      <TweakSection label="Atmosphere" />
      <TweakSelect label="Signal hue" value={signal}
        options={['Cyan', 'Azure', 'Violet', 'Jade', 'Amber']}
        onChange={setSignal} />
      <TweakRadio label="Motion" value={t.motion} options={['Full', 'Restrained']}
        onChange={(v) => setTweak('motion', v)} />
      <TweakToggle label="Blueprint grid" value={t.grid} onChange={(v) => setTweak('grid', v)} />
      <button type="button" onClick={shuffle} style={{
        marginTop: 14, width: '100%', padding: '10px 12px', cursor: 'pointer',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 9,
        fontFamily: 'var(--font-display, sans-serif)', fontWeight: 600, fontSize: 11,
        letterSpacing: '0.18em', textTransform: 'uppercase', color: '#d5f6ff',
        background: 'rgba(31,199,255,0.12)', border: '1px solid rgba(125,217,255,0.4)'
      }}>
        <svg width="14" height="14" viewBox="0 0 14 14" style={{ overflow: 'visible' }} aria-hidden="true">
          <path d="M2 4 H8 a4 4 0 0 1 4 4 M12 12 H6 a4 4 0 0 1 -4 -4" fill="none" stroke="currentColor" strokeWidth="1.4" />
          <path d="M10 2 L12.4 4 L10 6" fill="none" stroke="currentColor" strokeWidth="1.4" />
          <path d="M4 14 L1.6 12 L4 10" fill="none" stroke="currentColor" strokeWidth="1.4" />
        </svg>
        Shuffle look
      </button>
      <p style={{ marginTop: 10, fontFamily: 'var(--font-mono, monospace)', fontSize: 9.5, letterSpacing: '0.04em', color: '#7be3ff', opacity: 0.6, lineHeight: 1.5 }}>
        Layout + hue are randomised each visit. Motion + grid are remembered.
      </p>
    </TweaksPanel>
  );
}

(function mount() {
  const root = document.getElementById('tweaks-root');
  if (root && window.ReactDOM) ReactDOM.createRoot(root).render(<Island />);
})();