// Tweaks panel — toggles accent color, hero variant, calc visibility
const { useEffect: useEffectT, useState: useStateT } = React;

const tweakStyles = {
  panel: {
    position: 'fixed', bottom: 20, right: 20, zIndex: 100,
    width: 300,
    background: 'rgba(18,18,18,.96)',
    backdropFilter: 'blur(20px)',
    border: '1px solid var(--line-2)',
    borderRadius: 14,
    padding: 18,
    color: 'var(--ink)',
    fontSize: 13,
    boxShadow: '0 20px 60px rgba(0,0,0,.5)',
  },
  head: {
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    marginBottom: 14, paddingBottom: 12, borderBottom: '1px solid var(--line)',
  },
  headT: { fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: '.16em', color: 'var(--ink-2)', textTransform: 'uppercase' },
  section: { marginBottom: 14 },
  label: { fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: '.14em', color: 'var(--ink-3)', textTransform: 'uppercase', marginBottom: 8 },
  swatches: { display: 'flex', gap: 8 },
  swatch: {
    width: 26, height: 26, borderRadius: 8, cursor: 'pointer',
    border: '2px solid transparent',
  },
  row: { display: 'flex', gap: 6 },
  toggle: {
    flex: 1, padding: '8px 10px', borderRadius: 8, cursor: 'pointer',
    background: 'transparent', border: '1px solid var(--line-2)', color: 'var(--ink-2)',
    fontSize: 12,
  },
  toggleActive: { background: 'var(--accent)', color: 'var(--accent-fg)', borderColor: 'var(--accent)' },

  check: { display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer' },
  box: { width: 18, height: 18, borderRadius: 5, border: '1px solid var(--line-2)', display: 'grid', placeItems: 'center', background: 'transparent' },
  boxOn: { background: 'var(--accent)', borderColor: 'var(--accent)' },
};

const ACCENTS = [
  { v: '#D01D24', n: 'BackMeUp Red' },
  { v: '#D4FF4F', n: 'Lime' },
  { v: '#FF6B4A', n: 'Coral' },
  { v: '#6D5BFF', n: 'Violet' },
  { v: '#E8C766', n: 'Or' },
];

function Tweaks() {
  const [open, setOpen] = useStateT(false);
  const [state, setState] = useStateT(() => ({ ...(window.__TWEAKS || {}) }));

  useEffectT(() => {
    const onMsg = (e) => {
      const d = e.data || {};
      if (d.type === '__activate_edit_mode')   setOpen(true);
      if (d.type === '__deactivate_edit_mode') setOpen(false);
      if (d.type === '__edit_mode_set_keys' && d.edits) {
        // Pick up tweaks dispatched from elsewhere (e.g. the Nav theme toggle)
        // so the panel stays in sync.
        setState((s) => ({ ...s, ...d.edits }));
      }
    };
    window.addEventListener('message', onMsg);
    // Announce only AFTER listener is live.
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);

  // accent rgb tracker — derive a comma-separated rgb triplet from the hex.
  useEffectT(() => {
    document.documentElement.style.setProperty('--accent', state.accent);
    const h = state.accent.replace('#','');
    const r = parseInt(h.slice(0,2),16);
    const g = parseInt(h.slice(2,4),16);
    const b = parseInt(h.slice(4,6),16);
    document.documentElement.style.setProperty('--accent-rgb', `${r}, ${g}, ${b}`);
  }, [state.accent]);

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

  if (!open) return null;

  return (
    <div style={tweakStyles.panel} className="tweaks-panel">
      <div style={tweakStyles.head}>
        <span style={tweakStyles.headT}>Tweaks</span>
        <button onClick={() => setOpen(false)} style={{color:'var(--ink-3)', cursor:'pointer'}}>✕</button>
      </div>

      <div style={tweakStyles.section}>
        <div style={tweakStyles.label}>Thème</div>
        <div style={tweakStyles.row}>
          {['dark','light'].map((t) => (
            <button key={t}
                    onClick={() => update('theme', t)}
                    style={{...tweakStyles.toggle, ...((state.theme || 'dark') === t ? tweakStyles.toggleActive : {})}}>
              {t === 'dark' ? 'Sombre' : 'Clair'}
            </button>
          ))}
        </div>
      </div>

      <div style={tweakStyles.section}>
        <div style={tweakStyles.label}>Couleur d'accent</div>
        <div style={tweakStyles.swatches}>
          {ACCENTS.map((a) => (
            <div key={a.v}
                 title={a.n}
                 onClick={() => update('accent', a.v)}
                 style={{...tweakStyles.swatch, background: a.v, borderColor: state.accent === a.v ? 'var(--ink)' : 'transparent'}}/>
          ))}
        </div>
      </div>

      <div style={tweakStyles.section}>
        <div style={tweakStyles.label}>Hero — CTA label</div>
        <div style={tweakStyles.row}>
          {['Commander des leads','Obtenir un devis','Démarrer un test'].map((t) => (
            <button key={t}
                    onClick={() => update('ctaLabel', t)}
                    style={{...tweakStyles.toggle, ...(state.ctaLabel === t ? tweakStyles.toggleActive : {})}}>
              {t.split(' ')[0]}
            </button>
          ))}
        </div>
      </div>

      <div style={tweakStyles.section}>
        <label style={tweakStyles.check} onClick={() => update('showPriceCalc', !state.showPriceCalc)}>
          <span style={{...tweakStyles.box, ...(state.showPriceCalc ? tweakStyles.boxOn : {}), color: 'var(--accent-fg)'}}>
            {state.showPriceCalc && <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="2"><path d="M2 6.5l2.5 2.5L10 3.5"/></svg>}
          </span>
          <span>Afficher le simulateur PPL</span>
        </label>
      </div>
    </div>
  );
}

Object.assign(window, { Tweaks });