const { useEffect: useEffectT, useState: useStateT } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#c85a2e",
  "grain": true,
  "density": "comfortable",
  "heroStyle": "mixed"
}/*EDITMODE-END*/;

const ACCENT_OPTIONS = [
  { name: 'Terracotta', value: '#c85a2e' },
  { name: 'Amber', value: '#d48a3a' },
  { name: 'Rust', value: '#a54426' },
  { name: 'Olive', value: '#6b7a3a' },
  { name: 'Ink', value: '#1a1815' },
];

function Tweaks() {
  const [open, setOpen] = useStateT(false);
  const [vals, setVals] = useStateT(TWEAK_DEFAULTS);

  useEffectT(() => {
    const onMsg = (e) => {
      if (!e.data) return;
      if (e.data.type === '__activate_edit_mode') setOpen(true);
      if (e.data.type === '__deactivate_edit_mode') setOpen(false);
    };
    window.addEventListener('message', onMsg);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);

  useEffectT(() => {
    document.documentElement.style.setProperty('--accent', vals.accent);
    // derive dim
    document.querySelectorAll('.grain').forEach((el) => el.style.display = vals.grain ? '' : 'none');
    document.body.dataset.density = vals.density;
  }, [vals]);

  const setKey = (k, v) => {
    const next = { ...vals, [k]: v };
    setVals(next);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*');
  };

  if (!open) return null;

  return (
    <div className="tweaks">
      <h3><span>Tweaks</span><span className="accent">GEN-Z/AI</span></h3>

      <div className="tweak-row">
        <label>Accent</label>
        <div className="tweak-swatches">
          {ACCENT_OPTIONS.map((a) => (
            <div
              key={a.value}
              className={`tweak-swatch ${vals.accent === a.value ? 'active' : ''}`}
              style={{ background: a.value }}
              title={a.name}
              onClick={() => setKey('accent', a.value)}
            />
          ))}
        </div>
      </div>

      <div className="tweak-row">
        <label>Film grain</label>
        <div style={{display:'flex', gap:6}}>
          <button className={`tweak-btn ${vals.grain ? 'active' : ''}`} onClick={() => setKey('grain', true)}>On</button>
          <button className={`tweak-btn ${!vals.grain ? 'active' : ''}`} onClick={() => setKey('grain', false)}>Off</button>
        </div>
      </div>

      <div className="tweak-row">
        <label>Density</label>
        <div style={{display:'flex', gap:6}}>
          <button className={`tweak-btn ${vals.density === 'tight' ? 'active' : ''}`} onClick={() => setKey('density', 'tight')}>Tight</button>
          <button className={`tweak-btn ${vals.density === 'comfortable' ? 'active' : ''}`} onClick={() => setKey('density', 'comfortable')}>Comfy</button>
        </div>
      </div>

      <div className="tweak-row" style={{borderBottom: '1px solid var(--border)'}}>
        <label>Hero</label>
        <div style={{display:'flex', gap:6}}>
          <button className={`tweak-btn ${vals.heroStyle === 'mixed' ? 'active' : ''}`} onClick={() => setKey('heroStyle', 'mixed')}>Mixed</button>
          <button className={`tweak-btn ${vals.heroStyle === 'solid' ? 'active' : ''}`} onClick={() => setKey('heroStyle', 'solid')}>Solid</button>
        </div>
      </div>
    </div>
  );
}

window.Tweaks = Tweaks;