// QA-QC Deck Tweaks
// Three expressive controls that reshape the feel of the deck:
//   1. Surface register   — drafting / blueprint-mostly / paper-mostly / inverted
//   2. Chrome density     — full / quiet / stripped (drafting → editorial)
//   3. Type expression    — restrained / editorial / display

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "surface": "drafting",
  "chrome": "full",
  "type": "restrained"
}/*EDITMODE-END*/;

function applySurface(mode) {
  const slides = document.querySelectorAll('deck-stage > section');
  // restore baseline first
  slides.forEach((s) => {
    s.classList.remove('bp', 'force-paper', 'force-bp');
    if (s.dataset.origBp === '1') s.classList.add('bp');
  });

  if (mode === 'drafting') return; // baseline alternation
  if (mode === 'blueprint-mostly') {
    slides.forEach((s, i) => {
      s.classList.remove('bp');
      // every slide blueprint EXCEPT a few content-heavy paper ones for rhythm
      const paperIdx = new Set([2, 6, 13, 14]); // pains, rule cat, builtin, ledger
      if (!paperIdx.has(i)) s.classList.add('bp');
    });
  } else if (mode === 'paper-mostly') {
    slides.forEach((s, i) => {
      s.classList.remove('bp');
      // only cover + closed-loop + cta stay blueprint as accents
      const bpIdx = new Set([0, 11, 15]);
      if (bpIdx.has(i)) s.classList.add('bp');
    });
  } else if (mode === 'inverted') {
    slides.forEach((s) => {
      if (s.classList.contains('bp')) {
        s.classList.remove('bp');
      } else {
        s.classList.add('bp');
      }
    });
  }
}

function applyChrome(mode) {
  const root = document.documentElement;
  root.classList.remove('chrome-full', 'chrome-quiet', 'chrome-stripped');
  root.classList.add('chrome-' + mode);
}

function applyType(mode) {
  const root = document.documentElement;
  root.classList.remove('type-restrained', 'type-editorial', 'type-display');
  root.classList.add('type-' + mode);
}

// Tag original BP slides so we can restore them
function tagOriginalSurfaces() {
  document.querySelectorAll('deck-stage > section').forEach((s) => {
    if (s.classList.contains('bp')) s.dataset.origBp = '1';
  });
}

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

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

  React.useEffect(() => { applySurface(t.surface); }, [t.surface]);
  React.useEffect(() => { applyChrome(t.chrome); }, [t.chrome]);
  React.useEffect(() => { applyType(t.type); }, [t.type]);

  return (
    <TweaksPanel>
      <TweakSection label="Surface register" />
      <TweakRadio
        label="Mode"
        value={t.surface}
        options={[
          { value: 'drafting',          label: 'Drafting' },
          { value: 'blueprint-mostly',  label: 'Blueprint' },
          { value: 'paper-mostly',      label: 'Paper' },
          { value: 'inverted',          label: 'Inverted' },
        ]}
        onChange={(v) => setTweak('surface', v)}
      />

      <TweakSection label="Chrome density" />
      <TweakRadio
        label="Drawing marks"
        value={t.chrome}
        options={[
          { value: 'full',     label: 'Full' },
          { value: 'quiet',    label: 'Quiet' },
          { value: 'stripped', label: 'Editorial' },
        ]}
        onChange={(v) => setTweak('chrome', v)}
      />

      <TweakSection label="Type expression" />
      <TweakRadio
        label="Voice"
        value={t.type}
        options={[
          { value: 'restrained', label: 'Restrained' },
          { value: 'editorial',  label: 'Editorial' },
          { value: 'display',    label: 'Display' },
        ]}
        onChange={(v) => setTweak('type', v)}
      />
    </TweaksPanel>
  );
}

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