const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "amber",
  "dotGrid": true
}/*EDITMODE-END*/;

const ACCENTS = {
  amber:   { value: 'oklch(0.78 0.15 70)',  label: 'amber'  },
  coral:   { value: 'oklch(0.72 0.18 25)',  label: 'coral'  },
  lime:    { value: 'oklch(0.85 0.18 130)', label: 'lime'   },
  cyan:    { value: 'oklch(0.82 0.12 200)', label: 'cyan'   },
  magenta: { value: 'oklch(0.75 0.2 340)',  label: 'magenta'},
};

function TweaksPanel({ open, onClose, state, setState }) {
  if (!open) return null;
  const accentOklch = ACCENTS[state.accent].value;
  useEffect(() => {
    document.documentElement.style.setProperty('--accent', accentOklch);
    // derive dim from accent string — extract l c h
    const match = accentOklch.match(/oklch\(([^)]+)\)/);
    if (match) {
      const [l, c, h] = match[1].trim().split(/\s+/);
      document.documentElement.style.setProperty('--accent-dim', `oklch(${l} ${c} ${h} / 0.14)`);
    }
    document.body.style.backgroundImage = state.dotGrid
      ? 'radial-gradient(circle at 1px 1px, oklch(0.96 0.004 250 / 0.045) 1px, transparent 0)'
      : 'none';
  }, [state.accent, state.dotGrid]);

  return (
    <div className="tweaks">
      <button className="tweak-close" onClick={onClose} aria-label="Close">×</button>
      <h5>Tweaks</h5>
      <div style={{color:'var(--fg-muted)', fontSize:11, fontFamily:'var(--font-mono)', marginBottom:8}}>accent</div>
      <div className="tweaks-row">
        {Object.entries(ACCENTS).map(([k, v]) => (
          <button
            key={k}
            className={'swatch' + (state.accent === k ? ' active' : '')}
            style={{ background: v.value }}
            title={v.label}
            onClick={() => setState({ ...state, accent: k })}
          />
        ))}
      </div>
      <div style={{color:'var(--fg-muted)', fontSize:11, fontFamily:'var(--font-mono)', margin:'12px 0 8px'}}>texture</div>
      <label style={{display:'flex', alignItems:'center', gap:8, fontSize:13, color:'var(--fg-muted)', cursor:'pointer'}}>
        <input
          type="checkbox"
          checked={state.dotGrid}
          onChange={e => setState({ ...state, dotGrid: e.target.checked })}
        />
        Dot-grid background
      </label>
    </div>
  );
}

function App() {
  const [tweakState, setTweakStateRaw] = useState(TWEAK_DEFAULTS);
  const [tweaksOpen, setTweaksOpen] = useState(false);

  const setTweakState = (next) => {
    setTweakStateRaw(next);
    const edits = {};
    for (const k of Object.keys(next)) if (next[k] !== TWEAK_DEFAULTS[k]) edits[k] = next[k];
    try { window.parent.postMessage({ type: '__edit_mode_set_keys', edits: next }, '*'); } catch {}
  };

  useEffect(() => {
    function onMsg(e) {
      if (!e.data || !e.data.type) return;
      if (e.data.type === '__activate_edit_mode') setTweaksOpen(true);
      if (e.data.type === '__deactivate_edit_mode') setTweaksOpen(false);
    }
    window.addEventListener('message', onMsg);
    try { window.parent.postMessage({ type: '__edit_mode_available' }, '*'); } catch {}
    return () => window.removeEventListener('message', onMsg);
  }, []);

  // apply defaults once on mount
  useEffect(() => {
    const accentOklch = ACCENTS[tweakState.accent].value;
    document.documentElement.style.setProperty('--accent', accentOklch);
  }, []);

  const handleClose = () => {
    setTweaksOpen(false);
    try { window.parent.postMessage({ type: '__edit_mode_dismissed' }, '*'); } catch {}
  };

  return (
    <>
      <Nav />
      <Hero />
      <HowItWorks />
      <Checks />
      <Alerts />
      <Comparison />
      <Pricing />
      <Ecosystem />
      <OSS />
      <Footer />
      <TweaksPanel
        open={tweaksOpen}
        onClose={handleClose}
        state={tweakState}
        setState={setTweakState}
      />
    </>
  );
}

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