// Tweaks panel. Wires to CSS via body classes + data attrs.
const { useState: useTS, useEffect: useTE } = React;

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "oversized",
  "contactTheme": "dark",
  "accentRation": 1,
  "typeScale": "default",
  "grain": false
}/*EDITMODE-END*/;

const TypeScaleMap = { compact: 0.88, default: 1, generous: 1.12 };

const TweaksPanel = ({ state, setState, visible, onClose }) => {
  if (!visible) return null;

  const set = (k, v) => {
    const next = { ...state, [k]: v };
    setState(next);
    try {
      window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*');
    } catch {}
  };

  const Seg = ({ k, options }) => (
    <div className="tw__seg">
      {options.map(o => (
        <button key={o.v} className={state[k] === o.v ? 'on' : ''} onClick={() => set(k, o.v)}>
          {o.l}
        </button>
      ))}
    </div>
  );

  return (
    <div className="tw on">
      <div className="tw__head">
        <span className="tw__title">Tweaks</span>
        <button className="tw__close" onClick={onClose} aria-label="close">×</button>
      </div>
      <div className="tw__body">
        <div className="tw__group">
          <div className="tw__label">Hero</div>
          <Seg k="heroVariant" options={[
            { v: 'oversized', l: 'Oversized' },
            { v: 'measured',  l: 'Measured'  },
            { v: 'editorial', l: 'Editorial' },
          ]}/>
        </div>
        <div className="tw__group">
          <div className="tw__label">Type scale</div>
          <Seg k="typeScale" options={[
            { v: 'compact',   l: 'Compact'   },
            { v: 'default',   l: 'Default'   },
            { v: 'generous',  l: 'Generous'  },
          ]}/>
        </div>
        <div className="tw__group">
          <div className="tw__label">Accent <span className="val">teal</span></div>
          <Seg k="accentRation" options={[
            { v: 0, l: 'None'    },
            { v: 1, l: 'Default' },
            { v: 2, l: 'More'    },
          ]}/>
        </div>
        <div className="tw__group">
          <div className="tw__label">Contact panel</div>
          <Seg k="contactTheme" options={[
            { v: 'dark',  l: 'Dark'  },
            { v: 'light', l: 'Light' },
          ]}/>
        </div>
        <div className="tw__switch">
          <span>Paper grain</span>
          <button className={`tw__toggle ${state.grain ? 'on' : ''}`} onClick={() => set('grain', !state.grain)} aria-label="toggle grain" />
        </div>
      </div>
    </div>
  );
};

/* ---------------- App ---------------- */
const App = () => {
  const [state, setState] = useTS(DEFAULTS);
  const [editMode, setEditMode] = useTS(false);
  const active = useScrollSpy(['currently', 'about', 'note']);

  // Apply body-level tweaks
  useTE(() => {
    document.body.dataset.accent = state.accentRation;
    document.body.classList.toggle('grain', !!state.grain);
    document.documentElement.style.setProperty('--type-scale', TypeScaleMap[state.typeScale] ?? 1);
  }, [state]);

  // Edit-mode handshake
  useTE(() => {
    const onMsg = (e) => {
      const d = e.data || {};
      if (d.type === '__activate_edit_mode') setEditMode(true);
      else if (d.type === '__deactivate_edit_mode') setEditMode(false);
    };
    window.addEventListener('message', onMsg);
    try {
      window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    } catch {}
    return () => window.removeEventListener('message', onMsg);
  }, []);

  // active is for nav; map to top-level ids
  const navActive = active || 'currently';

  return (
    <div className="page">
      <Bar active={navActive} />
      <Hero variant={state.heroVariant} />
      <Currently />
      <About />
      <Contact theme={state.contactTheme} />
      <Foot />
      <TweaksPanel
        state={state}
        setState={setState}
        visible={editMode}
        onClose={() => {
          setEditMode(false);
          try { window.parent.postMessage({ type: '__edit_mode_deactivate_request' }, '*'); } catch {}
        }}
      />
    </div>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<App />);