/* Tweaks — design-time panel (visible when parent enables edit mode) */

const Tweaks = () => {
  const [open, setOpen] = React.useState(false);
  const [tweaks, setTweaks] = React.useState(window.__TWEAKS__ || {});

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

  React.useEffect(() => {
    const root = document.documentElement;
    root.setAttribute('data-theme', tweaks.theme || 'light');
    root.setAttribute('data-accent', tweaks.accent || 'clay');
    root.setAttribute('data-direction', tweaks.direction || 'editorial');
    root.style.setProperty('--density', tweaks.density === 'compact' ? '0.7' : tweaks.density === 'airy' ? '1.15' : '1');
  }, [tweaks]);

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

  if (!open) return null;

  return (
    <div className="tweaks-panel">
      <style>{`
        .tweaks-panel {
          position: fixed; right: 20px; bottom: 20px; z-index: 300;
          width: 280px; background: var(--paper); border: 1px solid var(--ink-20);
          border-radius: var(--r-md); box-shadow: var(--shadow-lg);
          padding: 20px; font-size: 13px;
        }
        .tweaks-panel h4 { font-family: var(--font-display); font-size: 18px; margin: 0 0 12px; font-weight: 400; }
        .tw-group { margin-bottom: 16px; }
        .tw-label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-60); margin-bottom: 8px; }
        .tw-opts { display: flex; gap: 4px; flex-wrap: wrap; }
        .tw-opts button {
          padding: 6px 10px; border-radius: var(--r-pill);
          border: 1px solid var(--ink-20); font-size: 12px; color: var(--ink-80); background: var(--snow);
        }
        .tw-opts button.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
      `}</style>
      <h4>Tweaks</h4>

      <div className="tw-group">
        <div className="tw-label">Direction</div>
        <div className="tw-opts">
          {[['editorial','A · Warm Editorial'], ['clinical','B · Clinical Calm'], ['tech','C · Modern Tech']].map(([v,l]) => (
            <button key={v} className={tweaks.direction === v ? 'active' : ''} onClick={() => update('direction', v)} style={{fontSize:11}}>{l}</button>
          ))}
        </div>
      </div>

      <div className="tw-group">
        <div className="tw-label">Theme</div>
        <div className="tw-opts">
          {['light', 'dark'].map(t => (
            <button key={t} className={tweaks.theme === t ? 'active' : ''} onClick={() => update('theme', t)}>{t}</button>
          ))}
        </div>
      </div>

      <div className="tw-group">
        <div className="tw-label">Accent</div>
        <div className="tw-opts">
          {['clay', 'sage', 'cobalt', 'plum'].map(a => (
            <button key={a} className={tweaks.accent === a ? 'active' : ''} onClick={() => update('accent', a)}>{a}</button>
          ))}
        </div>
      </div>

      <div className="tw-group">
        <div className="tw-label">Density</div>
        <div className="tw-opts">
          {['compact', 'comfortable', 'airy'].map(d => (
            <button key={d} className={tweaks.density === d ? 'active' : ''} onClick={() => update('density', d)}>{d}</button>
          ))}
        </div>
      </div>
    </div>
  );
};

window.Tweaks = Tweaks;